@ebrains/components 0.3.0-alpha.0 → 0.5.0-alpha.0

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

@@ -24,6 +24,42 @@
 .star.filled:hover {
     transform: scale(1.2);
 }
+.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);
@@ -71,4 +107,16 @@
 
 .flex-col {
     flex-direction: column;
+}
+
+.mt-4 {
+    margin-top: 0.25rem;
+}
+  
+.mt-6 {
+    margin-top: 0.375rem;
+}
+
+.mt-8 {
+    margin-top: 0.5rem;
 }

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

@@ -7,10 +7,7 @@ export class EdsRating {
         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
+     * Parses the `textMapping` prop into an array of strings.
      */
     get parsedMappings() {
         if (typeof this.textMapping === 'object') {
@@ -21,8 +18,7 @@ export class EdsRating {
                 return JSON.parse(this.textMapping);
             }
             catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing links prop:', e);
+                //console.error('Error parsing textMapping prop:', e);
                 return [];
             }
         }
@@ -37,10 +33,14 @@ export class EdsRating {
         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]))));
+        return (h("div", { key: 'b613863ad54ae9b381a5741bce4b188eff806ef0', class: "relative w-full flex flex-col" }, h("span", { key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837', class: "f-heading-05" }, this.label), h("div", { key: '37082eb4bbadf5c211c197f3f81501d0b0e61404', role: "radiogroup", "aria-label": this.label, class: "stars flex space-x-2" }, Array.from({ length: this.stars }, (_, index) => {
+            const starRating = index + 1;
+            const isSelected = starRating <= this.selectedRating;
+            // Use the mapping text if available; otherwise, fall back to a generic label.
+            const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
+            return (h("eds-button", { label: "\u2605", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": mappingText, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "small", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6', class: "f-ui-04 text-lighter mt-4" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-rating"; }
     static get encapsulation() { return "shadow"; }
@@ -86,18 +86,18 @@ export class EdsRating {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The label text for the input field."
+                    "text": "The label text for the rating component."
                 },
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Rate your experience'"
             },
             "textMapping": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | any",
-                    "resolved": "any",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,

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

@@ -17,7 +17,7 @@ export class EdsSectionCore {
     }
     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' })));
+        return (h(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, h("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
     }
     static get is() { return "eds-section-core"; }
     static get originalStyleUrls() {

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

@@ -30,7 +30,13 @@ const Template = (args) => `
       <p>This is the content inside the section.</p>
     </eds-section-core>
   `;
-const TemplateForm = (args) => `
+export const Default = Template.bind({});
+Default.args = {
+    tag: 'section',
+    sectionTitle: 'Default Section Title',
+    headingLevel: 'h2'
+};
+/*const TemplateForm = (args) => `
   <eds-section-core
     tag="${args.tag}"
     section-title="${args.sectionTitle}"
@@ -60,15 +66,10 @@ const TemplateForm = (args) => `
 
   </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'
-};
+  tag: 'section',
+  sectionTitle: 'This a slotted Form',
+  headingLevel: 'h2'
+};*/

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

@@ -33,12 +33,12 @@ export class EdsSectionHeading {
     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: {
+        return (h(TagType, { key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb', 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)));
+            } }, h(HeadingTag, { key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -0,0 +1,71 @@
+.steps {
+    position: sticky;
+    margin-left: 16px;
+    margin-bottom: 12px;
+    border-left: 1px solid var(--soft-color, #ddd); /* replace var() with your color if needed */
+    padding-left: 24px;
+    counter-reset: step;
+  }
+  
+  /* Style for h3 headings inside the steps */
+  .steps h3 {
+    counter-increment: step;
+    font-size: var(--f-heading-05-fontSize);
+    font-weight: var(--f-heading-05-fontWeight);
+    line-height: var(--f-heading-05-lineHeight);
+    position: relative;
+  }
+  
+  .steps h3::before {
+    content: counter(step);
+    position: absolute;
+    left: -40px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 1rem;
+    border: 1px solid #ccc; /* adjust border style as needed */
+    background:var(--grey-900); /* adjust background color as needed */
+    color: #fff;      /* adjust text color as needed */
+    border-radius: 50%;
+  }
+  
+  /* Style for h4 headings inside the steps */
+  .steps h4 {
+    counter-increment: step;
+    font-size: 1.125rem;
+    font-weight: 500;
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  
+  .steps h4::before {
+    content: counter(step);
+    position: absolute;
+    left: -40px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    font-size: 0.875rem;
+    border: 1px solid #ccc;
+    background: #333;
+    color: #fff;
+    border-radius: 50%;
+  }
+  
+  /* Style for blockquotes inside the steps */
+  .steps blockquote {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    font-style: italic;
+    color: #aaa;
+    padding-left: 6px;
+  }
+  

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

@@ -0,0 +1,132 @@
+import { h } from "@stencil/core";
+export class EdsSteps {
+    constructor() {
+        this.handleNext = () => {
+            if (this.activeStep < this.parsedSteps.length) {
+                this.activeStep = this.activeStep + 1;
+            }
+        };
+        this.handleBack = () => {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+            }
+        };
+        this.handleReset = () => {
+            this.activeStep = 0;
+        };
+        this.steps = [];
+        this.type = 'static';
+        this.activeStep = 0;
+    }
+    handleStepClick(index) {
+        this.stepClick.emit(index);
+        // In linear mode, update the active step on header click.
+        if (this.type === 'linear') {
+            this.activeStep = index;
+        }
+    }
+    /**
+     * Parse the JSON string into an array of steps.
+     */
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                const stepsStr = this.steps;
+                return JSON.parse(stepsStr);
+            }
+            catch (error) {
+                //console.error('Invalid steps JSON', error);
+                return [];
+            }
+        }
+        return this.steps;
+    }
+    render() {
+        const steps = this.parsedSteps;
+        if (this.type === 'linear') {
+            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' }))))))), this.activeStep === steps.length && (h("div", { class: "completed" }, h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+        }
+        // Static mode: show all steps with their content, no navigation buttons.
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
+    }
+    static get is() { return "eds-steps"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Step[]",
+                    "resolved": "Step[] | string",
+                    "references": {
+                        "Step": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps/eds-steps.tsx",
+                            "id": "../../../packages/components/src/components/eds-steps/eds-steps.tsx::Step"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string containing an array of step objects.\nExample:\n'[\n  { \"title\": \"Get Access...\", \"content\": \"To participate...\" },\n  { \"title\": \"Subscribe...\", \"content\": \"Technical Coordination...\" },\n  { \"title\": \"Confirm Your Subscription\" }\n]'"
+                },
+                "attribute": "steps",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'static' | 'linear'",
+                    "resolved": "\"linear\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of stepper. Default is \"static\" (all steps visible, no buttons).\nIf set to \"linear\", then only one step is visible at a time with navigation."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'static'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stepClick",
+                "name": "stepClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a step is clicked, providing the step's index."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,35 @@
+export default {
+    title: 'Components/Steps',
+    component: 'eds-steps',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['static', 'linear'],
+            mapping: {
+                static: 'static',
+                linear: 'linear'
+            },
+            description: 'The type of stepper: "static" shows all steps simultaneously, while "linear" shows one step at a time with navigation controls.'
+        },
+        steps: {
+            control: { type: 'object' },
+            description: 'An array of step objects. Each object should include a "title" and an optional "content" property.'
+        }
+    },
+    args: {
+        type: 'static',
+        steps: [
+            { title: 'Introduction', content: 'Begin by familiarizing yourself with the overall process.' },
+            { title: 'Process Overview', content: 'Review the detailed steps and understand the workflow.' },
+            { title: 'Completion', content: 'Confirm your actions and finish the procedure.' }
+        ]
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-steps 
+        type="${args.type}" 
+        steps='${JSON.stringify(args.steps)}'
+      ></eds-steps>
+    `
+};

package/dist/collection/components/eds-steps/eds-vertical-stepper.css

@@ -0,0 +1,78 @@
+:host {
+    display: block;
+  }
+  
+  .stepper-container {
+    /*max-width: 400px;*/
+    margin: 0 auto;
+  }
+  
+  .stepper {
+    position: sticky;
+    margin-left: 16px;
+    margin-bottom: 12px;
+    border-left: 1px solid var(--soft-color, #ddd); /* replace var() with your color if needed */
+    padding-left: 24px;
+    counter-reset: step;
+  }
+  
+  .step {
+    margin-bottom: 24px;
+  }
+  
+  .step-label {
+    counter-increment: step;
+    /* Example font style; adjust to your design */
+    font-size: 1.25rem;
+    font-weight: 600;
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  
+  /* Numbering similar to CSS counters */
+  .step-label::before {
+    content: counter(step);
+    position: absolute;
+    left: -40px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    font-size: 1rem;
+    border: 1px solid #ccc; /* adjust border style as needed */
+    background:var(--grey-900); /* adjust background color as needed */
+    color: #fff;      /* adjust text color as needed */
+    border-radius: 50%;
+  }
+  
+  .optional {
+    font-size: 0.8rem;
+    color: #888;
+    margin-left: 8px;
+  }
+  
+  .step-content {
+    /*margin-left: 16px;*/
+    margin-top: 8px;
+  }
+  
+  .step-buttons {
+    margin-top: 12px;
+  }
+  
+  .step-buttons button {
+    margin-right: 8px;
+    padding: 6px 12px;
+    font-size: 0.875rem;
+  }
+  
+  .completed {
+    padding: 16px;
+    border: 1px solid #ddd;
+    margin-top: 16px;
+    text-align: center;
+  }
+  

package/dist/collection/components/eds-steps/eds-vertical-stepper.js

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+export class EdsVerticalStepper {
+    constructor() {
+        this.handleNext = () => {
+            if (this.activeStep < this.parsedSteps.length) {
+                this.activeStep = this.activeStep + 1;
+            }
+        };
+        this.handleBack = () => {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+            }
+        };
+        this.handleReset = () => {
+            this.activeStep = 0;
+        };
+        this.steps = '[]';
+        this.activeStep = 0;
+    }
+    get parsedSteps() {
+        try {
+            return JSON.parse(this.steps);
+        }
+        catch (error) {
+            //console.error('Invalid steps JSON', error);
+            return [];
+        }
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: '08fa2f85c49dbe217b2f9d068bee486e432f5315', class: "stepper-container" }, h("div", { key: '6f7e0a0ccaa2882794a6be0216201d1bf924e2b2', class: "stepper" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("div", { class: "step-label" }, h("span", null, step.label), index === steps.length - 1 && h("span", { class: "f-ui-03 text-lightest ml-4" }, "(Last step)")), this.activeStep === index && (h("div", { class: "step-content" }, h("p", null, step.description), h("div", { class: "step-buttons" }, h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))), this.activeStep === steps.length && (h("div", { key: '8a5ebfed582b25d828758e1762a063df6c745093', class: "" }, h("eds-alert", { key: 'a142fb50b8df533dd97f770aeaa453f2379ea7cb', intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { key: '5cfba059c9a152f179e7c31fa5d7a222c00defe2', label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+    }
+    static get is() { return "eds-vertical-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-vertical-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-vertical-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string containing an array of steps.\nExample:\n'[\n  { \"label\": \"Select campaign settings\", \"description\": \"For each ad campaign...\" },\n  { \"label\": \"Create an ad group\", \"description\": \"An ad group contains one or more ads...\" },\n  { \"label\": \"Create an ad\", \"description\": \"Try out different ad text...\" }\n]'"
+                },
+                "attribute": "steps",
+                "reflect": false,
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeStep": {}
+        };
+    }
+}

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

@@ -0,0 +1,59 @@
+:host {
+    display: inline-block;
+  }
+  
+  .switch-container {
+    display: inline-flex;
+    align-items: center;
+  }
+  
+  .switch-label {
+    font-size: 14px;
+    margin: 0 8px;
+  }
+  
+  /* Base styling for the switch button */
+  button.switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 50px;
+    height: 26px;
+    border: none;
+    border-radius: 13px;
+    background-color: #ccc;
+    padding: 0;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  button.switch:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #007aff;
+  }
+  
+  button.switch.switch--checked {
+    background-color: var(--green-500);
+  }
+  
+  button.switch.switch--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  /* Styling for the handle */
+  .switch-handle {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background-color: #fff;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s;
+  }
+  
+  button.switch.switch--checked .switch-handle {
+    transform: translateX(24px);
+  }
+