@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const alertStyles = cva(['w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg'], {
+const alertStyles = cva(['w-full bg-dark'], {
     variants: {
         intent: {
             default: '',
@@ -8,6 +8,10 @@ const alertStyles = cva(['w-full bg-dark rounded-lg border-inside after:border-s
             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'
@@ -41,6 +45,7 @@ const alertStyles = cva(['w-full bg-dark rounded-lg border-inside after:border-s
     ],
     defaultVariants: {
         intent: 'default',
+        brd: 'rounded',
         direction: 'horizontal'
     }
 });
@@ -63,6 +68,7 @@ export class EdsAlert {
         this.pressableUrl = undefined;
         this.direction = 'horizontal';
         this.intent = 'default';
+        this.brd = 'rounded';
         this.withBtn = false;
     }
     componentWillLoad() {
@@ -86,11 +92,12 @@ export class EdsAlert {
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (h("div", { key: '519742081f681d6d67bc1b42c89fe1b6d005fe0f', class: alertStyles({
+        return (h("div", { key: '02e7ec45a64008c3a5e8ea99cade7da6b076259f', class: alertStyles({
                 intent: this.intent,
+                brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert" }, h("p", { key: '6a5d11fdc2a975512b12c307286b0a8b06998bec', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
+            }), role: "alert" }, h("p", { key: 'ba99f147a48ed7cc19ccc18b309e1a11ca053a09', class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn &&
             (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
     }
     static get is() { return "eds-alert"; }
@@ -193,6 +200,24 @@ export class EdsAlert {
                 "attribute": "intent",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "brd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'normal'",
+                    "resolved": "\"normal\" | \"rounded\"",
+                    "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."
+                },
+                "attribute": "brd",
+                "reflect": false,
+                "defaultValue": "'rounded'"
             }
         };
     }

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

@@ -16,6 +16,11 @@ export default {
             options: ['horizontal', 'vertical'],
             description: 'The layout direction of the alert content'
         },
+        brd: {
+            control: 'select',
+            options: ['normal', 'rounded'],
+            description: 'Alert borders style'
+        },
         pressableLabel: {
             control: 'text',
             description: 'Label for the pressable element (if enabled)'
@@ -29,7 +34,8 @@ export default {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        pressableLabel: 'Click Me',
+        brd: 'rounded',
+        pressableLabel: 'Click',
         pressableUrl: 'https://example.com'
     }
 };
@@ -39,6 +45,7 @@ export const Default = {
         message="${args.message}" 
         intent="${args.intent}" 
         direction="${args.direction}"
+        brd="${args.brd}"
         pressable-label="${args.pressableLabel}" 
         pressable-url="${args.pressableUrl}">
       </eds-alert>`,
@@ -46,7 +53,8 @@ export const Default = {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        pressableLabel: 'Click Me',
+        brd: 'rounded',
+        pressableLabel: 'Click',
         pressableUrl: 'https://example.com'
     }
 };

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

@@ -1,3 +1,38 @@
+html,
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0; /* 1 */
+    line-height: inherit; /* 2 */
+}
+
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+::before,
+::after {
+  --tw-content: '';
+}
+
+abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted;
+  }
+
+.effect-color {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+
 .border-inside {
     position: relative;
 
@@ -99,6 +134,9 @@
     border-radius: 4px;
 }
 
+.rounded-full {
+    border-radius: 9999px;
+}
 
 .bg-dark {
     background-color: var(--grey-300);

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

@@ -19,9 +19,15 @@ export class EdsAvatar {
         this.picture = undefined;
         this.initials = undefined;
         this.color = undefined;
-        this.rounded = false;
-        this.initialsStrong = false;
     }
+    /**
+     * Flag to render the avatar with rounded (pill) shape if `true`.
+     */
+    //@Prop() rounded: boolean = false;
+    /**
+     * Determines if the initials should use a stronger (larger) font style.
+     */
+    //@Prop() initialsStrong: boolean = false;
     /**
      * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
      * @returns {string | undefined} Initials for display in the avatar.
@@ -48,7 +54,8 @@ export class EdsAvatar {
             'justify-center',
             'overflow-hidden',
             this.picture ? '' : 'px-4',
-            this.rounded ? 'rounded-pill border-inside-pill w-32' : 'w-[54px] rounded-sm',
+            'w-[54px] rounded-sm',
+            //this.rounded ? 'rounded-full border-inside-pill w-32' : 'w-[54px] rounded-sm',
             this.color ? 'border-inside-inverse' : '',
             this.color === 'grey'
                 ? 'bg-dark'
@@ -68,7 +75,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f', 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: '3ce8be58a8705b99904720b0e8bb878d36072d5e', 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"; }
@@ -170,42 +177,6 @@ export class EdsAvatar {
                 },
                 "attribute": "color",
                 "reflect": false
-            },
-            "rounded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Flag to render the avatar with rounded (pill) shape if `true`."
-                },
-                "attribute": "rounded",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "initialsStrong": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines if the initials should use a stronger (larger) font style."
-                },
-                "attribute": "initials-strong",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

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

@@ -6,62 +6,35 @@ export default {
         lastName: { control: 'text' },
         picture: { control: 'text' },
         initials: { control: 'text' },
-        color: { control: 'text' },
-        rounded: { control: 'boolean' },
-        initialsStrong: { control: 'boolean' }
+        color: { control: 'text' }
     },
     args: {
         firstName: 'John',
         lastName: 'Doe',
         picture: '',
         initials: '',
-        color: '',
-        rounded: false,
-        initialsStrong: false
+        color: ''
     }
 };
 export const Default = {
-    render: (args) => `
-        <eds-avatar 
-          first-name="${args.firstName}" 
-          last-name="${args.lastName}"
-          rounded=${args.rounded}
-        ></eds-avatar>`,
+    render: (args) => `     
+    <eds-avatar 
+      first-name="${args.firstName}" 
+      last-name="${args.lastName}"
+      picture="${args.picture}"
+      initials="${args.initials}"
+      color="${args.color}"
+    ></eds-avatar>
+    
+    <div class="mt-32">
+      <span>To try out the picture field use this example:</span>
+      <eds-code-block 
+        code="https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200" 
+        language="url"
+      ></eds-code-block>
+    </div>`,
     args: {
         firstName: 'John',
-        lastName: 'Doe',
-        rounded: false
+        lastName: 'Doe'
     }
 };
-/*export const WithPicture = {
-  render: (args) => `
-        <eds-avatar
-          first-name="${args.firstName}"
-          last-name="${args.lastName}"
-          picture="${args.picture}"
-          rounded=${args.rounded}
-        ></eds-avatar>`,
-  args: {
-    firstName: 'Jane',
-    lastName: 'Doe',
-    picture:
-      'https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200',
-    rounded: true
-  }
-};
-
-export const BackgroundColorVariant = {
-  render: (args) => `
-        <eds-avatar
-          first-name="${args.firstName}"
-          last-name="${args.lastName}"
-          color="${args.color}"
-          rounded=${args.rounded}
-        ></eds-avatar>`,
-  args: {
-    firstName: 'Bob',
-    lastName: 'Brown',
-    color: 'grey',
-    rounded: true
-  }
-};*/

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

@@ -12,7 +12,7 @@ export class EdsBlockBreak {
         this.extraClass = '';
     }
     render() {
-        return h("hr", { key: '8cb39dda5d7f909b459390fe7e3f86dfd147ba98', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+        return h("hr", { key: '9807e47c4a3b1143b3228e1be49c4069c7bc2014', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-breadcrump/eds-breadcrumb.css

@@ -41,6 +41,7 @@ menu {
 .block {
   display: block;
 }
+
 .inline-block {
   display: inline-block;
 }

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

@@ -3,9 +3,8 @@ export default {
     component: 'eds-breadcrumb',
     argTypes: {
         items: {
-            control: 'text',
-            description: 'An array of breadcrumb items as a JSON string.',
-            defaultValue: '[{"label": "Home", "url": "/"}, {"label": "Products", "url": "/products"}]'
+            control: 'object',
+            description: 'An array of breadcrumb items as a JSON string.'
         },
         intent: {
             control: 'select',
@@ -15,18 +14,27 @@ export default {
         }
     },
     args: {
-        items: '[{"label": "Home", "url": "/"}, {"label": "Electronics", "url": "/electronics"}, {"label": "Laptops", "url": "/electronics/laptops"}]',
+        items: [
+            { label: 'Home', url: '/' },
+            { label: 'Electronics', url: '/electronics' },
+            { label: 'Laptops', url: '/electronics/laptops' }
+        ],
         intent: 'ghost'
     }
 };
+const sampleitems = [
+    { label: 'Home', url: '/' },
+    { label: 'Electronics', url: '/electronics' },
+    { label: 'Laptops', url: '/electronics/laptops' }
+];
 export const Default = {
     render: (args) => `
       <eds-breadcrumb 
-        items='${args.items}' 
+        items='${JSON.stringify(args.items)}'
         intent='${args.intent}'
       ></eds-breadcrumb>`,
     args: {
-        items: '[{"label": "Home", "url": "/"},{"label": "Products", "url": "/"}, {"label": "Electronics", "url": "/electronics"}, {"label": "Laptops", "url": "/electronics/laptops"}]',
+        items: sampleitems,
         intent: 'ghost'
     }
 };

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

@@ -24,9 +24,13 @@ export class EdsBreadcrumb {
                 this.isSmallScreen = true;
             }
             else if (width <= 1024) {
-                this.maxVisibleItems = 4;
+                this.maxVisibleItems = 3;
                 this.isSmallScreen = true;
             }
+            else if (width <= 2200) {
+                this.maxVisibleItems = 4;
+                this.isSmallScreen = false;
+            }
             else {
                 this.maxVisibleItems = 6;
                 this.isSmallScreen = false;
@@ -120,7 +124,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '02537ec4208124f8a5ba564f7487f6fad552f7da', "aria-label": "Breadcrumb" }, h("ol", { key: 'ac6e2ecd59a8ddef52e004d95fbb492f78a9b248', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '75bb5629a10de2a2a7bd0b2bbef04e5f699f5fe2', "aria-label": "Breadcrumb" }, h("ol", { key: '7a5cc115b70d60bc878aa3d865802662f30948c1', 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 { displayLabel, fullLabel } = this.getLabels(item, isLast);