@ebrains/components 0.9.3-beta → 1.0.0

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

@@ -1,138 +1,184 @@
 .block {
-    display: block;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline {
-    display: inline;
-  }
-  .flex {
-    display: flex;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }.block {
-    display: block;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline {
-    display: inline;
-  }
-  .flex {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.bg-dark {
+  background-color: var(--grey-300);
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.h-\[85px\] {
+  height: 85px;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hidden {
+  display: none;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.125rem;
+  column-gap: 0.125rem;
+}
+
+.after\:effect-opacity::after {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.\!text-current {
+  color: currentColor !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.after\:\!border-transparent::after {
+  border-color: var(--transparent) !important;
+}
+
+.hover\:after\:\!border-transparent:hover::after {
+  border-color: var(--transparent) !important;
+}
+
+.after\:opacity-0::after {
+  opacity: 0;
+}
+
+.hover\:after\:opacity-100:hover::after {
+  opacity: 1;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 750px) {
+  .md\:flex {
     display: flex;
   }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .relative {
-    position: relative;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .mr-auto {
-    margin-right: auto;
-  }
-  .w-\[200px\] {
-    width: 200px;
-  }
-  .h-\[85px\] {
-    height: 85px;
-  }
-  .left-1\/2 {
-    left: 50%;
-  }
-  .top-1\/2 {
-    top: 50%;
-  }
-  .grow {
-    flex-grow: 1;
-  }
-  .-translate-x-1\/2 {
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .-translate-y-1\/2 {
-    --tw-translate-y: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-  .hidden {
+
+  .md\:hidden {
     display: none;
   }
-  .gap-x-2 {
-    -moz-column-gap: 0.125rem;
-         column-gap: 0.125rem;
-  }
-  .after\:effect-opacity::after {
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .\!text-current {
-    color: currentColor !important;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .after\:\!border-transparent::after {
-    border-color: var(--transparent) !important;
-  }
-  .hover\:after\:\!border-transparent:hover::after {
-    border-color: var(--transparent) !important;
-  }
-  .after\:opacity-0::after {
-    opacity: 0;
-  }
-  .hover\:after\:opacity-100:hover::after {
-    opacity: 1;
-  }
-  .px-16 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  @media (min-width: 750px) {
-    .md\:flex {
-      display: flex;
-    }
-    .md\:hidden {
-      display: none;
-    }
 }

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

@@ -17,7 +17,7 @@ export class EdsHeader {
     constructor() {
         this.homeUrl = '/';
         this.links = undefined;
-        this.inverseHeader = false;
+        this.headerVariant = 'default';
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
@@ -27,55 +27,36 @@ export class EdsHeader {
         var _a;
         this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-     */
     componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
         const links = this.hostEl.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
+        links.forEach((link) => this.emitContext(link));
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.hostEl.tagName.toLowerCase(),
-                identifier: null
-            }
+            detail: { componentName: this.hostEl.tagName.toLowerCase(), identifier: null }
         });
         linkElement.dispatchEvent(event);
     }
-    /** Emits an event to open or close the menu */
     handleToggleMenu() {
         this.toggleheadermenu.emit(!this.isMenuOpen);
     }
-    /**
-     * Toggles the visibility of the user menu.
-     * Opens the user menu if closed, and closes it if open.
-     */
     toggleUserMenu() {
         this.isUserMenuOpen = !this.isUserMenuOpen;
     }
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
     get parsedLinks() {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: 'a0679671c9ed9659fb8393f69dcf1b902ab9f25f', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '115780a93b21d638cb7abf32ed365966bf4c0a6e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'e0dfbb999e87178c1992c692edd791fbe239886b', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '283bab0cfd25a47ffc7007bf24a98dbc3c138d2d', 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: 'fb2fa5863a04869a9922218ac13d287e7120afd8', 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: 'c5d15841fc49af502fea717dbc36d81721d7688d' }), 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));
+        // Define classes based on headerVariant
+        const variantClasses = {
+            default: 'text-default bg-dark',
+            inverse: 'text-default bg-inverse',
+            strong: 'text-inverse bg-strongest'
+        };
+        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: '3c6ae4789993e140ee8a00e7f32c8ff3a2793b87', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'a406f073ae110622ad8930c61438b46d16553362', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '19c91de446b76f76e97f160c0af538db2637ffdc', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '921c87b668b25abc8117014880c9669a96c04122', 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: 'b0de4a0eaafb7409eeedc77104b39fed8a55441b', 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: '2b3d292703b8b7083a7ae1dcfbefbd091d5a744b' }), this.menuEnabled && (h("div", { key: '10d16f0f0ecdc450acf900dd8d7d7b439deb8dcd', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '2e62e0a57bf008d0e566988011beab9a09f7774d', "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"; }
@@ -126,23 +107,23 @@ export class EdsHeader {
                 "attribute": "links",
                 "reflect": false
             },
-            "inverseHeader": {
-                "type": "boolean",
+            "headerVariant": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'default' | 'inverse' | 'strong'",
+                    "resolved": "\"default\" | \"inverse\" | \"strong\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the header is rendered in inverse style.\nWhen true, the header applies styles suitable for a dark background."
+                    "text": "Header style variant: determines text and background colors.\n- \"default\": text-default on bg-dark\n- \"inverse\": text-default on bg-inverse\n- \"strong\": text-inverse on bg-strongest"
                 },
-                "attribute": "inverse-header",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "header-variant",
+                "reflect": true,
+                "defaultValue": "'default'"
             },
             "menuEnabled": {
                 "type": "boolean",

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

@@ -14,9 +14,10 @@ export default {
             control: 'boolean',
             description: 'Shows/hides burger menu on small screens.'
         },
-        inverseHeader: {
-            control: 'boolean',
-            description: 'Determines if the header is rendered in inverse style (dark background).'
+        headerVariant: {
+            control: { type: 'select' },
+            options: ['default', 'inverse', 'strong'],
+            description: 'The header variant'
         }
     },
     args: {
@@ -28,7 +29,7 @@ export default {
             { label: 'Contact', url: '#' }
         ],
         menuEnabled: false,
-        inverseHeader: false
+        headerVariant: 'default'
     }
 };
 export const Default = (args) => `
@@ -36,6 +37,6 @@ export const Default = (args) => `
       home-url="${args.homeUrl}"
       links='${JSON.stringify(args.links)}'
       menu-enabled="${args.menuEnabled}"
-      inverse-header="${args.inverseHeader}"
+      header-variant="${args.headerVariant}"
     ></eds-header>
   `;

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

@@ -86,14 +86,16 @@ export class EdsMatomoNotice {
         this.consent.emit('out');
     }
     noThanks() {
+        matomoOptOut();
         localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
         this.hideNotice();
+        this.consent.emit('out');
     }
-    deferDecision() {
-        sessionStorage.setItem(this.getStorageKey(), 'true');
-        this.hideNotice();
-        this.consent.emit('defer');
-    }
+    /*private deferDecision() {
+      sessionStorage.setItem(this.getStorageKey(), 'true');
+      this.hideNotice();
+      this.consent.emit('defer');
+    }*/
     keepMeIn() {
         this.hideNotice();
     }
@@ -104,7 +106,7 @@ export class EdsMatomoNotice {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
+        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     static get is() { return "eds-matomo-notice"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,6 +18,7 @@ export default {
 };
 export const Default = {
     render: (args) => `
+      <eds-alert message="The component checks whether the <code>mtm_consent</code> cookie exists; if it doesn’t, the notice is displayed—otherwise, deleted the cookie from your browser and refresh the page."></eds-alert>
       <eds-matomo-notice 
         title="${args.title}" 
         description="${args.description}">

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

@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: 'f78431d66b849abfd16c60fc42d341e50fa38c47' }, h("p", { key: '1f905e5bb56695352d1da528862f597bdaa66933', class: "f-ui-02" }, this.heading), h("ul", { key: 'b281b99744549c8f2b941e10ce9b239df2ef6b63', 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("div", { key: '49661af4c05520403c4801e447c730b971e0096f' }, h("p", { key: '22fc89817969a9e7059335b43f8e7b6cc2d095f7', class: "f-ui-02" }, this.heading), h("ul", { key: '90c04408db4f9d58a5ee4834f8fcfde88aede8ee', 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" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/{components → shared-ui}/eds-steps/eds-steps.css

@@ -68,13 +68,6 @@
     padding-left: 6px;
   }
 
-  .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);
@@ -82,44 +75,18 @@
     line-height: var(--f-body-02-lineHeight);
     letter-spacing: var(--f-body-02-letterSpacing);
   }
-  .f-ui-01 {
-    font-family: var(--f-ui-01-fontFamily);
-    font-weight: var(--f-ui-01-fontWeight);
-    font-size: var(--f-ui-01-fontSize);
-    line-height: var(--f-ui-01-lineHeight);
-    letter-spacing: var(--f-ui-01-letterSpacing);
-  }
-  
-  .text-default {
-    color: var(--black);
-  }
-  .text-error {
-    color: var(--red-700);
-  }
-  .text-extra-light {
-    color: var(--grey-300);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
+
   .text-light {
     color: var(--grey-700);
   }
   .text-lighter {
     color: var(--grey-600);
   }
-  .text-lightest {
-    color: var(--grey-500);
-  }
-
+ 
   .my-16 {
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
-  .my-20 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-  }
 
   .mb-28 {
     margin-bottom: 1.75rem;

package/dist/collection/{components → shared-ui}/eds-steps/eds-steps.js

@@ -102,8 +102,8 @@ export class EdsSteps {
                     "references": {
                         "Step": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
-                            "id": "../../../packages/components/src/components/eds-steps/eds-steps.tsx::Step"
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/shared-ui/eds-steps/eds-steps.tsx",
+                            "id": "../../../packages/components/src/shared-ui/eds-steps/eds-steps.tsx::Step"
                         }
                     }
                 },

package/dist/collection/{components → shared-ui}/eds-steps/eds-steps.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Components/Steps',
+    title: 'Shared Ui/Steps',
     component: 'eds-steps',
     argTypes: {
         type: {