@ebrains/components 0.5.0-alpha.0 → 0.7.0-alpha.0

package/dist/collection/shared-ui/eds-feedback/eds-feedback.css

@@ -0,0 +1,155 @@
+/*
+Remove the default font size and weight for headings.
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+    margin: 0;
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-lighter {
+    color: var(--grey-600);
+}
+
+.text-lightest {
+    color: var(--grey-500);
+}
+
+.f-body-01 {
+    font-family: var(--f-body-01-fontFamily);
+    font-weight: var(--f-body-01-fontWeight);
+    font-size: var(--f-body-01-fontSize);
+    line-height: var(--f-body-01-lineHeight);
+    letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.f-heading-02 {
+    font-family: var(--f-heading-02-fontFamily);
+    font-weight: var(--f-heading-02-fontWeight);
+    font-size: var(--f-heading-02-fontSize);
+    line-height: var(--f-heading-02-lineHeight);
+    letter-spacing: var(--f-heading-02-letterSpacing);
+}
+
+.f-heading-03 {
+    font-family: var(--f-heading-03-fontFamily);
+    font-weight: var(--f-heading-03-fontWeight);
+    font-size: var(--f-heading-03-fontSize);
+    line-height: var(--f-heading-03-lineHeight);
+    letter-spacing: var(--f-heading-03-letterSpacing);
+}
+
+.f-heading-04 {
+    font-family: var(--f-heading-04-fontFamily);
+    font-weight: var(--f-heading-04-fontWeight);
+    font-size: var(--f-heading-04-fontSize);
+    line-height: var(--f-heading-04-lineHeight);
+    letter-spacing: var(--f-heading-04-letterSpacing);
+}
+
+.f-heading-05 {
+    font-family: var(--f-heading-05-fontFamily);
+    font-weight: var(--f-heading-05-fontWeight);
+    font-size: var(--f-heading-05-fontSize);
+    line-height: var(--f-heading-05-lineHeight);
+    letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+.f-heading-06 {
+    font-family: var(--f-heading-06-fontFamily);
+    font-weight: var(--f-heading-06-fontWeight);
+    font-size: var(--f-heading-06-fontSize);
+    line-height: var(--f-heading-06-lineHeight);
+    letter-spacing: var(--f-heading-06-letterSpacing);
+}
+
+.f-body-01 {
+    font-family: var(--f-body-01-fontFamily);
+    font-weight: var(--f-body-01-fontWeight);
+    font-size: var(--f-body-01-fontSize);
+    line-height: var(--f-body-01-lineHeight);
+    letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.f-body-02 {
+    font-family: var(--f-body-02-fontFamily);
+    font-weight: var(--f-body-02-fontWeight);
+    font-size: var(--f-body-02-fontSize);
+    line-height: var(--f-body-02-lineHeight);
+    letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-04 {
+    font-family: var(--f-ui-04-fontFamily);
+    font-weight: var(--f-ui-04-fontWeight);
+    font-size: var(--f-ui-04-fontSize);
+    line-height: var(--f-ui-04-lineHeight);
+    letter-spacing: var(--f-ui-04-letterSpacing);
+}
+
+.inline {
+    display: inline;
+}
+
+.grid {
+    display: grid;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.my-4 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.my-8 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}

package/dist/collection/shared-ui/eds-feedback/eds-feedback.js

@@ -0,0 +1,191 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+export class EdsFeedback {
+    constructor() {
+        this.type = 'star';
+        this.count = 5;
+        this.label = 'Rate your Experience!';
+        this.description = 'This is a description!';
+        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        this.selectedRating = 0;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.selectedRating
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    /**
+     * Parses the `textMapping` prop into an array of strings.
+     */
+    get parsedMappings() {
+        return parseData(this.textMapping);
+    }
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    ratingUpdated(e) {
+        this.selectedRating = e.detail;
+    }
+    render() {
+        return (h("div", { key: '125299e9780486a10213fc3c59b15e7a4fb62616', class: "grid inline" }, h("p", { key: '6a02d78d34a590bc213cd5bf311ec8bed44f8959', class: "f-heading-03 my-4" }, this.label), h("p", { key: '76146fbade2f864ba7b72429a85218ebf6a24ea7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '38e0ec9219adaf85f674fab6be471112f06e42ff', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'beab34888d3db63ca2ee374a2d10d407bfc948cc', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+    }
+    static get is() { return "eds-feedback"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-feedback.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-feedback.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'star' | 'thumbs-up' | 'thumbs-down'",
+                    "resolved": "\"star\" | \"thumbs-down\" | \"thumbs-up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of icon to display. Can be \"stars\" or \"thumbs\"."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'star'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "count",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Rate your Experience!'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "'This is a description!'"
+            },
+            "textMapping": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mapping of text to star ratings."
+                },
+                "attribute": "text-mapping",
+                "reflect": false,
+                "defaultValue": "['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rating",
+                "name": "rating",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the rating is changed."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "rating",
+                "method": "ratingUpdated",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-feedback/eds-feedback.stories.js

@@ -0,0 +1,121 @@
+export default {
+    title: 'Shared Ui/Feedback',
+    component: 'eds-feedback',
+    argTypes: {
+        type: {
+            control: { type: 'select', options: ['star', 'thumbs-up', 'thumbs-down'] },
+            description: 'The type of icon to display.'
+        },
+        count: {
+            control: { type: 'number', min: 1 },
+            description: 'The total number of rating items.'
+        },
+        label: {
+            control: 'text',
+            description: 'The label text displayed above the rating component.'
+        },
+        description: {
+            control: 'text',
+            description: 'The description text below the label.'
+        },
+        textMapping: {
+            control: 'array',
+            description: 'An array of text mappings corresponding to each rating.'
+        }
+    },
+    args: {
+        type: 'star',
+        count: 5,
+        label: 'Rate your Experience!',
+        description: 'This is a description!',
+        textMapping: ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `
+};
+export const CustomTextMapping = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        label: 'Your Satisfaction Level',
+        description: 'Please select a rating:',
+        textMapping: ['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']
+    }
+};
+export const ThumbsUp = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'thumbs-up',
+        label: 'How did we do?',
+        description: 'Give us your feedback by clicking on the icon:'
+    }
+};
+export const ThumbsDown = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'thumbs-down',
+        label: 'Let us know your thoughts',
+        description: 'Your feedback matters:'
+    }
+};
+export const TenItems = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'star',
+        count: 10,
+        label: 'Rate the Complexity',
+        description: '10-level rating system',
+        textMapping: [
+            'Horrible',
+            'Very Bad',
+            'Bad',
+            'Mediocre',
+            'Below Average',
+            'Average',
+            'Above Average',
+            'Good',
+            'Very Good',
+            'Excellent'
+        ]
+    }
+};

package/dist/collection/shared-ui/eds-footer/eds-footer.js

@@ -25,19 +25,10 @@ export class EdsFooter {
         };
         this.extraClass = '';
         this.social = false;
-        this.hasCookiesSetUp = false;
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-        this.cookiesPreference = 'Cookies Preferences';
-    }
-    /**
-     * Toggles the cookie preferences popup, if available.
-     * The actual implementation for handling cookie preferences should be defined here.
-     * @private
-     */
-    toggleCookiesPopup() {
-        // Implement logic for handling cookie preferences
+        this.showMatomoNotice = false;
     }
     /**
      * Renders the footer component with optional sections and elements,
@@ -47,7 +38,7 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'ba6500548e8f719b8670063918c61b391ddb8387', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: '1221cca6d40c4de8ed7ceefa84198817bf904630', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: 'ad55b938fb2961074822d6bf458f0ea7a15baa84', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '91c13fdd98508a812e5dcfa86056b5adc035623d', class: "flex items-center gap-x-12" }, h("a", { key: '4ddd8715a5cabbff2209f8ceb389900c9eddcd74', 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-2020_en" }, h("eds-img", { key: 'df5f16284084d9171cd3d567dd249a0ef98bde79', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), h("div", { key: '0ff4328cc30f06c1a85ffc726d5b6b0dc53e49b9', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, h("p", { key: '2cb2b4f072a141e58c9a2185c9179d475f9690bd' }, this.fundedBy), h("div", { key: 'b31d1e18933fb1be11d8454f9a5301dedc839015', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, h("span", { key: 'aab95785cfb2bc7d490ac9426ef5e421f9418dc9', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (h("button", { key: 'fbd5bf3560faf0ee34d740bda423595c3cd21ad8', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), h("div", { key: '0427234b6679ae05b673a5c6efb8447306f61876', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (h("footer", { key: 'fc315d7ddfa4ede5514083d842bba36c991fef8a', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: '9d00bf38cabc8cea80be80b0e26f57fa70e635fb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '67342d2033716108d6b7137029709d0048dd06f2', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '44bbeddacf48ed1d3a8f716cb9a044f7175aabab', class: "flex items-center gap-x-12" }, h("a", { key: '34ce75ccde53cfd7771d7d325d989a23d148011f', 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-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'f06317200fe90580ca1d2d512e665252d11b4799', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '6a81ccd4f5196c6567a60c6a43c468178154f9ad', class: "order-last w-full lg:order-none lg:w-auto" }, h("div", { key: 'e10de8b2e966cd0a2febcc8e8c5189b7694f856c', class: "f-ui-04 text-light" }, h("p", { key: '26f14c5c27859d1fea9985800d8e35023ca8ade9' }, this.fundedBy), h("div", { key: '7eabdf80c9c9e42793eff579c2ec92d934611bb2', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'abe3d9e7091e15f09782cdde3e59228f6e143805', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved)))), h("div", { key: '0c3371aec2ff5f9e348bef2171e4bc5a353960e2', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get originalStyleUrls() {
@@ -104,27 +95,6 @@ export class EdsFooter {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hasCookiesSetUp": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }],
-                    "text": "Controls the display of the \"Cookies Preferences\" button.\nWhen true, the button appears in the footer."
-                },
-                "attribute": "has-cookies-set-up",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "enableScrollTop": {
                 "type": "boolean",
                 "mutable": false,
@@ -187,28 +157,12 @@ export class EdsFooter {
                 "attribute": "rights-reserved",
                 "reflect": false,
                 "defaultValue": "`${new Date().getFullYear()} EBRAINS. All rights reserved.`"
-            },
-            "cookiesPreference": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Controls the display of the \"Cookies Preference\" text."
-                },
-                "attribute": "cookies-preference",
-                "reflect": false,
-                "defaultValue": "'Cookies Preferences'"
             }
         };
     }
+    static get states() {
+        return {
+            "showMatomoNotice": {}
+        };
+    }
 }

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
  * It provides a responsive, full-window overlay menu with navigation links and additional options.
@@ -56,20 +57,7 @@ export class EdsFullscreenMenu {
      * @returns {any[]} Array of parsed link objects
      */
     get parsedLinks() {
-        if (typeof this.links === 'object') {
-            return this.links;
-        }
-        else if (typeof this.links === 'string') {
-            try {
-                return JSON.parse(this.links);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing links prop:', e);
-                return [];
-            }
-        }
-        return [];
+        return parseData(this.links);
     }
     /**
      * Parses the `menuLinks` prop into an array of link objects.
@@ -78,20 +66,7 @@ export class EdsFullscreenMenu {
      * @returns {any[]} Array of parsed menu link objects
      */
     get parsedMenuLinks() {
-        if (typeof this.menuLinks === 'object') {
-            return this.menuLinks;
-        }
-        else if (typeof this.menuLinks === 'string') {
-            try {
-                return JSON.parse(this.menuLinks);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing menuLinks prop:', e);
-                return [];
-            }
-        }
-        return [];
+        return parseData(this.menuLinks);
     }
     render() {
         return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `bg-default w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" }))))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;

package/dist/collection/shared-ui/eds-header/eds-header.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `EdsHeader` is a header component designed for the EBRAINS platform.
  * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
@@ -70,28 +71,11 @@ export class EdsHeader {
      * @returns {any[]} Array of parsed link objects
      */
     get parsedLinks() {
-        // If it's already an array, return it immediately.
-        if (Array.isArray(this.links)) {
-            return this.links;
-        }
-        if (typeof this.links === 'object') {
-            return this.links;
-        }
-        else if (typeof this.links === 'string') {
-            try {
-                return JSON.parse(this.links);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing links prop:', e);
-                return [];
-            }
-        }
-        return [];
+        return parseData(this.links);
     }
     render() {
-        return (h("header", { key: 'ce002da29cee5446f64694ba93ec67f89c180ac4', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '579593f3180b27d129fd9ca380d6b74d0efcbd1e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'c72d87a2ff7cd1ea2b0390cd364e376d1f52c67f', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '6755e304c48624049af8426d4d9b19d0cb156dda', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '390f9b6c6c950719598eec88b4befb4224cb0c03', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: 'bc7b093739cc3058e4eb3d4eddbb0b49856b5710' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (h("header", { key: '2e39471507762066b258c72da9690f3001ca9a94', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '75a52a092065c2f3f65f7d8a388b887d3991497e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '632c71d268929e06bc507573db21e04da4c60c67', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '2a1bb9a64ea5731ea3a8c1537b1d95b28b2368f5', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '6cecbd7d268cd2aef5b7b117df422128c7dc994d', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: 'b352a1456858d5190a6268928d2f92ddebdf99c2' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     static get is() { return "eds-header"; }
     static get originalStyleUrls() {