ec-europa / europa-component-library

ECL - Europa Component Library

ECL v4 - Europa Component Library

The Europa Component Library (ECL) is a library of components applicable to all European Commission and European Union websites. The library contains all available components which you can use to build your website.

All library elements are accompanied with

• documentation: what the component is intended for and recommendations regarding its usage
• demo: visual representation of the component
• code: technologically agnostic HTML/CSS code and twig implementation

Requirements

ECL is currently using node 18.18.2 (LTS), we recommend using this version (nvm use) to ensure the compatibility with all the ECL dependencies or the ones defined by the ECL Builder.

Documentation

Read the technical documentation on GitHub.

Migrate from v3

Read the technical documentation on GitHub.

Quick start

The ECL is bundled in various presets in order to accomodate the different needs of everyone. Once you know which preset you want to use, you can:

• download the latest release of the preset of your choice

• install the preset with npm or yarn, e.g. npm install @ecl/preset-ec or yarn add @ecl/preset-ec

• use the CDN, https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}. Here's an example:

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/optional/ecl-ec-default.css"
    integrity="sha256-eYe/oOF0E6lUox+xPwOFvTaJU6mExX/mF681zlJrf40= sha384-ztvnlK1ljWZDT6+6PbugUXY70xL6wANkmootPDCv0YabV1UDUhmXwi2AQvy0LRYS sha512-sysiLnUuKw3XhN29u+VsvIKAl5t5YZeKzlERuWzxusTeUujXR74yq9/ls3C/iGZnnlryq2a7+AsurNgUmw2MEw=="
    crossorigin="anonymous"
    media="screen"
  />

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/optional/ecl-reset.css"
    integrity="sha256-zOWLsbDmv/r+0qRDSUImHL5/VuzVevsVPPcxfsKyNgE= sha384-LOKdeb9yF4VYqYWwEXIwt+ovlvJ9pbLy5AMwRs6JrUDAR2h6jOgBTdZEbwT55i+g sha512-RjGsZg92msgCq0epMcBGA5L49dX76ObQR+dFRHuTv2iPigjeWmVnK1uFHr8EA6DjbhUjSnLp882YDfm9pwxwFg=="
    crossorigin="anonymous"
    media="screen"
  />

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/ecl-ec.css"
    integrity="sha256-IOUujRA/9MWrsRma7FZUZImP8bml0XI/y7Y89uW6reg= sha384-0ROxtVoR6xxDE4ftTbcA40KA2Y8Q9P1O/Mv9cjZBMUTLHI6Szlt65TU9bnupc4dk sha512-ws7koh10xj+Bd+9yS2XJ3LvDb9+hT0l5oePX5iIDe3jEaYkQoAjdN3OXAdup2MF0kVI7bncc9Kb12UCwD9pnZw=="
    crossorigin="anonymous"
    media="screen"
  />

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/ecl-ec-utilities.css"
    integrity="sha256-tIdLwIyIh9hgJZld03iHWPwYgCrPBSWL7wpTtojkce0= sha384-qyWXPM3tG7doC+99DzZs+BSD6+JkVe6ibqyhTEqOMA5DWs29+HuRVfyyFhIbanAW sha512-CiRsDHH9j/6uxEMf+UbJpucrWbS8Asd136eoYq0vIk8IAiyTCy7KrMclYYYN/ijd44fDGResnpkUwjzItLfxdg=="
    crossorigin="anonymous"
    media="screen"
  />

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/ecl-ec-print.css"
    integrity="sha256-Q0egMu0lf1n6kGkv0g4fGVzKHdr/1932TOLEeHqtb7E= sha384-j5zScE8LEgVGXVl0f19iMnwQAiJkrmDRNIZlEaeK5WPizVNzXxhZRHOTfREp74kH sha512-Xhue/eb1UXKMaMnCChYO+DB06663mM1KvZWaSbrqaedCX3mQETYICm+nEDPUbGDNCrmJUDygGjBIxAUX7U0LkQ=="
    crossorigin="anonymous"
    media="print"
  />

  <link
    rel="stylesheet"
    href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/styles/optional/ecl-ec-default-print.css"
    integrity="sha256-0371pqsXdHEv8dStwvMBzvQAxJ2rY/DyzVJouttPkoo= sha384-JuhUn0wiks/udoNfDOjDJ/ji94tvH6qdRB6d8bafE2+7xf3XrEU1lfKdZlNlcBVE
    sha512-ms8Cfl7cYtAJ8GwLrfV4KNDvaTXt+pq8NDCGCQHv50bQSSpIfx9Zb9UAM3jYjWnlucp4JuDKKJEeQGVvE1sVfg=="
    crossorigin="anonymous"
    media="print"
  />

  <script
    src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.2/ec/scripts/ecl-ec.js"
    integrity="sha256-qlLzqRyzAuZvE80R8QVz6Jkw1CRok1KQiaLTztBOnvI= sha384-R+jnfTEvaegWepKrBQk/JQEiipFpvQ2KlhTVZxH+Y75SRFXeb7dsEwd6XyQl4Hbp sha512-Edgz1/Zu70eay1pQmNC0ktmYL27yN9pnSiNKEmmx9rsMJW3g3C78tOsC6jvB2eozhsTUh940mSZq9iyIo3cZyw=="
    crossorigin="anonymous"
  ></script>

⚠️ pikaday

ECL uses Pikaday and this library is not bundled anymore by ECL. Therefore pikaday needs to be loaded or bundled by the application or website using ECL, depending on the needs, it is only required when a datepicker instance is present in a webpage. Additionally, when customising the date format used by the datepicker, in order to get a consistent output, moment.js is also needed. These scripts can be loaded from a CDN or fetched from the respective npm packages or websites for then hosting them locally. The order of the scripts should be:

• moment.js (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js) (https://momentjs.com/)
• pikaday (https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/pikaday.min.js) (https://pikaday.com/)
• ecl.js

Need help?

Please contact COMM Europa Management for support on using this resource for a European Commission website.

Previous major versions

• v3.13.0: sources - release - website
• v2.39.0: sources - release - website
• v1.15.0: sources - release - website
• v0.24.3: sources - release - website

europa-component-library's Issues

Missing language selector breaks javascript close button functionality.

Expected behavior

I am able to close messages on the website with their "Close this message" button, regardles of whether the language selector is present on the page.

Actual behavior

When you do not have the language selector present on the page. You can not close messages with their close button. The following error message appears in the console:

drupal.js?v=8.8.1:13 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at l.e.init (ecl-ec-preset-legacy-website.js?q54l8r:2)
    at Function.l.autoInit (ecl-ec-preset-legacy-website.js?q54l8r:2)
    at ecl-ec-preset-legacy-website.js?q54l8r:2
    at Array.forEach (<anonymous>)
    at Object.e.autoInit (ecl-ec-preset-legacy-website.js?q54l8r:2)
    at Object.attach (ecl_auto_init.js?q54l8r:8)
    at drupal.js?v=8.8.1:25
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (drupal.js?v=8.8.1:22)
    at drupal.init.js?v=8.8.1:28

Steps to reproduce the issue

• Install a site without the language selector element on the page
• Visit a page where a message is generated
• Try to close the message box

I know that the language selector element is mandatory on the header as described here:
https://ec.europa.eu/component-library/ec/core-template/site-header/usage/

Yet that is no reason not to check for it if it is present in the javascript before trying to add an eventlistener to the element. These look to be the lines in question:

europa-component-library/src/systems/ec/implementations/vanilla/packages/ec-component-site-header/ec-component-site-header.js

Lines 57 to 58 in d7bf128

	this.languageSelector.addEventListener('click', this.toggleOverlay);
	this.close.addEventListener('click', this.toggleOverlay);

If there is official documentation on what to do when you only have one language on your site I would like to see it. As the link in this issue #690 is not functioning any longer.

ECL v1 - Overlapping between expanded navigation menu item and Inpage navigation

ECL version

v1.x (latest: 1.12.1)

Expected behavior

Settings: navigation menu and inpage navigation on same page.

When a navigation menu item is expanded, it must not "overlap with" the inpage navigation items.

Actual behavior

When a navigation menu item is expanded, it "overlaps with" the inpage navigation items (see image).

The expanded menu item has z-index: 1, while the inpage navigation is wrapped by a div with class ecl-u-z-navigation (i.e., z-index: 10).

Steps to reproduce the issue

Put navigation menu and inpage navigation on same page; see attached zip where the "Page with menu" demo is combined with the "Inpage navigations" demo (where the dark grey "Example row" is removed to emphasize the issue).

demo_issue.zip

---

Thanks!!!

[RFC] Forms - INNO-1419

Forms elements and groups

Current situation

• 4 forms components available (select, text-area, text-input, radio)
• all form components are wrapped into a "container", and displays optionnal label, helper text and invalid text
  • label is based on ecl-form-label
  • helper text is based on ecl-help-block
  • invalid text is based on ecl-feedback-message
  • select, text-area and text-input are wrapped into a ecl-form-group, radio is wrapped into a ecl-radio__group (see below why)
• form components will be redesign soon (mainly the invalid state). radio is the first one with the new design.

Note: search-form component has been excluded from the analysis as it is not intended to be used along other form elements

Issues

There are mainly two issues here:

Issue 1: Extra classes

As every ECL component, form components allows to add extra classes and attributes.
But for select, text-area and text-input these extra classes are put on the form element itself, and not on the wrapper.
Pseudo code:

<wrapper>
  <label>Label</label>
  <formElement class="extra-class" />
</wrapper>

React:

As a consequence, it isn't possible for instance to add extra margin before or after a form component; margin would be added to the form element (so between the form element and the label in the pseudo code ahead)

Issue 2: The case of ecl-form-group

The main role of ecl-form-group is to add extra margin inside a form component (between label and form element for instance).
The issue is that it comes with high specificity rule that may override component's rules (see below)

That's the reason why it hasn't been used in radio group (spacing between elements isn't always the same). Spacing have been added directly into the component.

Still concerning ecl-form-group, there are also some inconsitencies in class names:
Some forms classes are prefixed with form (ecl-form-group, ecl-form-label), some other are not (ecl-help-block, ecl-feedback-message).
As far as I know, all these classes are used only in forms (component ecl-message do not use ecl-feedback-message for instance)

Proposals

Extra classes

Option A1: Add an additional parameter at group level
So integrators would have the possibility to add extra classes around the component, or on the form elment itself

<wrapper class="extra-class-wrapper">
  <label>Label</label>
  <formElement class="extra-class" />
</wrapper>

Option A2: Move custom classes to group level
As the form component is nested inside the group, having a class at top level isenough to apply any required styling on the form element

<wrapper class="extra-class">
  <label>Label</label>
  <formElement />
</wrapper>

Form group

Option B1: Get rid of these common form classes and define what we need into components (as done in radio)
It would probably induce some (small) duplicate in the code, but would give us more flexibility.

Option B2: Update the common classes to make them less intrusive and more consistent
It may make sense for instance to have the invalid display in it too (the red border), as it should be the same for every form components

404 when opening a component page

Expected behavior

Get the component page on github

Actual behavior

404 page

Steps to reproduce the issue

Click on any component

V2.11.0 language overlay not working

I've tried top integrate the ECL v2.11.0 but the language overlay is still not working and when I click on the language (in the site header), the normal behavior of the href is fired (no language overlay is opened).

Is there something to add to get it working? I see that in the playground it is working, but when I copy paste, then it is not.

Thank you

Please help on svg stuff

Don't know exactly if this is an issue, or me not able to understand the svg stuff...
We're experiencing some problems when it comes to refer to your .svg icons from within the markup, maybe cause we're rookies with .svgs.

We've copied the whole dist folder within our project and tried to adjust the html markup links to refer the proper svgs... but still we don't know where to find, for instance, the icon called "icons.865a18d2.svg#ui--corner-arrow".

Here is the markup form the ECL playgroud at https://ec.europa.eu/component-library/playground/ec/?path=/story/components-site-headers-harmonised--group-1

<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 2 <svg focusable="false" aria-hidden="true" class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-180"> <use xlink:href="dist/images/icons.865a18d2.svg#ui--corner-arrow"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="ui--corner-arrow"> <path d="M20.623 19.5L12 9.83 3.377 19.5 1 16.835 12 4.5l11 12.335z"></path> </svg> </use> </svg> </a>

There is no icon called icons.865a18d2.svg in the dist folder, could you please explain how to refer sgvs properly.

Many thanks for helping

Menu not working alongside Inpage navigation

Hello
I've found this problem working with the Menu component in the same page as In page navigation component. The test was done with Google Chrome 62

Expected behavior

Menu component should work alongside any other component.

Actual behavior

The component Menu is not working right along the inpage navigation component. When the menu has second level options, and we add an inpage navigation, the menu stops opening.

Steps to reproduce the issue

• Create a page with a Menu, having some option with 2 levels
• Add an inpage navigation
• Call the javascript functions when the document is ready
  ECL.megamenu();
  ECL.initExpandables();
  ECL.navigationInpages();

The moment the function "initExpandables" is called, the menu stops working. It doesn't work either if you call "megamenu" at the last position.
The only way I've found to prevent this problem is calling ECL.megamenu() again after loading the expandables and the inpage navigation, loading it twice.

I attach a test case of this problem
Test.zip

Thank you

[v2] Loading overlay and icon spinner that spins

Dear ECL team,

• Is there a full page loading overlay (like the grey ones)?
• In the icon list I can see an icons called "spinner" which is actually not spinning. Do we have to add some class or script to make it spin (like the fa-spin in font awesome)?

Thank you in advance

New templates layout and breadcrumb

Dear ECL v2 team,
I've noticed that in the ECL v.2.12 the all templates changed the look and feel of the header.
Is the "class name" grey bar the new place for the breadcrumbs?

I was searching for the breadcrumbs in the components and I found that they are following the v.2.11 layout/look and feel.

How should we have to implement the breadcrumbs in v.2.12 (compared to v.2.11)

Thank you in advance

Showcase pages - Error 404 on v.2.12 pages

Dear ECL v2 team,
While browsing the components/templates/pages of the ECL v.2.12 there are a lot of errors "404 page not found",
Can you please check?

ecl-ec-preset-website.css does not contain all css needed to start a new website

Hi, I have been doing the revamping of a website and have needed some css from other files in order to make my site look like the demo, this is the css I have needed to add.

/** generic-component-link.scss, see https://ec-europa.github.io/europa-component-library/node_modules/@ecl/generic-component-link/generic-component-link.scss */
.ecl-link--external::after {
    display: inline-block;
    font-family: 'EuropaIcons';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    margin-left: 4px;
    speak: none;
    text-decoration: none;
    text-transform: none;
    content: '\e825';
    font-size: 75%;
    margin-left: 0.4em;
    margin-right: 0.2em;
}

@media (min-width: 768px){
.ecl-table thead tr:first-child th {
    border-bottom: 1px solid #CECECE;
}
}

/** Added from ecl-ec-preset-website.scss, it was not present in ecl-ec-preset-website.css **/
.ecl-button--caret-right:after {
    content: "\e828";
}
.ecl-button--caret-right:after, .ecl-button--caret-up:after {
    display: inline-block;
    font-family: EuropaIcons;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    margin-left: 4px;
    speak: none;
    text-decoration: none;
    text-transform: none;
    font-size: .875rem;
    margin-left: .66rem;
}

/** Added from ecl-ec-preset-website.scss, it was not present in ecl-ec-preset-website.css **/
.ecl-breadcrumb__segment--last span{
	font-weight:700;
}

.ecl-breadcrumb__segment--last {
    color: #bfd0e4;
}

Can you please explain me if I am missing something? I am currently using the 1.0.0 release.

Different appearance of carousel's prev/next buttons on mobile OSs/browsers

ECL version

v1.x (latest 1.14)

Expected behavior

Consistent appearance (as far as possible) of ECL carousel's previous and next buttons across mobile OSs/browsers.

Actual behavior

The carousel's previous and next buttons look "significantly" different on different mobile OSs/browsers.

Android	iOS Safari	iOS Chrome

As you can see from the screenshots, I would say that the buttons "look ok" on Android, while on browsers running on iOS the buttons "become very large" partially hiding the images. I didn't test any other mobile browser or OS beyond those reported in the screenshots.

I'm not providing here the details about the exact mobile phones, OS and browser versions used for the screenshots, but I can provide additional info if needed.

Steps to reproduce the issue

Open the ECL Carousel demo page on mobile devices running different OSs/browsers.

Important: The reported behavior seems to be observable only with real devices (with "Responsive design mode" and similar tools the buttons "look ok"; I didn't check with iOS simulators/emulators).

---

I'm not sure this can be qualified as a real issue, but I would appreciate if you can provide your opinion/advice on this.

Many thanks!

Proposal: bring back right pointing chevron

Expected behavior

In ECL v1 there was a call to action button with a right pointing arrow. It's common practice because it clearly indicates to users that the button points to a page when clicked.

Actual behavior

Currently there is no possibility to add such an icon on a button anymore.

Steps to reproduce the issue

I noticed this while playing with the button Icon (sample) knob here: https://ecl-twig.netlify.com/ec/?path=/story/components-button--call-to-action

This icon would be a good addition to the list of existing icons and definitely make a difference on call-to-action buttons.

Site switchers in ECL v2 not available?

Dear all,
I am looking for the "Site switchers" (the one with the links "Commission and its priorities" and "Policies, information and services") top bar that are available in the current EC websites and in the ECL V1. Is it available for the ECL V2?

Is there any documentation on how to use ECL Components from a Java Spring project?

Hi, do you know if there is or will be a way to consume ECL components in a Java project using Spring MVC? Any documentation on this? The only reference I found so far was:

https://fractal.build/guide/integration/including

Thank you.

ECL v2.10.1 - Icon margin/spacing - Inconsistencies between the HTML code and the examples

Dear All,
We are trying to integrate the new ECL in our website.
When we copy/paste the html from the guide available here:

• https://ec.europa.eu/component-library/ec/getting-started/
• https://ec.europa.eu/component-library/ec/templates/pages/campaign/code/

we notice some problems with the icon margin. In the example available here https://ec.europa.eu/component-library/playground/ec/iframe.html?id=templates-pages--campaign the icons have the space before/after the text. But in the HTML rendered by exactly copy-pasting the code from the guide, the space are missing:

Can you please help us with this issue?

ECL v1.13.0 - Conflict between 'facebook' and 'gear' icons

ECL version

v1.13.0

Actual behavior

As a consequence of #1319, ecl-icon--facebook and ecl-icon--gear both correspond to the facebook icon

Steps to reproduce the issue

See ecl-icon--facebook and ecl-icon--gear in the icons demo page

---

Thanks for your support!!!

[RFC] Radio button - INNO-1305

Component: Radio button

Design

Design Specs: https://webgate.ec.europa.eu/CITnet/confluence/pages/viewpage.action?spaceKey=NEXTEUROPA&title=Radio+buttons+-+Design+specifications

The specs only show 1 radio button with its associated label. IMHO the radio button only makes sense if it is part of a group, and this group has a label/heading itself.

Questions

• do we all agree to make this implementation? (radio group + radio buttons, instead of only radio buttons)

Expected content & properties

The radio group can have:

• invalid (boolean)
• error message (mixed) / or is it a child?

The radio heading contains:

• a body (mixed): only text in most cases but may be more complex than just text (icons, figures, etc.)

Each radio button comes with:

• a label (mixed): only text in most cases but may be more complex than just text (icons, figures, etc.)
• disabled (boolean)
• checked (boolean)
• name (string)
• id (string)
• value (string)
• required (boolean)

Questions

• do you see other properties we should take into account?
• can we validate the names of the properties?

ECL Initial Implementation Proposal (EIIP)

The JSX code showing the big picture:

<RadioGroup invalid>
  <RadioHeading>Heading for the radio group</RadioHeading>
  <RadioButton name="group1" id="radio1" value="value1" checked>My radio button</RadioButton>
  <RadioButton name="group1" id="radio2" value="value2">My other radio button</RadioButton>
  <RadioButton name="group1" id="radio3" value="value3" disabled>My disabled radio button</RadioButton>
</RadioGroup>

<RadioGroup> being a <fieldset>, <RadioHeading> a <legend>.

<RadioButton> can be a <label> enclosing the <input> and everything that's needed for the label, or an <input> with an ID followed by a <label> with for.

HTML overview:

<fieldset> 
  <legend>Heading for the radio group</legend> 
  <ul> 
    <li>
      <input type="radio" name="group1" id="radio1" value="value1" checked />
      <label for="radio1">My radio button</label>
    </li> 
    <li>
      <input type="radio" name="group1" id="radio2" value="value2" />
      <label for="radio2">My other radio button</label>
    </li> 
    <li>
      <input type="radio" name="group1" id="radio3" value="value3" disabled />
      <label for="radio3">My disabled radio button</label>
    </li> 
  </ul> 
</fieldset> 

About this proposal: <input>s and <label>s are encapsulated in list items. It gives us isolation between each radio button which can be good and bad. IMHO it also makes the code more readable.

Another possible implementation, as stated earlier, is achieved by putting the <input> element inside the <label>. This way, can spare some headaches with IDs but we can't style the <label> depending on the <input>'s attributes. We could still encapsulate the "body" of the <label> within a span to achieve the same result, e.g. <label><input type="radio"...><span>My label styled depending on the input</span></label>.

Other implementations:

• alternative 1

<fieldset> 
  <legend>Heading for the radio group</legend> 
  <ul> 
    <li>
      <label>
        <input type="radio" name="group1" value="value1" checked />
        My radio button
      </label>
    </li> 
    <li>
      <label>
        <input type="radio" name="group1" value="value2" />
        My other radio button
      </label>
    </li> 
    <li>
      <label>
        <input type="radio" name="group1" value="value3" disabled />
        My disabled radio button
      </label>
    </li> 
  </ul> 
</fieldset> 

• alternative 2

<fieldset> 
  <legend>Heading for the radio group</legend> 
  <label>
    <input type="radio" name="group1" value="value1" checked />
    My radio button
  </label>
  <label>
    <input type="radio" name="group1" value="value2" />
    My other radio button
  </label>
  <label>
    <input type="radio" name="group1" value="value3" disabled />
    My disabled radio button
  </label>
</fieldset> 

• alternative 3

<fieldset> 
  <legend>Heading for the radio group</legend>
  <div>
    <label>
      <input type="radio" name="group1" value="value1" checked />
      My radio button
    </label>
    <label>
      <input type="radio" name="group1" value="value2" />
      My other radio button
    </label>
    <label>
      <input type="radio" name="group1" value="value3" disabled />
      My disabled radio button
    </label>
  </div>
</fieldset> 

etc.

Questions

• to use lists or not to use lists?
• <input /><label /> or <label><input /></label>?

Resources

• https://www.w3.org/WAI/tutorials/forms/grouping/

Radio button groups should always be grouped using <fieldset>.

Sources of inspiration

• https://atlaskit.atlassian.com/packages/core/radio - <label><input /></label>
• https://www.carbondesignsystem.com/components/radio-button/code - <input /><label />
• https://getbootstrap.com/docs/4.2/components/forms/#checkboxes-and-radios - <input /><label />
• https://www.lightningdesignsystem.com/components/radio-group/ - <input /><label />
• https://materializecss.com/radio-buttons.html - <label><input /></label>
• https://material-components.github.io/material-components-web-catalog/#/component/radio - <input /><label />
• https://styleguide.github.com/primer/components/forms/#checkboxes-and-radios - <label><input /></label>
• https://baseui.design/components/radio/ - <label><input /></label>
• https://polaris.shopify.com/components/forms/radio-button - <label><input /></label>
• https://ant.design/components/radio/ - <label><input /></label>
• https://developer.microsoft.com/en-us/fabric#/components/choicegroup - <input /><label />
• https://clarity.design/documentation/radio - <input /><label />
• https://bulma.io/documentation/form/radio/ - <label><input /></label>
• https://design-system.service.gov.uk/components/radios/ - <input /><label />

Counts:

• <label><input /></label>: 7
• <input /><label />: 7

Information about ECL v.2.12 major changes in header/footer

Dear ECL v2 team,
We are developing web application using the ECL v2.11. The application is almost ready to be deployed.
Now we discovered that in this new release (v.2.12) the header and in particular footer changed a lot from v.2.11.

We would like to know what should we do. Do we need to adapt our application to the new footer and header?
Should we need to expect other major changes in the look and feel of the UI?

Thank you in advance

Table header have no ecl styling

Expected behavior

Applying css classes to table I get ecl styling.

Actual behavior

It's missing css style for table header.

Steps to reproduce the issue

Creating a table using ecl classes:
https://ec.europa.eu/component-library/ec/components/table/code/

Language overlay component not changing label in header (.ecl-lang-select-sites__label)

Expected behavior

After choosing a language and closing the overlay language select panel the "language label" visible to the user in the header should change too.
(Eg. From English to Spanish > User should see in the header the spanish label)
(.ecl-lang-select-sites__label)

Actual behavior

At moment when changing language the english label remain active both in the overlay panel and in the header visible to user

Steps to reproduce the issue

https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-language-list--overlay

W3C Validation issue in the "Accordion" component demo

Expected behavior

The accordion component demo should validate correctly in the W3C validator (https://validator.w3.org).

Actual behavior

The following errors appear when trying to validate the demo:

• Bad value heading for attribute role on element dt.
• Bad value region for attribute role on element dd.

Steps to reproduce the issue

https://validator.w3.org/nu/?doc=https%3A%2F%2Fec-europa.github.io%2Feuropa-component-library%2Feu%2Fcomponents%2Fpreview%2Feu-component-accordion

(same behaviour for EU and EC component versions)

ec-component-navigation-menu

Hi folks,

We have started to use v1.3.0 @ecl/ec-preset-website within a react single page application. When using the navigation menu component (https://v1--europa-component-library.netlify.com/ec/components/detail/ec-component-navigation-menu) we see behavior that is more in common with a traditional multi-page application.

Expected behavior (for single page app)

Menu closes on clicking a menu item

Actual behavior

Menu stays open

We can work around this, but it raises some questions for us.

1. Is this as intended behavior. ie is it assumed (so far) that consumers of ECL will be multipage applications?
2. Will such generic components be reusable in v2, or will we have to refactor to use v2 components eventually
3. Are there any resources available to help us use ECL within a single page (react) application?
4. Any known issues with the approach we are taking etc. Or anything in the pipeline that you think would be useful to us.

many thanks for your help

[V1] HTML attributes' values are not escaped

PR - #1368

Expected behavior

All values of attributes should be escaped

Actual behavior

Attributes' values are not escaped

Steps to reproduce the issue

Drupal uses special attributes to handle js on the forms. As a result some of attributes can contain json, which should be escaped in order to be handled correctly

For example:

{"disabled":{":input[name='override_permissions'":{"value":1}}}

Navigation > Menus missing in ECL v2

Dear All,
I've noticed that in the ECL v2 the menus are missing (like the light blue menu bar available in the ECL v1 - https://v1--europa-component-library.netlify.com/ec/components/detail/ec-component-navigation-menu).

Are you planning to add it also to the ECL v2?
Is there a way with the current version to create a menu like the one mentioned above?

Inpage navigation not working correctly in mobile layout

Hello
I've found this problem with my code, but I checked that it also happens in the demo. The test was done with Google Chrome 62

Expected behavior

When you access an inpage navigation using a mobile device, a sticky select-item should appear, letting you navigate through the different headers. I understand this is the expected behaviour, because as I explain later, I've been able to see this behaviour at some points.

Actual behavior

Right now if you access the demo from a mobile device, the select-item doesn't appear.
The demo only shows this select-item if you access the page from a normal browser, and then change the page's size, for example using the development tools of Google Chrome

Steps to reproduce the issue

Case 1:

• Access the inpage navigation demo from a mobile device: https://ec-europa.github.io/europa-component-library/components/preview/ecl-navigation-inpages
• Go up and down with the scroll, checking that the select-item doesn't appear.

Case 2:

• Access the inpage navigation demo using Google Chrome: https://ec-europa.github.io/europa-component-library/components/preview/ecl-navigation-inpages
• Open the development tools (F12). Press Ctrl-Shift-M to change to mobile layout
• Go up and down with the scroll, checking that the select-item used for navigation appears in the upper part of the page.
• Now refresh the page (F5)
• The select-item disappears, so you can't navigate through the headers.

Thank you very much

Smooth scroll on inpage navigations

We are currently using the inpage navigation but also implemented smooth scroll as it is requested by our client. To do so we override the click event of ecl-inpage-navigation__link as follows:

document.activeElement.blur();
var sectionTop = $('#section' + sectionNumber).offset().top;
if (/Edge/.test(navigator.userAgent)) { // Edge has trouble with animated scroll
	$(window).scrollTop(sectionTop);
} else {
	$('html').animate({
		scrollTop: sectionTop
	}, 1000);
}

I have noticed that inpage navigation component uses gumshoe.js and that it is compatible with smoothscroll.js of the same developer.
I believe adding that behaviour is quite straigthforward in component \src\generic\generic-component-inpage-navigation\generic-component-inpage-navigation.js but I am not sure how this feature could be activated/deactivadted

Expected behavior

When I click on ecl-inpage-navigation__link with href #section-1 and smooth scroll is activated
Then I navigate to to block with id section-1 smoothly

Actual behavior

When I click on ecl-inpage-navigation__link with href #section-1
Then I jump to to block with id section-1

Steps to reproduce the issue

Go to inpage navigation and clik on any link.

Advise on creating staff member pages

Dear all,

Could you please advise on what ECL component(s) to use for designing a staff member page?

Expected behavior

For EuroHPC website we need to be able to display staff pages similar to this one: https://www.ecsel.eu/team/bert-de-colvenaer. We need to be able to display: name, photo, CV file, position and some bio text.

Actual behavior

I wasn't able to identify any component combination that could render this information in a structured way. Sure, we could easily combine an image with a text paragraph, but then the user experience will be less than optimal.

Steps to reproduce the issue

Thanks for your help

ECL Demo Dropdown not working when there is more than one dropdown

When I try this example https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-dropdown in my code it does not work, when I click on one dropdown it opens and closes inmediately.

This is the structure of my html:

<div class="ecl-dropdown">
  	<button id="news-expandable-button" class="ecl-button ecl-button--default ecl-expandable__button" aria-controls="example-button-dropdown" aria-expanded="false">Actions</button>
		<div class="ecl-link-block ecl-dropdown__body" id="example-button-dropdown" aria-labelledby="news-expandable-button" aria-hidden="true">
    		<ul class="ecl-link-block__list">
    			<li class="ecl-link-block__item">
       				<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Edit</a>
      			</li>
                       <li class="ecl-link-block__item">
       				<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Delete</a>
      			</li>
                 </ul>
                  </div>
</div>

<div class="ecl-dropdown">
  	<button id="news-expandable-button" class="ecl-button ecl-button--default ecl-expandable__button" aria-controls="example-button-dropdown" aria-expanded="false">Actions</button>
		<div class="ecl-link-block ecl-dropdown__body" id="example-button-dropdown" aria-labelledby="news-expandable-button" aria-hidden="true">
    		<ul class="ecl-link-block__list">
    			<li class="ecl-link-block__item">
       				<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Edit</a>
      			</li>
                       <li class="ecl-link-block__item">
       				<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Delete</a>
      			</li>
                 </ul>
                  </div>
</div>

This is my js for calling the dropdown functions:

     ECL.initExpandables('#news-expandable-button');
     ECL.dropdown('.ecl-dropdown');

This is the piece of code where my dropdown gets closed (ecl-ec-preset-website.js (Release 1.0.0))

e.dropdown = function(e) {
        var t = Array.prototype.slice.call(document.querySelectorAll(e));
        document.addEventListener("click", function(n) {
            t.forEach(function(t) {
                var i, o;
                if (i = t,
                o = n.target,
                !(i === o || 16 & i.compareDocumentPosition(o))) {
                    var r = document.querySelector(e + " > [aria-expanded=true]")
                      , a = document.querySelector(e + " > [aria-hidden=false]");
                    a && (r.setAttribute("aria-expanded", !1),
                    a.setAttribute("aria-hidden", !0))
                }
            })
        })

If that forEach finds a dropdown that is not containing the button I clicked (it happens if I have more than one dropdown), it closes every dropdown, including the one I want to open.

Thank you.

Width of label in field component on small viewport

Expected behavior

In ECL v1 (latest 1.4.0), the width of the label (ecl-field__label) of the field component should be limited to 20% when @media (min-width: 768px) only (in line with the other rules that define the appearance of ecl-field and ecl-field__label).

Actual behavior

The width of the label is always limited to 20%.
On small screens, when the label text exceeds this width, the text unnecessarily wraps (in my opinion).

Steps to reproduce the issue

"Quick-and-dirty" way:

• open the demo preview and replace the label in the example (Name) with a longer label (e.g., Longer label);
• reduce the viewport (e.g., < 400) to see the label text wrapping (see picture for an example)

Thanks!!!

Possible improvements on the table

Is it possible to improve the table by adding a search box and the possibility to order the columns?

Text within body tags should receive the same font-family and font-size

Expected behavior

When accidentally forgetting to use <p> tags or when not using <p> tags on purpose you should still receive the same font-family and font-size on the text.

Actual behavior

Right now for me the only formatting on text outside of a paragraph is the line-height. The font-family differs from text within paragraphs.

Steps to reproduce the issue

Visit any of these drupal core pages: https://github.com/drupal/drupal/blob/646584b3f718897179589f4f014531e3d9365331/core/modules/system/src/Controller/Http4xxController.php#L10

ECL v1 - No scroll on language list on small viewport

ECL version

v1.x (latest: 1.8.0)

Expected behavior

On small screens (< 480px), it should be possible to scroll through the list of languages that appears when clicking the language selector (site level) in the header.

Actual behavior

The list of languages that appears in the dialog cannot be scrolled (overflow: auto on .ecl-dialog--wide is present only when min-width: 480px).

Steps to reproduce the issue

From the site header demo page, with a viewport width < 480px, click on the language selector and try to scroll down through the language list.

---

Thanks for your support!

Harmonised template menu example incomplete

Expected behavior

I am trying to adapt our IS to use ECL v2 by adapting our menu with the armonised site header, see link:
https://ec.europa.eu/component-library/ec/harmonised-templates/site-header/group1/

Actual behavior

When going to playroom and clicking on any of the items of the menu I won't see the children items, but will get redirected, see: https://ec.europa.eu/component-library/playground/ec/?path=/story/components-site-headers-harmonised--group-1

I have seen that menu component is about to disappear: https://ec.europa.eu/component-library/playground/ec/?path=/story/components-navigation-menu-legacy--default
and tried using Expandable component but saw that it neither serves the purpose of the menu nor has the same structure, so my question is:

How can I make menu expandable items work for my harmonised site header?
Thanks

Steps to reproduce the issue

IE Site Header issues

Hi, header on the last version is showing black dots for Site Header Harmonised Group 1, for IE:

Mandatory elements in header

Hi, in the ECL documentation about header, it says

Mandatory components
European Commission logo (mute version)*
Language selector
Search bar

The only language available in my application is english, is it needed to have that as well?

Thank you

Spring tag <form:checkbox> not rendered properly

Expected behavior

Hi, when rendering a spring checkbox, its color won't change when clicking it. Spring checkbox are rendered in html not the same as the checkbox from the demo, that is:

<label class="ecl-form-label ecl-checkbox">
	<input id="runmacroSimulation" name="runMacroSimulation" class="ecl-checkbox__input ecl-u-sr-only macroSimulationCheckbox" type="checkbox" value="true">
        <input type="hidden" name="_runMacroSimulation" value="on">
	<span class="ecl-checkbox__label ecl-u-fs-xs run-micro-simulation-message checkbox-micro- 
           simulation">Run medium-term macro impact</span>
</label>

The structure expected, and the one used in the demo is this one:

<label class="ecl-form-label ecl-checkbox">
       <input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-1" value="some value" name="example-checkbox-name-1">
       <span class="ecl-checkbox__label">Normal checkbox</span>
</label>

The reason is a too strict CSS, that only selects the span right after the first input, not taking into account that spring renders a hidden input in between:

.ecl-checkbox__input:checked+.ecl-checkbox__label:before {
    background-image: url(../images/checkbox-checked--blue.svg);
}

Please bear in mind that when working with frameworks like Spring the structure of the HTML is not always rendered as plain HTML, and that there can be in between elements that make CSS not work.

ECL Browsers support

Expected behavior

What is the full browsers support of the ECL?
Which version of Chrome?Opera?
Has it been tested on Android, IOS, Linux or others?

Actual behavior

ECL is tested on Firefox54, IE 11, Safari 11

[v1] Give the Default File Download component the option to link to a file

Expected behavior

The Default File Download Component creates an area which describes the assets and renders a button at the right side.

The button is created with the use of the Button Component which is ready to accept an href property. In this case the button is rendered as a link to this target.

If we make the href target available to the Default File Component we could forward it to the Button Component.

This will extend the functionality of the Default File Download and it could be used as a drop-in replacement for the download links of Drupal.

Actual behavior

Currently when no variant is defined for the the File Component the Default File Download component is rendered which renders a button element.

Scrollspy when components are added to the page dynamically

We are currently using the inpage navigation for one of our clients and if we add dynamic content to the page, the scrollspy component does not show the correct headers highlighted anymore. I'm suspecting the positions do not get recomputed dynamically. We are using the following to initialize the component:

ECL.navigationInpages();

Expected behavior

When adding dynamic content to a page containing an inpage navigation with scrollspy
Then scrollspy still displays the correct links highlighted when I am scrolling up or down the different sections of my page

Actual behavior

When adding dynamic content to a page containing an inpage navigation with scrollspy
Then scrollspy does not show the correct links highlighted when I am scrolling up or down the different sections of my page

Steps to reproduce the issue

Create a inpage navigation as presented here https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-inpage-navigation
Add dynamic elements to the page (you can do this through the console for instance)
Scroll spy will not show the correct link highlighted anymore.

Language list - Overlay initialization

Dear All,
I am trying to initialize a basic HTML with the ECL v2.10.1 but I cannot find any documentation on how to initialize the "Language list overlay" page structure element.
The element is correctly working in the template > standard example but I can't find how to initialize it on my html (created following the guidelines at https://ec.europa.eu/component-library/ec/getting-started/).

Can you give some advice?
Thank you in advance

[RFC] File component - INNO-1320

This is a RFC an on Improvement Proposal.

How can we improve the markup?

IMHO more attributes should be used on the download links in the file component. The current implementation for the main Download link looks like this:

<a href="/path/to/file.pdf" class="[...]">
  <span class="[...]">Download</span>
  <svg focusable="false" aria-hidden="true" class="[...]">
    <use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
  </svg>
</a>

And the links to the translations (with the label) look like that:

<div class="[...]">
  <div class="[...]">español</div>
  <div class="[...]">(15.8 MB - PDF)</div>
</div>
<a href="/path/to/file.pdf" class="[...]">
  <span class="[...]">Download</span> 
  <svg focusable="false" aria-hidden="true" class="[...]">
    <use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
  </svg>
</a>

https://v2--europa-component-library.netlify.com/ec/components/file/code/

Here are the attributes we could use:

On the links:

• download: to make the browser download the file (instead of opening it)

The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default file name that the author recommends for use in labeling the resource in a local file system. There are no restrictions on allowed values, but authors are cautioned that most file systems have limitations with regard to what punctuation is supported in file names, and user agents are likely to adjust file names accordingly.

— https://www.w3.org/TR/2017/REC-html52-20171214/links.html#element-attrdef-a-download

• hreflang: to tell the browser in which language the document will be

The hreflang attribute on a elements that create hyperlinks, if present, gives the language of the linked resource. It is purely advisory. The value must be a valid BCP 47 language tag. [BCP47] User agents must not consider this attribute authoritative — upon fetching the resource, user agents must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.

— https://www.w3.org/TR/2017/REC-html52-20171214/links.html#element-attrdef-a-hreflang

On the label:

• lang: to specify the language used in the div, e.g. español is written in spanish — https://www.w3schools.com/tags/att_global_lang.asp

What it would look like?

Here are the 2 HTML snippets from before, improved:

<a href="/path/to/file.pdf" class="[...]" download>
  <span class="[...]">Download</span>
  <svg focusable="false" aria-hidden="true" class="[...]">
    <use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
  </svg>
</a>

<div class="[...]">
  <div class="[...]" lang="es">español</div>
  <div class="[...]">(15.8 MB - PDF)</div>
</div>
<a href="/path/to/file-es.pdf" hreflang="es" class="[...]" download>
  <span class="[...]">Download</span> 
  <svg focusable="false" aria-hidden="true" class="[...]">
    <use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
  </svg>
</a>

Questions

• Do you agree to add these attributes?
• Can you think of other attributes we could use to improve the markup?
  • Type? https://www.w3.org/TR/2017/REC-html52-20171214/links.html#element-attrdef-a-type

Resources

• https://www.w3.org/TR/2017/REC-html52-20171214/links.html#links
• https://www.w3schools.com/tags/att_a_download.asp
• https://www.w3schools.com/howto/howto_html_download_link.asp
• https://www.w3schools.com/tags/att_a_hreflang.asp

ECL V1 Catalogue no longer accesible

Until yesterday, this link was accessible: https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-listing

Now this page is no longer working. We need documentation about ECL v1 in order to maintain our web applications that are using it.

Logo svg only available in english

Expected behavior

Expected to find all the European Commission logo available in all languages (only checked with the ec-preset-website)

Actual behavior

Only the english logo is present

Steps to reproduce the issue

Version 2.1.0 classes have changed, style breaks

Expected behavior

I changed my css and js (ecl-ec-preset-website) version from 1.2.0 to 2.1.0 and refresh my browser.
My classes should be the same.

Actual behavior

Classes have changed, and layout is broken. See pictures below.

Steps to reproduce the issue

Before upgrading:

After upgrading:

Question about custom footers

The documentation for the custom footer states "never add the site map". However, the provided example/demo includes a "site map" link in the custom footer.
We are currently developing a web application for an EC's DG and we would like to understand how we have to deal with it in order to be compliant with the general guidelines.

Please check the checkbox component behaviour

Expected behavior

It is supposed to click on the checkbox to activate/deactivate

Actual behavior

If you click anywhere on the line of the checkbox (not only in the box) it activate/deactivate

Steps to reproduce the issue

https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-form-checkbox

Problems with IE10

Hello
I'm not sure about the compatibily matrix, but as IE10 is still used by a lot of users, I think all the components should work with this browser.

Expected behavior

The components should look the same with different browsers.

Actual behavior

The "date" component is shown in a different way when IE10 is used. The labels are shown horizontally instead of vertically.
I've found the same problem with other components that use the property "display: flex", but I can't reproduce this other problems within the demo.

Steps to reproduce the issue

Open https://ec-europa.github.io/europa-component-library/components/preview/ecl-list-items#list-item-3 with IE10
Open the development tools and select IE10 to render the page
The date component should change and show the labels horizontally

The only way I've found to fix this has been adding the next code, but I understand maybe it's not the right solution:
.ecl-date-block__body span {
display: block;
text-align: center;
}

Thank you very much

[RFC] Language list - INNO-1321

Current implementation

In our current implementation, links look like this:

<a href="/example#language_ga" class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a>

What can we improve?

Obviously, 2 attributes are missing:

• lang: because "Gaeilge" is not in English (the language of the document)
• hreflang: because the link points to a page which is not in English

One third attribute can be discussed:

• rel="alternate":

When used in combination with the hreflang attribute (with a value other than that of the document itself), rel="alternate" means a link to a version of the current document, but in the language indicated by the hreflang attribute.

— http://microformats.org/wiki/rel-alternate

To me, we should use this attribute in the "overlay language list", where links point to the same page in another language.
It should not be used in the "splash page language list", where links point to a completely different document than the current one. It seems to me that https://ec.europa.eu/info/ misuses the rel="alternate" attribute.

• Are we all on the same page here?
• Are there any other attributes we could or should use?

Logo images missing from the releases

Hi, I'm using ecl with angular and noticed that when trying to use a release, eg, eu-preset-website, the logotypebelow svg's are missing.