@ebrains/components 3.0.0 → 3.2.0

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

@@ -1,37 +1,123 @@
 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 ]
+ *
+ * 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).
  *
- * 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.
+ * 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 = 'default';
+        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;
@@ -50,24 +136,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.`;
         const isInverse = this.variant === 'inverse';
-        const footerClasses = isInverse ? 'bg-strongest text-inverse' : '';
-        const borderClasses = isInverse ? 'border-inverse-softer' : 'border-softest';
-        const textClasses = isInverse ? 'text-inverse' : 'text-default';
-        return (h("footer", { key: 'ffe47afda9981e367f24d2525a5b21e96f4f3d10', class: footerClasses }, this.social ? (h("div", { class: `${borderClasses} 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", variant: this.variant })))))) : null, h("div", { key: '2e884f06ca55ea5837aabfd7d726a79b72365ab3', class: `${borderClasses} ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'f601602dd39c564ce77d978325cbacaa752bd5f0', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '94d6bf12bca8a37560124de2a9114a4566494883', class: "flex items-center gap-x-12" }, h("a", { key: '8c9bf0a41cce7e043311b39c6418d2dc3541694f', 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: '5d0c96911aa0069dd7c0ef6a5690d5ac59dbc737', class: "h-auto w-full", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bab3fd3f37857e99c2a525b7a9553d4c706d247c', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'e77d6f1fc21f36083196adcb4f6b7a3e70105b0f', 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: '3057a627d8cc6e524f6381f21bb34b549d45021f' }, h("div", { key: 'd6397eaa434f15d415bff0c5171b4f71295dabc3', class: `f-ui-02 ${textClasses}` }, h("p", { key: 'cc9e370cd5b4238fcd76bc8f1f84c54af2873bab' }, this.fundedBy), h("div", { key: '9af9a16cf3cc6fc4223c1b5eac13f96894b92962', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'e86c83c7504f60831dc9d4239b3e2b551b2765b6', 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: 'd2dcb8a3a99c5aa368d6d710e125e3a9f8fefd25', 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: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+        // 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: 'e7d7584fcd2dcfd2e4e469c5e9e2621f010036fe', 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: '4233c2f5665ff8fd49f1949ef450b87149f1d9ba', class: "footer-container" }, h("div", { key: '6a90c75dc5a099727e58fb21c706e7d310c2e58f', class: "footer-grid" }, h("div", { key: '450704c6200bf603a296c383872eecdf4ef94fd9', class: "footer-brand" }, h("div", { key: '380ba7f532a8f94627e206e33480be697861dc57', class: "footer-brand-row" }, h("a", { key: '2cbc262b8630d7106b1ff4c9b9e97f7421df05bd', 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: 'a1374ae892acdd10d5294e3197e9b37e8adb7b38', 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: '11b83b7931271e829803de01822a6618e66c8b17', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: '2e5b724042df62f59964709ec2e6954767690805', 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: '20e15f10baf1ddf47bc35e4d339a8efaf4b4bb49', class: "footer-funded" }, this.fundedBy)), h("p", { key: '126e04d4a993422b5554fb87dfb9b388e8d2a4af', 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"; }
@@ -94,11 +191,8 @@ 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,
@@ -115,15 +209,12 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{'default' | 'inverse'}"
-                        }],
-                    "text": "Controls the visual variant of the footer.\n- 'default': Light background with dark text\n- 'inverse': Dark/black background with white text"
+                    "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": false,
-                "defaultValue": "'default'"
+                "reflect": true,
+                "defaultValue": "'inverse'"
             },
             "enableScrollTop": {
                 "type": "boolean",
@@ -136,11 +227,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,
@@ -157,11 +245,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,
@@ -178,11 +263,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,
@@ -199,15 +281,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",
@@ -220,11 +299,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,
@@ -241,21 +317,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() {
@@ -277,6 +373,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,122 @@
+// 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>`
-            : '';
+        const notice = args.enableCookiesSettings ? `<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 +124,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>
+  `
+};