@ebrains/components 2.0.0 → 2.2.0

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

@@ -180,12 +180,34 @@ export class EdsLink {
             action: 'click'
         });
     }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Handle Enter and Space keys for activation
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick(event);
+            // For actual navigation, trigger the native link behavior
+            if (this.url && !this.disabled) {
+                if (this.external) {
+                    window.open(this.url, '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    window.location.href = this.url;
+                }
+            }
+        }
+    }
     getLinkSize() {
+        if (this.intent === 'underline') {
+            return 'underline';
+        }
         return this.size;
     }
     renderLeftIcon() {
         if (this.icon && this.iconPos === 'left') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -194,7 +216,7 @@ export class EdsLink {
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -202,8 +224,6 @@ export class EdsLink {
         return null;
     }
     render() {
-        // If the link is disabled, use a <span>; otherwise, use an <a> element.
-        const ComponentType = this.disabled ? 'span' : 'a';
         const classes = linkStyles({
             intent: this.intent,
             size: this.getLinkSize(),
@@ -211,12 +231,12 @@ export class EdsLink {
             isActive: this.current,
             hasIcon: !!this.icon
         });
-        // If no visible label is provided, ensure ariaLabel is set.
-        const computedAriaLabel = this.ariaLabel || this.label || 'link';
+        const isInteractive = !this.disabled;
+        const isIconOnly = !this.label || (this.hideLabelOnSmallScreen && this.icon);
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '19e7d05290f3dda2cc4e821c5625f7dd82198dcd', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '36ce6891c07cf6e37acef3e6fecd3e96bcaa0312', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '2455011e19a98939aec59768f09ae310ad03692b', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: 'bc82c9ea21f98ed71c812c8366ba8368c3ac5bf4', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'eed89377d27a476a7d7e70a8c40f3100b8089a0b', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'c6d09f0c54e092e53350014d6d89b67c35a8be71', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,7 @@ export default {
 };
 export const Default = {
     render: (args) => `
+   <div class="text-center">
     <eds-link
       label="${args.label}"
       intent="${args.intent}"
@@ -77,7 +78,8 @@ export const Default = {
       url="${args.url}"
       aria-label="${args.ariaLabel}"
       download="${args.download}">
-    </eds-link>`,
+    </eds-link>
+  </div>`,
     args: {
         label: 'Click Me',
         intent: 'primary',

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

@@ -76,7 +76,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '717ea23a3d9156fd59abb808c3175194b6973d6b', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '794768d57ee14767a0475d949c24fafaa28bc924', innerHTML: logoContent })));
+        return (h("a", { key: 'e5c4e4701d698282dc85561c8c434f0790fb2401', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '32cc8649fe67b6c4a874b5c1aaa6d4d793b4c4c7', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,9 +121,9 @@ export class EdsModal {
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: 'b2b2c3a433049b28ec58dd7ebd0c074597c9e5d4', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '839115c4261e68289410b1a3e30eb28597cdae9e', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '29700a7b84c8728c11232aaaa526638dc6cd3156', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '0cc973541fcde90a0b69a8d3b8a95e54d987fd7d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'ffb82ca6bf618a842e5c6c5783caccac0b538f3d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8bd4b17956d04772ba690fce563aa929195cd3d0', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: 'dcbdb579245e406d2fc4e4a44fb1828625e1e7aa', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '533c582543fa09ff1d7a7a8a1d1b608eb02d5c72', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '8d95e7649c535da3ddb4de5646579f12341a9e10', class: "pt-8 px-20 py-20" }, h("slot", { key: '7b9678ff3cedbef291ea8dea53ef30a96237a60c' })))));
+            onClick: () => this.close() })), h("div", { key: 'd69445a547c27fccc868bee1dae9537e3e4c9d68', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'e4d3ddcadf49051ebb0fe5c1d12d40f8992a5549', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6a9e5c1cb187e4684b267859f2150f485d6fcced', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '7c9cd571b76cc87e13f9b153c4d24844b40e47c7', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '150e61106d25a1a0ecf470abf14ac5c5ba836b64', class: "pt-8 px-20 py-20" }, h("slot", { key: '30100f97aa7504023e43b51fc9bebad20097b480' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-nps/eds-npm.stories.js

@@ -0,0 +1,36 @@
+// eds-nps.stories.ts
+export default {
+    title: 'Components/NPS',
+    component: 'eds-nps',
+    argTypes: {
+        question: {
+            control: 'text',
+            description: 'The question prompt for the NPS scale.'
+        },
+        leftLabel: {
+            control: 'text',
+            description: 'Label displayed under the minimum value.'
+        },
+        rightLabel: {
+            control: 'text',
+            description: 'Label displayed under the maximum value.'
+        }
+    },
+    args: {
+        question: 'How likely are you to recommend us to a friend or colleague?',
+        leftLabel: '0 - Not at all likely',
+        rightLabel: '10 - Extremely likely'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-nps
+      question="${args.question}"
+      left-label="${args.leftLabel}"
+      right-label="${args.rightLabel}"
+    ></eds-nps>
+  `,
+    args: {
+    // you can override defaults here if you like
+    }
+};

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

@@ -0,0 +1,73 @@
+.flex {
+  display: flex;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.mt-4 {
+  margin-top: 0.25rem;
+}
+.mt-8 {
+  margin-top: 0.5rem;
+}
+.ml-4 {
+  margin-left: 0.25rem;
+}
+.mr-4 {
+  margin-right: 0.25rem;
+}
+.grid {
+  display: grid;
+}
+.grid-col-span-1 {
+  --container-grid-columns: 1;
+  grid-column: span 1 / span 1;
+}
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.grid-cols-11[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-11[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+11)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+11)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+11)::after {
+  top: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {
+  bottom: 0;
+}
+.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);
+}
+.text-light {
+  color: var(--grey-700);
+}

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

@@ -0,0 +1,163 @@
+import { h } from "@stencil/core";
+export class EdsNps {
+    constructor() {
+        this.min = 0;
+        this.max = 10;
+        this.question = undefined;
+        this.leftLabel = undefined;
+        this.rightLabel = undefined;
+        this.selectedValue = null;
+    }
+    handleClick(value) {
+        this.selectedValue = value;
+        this.nps.emit(value);
+    }
+    handleKeyNav(e) {
+        const radios = Array.from(this.el.shadowRoot.querySelectorAll('eds-button'));
+        const currentIndex = radios.findIndex((r) => r.tabIndex === 0);
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowLeft': {
+                e.preventDefault();
+                const delta = e.key === 'ArrowRight' ? 1 : -1;
+                const nextIndex = Math.min(this.max, Math.max(0, currentIndex + delta));
+                this.activateRadio(radios, nextIndex);
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                this.activateRadio(radios, 0);
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                this.activateRadio(radios, this.max);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                if (currentIndex >= 0) {
+                    this.handleClick(this.min + currentIndex);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                if (currentIndex >= 0) {
+                    radios[currentIndex].blur();
+                }
+                break;
+            }
+            default:
+                return;
+        }
+    }
+    activateRadio(radios, index) {
+        const target = radios[index];
+        const value = this.min + index;
+        this.handleClick(value);
+        target.focus();
+    }
+    render() {
+        const count = this.max - this.min + 1;
+        //onst fallback = 0;
+        return (h("div", { key: '3831baab086cbf44a3d1511885f15bbab23c9cd2', class: "eds-nps" }, h("eds-input-label", { key: 'f9bd8a812d1b65a634dfaa7aae704218dc79468c', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '398f5225c5b4071c2570a74a9e642f5059bb7813', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+            const val = this.min + i;
+            const isSelected = val === this.selectedValue;
+            const tabIndex = isSelected ? 0 : -1;
+            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
+        })), h("div", { key: '0acafaae3f2ce522ffbc245c5733ca509d4bf3c1', class: "flex justify-between mt-8" }, h("span", { key: '001e0be00b07ae2e831ea6af0c577a5eeecb9a56', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '99a12d89ea577fb2bb9c34241a2b9f0f254c284a', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+    }
+    static get is() { return "eds-nps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-nps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-nps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "question": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The question prompt for the NPS scale."
+                },
+                "attribute": "question",
+                "reflect": false
+            },
+            "leftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed under the min value."
+                },
+                "attribute": "left-label",
+                "reflect": false
+            },
+            "rightLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed under the max value."
+                },
+                "attribute": "right-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nps",
+                "name": "nps",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the NPS value changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -37,6 +37,10 @@ menu {
   letter-spacing: var(--f-ui-02-light-letterSpacing);
 }
 
+.text-light {
+  color: var(--grey-700);
+}
+
 .text-lightest {
   color: var(--grey-500);
 }
@@ -137,6 +141,18 @@ menu {
   transition-duration: 150ms;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 @media (min-width: 900px) {
   .lg\:\!pr-12 {
     padding-right: 0.75rem !important;