@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-footer/eds-footer.js

@@ -1,45 +1,127 @@
 import { h } from "@stencil/core";
 /**
- * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
- * legal information, and an optional cookie preferences button. It includes a "Back to top"
- * button and displays an acknowledgment for Horizon Europe funding.
+ * EBRAINS-wide default link columns. Used when a consumer doesn't pass
+ * the `columns` prop. URLs are absolute so the same footer renders
+ * correctly from any app's domain (handbook.ebrains.eu, forms.ebrains.eu,
+ * design.ebrains.eu, …) — the previous eds-docs design used relative
+ * paths which only worked from design.ebrains.eu itself.
  *
- * Key Features:
- * - Social Network Links: Optionally display a section for social media links.
- * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
- * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
- * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
+ * If EBRAINS adds / renames a canonical resource, change it here once
+ * and every consumer's footer updates on the next component release.
+ */
+const DEFAULT_COLUMNS = [
+    {
+        heading: 'Resources',
+        links: [
+            { label: 'Documentation', href: 'https://design.ebrains.eu/get-started/', external: true },
+            { label: 'Components', href: 'https://design.ebrains.eu/ui-components/', external: true },
+            { label: 'Foundations', href: 'https://design.ebrains.eu/foundations/', external: true },
+            { label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true },
+        ],
+    },
+    {
+        heading: 'Community',
+        links: [
+            { label: 'GitLab', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/', external: true },
+            { label: 'Storybook', href: 'https://storybook.design.ebrains.eu', external: true },
+            { label: 'Report Issues', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues', external: true },
+            { label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true },
+        ],
+    },
+    {
+        heading: 'Legal',
+        links: [
+            { label: 'MIT License' },
+            { label: 'Cookie Preferences', action: 'cookies' },
+        ],
+    },
+];
+/**
+ * `EdsFooter` is the EBRAINS-wide footer component.
+ *
+ * Renders a 4-column layout matching the eds-docs landing footer:
+ *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
  *
- * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
- * across the EBRAINS platform, with options for social links and a "Back to top" button.
+ * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+ * with no props gets the full canonical EBRAINS footer rendered — same
+ * brand block, same link columns, same dark theme as the eds-docs
+ * landing page. The previous minimal-strip footer is replaced; consumers
+ * that need different link content pass the `columns` prop (array or
+ * JSON-stringified array for HTML attribute use).
+ *
+ * Configurability without breakage:
+ * - All previous props remain (`social`, `variant`, `fundedBy`,
+ *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+ *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+ *   preserved.
+ * - New `columns` prop is optional — omit it for the defaults.
+ * - The `enableCookiesSettings` toggle now decides whether any column
+ *   link with `action: 'cookies'` is rendered (default false; pass
+ *   true to surface the Cookie Preferences entry in the Legal column).
  */
 export class EdsFooter {
     constructor() {
-        /**
-         * Scrolls the page smoothly back to the top.
-         * Called when the "Back to top" button is clicked.
-         * @private
-         */
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
+        this.emitCookies = () => {
+            this.cookies.emit('toggle');
+        };
         this.social = false;
+        this.variant = 'inverse';
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-        this.cookiesPreferences = 'Cookies preferences';
+        this.cookiesPreferences = 'Cookie Preferences';
         this.enableCookiesSettings = false;
         this.backToTopAriaLabel = 'Back to Top';
-        this.showMatomoNotice = false;
+        this.columns = undefined;
+        this.resolvedColumns = DEFAULT_COLUMNS;
+    }
+    componentWillLoad() {
+        this.resolvedColumns = this.parseColumns(this.columns);
+    }
+    onColumnsChange(value) {
+        this.resolvedColumns = this.parseColumns(value);
+    }
+    /**
+     * Resolve the `columns` prop to a usable array.
+     *   - undefined / null   → defaults
+     *   - JSON-parseable str → parsed array
+     *   - already an array   → used as-is
+     *   - anything else (malformed JSON, wrong shape) → defaults + console warning
+     *
+     * Defensive parsing so a typo in a Hugo template's attribute doesn't
+     * render an empty footer in production. Failure logs a warning but
+     * keeps the footer working with sensible defaults.
+     */
+    parseColumns(value) {
+        if (value === undefined || value === null || value === '')
+            return DEFAULT_COLUMNS;
+        if (Array.isArray(value))
+            return value;
+        if (typeof value === 'string') {
+            try {
+                const parsed = JSON.parse(value);
+                if (Array.isArray(parsed))
+                    return parsed;
+                console.warn('eds-footer: `columns` JSON parsed but is not an array; using defaults');
+                return DEFAULT_COLUMNS;
+            }
+            catch (e) {
+                console.warn('eds-footer: failed to parse `columns` JSON, using defaults', e);
+                return DEFAULT_COLUMNS;
+            }
+        }
+        return DEFAULT_COLUMNS;
     }
     componentDidLoad() {
         var _a;
         this.backBtn = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toTop');
     }
     handleScroll() {
-        if (!this.backBtn) {
+        if (!this.backBtn)
             return;
-        }
         const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
         this.backBtn.style.opacity = shouldShow ? '1' : '0';
         this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
@@ -49,20 +131,35 @@ export class EdsFooter {
             btn.setAttribute('tabindex', shouldShow ? '0' : '-1');
         }
     }
-    toggleCookiesConsent() {
-        this.cookies.emit('toggle');
-    }
     /**
-     * Renders the footer component with optional sections and elements,
-     * including social network links, a Horizon Europe funding acknowledgment, and
-     * legal links such as "Cookies Preferences" and copyright information.
+     * Render one link inside a column.
+     *   - `action: 'cookies'` → button-like anchor that fires the cookies event
+     *   - `href` present      → real anchor (target=_blank when `external`)
+     *   - neither             → plain text span (e.g. "MIT License")
      */
+    renderLink(link, index) {
+        if (link.action === 'cookies') {
+            if (!this.enableCookiesSettings)
+                return null;
+            return (h("li", { key: `cookies-${index}` }, h("a", { href: "javascript:void(0)", class: "footer-link", onClick: this.emitCookies, role: "button" }, this.cookiesPreferences || link.label)));
+        }
+        if (link.href) {
+            const external = link.external === true;
+            return (h("li", { key: `${link.label}-${index}` }, h("a", Object.assign({ class: "footer-link", href: link.href }, (external ? { target: '_blank', rel: 'noopener noreferrer' } : {})), link.label)));
+        }
+        return (h("li", { key: `text-${index}` }, h("span", { class: "footer-text-item" }, link.label)));
+    }
     render() {
         const year = new Date().getFullYear();
         const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
-        return (h("footer", { key: 'bf9d98eea0bd151bf87818b770e85fe0cfa1044f' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: 'c0058cd32e2904e4e08ec46b99a0cbbabb5df588', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '4f2993ccded30ca66da34eca632b62abf02e06d5', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '81efd584b5de410522d338bb6ab4b53096a36868', class: "flex items-center gap-x-12" }, h("a", { key: '5a641163b3cb1549ee886e9029b65a012b31cd85', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: 'ccec5c50780a74912f51a46e79c5064e099cf678', class: "h-auto w-full fill-current", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8aa7bbb7cd4e3386c11c194af1ee63a19fa9de34', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'c5fcce97d10391a07c081558b970175d80da1106', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" })))), h("div", { key: '11168a0466d48398c6e9318317141966b5a2f996' }, h("div", { key: '3728a394fd33133169f17e26ba5135e4c7e28f0a', class: "f-ui-02 text-light" }, h("p", { key: '2329c76b69487d4c4f8fff0b0daa0ab8ce0ea15c' }, this.fundedBy), h("div", { key: 'c9423d9261da2d3f0ff3b5f00fc8e24522733f32', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '3257b0c6f7952e4d70e35fa93ba8e4bae23369b7', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
-                this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '9ef1a84e41dea0dda90a699a9ff8a844e3b6294d', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+        const isInverse = this.variant === 'inverse';
+        // Class hooks driven by variant — the CSS file styles each
+        // selector independently rather than relying on prop-based
+        // inline styles, so theme tokens stay overridable from outside
+        // via the host's CSS custom properties.
+        const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default']
+            .join(' ');
+        return (h("footer", { key: 'b09063376e3bd78845302473a96884bd473cea09', class: rootClasses }, this.social ? (h("div", { class: "footer-social" }, h("div", { class: "footer-container" }, h("eds-social-networks", { variant: this.variant })))) : null, h("div", { key: '3aeb8f496bb4c3c73da907ba9b9fbb72841be213', class: "footer-container" }, h("div", { key: 'e7e33ce7dee8079a9aff17d45963dfaff9576121', class: "footer-grid" }, h("div", { key: 'e6fc738e086774e114c5ceef1b82fea2e2840990', class: "footer-brand" }, h("div", { key: '96f7030269174c122ffe0117897a79b00020dd29', class: "footer-brand-row" }, h("a", { key: '5967c33efff435ceee2a45c21cae67749b91b9ba', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: '3de7debe64d431152e47a4daefb7c9facf7bf951', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '50e3f0c5ae41e3e7cc5689ddf01a8944a6c5d2eb', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: '2c0f61e6de734d7214accd10cefd3a39e31f36a1', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), h("p", { key: '9ff8e10db0e213754bfc73bcce1b3dd36bc62e30', class: "footer-funded" }, this.fundedBy)), h("p", { key: 'a24c4fbfe48c4c3c8d076f24da9c84b739a982d8', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (h("div", { class: "footer-column", key: `col-${ci}` }, h("h4", { class: "footer-column-heading" }, col.heading), h("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (h("div", { id: "toTop", class: "footer-back-to-top" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -89,16 +186,31 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }],
-                    "text": "Determines if the social network section should be displayed.\nAdds top padding when true."
+                    "tags": [],
+                    "text": "Show the eds-social-networks section above the main grid."
                 },
                 "attribute": "social",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variant. Defaults to `inverse` (dark) because the canonical\nEBRAINS footer design uses a dark backdrop with light text. Pass\n`variant=\"default\"` for the light-on-light treatment if an app's\npage palette demands it."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'inverse'"
+            },
             "enableScrollTop": {
                 "type": "boolean",
                 "mutable": false,
@@ -110,11 +222,8 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }],
-                    "text": "Controls the display of the \"Back to Top\" button.\nWhen true, the button appears in the footer."
+                    "tags": [],
+                    "text": "Float a \"Back to top\" button at the top-right of the footer."
                 },
                 "attribute": "enable-scroll-top",
                 "reflect": false,
@@ -131,11 +240,8 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Founded By\" text."
+                    "tags": [],
+                    "text": "\"EBRAINS is funded by\u2026\" line shown next to the EU flag in the brand column."
                 },
                 "attribute": "funded-by",
                 "reflect": false,
@@ -152,11 +258,8 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Rights Reserved\" text."
+                    "tags": [],
+                    "text": "\"\u00A9 {year} EBRAINS. All rights reserved.\" line shown below the funding text."
                 },
                 "attribute": "rights-reserved",
                 "reflect": false,
@@ -173,15 +276,12 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Cookies preferences\" text."
+                    "tags": [],
+                    "text": "Label used for any link with `action: 'cookies'` \u2014 overrides the column's `label`."
                 },
                 "attribute": "cookies-preferences",
                 "reflect": false,
-                "defaultValue": "'Cookies preferences'"
+                "defaultValue": "'Cookie Preferences'"
             },
             "enableCookiesSettings": {
                 "type": "boolean",
@@ -194,11 +294,8 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Cookies preferences\" link."
+                    "tags": [],
+                    "text": "When false, any column link with `action: 'cookies'` is hidden.\nDefault false so adding the footer to a page without a Matomo\nnotice / cookie banner doesn't surface a non-functional link.\nSet true once you've also mounted `<eds-matomo-notice>` on the page."
                 },
                 "attribute": "enable-cookies-settings",
                 "reflect": false,
@@ -215,21 +312,41 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Back to Top\" aria label text."
+                    "tags": [],
+                    "text": "ARIA label for the \"Back to top\" floating button."
                 },
                 "attribute": "back-to-top-aria-label",
                 "reflect": false,
                 "defaultValue": "'Back to Top'"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EdsFooterColumn[] | string",
+                    "resolved": "EdsFooterColumn[] | string",
+                    "references": {
+                        "EdsFooterColumn": {
+                            "location": "local",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-footer/eds-footer.tsx",
+                            "id": "../../../packages/components/src/components/eds-footer/eds-footer.tsx::EdsFooterColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom link columns. Accepts an array (Vue/React/JS bindings) OR\na JSON-stringified array (HTML attribute use). When omitted, the\ncanonical EBRAINS-wide columns above are used.\n\nShape: see EdsFooterColumn / EdsFooterLink at the top of this file."
+                },
+                "attribute": "columns",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "showMatomoNotice": {}
+            "resolvedColumns": {}
         };
     }
     static get events() {
@@ -251,6 +368,12 @@ export class EdsFooter {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "onColumnsChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "scroll",

package/dist/collection/components/eds-footer/eds-footer.stories.js

@@ -1,57 +1,123 @@
+// Sensible sample for the `columns` control — used as the default
+// value of the CustomColumns story so the JSON editor in Storybook
+// opens with something realistic to mutate rather than `null`. The
+// canonical EBRAINS defaults baked into the component differ from
+// this on purpose: leaving the control empty (null) demonstrates the
+// "no overrides" path; this sample demonstrates the override path.
+const SAMPLE_COLUMNS = [
+    {
+        heading: 'Product',
+        links: [
+            { label: 'Home', href: '/' },
+            { label: 'Pricing', href: '/pricing' },
+            { label: 'Docs', href: '/docs' }
+        ]
+    },
+    {
+        heading: 'Company',
+        links: [
+            { label: 'About', href: '/about' },
+            { label: 'Blog', href: 'https://example.com/blog', external: true },
+            { label: 'Careers', href: '/careers' }
+        ]
+    },
+    {
+        heading: 'Legal',
+        links: [
+            { label: 'Privacy', href: '/privacy' },
+            { label: 'Terms', href: '/terms' },
+            { label: 'Cookie Preferences', action: 'cookies' }
+        ]
+    }
+];
 export default {
     title: 'Components/Footer',
     component: 'eds-footer',
     argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'inverse'],
+            description: 'Theme. Default is `inverse` (dark) — the canonical EBRAINS footer.'
+        },
         social: {
             control: 'boolean',
-            description: 'Controls if the social section is displayed'
+            description: 'Show the social-networks section above the main grid'
         },
         fundedBy: {
             control: 'text',
-            description: 'Control for the funded by text'
+            description: 'Text shown next to the EU flag in the brand column'
         },
         rightsReserved: {
             control: 'text',
-            description: 'Control for the rights reserved text'
+            description: 'Text shown after the © symbol below the funding line'
         },
         enableScrollTop: {
             control: 'boolean',
-            description: 'Scroll to top button'
+            description: 'Float a "Back to top" button at the top-right of the footer'
         },
         enableCookiesSettings: {
             control: 'boolean',
-            description: 'Enable cookies consent preferences'
+            description: 'Render the "Cookie Preferences" entry (column links with action="cookies")'
         },
         cookiesPreferences: {
             control: 'text',
-            description: 'Control for the cookies preferences text'
+            description: 'Label used for the cookies-action link'
         },
         backToTopAriaLabel: {
             control: 'text',
-            description: 'Control for the back to top aria label text'
+            description: 'ARIA label for the floating back-to-top button'
+        },
+        columns: {
+            // `object` opens a live JSON editor in the Storybook controls
+            // panel — visitors can edit headings, links, hrefs, action,
+            // external flag etc. and see the footer re-render. Each story
+            // sets its own default (null for the canonical-defaults path,
+            // SAMPLE_COLUMNS for the override demo).
+            control: 'object',
+            description: 'Custom link columns. Array of `{ heading, links: [{ label, href?, external?, action? }] }`. Leave null to use the canonical EBRAINS defaults baked into the component.'
         }
     },
     args: {
+        variant: 'inverse',
         social: false,
         fundedBy: 'EBRAINS is funded by the Horizon Europe Framework Programme.',
-        rightsReserved: '2024 EBRAINS. All rights reserved.',
+        rightsReserved: `${new Date().getFullYear()} EBRAINS. All rights reserved.`,
         enableScrollTop: false,
         enableCookiesSettings: false,
-        cookiesPreferences: 'Cookies Preferences',
-        backToTopAriaLabel: 'Back to Top'
-    },
-    parameters: {}
+        cookiesPreferences: 'Cookie Preferences',
+        backToTopAriaLabel: 'Back to Top',
+        columns: null
+    }
 };
+// Helper — JSON-stringify the columns array and escape single quotes so
+// the resulting HTML attribute (wrapped in single quotes for readability)
+// stays valid even if a link label or href contains one. Shared by every
+// render function below.
+function columnsAttr(columns) {
+    if (columns == null)
+        return '';
+    const json = JSON.stringify(columns).replace(/'/g, ''');
+    return `columns='${json}'`;
+}
+/**
+ * Default — what a consumer gets from `<eds-footer></eds-footer>`
+ * with no overrides. Dark theme, EBRAINS canonical link columns,
+ * EU funding ack + copyright.
+ *
+ * Leave `columns` null in the controls panel to see the canonical
+ * defaults baked into the component; set it to a JSON array (use the
+ * object editor) to live-preview an override.
+ */
 export const Default = {
     render: (args) => {
         const notice = args.enableCookiesSettings
-            ? `  
-        <eds-matomo-notice></eds-matomo-notice>`
+            ? `<eds-matomo-notice></eds-matomo-notice>`
             : '';
         return `
-      <eds-alert message="When cookies consent is enabled, please include <code>eds-matomo-notice</code> in your page"></eds-alert>
+      <eds-alert message="When cookies consent is enabled, please include <code>eds-matomo-notice</code> in your page" class="mb-16"></eds-alert>
       ${notice}
       <eds-footer
+        variant="${args.variant}"
         social="${args.social}"
         funded-by="${args.fundedBy}"
         rights-reserved="${args.rightsReserved}"
@@ -59,7 +125,34 @@ export const Default = {
         enable-cookies-settings="${args.enableCookiesSettings}"
         cookies-preferences="${args.cookiesPreferences}"
         back-to-top-aria-label="${args.backToTopAriaLabel}"
+        ${columnsAttr(args.columns)}
       ></eds-footer>
     `;
     }
 };
+/**
+ * Custom link columns — pre-fills the `columns` control with a
+ * sensible non-EBRAINS example so the Storybook JSON editor opens
+ * with something realistic to mutate. Edit headings, links, hrefs,
+ * `external`, and `action` directly in the Controls panel to see
+ * the footer re-render.
+ *
+ * Shape: `[{ heading, links: [{ label, href?, external?, action? }] }]`
+ *   - `href` present       → renders as an anchor (target=_blank if `external`)
+ *   - `href` absent        → renders as plain text (e.g. "MIT License")
+ *   - `action: 'cookies'`  → fires the `cookies` event (gated by
+ *                            enable-cookies-settings)
+ */
+export const CustomColumns = {
+    args: {
+        enableCookiesSettings: true,
+        columns: SAMPLE_COLUMNS
+    },
+    render: (args) => `
+    <eds-footer
+      variant="${args.variant}"
+      enable-cookies-settings="${args.enableCookiesSettings}"
+      ${columnsAttr(args.columns)}
+    ></eds-footer>
+  `
+};