@ebrains/components 2.1.0 → 2.2.0

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

@@ -1,93 +1,137 @@
 .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: 23px;
-    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: var(--f-heading-06-fontSize);
-    font-weight: var(--f-heading-06-fontWeight);
-    line-height: var(--f-heading-06-lineHeight);
-    position: relative;
-  }
-  
-  .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;
-  }
-
-  .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);
-  }
-
-  .text-light {
-    color: var(--grey-700);
-  }
-  .text-lighter {
-    color: var(--grey-600);
-  }
- 
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .mb-28 {
-    margin-bottom: 1.75rem;
-  }
+  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: 23px;
+  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: -2px;
+  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,
+.steps h5 {
+  counter-increment: step;
+  font-size: var(--f-heading-06-fontSize);
+  font-weight: var(--f-heading-06-fontWeight);
+  line-height: var(--f-heading-06-lineHeight);
+  position: relative;
+}
+
+.steps h4::before,
+.steps h5::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: -2px;
+  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;
+}
+
+.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);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}
+
+.mb-28 {
+  margin-bottom: 1.75rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

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

@@ -3,32 +3,49 @@ import { parseData } from "../../utils/sharedUtils";
 export class EdsSteps {
     constructor() {
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
-                this.step.emit(this.activeStep);
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.finished.emit();
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (this.isNextDisabledFor(this.activeStep)) {
+                return;
+            } // block advance only if current is disabled
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // 2) if using the boolean form, clear it when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
+                // also clear boolean form on back
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 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() {
         var _a;
         if (this.type === 'linear') {
             const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
@@ -36,19 +53,10 @@ export class EdsSteps {
             var _a;
             const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
             if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
+                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
             }
         }, 50);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
@@ -58,26 +66,29 @@ export class EdsSteps {
         });
         linkElement.dispatchEvent(event);
     }
-    handleStepClick(index) {
-        this.step.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() {
         return parseData(this.steps);
     }
+    isNextDisabledFor(index) {
+        return Array.isArray(this.disableNext)
+            ? !!this.disableNext[index] // per-step
+            : index === this.activeStep && !!this.disableNext; // only active step
+    }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return h(Tag, null, title);
+    }
     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("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", 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' })))))))));
+            return (h("div", { class: "steps" }, steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                return (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, h("slot", { name: `step-${index}` }, h("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center mt-16" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: "ml-8" })), h("slot", { name: `actions-${index}` })))));
+            })));
         }
-        // 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("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static: no navigation buttons
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
     }
     static get is() { return "eds-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -110,8 +121,11 @@ export class EdsSteps {
                 "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]'"
+                    "tags": [{
+                            "name": "default",
+                            "text": "[]"
+                        }],
+                    "text": "Steps data as an **array** or **JSON string** of objects:\n`{ title: string; content?: string }`.\n\nIn static mode, all steps and their content render.\nIn linear mode, only the active step renders its content."
                 },
                 "attribute": "steps",
                 "reflect": false,
@@ -128,12 +142,135 @@ export class EdsSteps {
                 "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."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"static\""
+                        }],
+                    "text": "Stepper mode.\n- `static`: all steps are visible (no navigation controls)\n- `linear`: one step at a time with Back/Next/Finish controls"
                 },
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'static'"
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Next\""
+                        }, {
+                            "name": "attr",
+                            "text": "next-label"
+                        }],
+                    "text": "Label for the **Next** button (linear mode)."
+                },
+                "attribute": "next-label",
+                "reflect": false,
+                "defaultValue": "'Next'"
+            },
+            "backLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Back\""
+                        }, {
+                            "name": "attr",
+                            "text": "back-label"
+                        }],
+                    "text": "Label for the **Back** button (linear mode)."
+                },
+                "attribute": "back-label",
+                "reflect": false,
+                "defaultValue": "'Back'"
+            },
+            "finishLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Finish\""
+                        }, {
+                            "name": "attr",
+                            "text": "finish-label"
+                        }],
+                    "text": "Label for the **Finish** button on the **last step** (linear mode)."
+                },
+                "attribute": "finish-label",
+                "reflect": false,
+                "defaultValue": "'Finish'"
+            },
+            "disableNext": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | boolean[]",
+                    "resolved": "boolean | boolean[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "attr",
+                            "text": "disable-next"
+                        }],
+                    "text": "If `true`, disables **Next/Finish** and prevents advancing.\nUseful for gating progression until validation passes."
+                },
+                "attribute": "disable-next",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"h4\""
+                        }, {
+                            "name": "attr",
+                            "text": "heading-level"
+                        }],
+                    "text": "Semantic heading tag used for each step title.\nAccepted values: `\"h3\" | \"h4\" | \"h5\"`."
+                },
+                "attribute": "heading-level",
+                "reflect": true,
+                "defaultValue": "'h4'"
             }
         };
     }
@@ -150,8 +287,65 @@ export class EdsSteps {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits when a step is clicked, providing the step's index."
+                    "tags": [{
+                            "name": "event",
+                            "text": "step"
+                        }],
+                    "text": "Fired whenever the active step changes.\nPayload: the **current step index**."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "finished",
+                "name": "finished",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "finished"
+                        }],
+                    "text": "Fired when the user clicks **Finish** on the **last** step."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "next"
+                        }],
+                    "text": "Fired when the user clicks **Next** (before advancing),\nwith the **target** step index (current + 1)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "back"
+                        }],
+                    "text": "Fired when the user clicks **Back** (before going back),\nwith the **target** step index (current - 1)."
                 },
                 "complexType": {
                     "original": "number",

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

@@ -14,6 +14,28 @@ export default {
         steps: {
             control: { type: 'object' },
             description: 'An array of step objects. Each object should include a "title" and an optional "content" property.'
+        },
+        headingLevel: {
+            name: 'heading-level',
+            control: { type: 'select' },
+            options: ['h3', 'h4', 'h5'],
+            description: 'Semantic heading tag to render for each step title.'
+        },
+        nextLabel: {
+            control: 'text',
+            description: 'Label for the Next button (linear mode).'
+        },
+        backLabel: {
+            control: 'text',
+            description: 'Label for the Back button (linear mode).'
+        },
+        finishLabel: {
+            control: 'text',
+            description: 'Label for the Finish button on the last step (linear mode).'
+        },
+        disableNext: {
+            control: 'boolean',
+            description: 'Disables the Next/Finish button to block progression (linear mode).'
         }
     },
     args: {
@@ -22,14 +44,56 @@ export default {
             { 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.' }
-        ]
+        ],
+        headingLevel: 'h4',
+        nextLabel: 'Next',
+        backLabel: 'Back',
+        finishLabel: 'Finish',
+        disableNext: false
     }
 };
+const renderSteps = (args) => {
+    const disableAttr = args.disableNext ? ' disable-next' : '';
+    return `
+    <eds-steps
+      type="${args.type}"
+      steps='${JSON.stringify(args.steps)}'
+      heading-level="${args.headingLevel}"
+      next-label="${args.nextLabel}"
+      back-label="${args.backLabel}"
+      finish-label="${args.finishLabel}"${disableAttr}
+    ></eds-steps>
+  `;
+};
 export const Default = {
-    render: (args) => `
-      <eds-steps 
-        type="${args.type}" 
-        steps='${JSON.stringify(args.steps)}'
-      ></eds-steps>
-    `
+    render: (args) => renderSteps(args)
+};
+export const Linear = {
+    args: {
+        type: 'linear'
+    },
+    render: (args) => renderSteps(args)
+};
+export const LinearBlocked = {
+    args: {
+        type: 'linear',
+        disableNext: true
+    },
+    render: (args) => renderSteps(args)
+};
+export const CustomLabels = {
+    args: {
+        type: 'linear',
+        nextLabel: 'Continue',
+        backLabel: 'Previous',
+        finishLabel: 'Create form'
+    },
+    render: (args) => renderSteps(args)
+};
+export const HeadingLevels = {
+    args: {
+        type: 'static',
+        headingLevel: 'h3'
+    },
+    render: (args) => renderSteps(args)
 };