@ebrains/components 2.4.0 → 3.0.0

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

@@ -1,3 +1,10 @@
+/* ─── Host ─── */
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ─── Reset ─── */
 *,
 ::before,
 ::after {
@@ -11,7 +18,16 @@ p {
   margin: 0;
 }
 
-.f-ui-01 {
+/* ─── Base card ─── */
+.alert-card {
+  position: relative;
+  border-radius: 16px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
   font-family: var(--f-ui-01-fontFamily);
   font-weight: var(--f-ui-01-fontWeight);
   font-size: var(--f-ui-01-fontSize);
@@ -19,147 +35,158 @@ p {
   letter-spacing: var(--f-ui-01-letterSpacing);
 }
 
-.border-inside {
-  position: relative;
-
-  &::after {
-    pointer-events: none;
-  }
-
-  &::after {
-    position: absolute;
-  }
-
-  &::after {
-    inset: 0rem;
-  }
-
-  &::after {
-    z-index: 1;
-  }
-
-  &::after {
-    border-radius: 8px;
-  }
-
-  &::after {
-    border-width: 1px;
-  }
-
-  &::after {
-    border-width: 2px;
-  }
+/* ─── Left accent border ─── */
+.alert-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+}
 
-  &::after {
-    border-color: rgba(0, 0, 0, .1);
-  }
+/* ─── Default intent ─── */
+.alert-default {
+  background-color: var(--grey-light);
+  color: var(--brand-black);
+}
 
-  &::after {
-    content: '';
-  }
+.alert-default::before {
+  background-color: var(--grey-dark);
 }
 
-.flex {
-  display: flex;
+.alert-default .alert-icon {
+  color: var(--grey-dark);
 }
 
-.w-full {
-  width: 100%;
+/* ─── Warning intent ─── */
+.alert-warning {
+  background-color: var(--yellow-200);
+  color: var(--brand-black);
 }
 
-.flex-row {
-  flex-direction: row;
+.alert-warning::before {
+  background-color: var(--yellow-600);
 }
 
-.items-center {
-  align-items: center;
+.alert-warning .alert-icon {
+  color: var(--yellow-600);
 }
 
-.justify-between {
-  justify-content: space-between;
+/* ─── Error intent ─── */
+.alert-error {
+  background-color: var(--red-200);
+  color: var(--brand-black);
 }
 
-.gap-x-12 {
-  -moz-column-gap: 0.75rem;
-  column-gap: 0.75rem;
+.alert-error::before {
+  background-color: var(--red-600);
 }
 
-.space-y-12> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+.alert-error .alert-icon {
+  color: var(--red-600);
 }
 
-.rounded-lg {
-  border-radius: 16px;
+/* ─── Success intent ─── */
+.alert-success {
+  background-color: var(--brand-green);
+  color: var(--brand-black);
 }
 
-.bg-dark {
-  background-color: var(--grey-300);
+.alert-success::before {
+  background-color: var(--green-700);
 }
 
-.bg-error {
-  background-color: var(--red-200);
+.alert-success .alert-icon {
+  color: var(--green-700);
 }
 
-.bg-success {
-  background-color: var(--green-200);
+/* ─── Brand intent ─── */
+.alert-brand {
+  background-color: var(--brand-black);
+  color: var(--brand-green);
 }
 
-.bg-warning {
-  background-color: var(--yellow-200);
+.alert-brand::before {
+  background-color: var(--brand-green);
 }
 
-.p-16 {
-  padding: 1rem;
+.alert-brand .alert-icon {
+  color: var(--brand-green);
 }
 
-.p-20 {
-  padding: 1.25rem;
+.alert-brand .alert-dismiss {
+  color: var(--brand-green);
 }
 
-.px-12 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+/* ─── Direction variants ─── */
+.alert-horizontal {
+  flex-direction: row;
+  align-items: center;
 }
 
-.px-20 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.alert-vertical {
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.py-12 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+/* ─── Icon ─── */
+.alert-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.py-20 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+/* ─── Body (message) ─── */
+.alert-body {
+  flex: 1;
+  min-width: 0;
 }
 
-.py-8 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.alert-message {
+  margin: 0;
 }
 
-.pr-12 {
-  padding-right: 0.75rem;
+/* ─── Action (link/button) ─── */
+.alert-action {
+  flex-shrink: 0;
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+/* ─── Dismiss button ─── */
+.alert-dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 8px;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
-[class*=underline-] {
-  text-decoration-line: underline;
+.alert-dismiss:hover {
+  opacity: 1;
 }
 
-.after\:rounded-lg::after {
-  border-radius: 16px;
+.alert-dismiss:focus-visible {
+  outline: 2px solid var(--brand-green);
+  outline-offset: 2px;
 }
 
-.after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05);
-}
+/* ─── Responsive ─── */
+@media (max-width: 768px) {
+  .alert-card {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .alert-horizontal {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

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

@@ -1,65 +1,13 @@
 import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
-const alertStyles = cva(['w-full bg-dark'], {
-    variants: {
-        intent: {
-            default: '',
-            warning: 'bg-warning',
-            error: 'bg-error',
-            success: 'bg-success'
-        },
-        brd: {
-            rounded: 'rounded-lg border-inside after:border-softest after:rounded-lg',
-            normal: ''
-        },
-        direction: {
-            vertical: 'space-y-12',
-            horizontal: 'flex flex-row items-center justify-between gap-x-12'
-        },
-        withBtn: {
-            false: '',
-            true: ''
-        }
-    },
-    compoundVariants: [
-        {
-            direction: 'horizontal',
-            withBtn: true,
-            class: 'px-20 pr-12 py-12'
-        },
-        {
-            direction: 'horizontal',
-            withBtn: false,
-            class: 'p-20'
-        },
-        {
-            direction: 'vertical',
-            withBtn: true,
-            class: 'p-16'
-        },
-        {
-            direction: 'vertical',
-            withBtn: false,
-            class: 'px-12 py-20'
-        }
-    ],
-    defaultVariants: {
-        intent: 'default',
-        brd: 'rounded',
-        direction: 'horizontal'
-    }
-});
 /**
- * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
- * This component offers various configuration options to support different use cases, making it ideal for notifying users of information, warnings, errors, or successes.
- *
- * Key features include:
- * - Customizable alert message with different visual intents (`default`, `warning`, `error`, `success`).
- * - Configurable layout direction (`horizontal` or `vertical`) to accommodate various design requirements.
- * - Optional pressable element (link or button) that allows users to interact with the alert.
- * - Emits context events to allow parent components to track alert interactions.
+ * `EdsAlert` is a versatile alert component for displaying contextual messages.
  *
- * This component is styled with predefined CSS classes to ensure consistent appearance across different alert types and layout configurations.
+ * Key features:
+ * - Contextual intents (`default`, `info`, `warning`, `error`, `success`) with matching icons and accent colors
+ * - Configurable layout direction (`horizontal` or `vertical`)
+ * - Optional action element (link when URL provided, ghost button otherwise)
+ * - Optional dismiss button to close the alert
+ * - Left accent border colored per intent
  */
 export class EdsAlert {
     constructor() {
@@ -68,46 +16,38 @@ export class EdsAlert {
         this.pressableUrl = undefined;
         this.direction = 'horizontal';
         this.intent = 'default';
-        this.brd = 'rounded';
+        this.icon = undefined;
+        this.dismissible = false;
         this.withBtn = false;
+        this.dismissed = false;
     }
     componentWillLoad() {
         this.withBtn = Boolean(this.pressableLabel);
     }
-    componentDidLoad() {
-        // Focus the alert container for immediate screen reader announcement
-        /*if (this.intent === 'error' || this.intent === 'warning') {
-          this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
-          (this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
-        }*/
-        var _a;
-        // Query for the 'eds-link' element inside the shadow root.
-        const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
-        if (lnk) {
-            this.emitContext(lnk);
-        }
+    onPressableLabelChange(newVal) {
+        this.withBtn = Boolean(newVal);
     }
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
+    /** Normalize 'info' → 'default' */
+    get normalizedIntent() {
+        return this.intent === 'info' ? 'default' : this.intent;
+    }
+    /** Get the icon to display, or null if none provided */
+    get intentIcon() {
+        return this.icon || null;
     }
     handleAction() {
-        // Emit the alertAction event for parent components to handle
         this.edsalert.emit();
     }
+    handleDismiss() {
+        this.dismissed = true;
+        this.edsDismiss.emit();
+    }
     render() {
-        const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
-        return (h("div", { key: 'd8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a', class: alertStyles({
-                intent: this.intent,
-                brd: this.brd,
-                direction: this.direction,
-                withBtn: this.withBtn
-            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: '179862c141a2ce05fa9f8562be7e64196baa3922', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '3677358bd563a3e2ee1b74309dc4fb6c84ac475f', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
+        if (this.dismissed)
+            return null;
+        const intent = this.normalizedIntent;
+        const ariaLabel = intent !== 'default' ? `${intent} alert` : 'alert';
+        return (h("div", { class: `alert-card alert-${intent} alert-${this.direction}`, role: "alert", "aria-label": ariaLabel, "aria-live": intent === 'error' || intent === 'warning' ? 'assertive' : 'polite' }, this.intentIcon && (h("div", { class: "alert-icon" }, h("eds-icon-wrapper", { name: this.intentIcon, size: 20 }))), h("div", { class: "alert-body" }, this.message ? (h("p", { class: "alert-message" }, this.message)) : (h("div", { class: "alert-message" }, h("slot", null)))), this.withBtn && (h("div", { class: "alert-action" }, this.pressableUrl ? (h("eds-link", { label: this.pressableLabel, url: this.pressableUrl, intent: "strong" })) : (h("eds-button", { label: this.pressableLabel, intent: "ghost", onClick: () => this.handleAction() })))), this.dismissible && (h("button", { class: "alert-dismiss", onClick: () => this.handleDismiss(), "aria-label": "Dismiss alert" }, h("eds-icon-wrapper", { name: "close", size: 20 })))));
     }
     static get is() { return "eds-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -131,11 +71,11 @@ export class EdsAlert {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The main message or text to be displayed in the alert."
+                    "text": "The main message or text to be displayed in the alert.\nIf not provided, slot content will be used instead."
                 },
                 "attribute": "message",
                 "reflect": false
@@ -152,7 +92,7 @@ export class EdsAlert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether the alert includes a pressable element, such as a button or link."
+                    "text": "Label for the action element (link or button)."
                 },
                 "attribute": "pressable-label",
                 "reflect": false
@@ -169,7 +109,7 @@ export class EdsAlert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The URL for the pressable element if it is a link."
+                    "text": "URL for the action element. When provided, renders a link instead of a button."
                 },
                 "attribute": "pressable-url",
                 "reflect": false
@@ -186,7 +126,7 @@ export class EdsAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The layout direction of the alert content, either 'horizontal' or 'vertical'."
+                    "text": "The layout direction of the alert content."
                 },
                 "attribute": "direction",
                 "reflect": false,
@@ -196,43 +136,67 @@ export class EdsAlert {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'warning' | 'error' | 'success'",
-                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "original": "'default' | 'info' | 'warning' | 'error' | 'success' | 'brand'",
+                    "resolved": "\"brand\" | \"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual intent or style of the alert, indicating the alert type."
+                    "text": "The visual intent of the alert. 'info' is an alias for 'default'."
                 },
                 "attribute": "intent",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
-            "brd": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'rounded' | 'normal'",
-                    "resolved": "\"normal\" | \"rounded\"",
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon override. When not set, an icon matching the intent is shown automatically."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The border style of the alert. Defaults to \"rounded\" (rounded borders).\nSet to \"normal\" to have non-rounded (square) borders."
+                    "text": "When true, shows a close button to dismiss the alert."
                 },
-                "attribute": "brd",
+                "attribute": "dismissible",
                 "reflect": false,
-                "defaultValue": "'rounded'"
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "withBtn": {}
+            "withBtn": {},
+            "dismissed": {}
         };
     }
     static get events() {
@@ -251,7 +215,28 @@ export class EdsAlert {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "edsDismiss",
+                "name": "edsDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "pressableLabel",
+                "methodName": "onPressableLabelChange"
+            }];
+    }
 }