@ebrains/components 2.4.1 → 3.1.0

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

@@ -1,3 +1,7 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Link',
     component: 'eds-link',
@@ -8,12 +12,13 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline', 'blueish'],
+            options: ['primary', 'secondary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
             description: 'The intent style of the link'
         },
         icon: {
-            control: 'text',
-            description: 'The icon to be displayed next to the label'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'The icon to be displayed next to the label (from the EDS icon set)'
         },
         iconSmall: {
             control: 'boolean',
@@ -24,6 +29,10 @@ export default {
             options: ['small', 'large'],
             description: 'The size of the link'
         },
+        pill: {
+            control: 'boolean',
+            description: 'If true, renders the link with a pill (fully rounded) shape'
+        },
         external: {
             control: 'boolean',
             description: 'If true, marks the link as external'
@@ -40,10 +49,6 @@ export default {
             control: 'text',
             description: 'The URL for the link'
         },
-        ariaLabel: {
-            control: 'text',
-            description: 'ARIA label for accessibility'
-        },
         download: {
             control: 'boolean',
             description: 'If true, adds the download attribute to the link'
@@ -51,15 +56,15 @@ export default {
     },
     args: {
         label: 'Click Me',
-        intent: 'primary',
+        intent: 'underline',
         size: 'large',
-        icon: '',
+        icon: 'arrow-right',
         iconSmall: false,
+        pill: true,
         external: false,
         current: false,
         disabled: false,
         url: 'https://example.com',
-        ariaLabel: 'Link to example',
         download: false
     }
 };
@@ -72,11 +77,11 @@ export const Default = {
       size="${args.size}"
       icon="${args.icon}"
       icon-small="${args.iconSmall}"
+      pill="${args.pill}"
       external="${args.external}"
       current="${args.current}"
       disabled="${args.disabled}"
       url="${args.url}"
-      aria-label="${args.ariaLabel}"
       download="${args.download}">
     </eds-link>
   </div>`,

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

@@ -39,7 +39,9 @@
 .justify-between {
   justify-content: space-between;
 }
-
+.p-\[24px\] {
+  padding: 24px;
+}
 @media (min-width: 900px) {
   .lg\:w-\[150px\] {
     width: 150px;

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { hLogoColor, hLogoBlack, hLogoColorWhite, hLogoWhite, vLogoBlack, vLogoColor, vLogoColorWhite, vLogoWhite, vLogoWhiteNoBg, hLogoWhiteNoBg } from "../../../../../../../packages/svgs/src/index";
+import { logoNegative, logoPositive } from "../../../../../../../packages/svgs/src/index";
 import { sendAnalytics } from "../../utils/analytics";
 /**
  * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
@@ -22,7 +22,7 @@ export class EdsLogo {
     constructor() {
         this.href = '/';
         this.orientation = 'horizontal';
-        this.type = undefined;
+        this.variant = 'positive';
         this.label = 'Home';
     }
     /**
@@ -45,38 +45,14 @@ export class EdsLogo {
      * Determines the appropriate SVG content based on the `orientation` and `type` props.
      */
     getLogo() {
-        const logos = {
-            horizontal: {
-                color: hLogoColor,
-                black: hLogoBlack,
-                'color-white': hLogoColorWhite,
-                white: hLogoWhite,
-                'no-bg': hLogoWhiteNoBg
-            },
-            vertical: {
-                color: vLogoColor,
-                black: vLogoBlack,
-                'color-white': vLogoColorWhite,
-                white: vLogoWhite,
-                'no-bg': vLogoWhiteNoBg
-            }
-        };
-        // Validate the orientation and type
-        const validOrientation = logos[this.orientation];
-        if (!validOrientation) {
-            //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
-            return hLogoColor; // Default fallback logo
+        if (this.variant == 'negative') {
+            return logoNegative;
         }
-        const validLogo = validOrientation[this.type];
-        if (!validLogo) {
-            //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
-            return validOrientation['color']; // Fallback to color logo
-        }
-        return validLogo;
+        return logoPositive;
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '0a0d4dd69a1af10c1c571a56ed0f698d95652405', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d8ca0f9c647b3b12daf944b9c2919a93134bec2', innerHTML: logoContent })));
+        return (h("a", { key: '3f8257c9481079f011278b114e13effe9057d823', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '4dac45a1a0c38c6e1613995aad2005b41acac775', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -128,22 +104,23 @@ export class EdsLogo {
                 "reflect": false,
                 "defaultValue": "'horizontal'"
             },
-            "type": {
+            "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'color' | 'black' | 'color-white' | 'white' | 'no-bg'",
-                    "resolved": "\"black\" | \"color\" | \"color-white\" | \"no-bg\" | \"white\"",
+                    "original": "'positive' | 'negative'",
+                    "resolved": "\"negative\" | \"positive\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The type of the logo.\n`'color' | 'black' | 'color-white' | 'white'`"
+                    "text": "The visual variant of the logo.\n`'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds."
                 },
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'positive'"
             },
             "label": {
                 "type": "string",

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

@@ -1,38 +1,21 @@
 export default {
     title: 'Components/Logo',
     component: 'eds-logo',
-    argTypes: {
-        href: {
-            control: 'text',
-            defaultValue: 'https://ebrains.eu',
-            description: 'The URL that the logo should link to.'
-        },
-        orientation: {
-            control: 'select',
-            options: ['horizontal', 'vertical'],
-            defaultValue: 'horizontal',
-            description: 'The orientation of the logo to display.'
-        },
-        type: {
-            control: 'select',
-            options: ['color', 'black', 'color-white', 'white'],
-            defaultValue: 'color',
-            description: 'The style of the logo.'
-        }
-    }
+    argTypes: {}
 };
-const Template = ({ href, orientation, type }) => `
-<div class="mr-auto w-[300px]">
+const Template = () => `
+<div class="bg-dark mr-auto w-[300px]">
   <eds-logo 
-    href="${href}" 
-    orientation="${orientation}" 
-    type="${type}">
+     href="https://ebrains.eu"  
+    type="positive">
+  </eds-logo>
+</div> 
+<div class="bg-strongest mr-auto w-[300px]">
+  <eds-logo 
+    href="https://ebrains.eu" 
+    type="negative">
   </eds-logo>
 </div>  
 `;
 export const Default = Template.bind({});
-Default.args = {
-    href: 'https://ebrains.eu',
-    orientation: 'horizontal',
-    type: 'color'
-};
+Default.args = {};

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

@@ -1,3 +1,36 @@
+/* Modal visibility - simple without jarring animations */
+.modal-open {
+    display: flex;
+}
+
+.modal-closed {
+    display: none;
+}
+
+.modal-backdrop {
+    /* No transition - instant appearance */
+}
+
+.backdrop-visible {
+    opacity: 0.9;
+}
+
+.backdrop-hidden {
+    opacity: 0;
+}
+
+.modal-content {
+    /* No transition on positioning to avoid jumping */
+}
+
+.modal-content-visible {
+    opacity: 1;
+}
+
+.modal-content-hidden {
+    opacity: 0;
+}
+
 .block {
     display: block;
 }
@@ -14,6 +47,10 @@
     display: flex;
 }
 
+.flex-col {
+    flex-direction: column;
+}
+
 .inline-flex {
     display: inline-flex;
 }
@@ -72,12 +109,21 @@
     padding-bottom: 1.25rem;
 }
 
+.py-24 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.leading-normal {
+    line-height: 1.5;
+}
+
 .bg-inverse {
     background-color: var(--white);
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .rounded-lg {
@@ -124,6 +170,10 @@
     top: 0rem;
 }
 
+.top-16 {
+    top: 1rem;
+}
+
 .left-0 {
     left: 0rem;
 }
@@ -136,6 +186,10 @@
     bottom: 0rem;
 }
 
+.bottom-16 {
+    bottom: 1rem;
+}
+
 .bottom-20 {
     bottom: 1.25rem;
 }
@@ -144,6 +198,22 @@
     flex-grow: 1;
 }
 
+.flex-1 {
+    flex: 1 1 0%;
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.overflow-y-auto {
+    overflow-y: auto;
+}
+
+.max-h-\[90vh\] {
+    max-height: 90vh;
+}
+
 .-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));
@@ -202,18 +272,6 @@
     letter-spacing: var(--f-heading-05-letterSpacing);
 }
 
-.text-light {
-    color: var(--grey-700);
-}
-
-.text-lighter {
-    color: var(--grey-600);
-}
-
-.text-lightest {
-    color: var(--grey-500);
-}
-
 .text-default {
     color: var(--black);
 }
@@ -223,19 +281,19 @@
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-strong {
-    background-color: var(--grey-700);
+    background-color: var(--grey-dark);
 }
 
 .bg-strongest {
-    background-color: var(--black);
+    background-color: var(--brand-black);
 }
 
-.ml-8 {
-    margin-left: 0.5rem;
+.mr-8 {
+    margin-right: 0.5rem;
 }
 
 .pt-8 {
@@ -246,11 +304,19 @@
     opacity: 0.9;
 }
 
+/* Modal title - proper spacing for descenders */
+.modal-title {
+    line-height: 1.5;
+    padding-bottom: 2px;
+    display: inline-block;
+}
+
 .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-2 {
@@ -258,6 +324,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-3 {
@@ -265,6 +332,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
+    padding-bottom: 2px; /* Space for descenders */
 }
 
 .line-clamp-4 {
@@ -272,6 +340,34 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
+    padding-bottom: 2px; /* Space for descenders */
+}
+
+/* Modal size variants with min/max width */
+.modal-small {
+    min-width: 300px;
+    max-width: 500px;
+}
+
+.modal-medium {
+    min-width: 300px;
+    max-width: 700px;
+}
+
+.modal-large {
+    min-width: 300px;
+    max-width: 900px;
+}
+
+@media (max-width: 749px) {
+    /* On mobile, modals should be full width with padding */
+    .modal-small,
+    .modal-medium,
+    .modal-large {
+        min-width: calc(100% - 2rem);
+        max-width: calc(100% - 2rem);
+        margin: 0 1rem;
+    }
 }
 
 @media (min-width: 750px) {
@@ -282,7 +378,7 @@
     .md\:w-auto {
         width: auto;
     }
-    
+
     .md\:min-w-\[500px\] {
         width: 500px;
     }