@ebrains/components 2.1.0 → 2.3.0

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

@@ -2,33 +2,67 @@ import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
 export class EdsSteps {
     constructor() {
-        this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+        this.handleTitleClick = (index) => {
+            // 1) If clicking the current title, keep your existing toggle behavior
+            if (index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
                 this.step.emit(this.activeStep);
+                return;
+            }
+            // 2) In linear mode, block jumping *forward* when current step is gated
+            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            if (forwardBlocked) {
+                return;
+            } // do nothing when Next/Finish would be disabled
+            // 3) Allow jumping back or forward when not gated
+            this.activeStep = index;
+            this.step.emit(this.activeStep);
+        };
+        this.handleNext = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.activeStep = -1;
+                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 +70,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 +83,43 @@ 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 as a clickable control only in linear mode */
+    renderHeading(title, index) {
+        const Tag = this.headingLevel;
+        if (this.type === 'linear') {
+            const forwardBlocked = index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            const onKey = (e) => {
+                if (forwardBlocked) {
+                    return;
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTitleClick(index);
+                }
+            };
+            const isOpen = this.activeStep === index;
+            return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
+        }
+        return h(Tag, { class: "eds-steps__title" }, 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, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, 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, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, 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 +152,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 +173,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 +318,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)
 };

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

@@ -1,32 +1,3 @@
-/*
-Remove the default font size and weight for headings.
-*/
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
 .steps {
   position: sticky;
   margin-left: 16px;
@@ -49,7 +20,7 @@ pre {
   content: counter(step);
   position: absolute;
   left: -40px;
-  top: 0;
+  top: -2px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -66,7 +37,8 @@ pre {
 }
 
 /* Style for h4 headings inside the steps */
-.steps h4 {
+.steps h4,
+.steps h5 {
   counter-increment: step;
   font-size: var(--f-heading-06-fontSize);
   font-weight: var(--f-heading-06-fontWeight);
@@ -74,11 +46,12 @@ pre {
   position: relative;
 }
 
-.steps h4::before {
+.steps h4::before,
+.steps h5::before {
   content: counter(step);
   position: absolute;
   left: -40px;
-  top: 0;
+  top: -2px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -275,4 +248,44 @@ pre {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
+}
+
+.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;
+}
+
+.px-8 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pb-20 {
+  padding-bottom: 1.25rem;
+}
+
+.eds-steps__title { cursor: pointer; }