@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/shared-ui/eds-card-section/eds-card-section.stories.js

@@ -0,0 +1,71 @@
+export default {
+    title: 'Shared UI/Card Section',
+    component: 'eds-card-section',
+    argTypes: {
+        cards: {
+            control: 'object',
+            description: 'Representing an array of card objects, each with properties like title, description, avatar, image, etc.'
+        },
+        occupyCols: {
+            control: { type: 'number', min: 1, max: 12, step: 1 },
+            description: 'Number of columns to span for each card in the grid layout'
+        }
+    },
+    args: {
+        cards: [
+            {
+                title: 'The Future of AI in Healthcare',
+                description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
+                url: '#',
+                avatar: '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',
+                shortAbbreviation: 'AI',
+                headingLevel: 'h2',
+                tags: 'Technology,AI,Healthcare',
+                tiny: false,
+                bg: true,
+                withHover: true,
+                image: {
+                    src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+                    alt: 'EBRAINS Bernstein Conference',
+                    srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 720w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1080w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1440w',
+                    sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw',
+                    width: 400,
+                    height: 300,
+                    lazyload: true
+                }
+            },
+            {
+                title: 'The Future of AI in Healthcare',
+                description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
+                url: '#',
+                avatar: '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',
+                shortAbbreviation: 'AI',
+                headingLevel: 'h2',
+                tags: 'Tech',
+                tiny: false,
+                bg: false,
+                withHover: false,
+                image: {
+                    src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+                    alt: 'EBRAINS Bernstein Conference',
+                    width: 400,
+                    height: 300,
+                    lazyload: true
+                }
+            }
+        ],
+        occupyCols: 4
+    },
+    parameters: {}
+};
+// Variant: Passing cards as an array of objects via property binding
+export const Default = {
+    render: (args) => {
+        const cardSection = document.createElement('eds-card-section');
+        // Pass the array and other args as properties
+        cardSection.cards = args.cards;
+        cardSection.occupyCols = args.occupyCols;
+        cardSection.className = args.extraClass;
+        return cardSection;
+    }
+};

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCookiesPreference {
+    constructor() {
+        this.buttonText = 'Cookies Preferences';
+        this.intent = undefined;
+        this.showMatomoNotice = false;
+        this.noticeKey = 0;
+    }
+    /**
+     * Always shows the eds-matomo-notice popup.
+     * Every click removes the "matomo-deferred" key and forces a remount.
+     */
+    toggleCookiesPopup() {
+        // Remove the key from session storage so that the notice will run its checks (or be forced to show)
+        sessionStorage.removeItem('matomo-deferred');
+        if (this.showMatomoNotice) {
+            // Force a remount by changing the key
+            this.noticeKey = this.noticeKey + 1;
+        }
+        else {
+            this.showMatomoNotice = true;
+        }
+    }
+    render() {
+        return (h("div", { key: '37a817a2c1cccb58a7445c399f20ce5fb97653b8' }, h("eds-link", { key: '9bf85d4fe82d7a525bae6f765da7dea9a3913494', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+    }
+    static get is() { return "eds-cookies-preference"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-cookies-preference.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-cookies-preference.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display on the cookies preference button."
+                },
+                "attribute": "button-text",
+                "reflect": false,
+                "defaultValue": "'Cookies Preferences'"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'blueish'",
+                    "resolved": "\"blueish\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual intent or style of the button."
+                },
+                "attribute": "intent",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showMatomoNotice": {},
+            "noticeKey": {}
+        };
+    }
+}

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.st.js

@@ -0,0 +1,31 @@
+export default {
+    title: 'Shared Ui/Cookies Preference',
+    component: 'eds-cookies-preference',
+    argTypes: {
+        buttonText: {
+            control: 'text',
+            description: 'Text to display on the cookies preference button.'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'],
+            description: 'The visual intent or style of the button.'
+        }
+    },
+    args: {
+        buttonText: 'Cookies Preferences',
+        intent: 'ghostInverse'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-cookies-preference 
+        button-text="${args.buttonText}"
+        intent="${args.intent}">
+      </eds-cookies-preference>
+    `,
+    args: {
+        buttonText: 'Cookies Preferences',
+        intent: 'ghostInverse'
+    }
+};

package/dist/collection/shared-ui/eds-feedback/eds-feedback.css

@@ -0,0 +1,163 @@
+/*
+Remove the default font size and weight for headings.
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+    margin: 0;
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-lighter {
+    color: var(--grey-600);
+}
+
+.text-lightest {
+    color: var(--grey-500);
+}
+
+.f-body-01 {
+    font-family: var(--f-body-01-fontFamily);
+    font-weight: var(--f-body-01-fontWeight);
+    font-size: var(--f-body-01-fontSize);
+    line-height: var(--f-body-01-lineHeight);
+    letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.f-heading-01 {
+    font-family: var(--f-heading-01-fontFamily);
+    font-weight: var(--f-heading-01-fontWeight);
+    font-size: var(--f-heading-01-fontSize);
+    line-height: var(--f-heading-01-lineHeight);
+    letter-spacing: var(--f-heading-01-letterSpacing);
+}
+
+.f-heading-02 {
+    font-family: var(--f-heading-02-fontFamily);
+    font-weight: var(--f-heading-02-fontWeight);
+    font-size: var(--f-heading-02-fontSize);
+    line-height: var(--f-heading-02-lineHeight);
+    letter-spacing: var(--f-heading-02-letterSpacing);
+}
+
+.f-heading-03 {
+    font-family: var(--f-heading-03-fontFamily);
+    font-weight: var(--f-heading-03-fontWeight);
+    font-size: var(--f-heading-03-fontSize);
+    line-height: var(--f-heading-03-lineHeight);
+    letter-spacing: var(--f-heading-03-letterSpacing);
+}
+
+.f-heading-04 {
+    font-family: var(--f-heading-04-fontFamily);
+    font-weight: var(--f-heading-04-fontWeight);
+    font-size: var(--f-heading-04-fontSize);
+    line-height: var(--f-heading-04-lineHeight);
+    letter-spacing: var(--f-heading-04-letterSpacing);
+}
+
+.f-heading-05 {
+    font-family: var(--f-heading-05-fontFamily);
+    font-weight: var(--f-heading-05-fontWeight);
+    font-size: var(--f-heading-05-fontSize);
+    line-height: var(--f-heading-05-lineHeight);
+    letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+.f-heading-06 {
+    font-family: var(--f-heading-06-fontFamily);
+    font-weight: var(--f-heading-06-fontWeight);
+    font-size: var(--f-heading-06-fontSize);
+    line-height: var(--f-heading-06-lineHeight);
+    letter-spacing: var(--f-heading-06-letterSpacing);
+}
+
+.f-body-01 {
+    font-family: var(--f-body-01-fontFamily);
+    font-weight: var(--f-body-01-fontWeight);
+    font-size: var(--f-body-01-fontSize);
+    line-height: var(--f-body-01-lineHeight);
+    letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.f-body-02 {
+    font-family: var(--f-body-02-fontFamily);
+    font-weight: var(--f-body-02-fontWeight);
+    font-size: var(--f-body-02-fontSize);
+    line-height: var(--f-body-02-lineHeight);
+    letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.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);
+}
+
+.inline {
+    display: inline;
+}
+
+.grid {
+    display: grid;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.my-4 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.my-8 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}

package/dist/collection/shared-ui/eds-feedback/eds-feedback.js

@@ -0,0 +1,214 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+export class EdsFeedback {
+    constructor() {
+        this.headingLevel = 'h1';
+        this.type = 'star';
+        this.count = 5;
+        this.label = 'Rate your Experience!';
+        this.description = 'This is a description!';
+        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        this.selectedRating = 0;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb 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: this.selectedRating
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    /**
+     * Parses the `textMapping` prop into an array of strings.
+     */
+    get parsedMappings() {
+        return parseData(this.textMapping);
+    }
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    ratingUpdated(e) {
+        this.selectedRating = e.detail;
+    }
+    render() {
+        // Determine the heading tag and CSS class
+        const HeadingTag = this.headingLevel;
+        const levelNum = this.headingLevel.replace('h', '');
+        const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
+        return (h("div", { key: 'f1bec91df97ff2a54a8ec8284e88f572b3bf0081', class: "grid inline" }, h(HeadingTag, { key: '8051043d5ec79a1f972fd732ef8a716487ed51d2', class: headingClass }, this.label), h("p", { key: '55f319e89376372f13c2bb96b9a94ceed6a6565b', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'c9c725d4a1ae65eb6b773178f6435d239c434034', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e3ea621a035ecd6da07803478d202b2326997416', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+    }
+    static get is() { return "eds-feedback"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-feedback.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-feedback.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML heading level to use for the label. Valid values: 'h1' - 'h5'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h1'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'star' | 'thumbs-up' | 'thumbs-down'",
+                    "resolved": "\"star\" | \"thumbs-down\" | \"thumbs-up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of icon to display. Can be \"stars\" or \"thumbs\"."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'star'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "count",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Rate your Experience!'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars in the rating system."
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "'This is a description!'"
+            },
+            "textMapping": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mapping of text to star ratings."
+                },
+                "attribute": "text-mapping",
+                "reflect": false,
+                "defaultValue": "['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rating",
+                "name": "rating",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the rating is changed."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "rating",
+                "method": "ratingUpdated",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-feedback/eds-feedback.stories.js

@@ -0,0 +1,129 @@
+export default {
+    title: 'Shared Ui/Feedback',
+    component: 'eds-feedback',
+    argTypes: {
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            defaultValue: 'h1'
+        },
+        type: {
+            control: 'select',
+            options: ['star', 'thumbs-up', 'thumbs-down'],
+            description: 'The type of icon to display.'
+        },
+        count: {
+            control: { type: 'number', min: 1 },
+            description: 'The total number of rating items.'
+        },
+        label: {
+            control: 'text',
+            description: 'The label text displayed above the rating component.'
+        },
+        description: {
+            control: 'text',
+            description: 'The description text below the label.'
+        },
+        textMapping: {
+            control: 'array',
+            description: 'An array of text mappings corresponding to each rating.'
+        }
+    },
+    args: {
+        headingLevel: 'h1',
+        type: 'star',
+        count: 5,
+        label: 'Rate your Experience!',
+        description: 'This is a description!',
+        textMapping: ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-feedback
+        heading-level="${args.headingLevel}"
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `
+};
+export const CustomTextMapping = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        label: 'Your Satisfaction Level',
+        description: 'Please select a rating:',
+        textMapping: ['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']
+    }
+};
+export const ThumbsUp = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'thumbs-up',
+        label: 'How did we do?',
+        description: 'Give us your feedback by clicking on the icon:'
+    }
+};
+export const ThumbsDown = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'thumbs-down',
+        label: 'Let us know your thoughts',
+        description: 'Your feedback matters:'
+    }
+};
+export const TenItems = {
+    render: (args) => `
+      <eds-feedback
+        type="${args.type}"
+        count="${args.count}"
+        label="${args.label}"
+        description="${args.description}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-feedback>
+    `,
+    args: {
+        type: 'star',
+        count: 10,
+        label: 'Rate the Complexity',
+        description: '10-level rating system',
+        textMapping: [
+            'Horrible',
+            'Very Bad',
+            'Bad',
+            'Mediocre',
+            'Below Average',
+            'Average',
+            'Above Average',
+            'Good',
+            'Very Good',
+            'Excellent'
+        ]
+    }
+};