EWC footer-links Component

One line w/ a feedback link on the left side and legal links (etc.) on the right side.

Overview

The ewc-footer-links component provides a standardized footer for Eurostat web applications. It ensures a consistent visual identity across Eurostat digital products. When clicking the Accessibility link, a modal is displayed containing the accessibility statement. If the page includes a banner, the modal is displayed below the banner; otherwise, it covers the full page.

Structure

To be comply with accessibility standards, the ewc-footer-links must always be contained in a footer element

<footer>component</footer>

Features

• Responsive design
• Accessibility compliant
• Accessibility overlay displayed by default at full height and width
  • If a banner is visible, the overlay is displayed below the banner
  • If the banner is not visible (e.g., page scrolled), the overlay covers the full height
  • If the page has no banner, the overlay covers the full height
• Optional standard link for 'Accessibility'
• Feedback link always sends an email to Eurostat support (not configurable)
• Non-customisable links to EC pages for 'Cookies', 'Privacy policy', 'Legal notice'

Accessibility statement displayed in a modal

Set the URL of the accessibility statement in the 'a11y-modal-url' attribute. The modal will display an iframe containing the statement.

If the page includes a banner, assign an id to the banner and pass it to the component using the a11y-container attribute. The component uses this id to calculate the banner height and position the modal below.

On mobile view (max-width: 738px), the modal is always displayed at full height.

If the page/tool displays a banner:

<ewc-banner id="main-banner"></ewc-banner>
``` or 
```html
<div id="main-banner"></div>

Then the element can be used like this

<footer>
  <ewc-footer-links
    email="[email protected]"
    subject="This is the eMail's subject"
    a11y-modal-url="iframe url" 
    a11y-container="id of the banner">
  </ewc-footer-links>
</footer>

If the page/tool doesn't display a banner:

<footer>
  <ewc-footer-links
    email="[email protected]"
    subject="This is the eMail's subject"
    a11y-modal-url="iframe url">
  </ewc-footer-links>
</footer>

Accessibility statement displayed as a link

If a standard link is needed instead of a modal, use the a11y-link-url attribute:

<footer>
  <ewc-footer-links
    email="[email protected]"
    subject="This is the eMail's subject"
    a11y-link-url="iframe url">
  </ewc-footer-links>
</footer>

API

JS object. props are all attributes listed below. Can also be used to set just 1 single text.

| Attributes | Default value | Mandatory | Customisation | |-------------------|---------------|------------|---------------| |email | [email protected] | yes | no | |subject | Eurostat%20support | yes | no | |feedback | Feedback | yes | no | |feedback-url | mailto:[email protected] | yes | no | |cookies | Cookies | yes | no | |cookies-url | https://commission.europa.eu/cookies-policy_en | yes | no | |privacy-policy | Privacy policy | yes | no | |privacy-policy-url | https://commission.europa.eu/privacy-policy-websites-managed-european-commission_en | yes | no | |legal-notice | Legal notice | yes | no | |legal-notice-url | https://commission.europa.eu/legal-notice_en | yes | no | |accessibility | Accessibility | yes | no | |a11y-modal-url | no : must be accessibility statement URL for iframe | yes | yes | |a11y-container | no : must be id of the banner | no | yes | |a11y-link-url | no : must be accessibility statement URL | yes* | yes |

* Mandatory only when using link mode.

Changing these attributes at runtime updates the corresponding links.

Usage

Installation

npm install @ewc-lib/ewc-footer-links

Import the component in your application:

// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css";
import '@ewc-lib/ewc-footer-links';

If you are using Vue framework, please update your vite.config.js

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('ewc-')
        }
      }
    })
  ]
})

Showcase

All behaviors can be simulated in the showcase:

https://ec.europa.eu/eurostat/cache/test/ewc-showcase/ewc-footer-links/2.2.10-beta/

Notes

Accessibility

The component is designed with accessibility in mind:

• Keyboard navigable element
• Sufficient color contrast

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

European Union Public License (EUPL)

Changelog

• 2.2.11-beta

  • fix and update of the readme files

• 2.2.10-beta

  • add scrolling with arrow in the iframe
  • add specific id "a11y-statement" in iframe to avoid potential conflict with other iframes

• 2.2.9-beta

  • fix color links and states

• 2.2.8-beta

  • revert css-common to 0.1.0 and fixed visited link color in css file of the component

• 2.2.7-beta

  • accessibility
  • add optional attribute to display a standard link

• 2.2.6-alpha

  • fix feedback icon position
  • adaptation to vue framework

• 2.2.3-alpha

  • add setter for URL
  • add setter for banner id
  • add a11y statement overlay when clicking on 'Accessibility'

• 2.2.2-alpha

  • remove underline style on links (standalone links)
  • fix active style on feedback link
  • fix feedback icon position

• 2.1.1-alpha

  • correct mistake in usage examples
  • increase encapsulation

• 2.1.0-alpha

  • add setter, docu and usage examples