@ebrains/components 2.0.0 → 2.2.0

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

@@ -21,11 +21,16 @@ export class EdsFullscreenMenu {
         this.isMenuOpen = false;
     }
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+        this.isMenuOpen = !!event.detail;
     }
     /** Opens the menu */
     openMenu() {
@@ -89,15 +94,23 @@ export class EdsFullscreenMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
-                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
-                    "references": {}
+                    "original": "string | LinkItem[]",
+                    "resolved": "LinkItem[] | string",
+                    "references": {
+                        "LinkItem": {
+                            "location": "global",
+                            "id": "global::LinkItem"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the links for primary navigation.\nEach link should include `label`, `url`, and optionally an `icon`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "links='[{\"label\":\"Home\",\"url\":\"/\"},{\"label\":\"Docs\",\"url\":\"/docs\",\"icon\":\"book\"}]'"
+                        }],
+                    "text": "Primary navigation links.\nAccepts a JSON string or array of objects `{ label, url, icon?, external? }`."
                 },
                 "attribute": "links",
                 "reflect": false
@@ -113,8 +126,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the extra menu links a user wants for smaill screens navigation.\nEach link should include `label`, `url`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "menu-links='[{\"label\":\"Help\",\"url\":\"/help\"},{\"label\":\"Contact\",\"url\":\"/contact\"}]'"
+                        }, {
+                            "name": "attr",
+                            "text": "menu-links"
+                        }],
+                    "text": "Secondary navigation links (extra menu items for small screens).\nAccepts a JSON string or array of objects `{ label, url }`."
                 },
                 "attribute": "menu-links",
                 "reflect": false
@@ -130,8 +149,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"/\""
+                        }, {
+                            "name": "attr",
+                            "text": "home-url"
+                        }],
+                    "text": "URL for the logo link in the header."
                 },
                 "attribute": "home-url",
                 "reflect": false,
@@ -148,8 +173,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "attr",
+                            "text": "inverse-header"
+                        }],
+                    "text": "When true, uses an inverse (dark) header background."
                 },
                 "attribute": "inverse-header",
                 "reflect": false,
@@ -170,8 +201,11 @@ export class EdsFullscreenMenu {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Event to signal menu open/close actions"
+                    "tags": [{
+                            "name": "event",
+                            "text": "menuClose"
+                        }],
+                    "text": "Emitted when the menu is closed (via UI or resize)."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -56,7 +56,7 @@ export class EdsHeader {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (h("header", { key: 'aac532eed29a3d4b310ea2550521c95d562d0ece', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '8794699aa3401c267aacb95959acd57f9ceea3f5', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '490fae1495ecd2b801b24d068c7a2b446ed8741a', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '3e109d13e8ae8b911511f7cd067ffc193735121a', 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: '87d2e7e9e1d8cafeac2a38b709f77c6bfe83a96d', 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: "large", 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: 'c61e952aeb210ec0f1df85dcd165a4af9bee2d35' }), this.menuEnabled && (h("div", { key: '6838e9ee79eca023c58236d817524f1f0a0b60a5', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '1b5e7090df7021a145914a77c8bc7388a3218465', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', 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: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', 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: "large", 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: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (h("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -133,8 +133,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The title displayed in the notice."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Analytics Consent\""
+                        }],
+                    "text": "The title displayed in the notice accordion."
                 },
                 "attribute": "title",
                 "reflect": false,
@@ -151,8 +154,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The description displayed in the notice."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"We use anonymous analytics...\""
+                        }],
+                    "text": "The description displayed when the user has not yet opted in to analytics."
                 },
                 "attribute": "description",
                 "reflect": false,
@@ -169,8 +175,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"You are already part of our community...\""
+                        }],
+                    "text": "The description displayed when the user has already opted in to analytics."
                 },
                 "attribute": "opt-out-message",
                 "reflect": false,
@@ -187,8 +196,11 @@ export class EdsMatomoNotice {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "When true, the notice is forced to show regardless of cookies/session."
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, the notice is forced to show regardless of cookies or session storage state.\nUseful for testing or forcing the consent UI."
                 },
                 "attribute": "force-show",
                 "reflect": false,

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.css

@@ -42,30 +42,10 @@ menu {
     letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
-.f-ui-02-light {
-    font-family: var(--f-ui-02-light-fontFamily);
-    font-weight: var(--f-ui-02-light-fontWeight);
-    font-size: var(--f-ui-02-light-fontSize);
-    line-height: var(--f-ui-02-light-lineHeight);
-    letter-spacing: var(--f-ui-02-light-letterSpacing);
-}
-
-.f-ui-03 {
-    font-family: var(--f-ui-03-fontFamily);
-    font-weight: var(--f-ui-03-fontWeight);
-    font-size: var(--f-ui-03-fontSize);
-    line-height: var(--f-ui-03-lineHeight);
-    letter-spacing: var(--f-ui-03-letterSpacing);
-}
-
 .mt-12 {
     margin-top: 0.75rem;
 }
 
-.mt-16 {
-    margin-top: 1rem;
-}
-
 .inline {
     display: inline;
 }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -49,11 +49,9 @@ export class EdsSocialNetworks {
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7bd6202c426d23ded6af47b26e025f2d1b42904a' }, h("p", { key: '0c66f58474ff55cc06bd9f3f15f3deb251c9fb87', class: "f-ui-02" }, this.heading), h("ul", { key: '3e082ae50c77e2d8612b823aa3e474672d65d42f', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("nav", { key: '62692c53f820ff5d6569e42af692063ad8918cdd', "aria-label": "Social media" }, h("p", { key: 'a571612ba3c1b669e0145484bec4d480b17c1979', class: "f-ui-02" }, this.heading), h("ul", { key: 'c0cc02cd5eebf16130f7b09fb8f11319695fdccb', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.stories.js

@@ -4,18 +4,17 @@ export default {
     argTypes: {
         title: {
             control: 'text',
-            defaultValue: 'Follow EBRAINS to keep up-to-date'
+            defaultValue: 'Follow EBRAINS to keep up-to-date',
+            description: 'Custom title to display above the social network links'
         }
     }
 };
 const Template = (args) => `
-    <eds-social-networks title="${args.title}"></eds-social-networks>
-  `;
+  <eds-social-networks
+    title="${args.title}"
+  ></eds-social-networks>
+`;
 export const Default = Template.bind({});
 Default.args = {
     title: 'Follow EBRAINS to keep up-to-date'
 };
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'Stay Connected with EBRAINS!'
-};

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

@@ -1,93 +1,137 @@
 .steps {
-    position: sticky;
-    margin-left: 16px;
-    margin-bottom: 12px;
-    border-left: 1px solid var(--soft-color, #ddd); /* replace var() with your color if needed */
-    padding-left: 23px;
-    counter-reset: step;
-  }
-  
-  /* Style for h3 headings inside the steps */
-  .steps h3 {
-    counter-increment: step;
-    font-size: var(--f-heading-05-fontSize);
-    font-weight: var(--f-heading-05-fontWeight);
-    line-height: var(--f-heading-05-lineHeight);
-    position: relative;
-  }
-  
-  .steps h3::before {
-    content: counter(step);
-    position: absolute;
-    left: -40px;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    font-size: 1rem;
-    border: 1px solid #ccc; /* adjust border style as needed */
-    background:var(--grey-900); /* adjust background color as needed */
-    color: #fff;      /* adjust text color as needed */
-    border-radius: 50%;
-  }
-  
-  /* Style for h4 headings inside the steps */
-  .steps h4 {
-    counter-increment: step;
-    font-size: var(--f-heading-06-fontSize);
-    font-weight: var(--f-heading-06-fontWeight);
-    line-height: var(--f-heading-06-lineHeight);
-    position: relative;
-  }
-  
-  .steps h4::before {
-    content: counter(step);
-    position: absolute;
-    left: -40px;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    font-size: 0.875rem;
-    border: 1px solid #ccc;
-    background: #333;
-    color: #fff;
-    border-radius: 50%;
-  }
-  
-  /* Style for blockquotes inside the steps */
-  .steps blockquote {
-    margin-top: 16px;
-    margin-bottom: 16px;
-    font-style: italic;
-    color: #aaa;
-    padding-left: 6px;
-  }
-
-  .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);
-  }
-
-  .text-light {
-    color: var(--grey-700);
-  }
-  .text-lighter {
-    color: var(--grey-600);
-  }
- 
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .mb-28 {
-    margin-bottom: 1.75rem;
-  }
+  position: sticky;
+  margin-left: 16px;
+  margin-bottom: 12px;
+  border-left: 1px solid var(--soft-color, #ddd);
+  /* replace var() with your color if needed */
+  padding-left: 23px;
+  counter-reset: step;
+}
+
+/* Style for h3 headings inside the steps */
+.steps h3 {
+  counter-increment: step;
+  font-size: var(--f-heading-05-fontSize);
+  font-weight: var(--f-heading-05-fontWeight);
+  line-height: var(--f-heading-05-lineHeight);
+  position: relative;
+}
+
+.steps h3::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  /* adjust border style as needed */
+  background: var(--grey-900);
+  /* adjust background color as needed */
+  color: #fff;
+  /* adjust text color as needed */
+  border-radius: 50%;
+}
+
+/* Style for h4 headings inside the steps */
+.steps h4,
+.steps h5 {
+  counter-increment: step;
+  font-size: var(--f-heading-06-fontSize);
+  font-weight: var(--f-heading-06-fontWeight);
+  line-height: var(--f-heading-06-lineHeight);
+  position: relative;
+}
+
+.steps h4::before,
+.steps h5::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: 0.875rem;
+  border: 1px solid #ccc;
+  background: #333;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/* Style for blockquotes inside the steps */
+.steps blockquote {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-style: italic;
+  color: #aaa;
+  padding-left: 6px;
+}
+
+.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);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+
+.mb-28 {
+  margin-bottom: 1.75rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}