@ebrains/components 2.4.0 → 3.0.0

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

@@ -4,59 +4,209 @@ export default {
     argTypes: {
         message: {
             control: 'text',
-            description: 'The alert message content'
+            description: 'The main alert message text'
         },
         intent: {
-            control: 'select',
-            options: ['default', 'warning', 'error', 'success'],
-            description: 'The intent style of the alert'
+            control: { type: 'select' },
+            options: ['default', 'info', 'warning', 'error', 'success', 'brand'],
+            description: 'Visual intent of the alert'
         },
         direction: {
-            control: 'select',
+            control: { type: 'select' },
             options: ['horizontal', 'vertical'],
-            description: 'The layout direction of the alert content'
+            description: 'Layout direction'
         },
-        brd: {
-            control: 'select',
-            options: ['normal', 'rounded'],
-            description: 'Alert borders style'
+        icon: {
+            control: 'text',
+            description: 'Optional icon name (e.g. information, warning, error, checkmark-filled, rocket). No icon shown by default.'
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Show dismiss button'
         },
         pressableLabel: {
             control: 'text',
-            description: 'Label for the pressable element (if enabled)'
+            description: 'Action element label'
         },
         pressableUrl: {
             control: 'text',
-            description: 'URL for the pressable link (only if pressable is true and URL is provided)'
+            description: 'Action element URL (renders link when provided)'
         }
     },
     args: {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        brd: 'rounded',
-        pressableLabel: 'Click',
-        pressableUrl: 'https://example.com'
+        dismissible: false
     }
 };
 export const Default = {
     render: (args) => `
-    <div class="container">
-      <eds-alert 
-        message="${args.message}" 
-        intent="${args.intent}" 
-        direction="${args.direction}"
-        brd="${args.brd}"
-        pressable-label="${args.pressableLabel}" 
-        pressable-url="${args.pressableUrl}">
-      </eds-alert>
-    </div>`,
+    <eds-alert
+      message="${args.message}"
+      intent="${args.intent}"
+      direction="${args.direction}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      ${args.dismissible ? 'dismissible="true"' : ''}
+      ${args.pressableLabel ? `pressable-label="${args.pressableLabel}"` : ''}
+      ${args.pressableUrl ? `pressable-url="${args.pressableUrl}"` : ''}
+    ></eds-alert>
+  `
+};
+export const Warning = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="warning"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+    ></eds-alert>
+  `,
     args: {
-        message: 'This is an alert message.',
+        message: 'Please review your input before proceeding.',
+        icon: 'warning'
+    }
+};
+export const Error = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="error"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+    ></eds-alert>
+  `,
+    args: {
+        message: 'An error occurred while processing your request.',
+        icon: 'error'
+    }
+};
+export const Success = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="success"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+    ></eds-alert>
+  `,
+    args: {
+        message: 'Your changes have been saved successfully.',
+        icon: 'checkmark-filled'
+    }
+};
+export const Brand = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="brand"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+    ></eds-alert>
+  `,
+    args: {
+        message: 'Welcome to the EBRAINS platform.',
+        icon: 'information'
+    }
+};
+export const WithLink = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="${args.intent}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      pressable-label="Learn more"
+      pressable-url="https://ebrains.eu"
+    ></eds-alert>
+  `,
+    args: {
+        message: 'A new version is available.',
+        intent: 'default'
+    }
+};
+export const WithButton = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="error"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      pressable-label="Retry"
+    ></eds-alert>
+  `,
+    args: {
+        message: 'Failed to load data.',
+        icon: 'error'
+    }
+};
+export const Dismissible = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="warning"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      dismissible="true"
+    ></eds-alert>
+  `,
+    args: {
+        message: 'This alert can be dismissed.',
+        icon: 'warning'
+    }
+};
+export const WithCustomIcon = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="${args.intent}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+    ></eds-alert>
+  `,
+    args: {
+        message: 'Deployment in progress.',
         intent: 'default',
-        direction: 'horizontal',
-        brd: 'rounded',
-        pressableLabel: 'Click',
-        pressableUrl: 'https://example.com'
+        icon: 'rocket'
+    }
+};
+export const NoIcon = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      intent="warning"
+    ></eds-alert>
+  `,
+    args: {
+        message: 'This alert has no icon — just text.'
     }
 };
+export const Vertical = {
+    render: (args) => `
+    <eds-alert
+      message="${args.message}"
+      intent="warning"
+      direction="vertical"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      pressable-label="View details"
+      pressable-url="https://ebrains.eu"
+      dismissible="true"
+    ></eds-alert>
+  `,
+    args: {
+        message: 'Your session will expire in 5 minutes.',
+        icon: 'warning'
+    }
+};
+export const SlotContent = {
+    render: () => `
+    <eds-alert intent="default" icon="information">
+      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
+    </eds-alert>
+  `
+};
+export const AllIntents = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <eds-alert message="Default informational alert." intent="default" icon="information"></eds-alert>
+      <eds-alert message="Warning: please review your input." intent="warning" icon="warning"></eds-alert>
+      <eds-alert message="Error: something went wrong." intent="error" icon="error"></eds-alert>
+      <eds-alert message="Success: operation completed." intent="success" icon="checkmark-filled"></eds-alert>
+      <eds-alert message="Brand: welcome to EBRAINS." intent="brand" icon="information"></eds-alert>
+      <eds-alert message="No icon — just the message." intent="default"></eds-alert>
+    </div>
+  `
+};

package/dist/collection/components/eds-avatar/eds-avatar.css

@@ -122,27 +122,27 @@ abbr:where([title]) {
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-darker {
-    background-color: var(--grey-400);
+    background-color: var(--grey-light);
 }
 
 .bg-stronger {
-    background-color: var(--grey-900);
+    background-color: var(--grey-dark);
 }
 
 .bg-strongest {
-    background-color: var(--black);
+    background-color: var(--brand-black);
 }
 
 .text-accent {
-    color: var(--green-500);
+    color: var(--brand-green);
 }
 
 .text-default {
-    color: var(--black);
+    color: var(--brand-black);
 }
 
 .\!no-underline {

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

@@ -64,7 +64,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '7b5bf31c794c9bbddd2976fdd5a273842a75603a', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '00e163f2dd33c92bdfd8f45b6e2d3384afa32a30', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get is() { return "eds-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-block-break/eds-block-break.css

@@ -3,7 +3,7 @@
 }
 
 .border-default {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 
 .my-16 {

package/dist/collection/components/eds-block-break/eds-block-break.js

@@ -7,7 +7,7 @@ export class EdsBlockBreak {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: 'dd9b98d66f195135ff2fb1374a56d4c670e43d3e', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '7b472ce3dcecc7a0c061d336c4edb1bec098c113', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-breadcrump/eds-breadcrumb.stories.js

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
+            options: ['ghost', 'strong', 'weak', 'inverse', 'underline'],
             description: 'The visual style or intent of the breadcrumb links.',
             defaultValue: 'ghost'
         }

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

@@ -123,7 +123,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '4894fb9e6b37ef84880a62f4dcd3289dcb9cab38', "aria-label": "Breadcrumb" }, h("ol", { key: 'd69405fcee024465d645d9cdbb17189998a94b95', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: 'a068d2deb011c0a303e5a4320f4f5913bfc36d4a', "aria-label": "Breadcrumb" }, h("ol", { key: '63ab81ece8ff48546875320f4fd346638fac3bdc', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -135,7 +135,7 @@ export class EdsBreadcrumb {
                             : this.intent
                     : this.intent;
                 return (h("eds-link", Object.assign({ label: fullLabel, url: item.url, intent: linkIntent, disabled: isLast, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
-            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { name: "chevron-right", class: "w-20 h-20" }))));
         }))));
     }
     static get is() { return "eds-breadcrumb"; }
@@ -179,15 +179,15 @@ export class EdsBreadcrumb {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
-                    "resolved": "\"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "original": "'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
+                    "resolved": "\"ghost\" | \"inverse\" | \"strong\" | \"underline\" | \"weak\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual style or intent of the breadcrumb links.\nOptions include: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.\nDefault is 'ghost'."
+                    "text": "The visual style or intent of the breadcrumb links.\nOptions include: 'ghost', 'strong', 'weak', 'inverse', 'underline'.\nDefault is 'ghost'."
                 },
                 "attribute": "intent",
                 "reflect": false,