@ebrains/components 0.0.1-alpha.0

package/dist/collection/components/eds-progress-bar/eds-progress-bar.stories.js

@@ -0,0 +1,25 @@
+export default {
+    title: 'Components/Progress Bar',
+    component: 'eds-progress-bar',
+    argTypes: {
+        value: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 100
+            },
+            description: 'The progress value (0-100)'
+        }
+    },
+    args: {
+        value: 50 // Default value
+    }
+};
+export const Default = {
+    render: (args) => `
+        <eds-progress-bar value="${args.value}"></eds-progress-bar>
+      `,
+    args: {
+        value: 50 // Default progress value for the story
+    }
+};

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

@@ -0,0 +1,74 @@
+:host {
+    display: inline-block;
+    font-size: 2rem;
+}
+
+.stars {
+    display: flex;
+    gap: 0.25rem;
+    cursor: pointer;
+}
+
+.star {
+    color: var(--star-empty-color, #ccc);
+    /* Default empty star color */
+    transition: color 0.2s ease-in-out;
+}
+
+.star.filled {
+    color: var(--green-500);
+    /* Default filled star color */
+}
+
+.star:hover,
+.star.filled:hover {
+    transform: scale(1.2);
+}
+
+.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);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-lighter {
+    color: var(--grey-600);
+}
+
+.text-lightest {
+    color: var(--grey-500);
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}

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

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+export class EdsRating {
+    constructor() {
+        this.stars = 5;
+        this.label = 'Rate your experience';
+        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+        this.selectedRating = 0;
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedMappings() {
+        if (typeof this.textMapping === 'object') {
+            return this.textMapping;
+        }
+        else if (typeof this.textMapping === 'string') {
+            try {
+                return JSON.parse(this.textMapping);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        this.ratingChange.emit(rating);
+    }
+    render() {
+        return (h("div", { key: '4ca6d5e0fb35d8ebce1acd5c1a7c6c857ba4f463', class: "relative w-full flex flex-col" }, h("span", { key: '784b77f84098b8d88cd3872004b0208a4437c51b', class: "f-body-01" }, this.label), h("div", { key: '6780db58d3c96046a99d383518cfe1db1e3f1c68', class: "stars" }, Array.from({ length: this.stars }, (_, index) => (h("span", { class: {
+                star: true,
+                filled: index < this.selectedRating
+            }, onClick: () => this.handleClick(index + 1) }, "\u2605")))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'ce0eec3c29cf27bff86e3307a29a2c39c2167087', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+    }
+    static get is() { return "eds-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stars": {
+                "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": "stars",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text for the input field."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Rate your experience'"
+            },
+            "textMapping": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any",
+                    "resolved": "any",
+                    "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": "ratingChange",
+                "name": "ratingChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the rating is changed."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,76 @@
+export default {
+    title: 'Components/Rating',
+    component: 'eds-rating',
+    argTypes: {
+        stars: {
+            control: { type: 'number', min: 1 },
+            description: 'The total number of stars in the rating system.'
+        },
+        label: {
+            control: 'text',
+            description: 'The label text displayed above the star rating.'
+        },
+        textMapping: {
+            control: 'array',
+            description: 'An array of text mappings corresponding to each rating.'
+        }
+    },
+    args: {
+        stars: 5,
+        label: 'Rate your experience',
+        textMapping: ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-rating
+        stars="${args.stars}"
+        label="${args.label}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-rating>
+    `,
+    args: {
+        stars: 5,
+        label: 'Rate your experience',
+        textMapping: ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']
+    }
+};
+export const CustomTextMapping = {
+    render: (args) => `
+      <eds-rating
+        stars="${args.stars}"
+        label="${args.label}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-rating>
+    `,
+    args: {
+        stars: 5,
+        label: 'Your satisfaction level',
+        textMapping: ['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']
+    }
+};
+export const TenStars = {
+    render: (args) => `
+      <eds-rating
+        stars="${args.stars}"
+        label="${args.label}"
+        text-mapping='${JSON.stringify(args.textMapping)}'
+      ></eds-rating>
+    `,
+    args: {
+        stars: 10,
+        label: 'Rate the complexity',
+        textMapping: [
+            'Horrible',
+            'Very Bad',
+            'Bad',
+            'Mediocre',
+            'Below Average',
+            'Average',
+            'Above Average',
+            'Good',
+            'Very Good',
+            'Excellent'
+        ]
+    }
+};

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -0,0 +1,91 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
+ *
+ * Key Features:
+ * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
+ * - Configurable section title and heading level for accessibility and hierarchy.
+ * - Passes section title to an internal heading component (`eds-section-heading`).
+ *
+ * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
+ */
+export class EdsSectionCore {
+    constructor() {
+        this.tag = 'section';
+        this.sectionTitle = '';
+        this.headingLevel = 'h2';
+    }
+    render() {
+        const TagType = this.tag; // Set dynamic tag type (div or section)
+        return (h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+    }
+    static get is() { return "eds-section-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-section-core.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-section-core.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'div' | 'section'",
+                    "resolved": "\"div\" | \"section\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML tag to be used for the section. Can be either 'div' or 'section'.\nDefault is 'section'."
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "'section'"
+            },
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the section. This will be passed to the section heading component.\nDefault is an empty string."
+                },
+                "attribute": "section-title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level for the section title, such as 'h1', 'h2', etc.\nDefault is 'h2'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.stories.js

@@ -0,0 +1,74 @@
+export default {
+    title: 'Components/Section/Section Core',
+    component: 'eds-section-core',
+    argTypes: {
+        tag: {
+            control: 'select',
+            options: ['div', 'section'],
+            description: 'The HTML tag used for the section. Can be either "div" or "section".',
+            defaultValue: 'section'
+        },
+        sectionTitle: {
+            control: 'text',
+            description: 'The title of the section, displayed as the section heading.',
+            defaultValue: 'Section Title'
+        },
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            description: 'The heading level for the section title, such as "h1", "h2", etc.',
+            defaultValue: 'h2'
+        }
+    }
+};
+const Template = (args) => `
+    <eds-section-core
+      tag="${args.tag}"
+      section-title="${args.sectionTitle}"
+      heading-level="${args.headingLevel}"
+    >
+      <p>This is the content inside the section.</p>
+    </eds-section-core>
+  `;
+const TemplateForm = (args) => `
+  <eds-section-core
+    tag="${args.tag}"
+    section-title="${args.sectionTitle}"
+    heading-level="${args.headingLevel}"
+  >
+      <eds-form
+        name="extended-form"
+        endpoint="https://example.com/api/submit"
+        fields='[
+          {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
+          {"name": "email", "label": "Email", "type": "email", "required": true},
+          {"name": "password", "label": "Password", "type": "password", "required": true, "maxlength": 50},
+          {"name": "bio", "label": "Biography", "type": "textarea", "required": true, "maxlength": 300},
+          {"name": "role", "label": "Role", "type": "select", "required": true, "options": [
+            {"label": "Admin", "value": "admin"},
+            {"label": "Editor", "value": "editor"},
+            {"label": "Viewer", "value": "viewer"}
+          ]},
+          {"name": "hiddenField", "type": "hidden", "value": "hiddenValue"}
+        ]'
+        success-message="Form submitted successfully!"
+        error-message="Please fix the errors in the form."
+        submit-btn="true"
+        small-alert="false"
+        set-form-url="true"
+      ></eds-form>
+
+  </eds-section-core>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    tag: 'section',
+    sectionTitle: 'Default Section Title',
+    headingLevel: 'h2'
+};
+export const WithForm = TemplateForm.bind({});
+WithForm.args = {
+    tag: 'section',
+    sectionTitle: 'This a slotted Form',
+    headingLevel: 'h2'
+};

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -0,0 +1,137 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsSectionHeading` is a configurable component for displaying section titles with customizable headings and optional container styling.
+ *
+ * Key Features:
+ * - Allows dynamic selection of HTML heading level (e.g., `h1`, `h2`) for semantic structure.
+ * - Supports wrapping the heading in a container with configurable padding.
+ * - Can be used within sections to provide consistent and accessible headings.
+ *
+ * This component is suitable for structuring page sections with visually distinct and accessible headings.
+ */
+export class EdsSectionHeading {
+    constructor() {
+        this.sectionTitle = undefined;
+        this.withContainer = true;
+        this.headingLevel = 'h2';
+        this.tag = 'div';
+        this.spacingLarge = false;
+    }
+    getHeadingClass() {
+        // Map heading levels to their respective classes
+        const headingClasses = {
+            h1: 'f-heading-01',
+            h2: 'f-heading-02',
+            h3: 'f-heading-03',
+            h4: 'f-heading-04',
+            h5: 'f-heading-05',
+            h6: 'f-heading-06'
+        };
+        // Return the class based on the heading level
+        return headingClasses[this.headingLevel];
+    }
+    render() {
+        const TagType = this.tag; // Dynamically set tag type for the container
+        const HeadingTag = this.headingLevel; // Dynamically set heading level
+        return (h(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+                container: this.withContainer,
+                'pt-48': this.spacingLarge,
+                'pt-28': !this.spacingLarge
+            } }, h(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+    }
+    static get is() { return "eds-section-heading"; }
+    static get properties() {
+        return {
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main title for the section. This is required and displayed prominently."
+                },
+                "attribute": "section-title",
+                "reflect": false
+            },
+            "withContainer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean indicating whether the section heading should be wrapped in a container.\nDefault is `true`."
+                },
+                "attribute": "with-container",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML heading level for the section title (e.g., 'h1', 'h2', etc.).\nDefault is 'h2'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'div' | 'section'",
+                    "resolved": "\"div\" | \"section\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML tag for the wrapper of the section heading, which can be either 'div' or 'section'.\nDefault is 'div'."
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "'div'"
+            },
+            "spacingLarge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean to indicate whether the section should have larger padding at the top.\nDefault is `false`."
+                },
+                "attribute": "spacing-large",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}