@ebrains/components 0.9.2-beta → 0.9.3-beta

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,191 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+export class EdsFeedback {
+    constructor() {
+        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() {
+        return (h("div", { key: 'a8cf97bdcd7957b98dfca11e178361acf667c23c', class: "grid inline" }, h("h1", { key: '231bb9f49dc6084045a392b1d93c9b4454bbf268', class: "f-heading-01 my-4" }, this.label), h("p", { key: 'a70274de05139c8ab40b5a4a2e599dc14b3d3a9f', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '5353b7616112591240819e4b762790224a1b7cc7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e5f8f10fb052a6de080b61cf78c309a55d081576', 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 {
+            "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,121 @@
+export default {
+    title: 'Shared Ui/Feedback',
+    component: 'eds-feedback',
+    argTypes: {
+        type: {
+            control: { type: '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: {
+        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
+        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'
+        ]
+    }
+};

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

@@ -0,0 +1,226 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+p {
+  margin: 0;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.ml-4 {
+    margin-left: 0.25rem;
+  }
+
+.container {
+    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container>* {
+    --container-outer-gutter: 0;
+    --breakout-container-outer-gutter: 0;
+}
+
+.bg-darker {
+    background-color: var(--grey-400);
+}
+
+.border-softest {
+    border-color: rgba(0, 0, 0, .05);
+}
+
+.border-t-2 {
+    border-top-width: 2px;
+}
+
+.pt-20 {
+    padding-top: 1.25rem;
+}
+
+.pb-28 {
+    padding-bottom: 1.75rem;
+}
+
+.grid-layout {
+    display: grid;
+    grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+    grid-gap: var(--inner-gutter);
+}
+
+.grid-col-span-12 {
+    --container-grid-columns: 12;
+    grid-column: span 12 / span 12;
+}
+
+.mt-28 {
+    margin-top: 1.75rem;
+}
+
+.gap-y-12 {
+    row-gap: 0.75rem;
+}
+
+.gap-x-12 {
+    -moz-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.gap-20 {
+    gap: 1.25rem;
+}
+
+.effect-focus {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+}
+
+.focus-visible\:rounded-xs:focus-visible {
+    border-radius: 4px;
+}
+
+.flex {
+    display: flex;
+}
+
+.w-\[54px\] {
+    width: 54px;
+}
+
+.ml-0 {
+    margin-left: 0rem;
+}
+
+.order-last {
+    order: 9999;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.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);
+}
+
+.mt-4 {
+    margin-top: 0.25rem;
+}
+
+.gap-12 {
+    gap: 0.75rem;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.\!no-underline {
+    text-decoration-line: none !important;
+}
+
+.decoration-2 {
+    text-decoration-thickness: 2px;
+}
+
+.underline-offset-4 {
+    text-underline-offset: 4px;
+}
+
+.hover\:\!underline:hover {
+    text-decoration-line: underline !important;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.pl-12 {
+    padding-left: 0.75rem;
+}
+
+
+
+
+@media (min-width: 750px) {
+    .md\:pt-28 {
+        padding-top: 1.75rem;
+    }
+}
+
+@media (min-width: 900px) {
+    .lg\:grid-col-span-5 {
+        --container-grid-columns: 5;
+        grid-column: span 5 / span 5;
+    }
+
+    .lg\:grid-col-span-6 {
+        --container-grid-columns: 6;
+        grid-column: span 6 / span 6;
+    }
+
+    .lg\:grid-col-start-7 {
+        grid-column-start: 7;
+    }
+
+    .lg\:mt-0 {
+        margin-top: 0rem;
+    }
+
+    .lg\:flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .lg\:order-none {
+        order: 0;
+    }
+
+    .lg\:w-auto {
+        width: auto;
+    }
+}
+
+@media (min-width: 1024px) {
+    .xl\:pb-40 {
+        padding-bottom: 2.5rem;
+    }
+}