@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,111 @@
+  .f-ui-01 {
+    font-family: var(--f-ui-01-fontFamily);
+    font-weight: var(--f-ui-01-fontWeight);
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+    letter-spacing: var(--f-ui-01-letterSpacing);
+  }
+
+  .f-ui-03 {
+    font-family: var(--f-ui-03-fontFamily);
+    font-weight: var(--f-ui-03-fontWeight);
+    font-size: var(--f-ui-03-fontSize);
+    line-height: var(--f-ui-03-lineHeight);
+    letter-spacing: var(--f-ui-03-letterSpacing);
+  }
+
+  .f-ui-05 {
+    font-family: var(--f-ui-05-fontFamily);
+    font-weight: var(--f-ui-05-fontWeight);
+    font-size: var(--f-ui-05-fontSize);
+    line-height: var(--f-ui-05-lineHeight);
+    letter-spacing: var(--f-ui-05-letterSpacing);
+  }
+
+  .py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+
+  .py-3 {
+    padding-top: 0.1875rem;
+    padding-bottom: 0.1875rem;
+  }
+
+  .py-4 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .px-4 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  .px-5 {
+    padding-left: 0.3125rem;
+    padding-right: 0.3125rem;
+  }
+
+  .px-6 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+
+  .border-2 {
+    border-width: 2px;
+  }
+
+  .rounded-pill {
+    border-radius: 100px;
+  }
+
+  .border-default {
+    border: 2px solid var(--black);
+  }
+
+  .text-inverse {
+    color: var(--white);
+  }
+
+  .bg-accent {
+    background-color: var(--green-500);
+  }
+
+  .bg-strongest {
+    background-color: var(--black);
+  }
+
+  .text-\[\#0034CB\] {
+    --tw-text-opacity: 1;
+    color: rgb(0 52 203 / var(--tw-text-opacity));
+  }
+
+  .border-\[\#0034CB\] {
+    --tw-border-opacity: 1;
+    border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));
+  }
+
+  .text-light {
+    color: var(--grey-700);
+  }
+
+  .bg-strongest-soft {
+    background-color: rgba(0, 0, 0, .05);
+  }
+
+  .border-transparent {
+    border-color: var(--transparent);
+  }
+
+  .border-inverse {
+    border-color: var(--white);
+  }
+
+  .bg-inverse {
+    background-color: var(--white);
+  }
+
+  .text-lighter {
+    color: var(--grey-600);
+  }

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

@@ -0,0 +1,110 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+// Define the CVA for the tag styles
+const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            primary: 'border-accent bg-accent',
+            default: 'border-default',
+            strong: 'text-inverse bg-strongest border-default',
+            accent: 'text-[#0034CB] border-[#0034CB]',
+            weak: 'text-light bg-strongest-soft border-transparent',
+            inverse: 'border-inverse text-inverse',
+            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        },
+        size: {
+            small: 'f-ui-05 py-2 px-4', // smaller padding
+            medium: 'f-ui-03 py-3 px-5', // moderate padding
+            large: 'f-ui-01 py-4 px-6' // larger padding
+        }
+    },
+    defaultVariants: {
+        intent: 'default',
+        size: 'small'
+    }
+});
+/**
+ * `EdsTag` is a stylized label component designed to display short, categorical information.
+ * It supports multiple visual styles defined by the `intent` prop and three sizes.
+ */
+export class EdsTag {
+    constructor() {
+        this.label = undefined;
+        this.intent = 'default';
+        this.size = 'small';
+    }
+    render() {
+        const classes = tagStyles({ intent: this.intent, size: this.size });
+        return h("span", { key: '78ef2d9ed4fc79f078df2fe418c339fc8934eef2', class: classes }, this.label);
+    }
+    static get is() { return "eds-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to be displayed inside the tag."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong'",
+                    "resolved": "\"accent\" | \"default\" | \"inverse\" | \"inverse-strong\" | \"strong\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual style or intent of the tag."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag: small, medium, or large."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,34 @@
+export default {
+    title: 'Components/Tag',
+    component: 'eds-tag',
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label text for the tag'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'default', 'strong', 'accent', 'weak', 'inverse', 'inverse-strong'],
+            description: 'The visual intent style for the tag'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large'],
+            description: 'The size of the tag: small (f-ui-05), medium (f-ui-03), or large (f-ui-01)'
+        }
+    },
+    args: {
+        label: 'Default Tag',
+        intent: 'default',
+        size: 'small'
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => `<eds-tag label="${args.label}" intent="${args.intent}" size="${args.size}"></eds-tag>`,
+    args: {
+        label: 'Default Tag',
+        intent: 'default',
+        size: 'small'
+    }
+};

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

@@ -0,0 +1,84 @@
+.max-w-sidebar {
+  max-width: 1224px;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.px-4 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.py-8 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.flex {
+  display: flex;
+}
+.w-4 {
+  width: 0.25rem;
+}
+.pr-4 {
+  padding-right: 0.25rem;
+}
+.pl-4 {
+  padding-left: 0.25rem;
+}
+.w-1\/2 {
+  width: 50%;
+}
+.left-1\/2 {
+  left: 50%;
+}
+.transform {
+  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));
+}
+.-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));
+}
+.bg-strong {
+  background-color: var(--grey-700);
+}
+.h-full {
+  height: 100%;
+}
+.z-0 {
+  z-index: 0;
+}
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.w-32 {
+  width: 2rem;
+}
+.h-32 {
+  height: 2rem;
+}
+.bg-accent {
+  background-color: var(--green-500);
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+

package/dist/collection/components/eds-timeline/eds-timeline.donot-stories.js

@@ -0,0 +1,35 @@
+export default {
+    title: 'Components/Timeline',
+    component: 'eds-timeline',
+    argTypes: {
+        events: {
+            control: 'object',
+            description: 'List of timeline events as a JSON array'
+        }
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-timeline events='${JSON.stringify(args.events)}'></eds-timeline>
+    `,
+    args: {
+        events: [
+            {
+                id: '1',
+                title: 'TRL 1',
+                category: '#1',
+                description: 'Basic research is complete, principles are documented.',
+                fullDescription: 'Initial scientific research umented.',
+                completed: true
+            },
+            {
+                id: '2',
+                title: 'TRL 2',
+                category: '#2',
+                description: 'The technology concept and/or application is formulated.',
+                fullDescription: 'The initial concept and potential applications of the technology have been outlined.',
+                completed: false
+            }
+        ]
+    }
+};

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

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * @internal
+ */
+export class EdsTimeline {
+    constructor() {
+        this.events = undefined;
+        this.selectedEvent = null;
+        this.parsedEvents = [];
+    }
+    parseEvents(newValue) {
+        const parsed = parseData(newValue);
+        // Map over the parsed events to ensure boolean conversion for "completed"
+        this.parsedEvents = Array.isArray(parsed)
+            ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true })))
+            : [];
+    }
+    componentWillLoad() {
+        this.parseEvents(this.events);
+    }
+    componentDidLoad() {
+        const cards = this.el.querySelectorAll('eds-card-generic');
+        cards.forEach((card) => {
+            this.emitContext(card);
+        });
+    }
+    emitContext(cardElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        cardElement.dispatchEvent(event);
+    }
+    handleEventClick(event) {
+        this.selectedEvent = event;
+        if (this.modalRef && typeof this.modalRef.open === 'function') {
+            this.modalRef.open();
+        }
+    }
+    render() {
+        return (h("div", { key: '63ce0ce7e3a632906f664011243abf9f816bc53a', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '794d16f6b68d87bb1fb4665cc5ef84b381fb55ea', class: "relative" }, h("div", { key: '2b82b5594a9ed5c056898725f40e56858282412a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '6d33b71396649e7b90d050c0858912fa49c309a7', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+                ? [{ label: 'completed', style: 'accent' }]
+                : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+                ? [{ label: 'completed', style: 'accent' }]
+                : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))))))))));
+    }
+    static get is() { return "eds-timeline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepts a JSON string or object of timeline events."
+                },
+                "attribute": "events",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedEvent": {},
+            "parsedEvents": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "events",
+                "methodName": "parseEvents"
+            }];
+    }
+}

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

@@ -0,0 +1,91 @@
+.relative {
+    position: relative;
+}
+
+.right-4 {
+    right: 0.25rem;
+}
+
+.bottom-4 {
+    bottom: 0.25rem;
+}
+
+.w-auto {
+    width: auto;
+}
+
+.flex {
+    display: flex;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.gap-4 {
+    gap: 0.25rem;
+}
+
+.f-ui-01 {
+    font-family: var(--f-ui-01-fontFamily);
+    font-weight: var(--f-ui-01-fontWeight);
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+    letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.ml-8 {
+    margin-left: 0.5rem;
+}
+
+.p-12 {
+    padding: 0.75rem;
+}
+
+.rounded-lg {
+    border-radius: 16px;
+}
+
+.shadow-md {
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
+        0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.bg-dark {
+    background-color: var(--grey-300);
+}
+
+.bg-success {
+    background-color: var(--green-200);
+}
+
+.bg-error {
+    background-color: var(--red-200);
+}
+
+.bg-warning {
+    background-color: var(--yellow-200);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-current {
+    color: currentColor;
+}
+
+.text-default {
+    color: var(--black);
+}

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

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const toastStyles = cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+    variants: {
+        intent: {
+            default: 'bg-dark text-light',
+            success: 'bg-success text-dark',
+            error: 'bg-error text-light',
+            warning: 'bg-warning text-dark'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+export class EdsToast {
+    constructor() {
+        /**
+         * Dismisses the toast.
+         */
+        this.dismissToast = () => {
+            this.visible = false;
+        };
+        this.message = undefined;
+        this.intent = 'default';
+        this.duration = undefined;
+        this.visible = true;
+    }
+    componentDidLoad() {
+        const btn = this.el.shadowRoot.querySelector('eds-button');
+        this.emitContext(btn);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     * This event provides context information about the toast component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    connectedCallback() {
+        if (this.duration && this.duration > 0) {
+            this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+        }
+    }
+    disconnectedCallback() {
+        // Clear the timeout when the component is removed
+        clearTimeout(this.dismissTimeout);
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const classes = toastStyles({ intent: this.intent });
+        return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+    }
+    static get is() { return "eds-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main message or text to be displayed in the toast."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'error' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual intent or style of the toast, indicating the toast type."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the duration before the toast auto-dismisses (in milliseconds).\nIf set, the toast will auto-dismiss and show a close button.\nIf not set (or set to 0), it will persist without a close button."
+                },
+                "attribute": "duration",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}