eu_europa_component_lib

The EU Europa Component Library (ECL) module (eu_europa_component_lib) integrates the Europa Component Library (ECL) into Drupal as Single Directory Components (SDCs).

The Europa Component Library (ECL) is a library of components applicable to all European Commission and European Union websites.

This module addresses the previous unavailability of ECL components in SDC format on Drupal.org, providing theme-agnostic, accessible, and reusable UI elements that adhere to the European Commission's design standards. It is currently a work in progress, with plans to expand component offerings and enhance compatibility.

Features

ECL Components: Includes components such as accordions, banners, buttons, and icons, with more planned, all built to meet ECL accessibility standards.
Theme-Agnostic Implementation: Components can be used across different Drupal themes without modification.
Accessibility Compliance: Adheres to EU ECL accessibility requirements, ensuring usability for all users.

Installation

Steps

Install the Module : In your Drupal installation:
```
composer require 'drupal/eu_europa_component_lib:1.x-dev@dev'
```
Important! Using dev releases is not recommended, except for testing.
Enable the Module: Use Drush or the Drupal admin interface to enable the module.
```
drush en eu_europa_component_lib -y
```
Clear Cache: Rebuild the Drupal cache to register the components.
```
drush cache:rebuild
```

Usage

In Twig Templates

To use a component in a Twig template, include it using the include function with the component’s ID in the format {module}:{component}. For example, to include the Button component:

{{ include('eu_europa_component_lib:button', {
  'label': 'Click me',
  'variant': 'primary',
  'button_type': 'button'
}, with_context = false) }}

The with_context = false parameter is recommended to avoid passing the entire Twig context, which can prevent variable conflicts and improve performance, as noted in the Drupal SDC Documentation.

Each component’s props are defined in its respective .component.yml file (e.g., components/button/button.component.yml). Refer to the component’s schema for specific prop requirements.

With UI Patterns 2

UI Patterns 2 leverages Drupal’s SDC API to expose components as blocks, layouts, field formatters, and Views displays, making them accessible to editors without coding. The UI Patterns Blocks sub-module enables the Button component to be used as a configurable block.

Prerequisites

Install and enable UI Patterns 2 and UI Patterns Blocks:

composer require 'drupal/ui_patterns:^2.0'
drush en ui_patterns ui_patterns_blocks -y

Ensure the eu_europa_component_lib module is enabled:
```
drush en eu_europa_component_lib -y
```
Follow the UI Patterns 2 Documentation

Example Configuration

To create a Call to Action button block with an external link:

Label: Visit Site
Variant: cta
URL: [your URL]
Icon Name: external
Icon Position: after

This configuration renders a button styled as a Call to Action with an external link icon, navigable to the specified URL.

Integration with Layout Builder

To use the EU ECL Components in Layout Builder:

Enable Layout Builder for a content type or page (admin/structure/types/manage/[content-type]/display).
Add a new section or block in Layout Builder.
Under "UI Patterns" choose the EU ECL ComponentNAME component.
Configure the props as needed and save the layout.

For detailed instructions, refer to the UI Patterns 2 Documentation on Using Components as Blocks.

Configuration

The module does not require configuration post-installation. Components are ready to use immediately, with props defined in each component’s .component.yml file. For example, the Button component supports props like label, variant, url, and icon_name.

Known Issues and Roadmap

Component Expansion: Additional ECL components are under development and will provide broader coverage of the ECL design system.

Support and Contribution

For any questions you can contact me via Slack . Contributions are welcome!

This module is currently in development and not yet suitable for production use.