EccUtilsDesignComplianceFooter Component
Overview
The ecc-utils-design-compliance-footer component renders the links to legal and regulatory information that operators must provide, configured per deployment. It reads the same configuration as the cookie consent, so an app adds both from configuration alone.
Each item has an action:
| Action | Configuration | Result |
|---|---|---|
link | { type: 'link', href, newTab? } | A link (http(s) or relative). |
mailto | { type: 'mailto', email, subject? } | Opens the mail client; email is a plain address (letters, digits, ., _, +, -). |
preferences | { type: 'preferences' } | Opens the cookie preferences. |
page | { type: 'page', markdown, title? } | Shows a page from Markdown in a dialog. |
embed | { type: 'embed', src, title?, consent? } | Shows an https page in a frame in a dialog, e.g. a policy hosted by Iubenda, Termly or GetTerms; with consent, only once users consented to that cookie category. |
Operators are responsible for the content: which items their deployment needs, under which regulations, and what the pages say. The defaults are only a starting point.
Usage
Properties
| Property | Type | Default | Description |
|---|---|---|---|
config | ComplianceConfig | {} | Shared compliance configuration; this component uses config.footer, and config.cookies for embeds that need consent. |
Events
| Event Name | React Event Name | Detail Type | Description |
|---|---|---|---|
ecc-compliance-item-selected | onEccComplianceItemSelected | { item: FooterItem } | Fired when the user selects an item, before its action runs. Call event.preventDefault() to handle the item yourself, e.g. with the app's router. |
Configuration (config.footer)
| Field | Type | Description |
|---|---|---|
items | FooterItemConfig[] | { id, label?, action?, hidden? }. An entry with the id of a default item changes it (label, action) or removes it (hidden: true); other entries are added after the defaults, in their order. |
replaceDefaults | boolean | Use only the configured items. |
label | string | Accessible name of the footer's navigation, default "Legal". |
texts | { close?: string } | Texts of the footer's dialog, e.g. for translations; close defaults to config.cookies.texts.close, then "Close". |
Items without an action, or whose link, address or embed URL isn't valid, aren't shown.
Default items
| ID | Label | Default action |
|---|---|---|
privacy-policy | Privacy Policy | none |
terms | Terms & Conditions | none |
cookie-policy | Cookie Policy | none |
cookie-preferences | Cookie Preferences | preferences |
imprint | Imprint | none |
accessibility | Accessibility Statement | none |
contact | Contact Us | none |
privacy-choices | Your Privacy Choices | none |
So without configuration, the footer shows only "Cookie Preferences"; each item that the operator gives an action appears, in this order. "Cookie Preferences" opens the preferences of the cookie consent component, so add that component to the page too, or hide the item ({ id: 'cookie-preferences', hidden: true }).
Markdown pages
page items support a small subset of Markdown: headings (# to ###), paragraphs, lists (-, *, 1.), **bold**, *emphasis* and links ([text](url), only http(s), mailto and relative URLs; links to other origins open in a new tab). All text is escaped; HTML in the Markdown is shown as text, not rendered.
Embeds
- Only
httpsURLs (andhttponlocalhost) are embedded. The frame is sandboxed (allow-scripts allow-same-origin allow-popups, so pages it opens stay sandboxed; withoutallow-same-originfor pages of the app's own origin, which couldn't be isolated otherwise) and sends no referrer. For pages of your own, preferpageorlink. - Allow the embed's origin in the app's Content Security Policy (
frame-src). - An embed loads its frame when users open the item, whether or not they chose their cookies yet. Embeds whose provider sets cookies or tracks visitors (check the provider's documentation) must therefore name a cookie category in
consent; until users consent to it, the dialog shows a note and a button to the preferences instead of the frame. - Script-based embeds (a
<script>tag that injects the policy) aren't supported, since configuration must not run code on the page. Most policy services also offer a page URL that can be embedded or linked.
