wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/collection/components/stepper-item/vds-stepper-item.js

@@ -0,0 +1,292 @@
+import { Host, h } from "@stencil/core";
+export class VdsStepperItem {
+    constructor() {
+        /** Sets the text alignment */
+        this.textAlignment = 'left';
+        /** Sets the stepper in disabled state */
+        this.disabled = false;
+        /** Sets the stepper state */
+        this.state = 'default';
+        /** Sets the text inside the circle in the stepper */
+        this.text = '';
+        /** Sets the icon inside the circle in the stepper. When set, the icon will override the text value */
+        this.icon = '';
+        /**
+         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * When true, the item stepper can render divider and activeContent
+         */
+        this.manageContent = false;
+        /**
+         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * When true, the item stepper display the slot content of the element
+         * without being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`
+         */
+        this.activeContent = false;
+        /**
+         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * When true, the item stepper renders a vds-divider after the header
+         */
+        this.divider = false;
+        this.onClick = (evt) => {
+            if (!this.disabled) {
+                this.selected.emit(evt);
+            }
+        };
+    }
+    componentDidLoad() {
+        this.updateStepperHeader();
+    }
+    onPropsChange() {
+        this.updateStepperHeader();
+    }
+    updateStepperHeader() {
+        try {
+            const stepperHeader = this.hostEl.querySelector('vds-stepper-item-header[slot="item-header"]');
+            if (stepperHeader) {
+                stepperHeader.textAlignment = this.textAlignment;
+                stepperHeader.disabled = this.disabled;
+            }
+        }
+        catch (e) {
+            console.warn('updateStepperHeader warning: ', e);
+        }
+    }
+    renderCircleContent() {
+        if (this.icon) {
+            return h("vds-icon", { class: "vds-stepper-item__circle-icon", svgIcon: this.icon, color: this.disabled ? 'color-icon-disabled' : 'static-white' });
+        }
+        if (this.text) {
+            return h("span", { class: "vds-stepper-item__circle-text" }, this.text);
+        }
+        return null;
+    }
+    renderCircle() {
+        return (h("div", { class: {
+                'vds-stepper-item__circle': true,
+                [`vds-stepper-item__circle--${this.state}`]: true,
+                'vds-stepper-item__circle--disabled': this.disabled,
+            } }, this.renderCircleContent()));
+    }
+    render() {
+        return (h(Host, { key: '329ef7870ad5de235f05e2acafaa48a38eace6ab', class: { disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, } }, this.manageContent && ([
+            h("div", { key: 'fbdc12ece4fceaff88f0a97046927dfbaa2388d9', class: "vds-stepper-item--header-section" }, h("button", { key: '685856d482637bd1bcd1bd48bdc709dd6723fcfd', class: {
+                    'vds-stepper-item': true,
+                    [`vds-stepper-item--text-align-${this.textAlignment}`]: true,
+                }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: '5067e3179b28d2b84c52e16bca87a5a7d50ce1ca', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: '718da98b09257b6ce0f7b66dbc299926d9da59d1', name: "item-header" }))), this.divider && this.textAlignment === "center" && (h("vds-divider", { key: '9c8bc63a9ed4f485b4e5ab7a0acdaf1672a8fcb2', orientation: 'vertical' }))),
+            h("div", { key: 'e16296ce450ae8eaa9f523856a005ac41269dea8', class: "vds-stepper-item__content-cotainer", slot: this.textAlignment === "center" ? "vertical-stepper" : undefined }, h("div", { key: '7c104a43e6d0dd1f4db883fb6007bb2fc65e56e2', class: `vds-stepper-item__content ${this.activeContent ? "vds-stepper-item__content--visible" : ""}` }, this.textAlignment === "left" && (h("vds-divider", { key: '9a15b80e884fe1949c011cac916c6bddcfb2ccac', orientation: 'vertical', class: this.divider ? "" : "divider-no-visible" })), h("slot", { key: '3b5729b533581d6ec49b15663eb4f35621d01ef2', name: "item-content" })))
+        ]), !this.manageContent && (h("button", { key: '95708b4ff591181f2a204d3f5b45121c5b5a6a33', class: {
+                'vds-stepper-item': true,
+                [`vds-stepper-item--text-align-${this.textAlignment}`]: true,
+            }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: '8c2fe22df2ef332a160665b5a1b55f2f437b0ab5', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: 'a1994ed9736404d18ec30c2f79e506261a2e4f88', name: "item-header" })), h("div", { key: '572515c97df445f402e33f59291f2efb4e2529e0', class: "vds-stepper-item__content" }, h("slot", { key: 'd0e0c14d1fdcc64fd6538ef9e1325b7b4ceb5b67', name: "item-content" }))))));
+    }
+    static get is() { return "vds-stepper-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-stepper-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-stepper-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "textAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | 'left'",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-alignment",
+                "defaultValue": "'left'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the stepper in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'completed' | 'error'",
+                    "resolved": "\"completed\" | \"default\" | \"error\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the stepper state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text inside the circle in the stepper"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the icon inside the circle in the stepper. When set, the icon will override the text value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "manageContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper can render divider and activeContent"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "manage-content",
+                "defaultValue": "false"
+            },
+            "activeContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper display the slot content of the element \nwithout being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-content",
+                "defaultValue": "false"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper renders a vds-divider after the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when item is selected"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "textAlignment",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onPropsChange"
+            }];
+    }
+}
+//# sourceMappingURL=vds-stepper-item.js.map

package/dist/collection/components/stepper-item/vds-stepper-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-stepper-item.js","sourceRoot":"","sources":["../../../src/components/stepper-item/vds-stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'vds-stepper-item',\n  styleUrl: 'vds-stepper-item.scss',\n  shadow: true,\n})\nexport class VdsStepperItem {\n  /** Sets the text alignment */\n  @Prop() textAlignment: 'center' | 'left' = 'left';\n  /** Sets the stepper in disabled state */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Sets the stepper state */\n  @Prop() state: 'default' | 'completed' | 'error' = 'default';\n  /** Sets the text inside the circle in the stepper */\n  @Prop() text: string = '';\n  /** Sets the icon inside the circle in the stepper. When set, the icon will override the text value */\n  @Prop() icon: string = '';\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper can render divider and activeContent\n   */\n  @Prop() manageContent: boolean = false;\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper display the slot content of the element \n   * without being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`\n   */\n  @Prop() activeContent: boolean = false;\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper renders a vds-divider after the header\n   */\n  @Prop() divider: boolean = false;\n\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<MouseEvent>;\n\n  @Element() hostEl: HTMLElement;\n\n  componentDidLoad() {\n    this.updateStepperHeader();\n  }\n\n  @Watch('textAlignment')\n  @Watch('disabled')\n  onPropsChange() {\n    this.updateStepperHeader();\n  }\n\n  private updateStepperHeader() {\n    try {\n      const stepperHeader = this.hostEl.querySelector('vds-stepper-item-header[slot=\"item-header\"]') as HTMLVdsStepperItemHeaderElement;\n      if (stepperHeader) {\n        stepperHeader.textAlignment = this.textAlignment;\n        stepperHeader.disabled = this.disabled;\n      }\n    } catch (e) {\n      console.warn('updateStepperHeader warning: ', e);\n    }\n  }\n\n  private onClick = (evt: MouseEvent) => {\n    if (!this.disabled) {\n      this.selected.emit(evt);\n    }\n  };\n\n  private renderCircleContent() {\n    if (this.icon) {\n      return <vds-icon class=\"vds-stepper-item__circle-icon\" svgIcon={this.icon} color={this.disabled ? 'color-icon-disabled' : 'static-white'} />;\n    }\n    if (this.text) {\n      return <span class=\"vds-stepper-item__circle-text\">{this.text}</span>;\n    }\n    return null;\n  }\n\n  renderCircle() {\n    return (\n      <div\n        class={{\n          'vds-stepper-item__circle': true,\n          [`vds-stepper-item__circle--${this.state}`]: true,\n          'vds-stepper-item__circle--disabled': this.disabled,\n        }}\n      >\n        {this.renderCircleContent()}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, }}>\n        {this.manageContent && (\n          [\n            <div class=\"vds-stepper-item--header-section\">\n              <button\n                class={{\n                  'vds-stepper-item': true,\n                  [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n                }}\n                onClick={this.onClick}\n                tabIndex={this.disabled ? -1 : 0}\n                disabled={this.disabled}\n              >\n                <div class=\"vds-stepper-item__header\">\n                  {this.renderCircle()}\n                  <slot name=\"item-header\"></slot>\n                </div>\n              </button>\n              {this.divider && this.textAlignment === \"center\" && (<vds-divider orientation='vertical'></vds-divider>)}\n            </div>,\n            <div class=\"vds-stepper-item__content-cotainer\" slot={this.textAlignment === \"center\" ? \"vertical-stepper\" : undefined}>\n              <div class={`vds-stepper-item__content ${this.activeContent ? \"vds-stepper-item__content--visible\" : \"\"}`}>\n                {this.textAlignment === \"left\" && (<vds-divider orientation='vertical' class={this.divider ? \"\" : \"divider-no-visible\"}></vds-divider>)}\n                <slot name=\"item-content\"></slot>\n              </div>\n            </div>\n          ]\n        )}\n        {!this.manageContent && (\n          <button\n          class={{\n            'vds-stepper-item': true,\n            [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n          }}\n          onClick={this.onClick}\n          tabIndex={this.disabled ? -1 : 0}\n          disabled={this.disabled}\n        >\n          <div class=\"vds-stepper-item__header\">\n            {this.renderCircle()}\n            <slot name=\"item-header\"></slot>\n          </div>\n          <div class=\"vds-stepper-item__content\">\n            <slot name=\"item-content\"></slot>\n          </div>\n        </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stepper-item/vds-stepper-item.stories.js

@@ -0,0 +1,115 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Stepper/Stepper-Item',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',
+        },
+    },
+    argTypes: {
+        textAlignment: {
+            options: ['center', 'left'],
+            control: { type: 'select' },
+        },
+        state: {
+            options: ['default', 'completed', 'error'],
+            control: { type: 'select' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        icon: {
+            options: [undefined, ...ICON_LIST],
+            control: { type: 'select' },
+        },
+    },
+};
+const styles = `
+  <style>
+    .container {
+      padding: 1rem;
+    }
+    .vds-stepper-item__content {
+      margin-top: 1rem;
+      padding: 1rem;
+      border: 1px solid var(--color-border-low);
+      border-radius: var(--radius-medium);
+      background-color: var(--surface-lower);
+      color: var(--color-text-high);
+    }
+  </style>
+`;
+const codeTemplate = args => {
+    return `
+    ${styles}
+    <div class="container">
+      <vds-stepper-item
+        text-alignment="${args.textAlignment}"
+        state="${args.state}"
+        disabled="${args.disabled}"
+        text="${args.text}"
+        ${args.icon ? `icon="${args.icon}"` : ''}
+      >
+        <vds-stepper-item-header
+          slot="item-header"
+          title="${args.title}"
+          description="${args.description}"
+        ></vds-stepper-item-header>
+      </vds-stepper-item>
+      <!-- Content moved outside stepper-item to simulate parent behavior -->
+      <div class="vds-stepper-item__content" content-index="0" active>Step content goes here.</div>
+    </div>
+  `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    textAlignment: 'left',
+    state: 'default',
+    disabled: false,
+    text: '1',
+    icon: '',
+    title: 'Step Title',
+    description: 'Step Description',
+};
+const codeVerticalTemplate = args => {
+    return `
+    ${styles}
+    <div class="container vds-vertical-stepper vds-vertical-stepper-left-aligned">
+      <vds-stepper-item
+        text-alignment="left"
+        state="${args.state}"
+        disabled="${args.disabled}"
+        manage-content
+        ${args.activeContent ? "active-content" : ""}
+        ${args.divider ? "divider" : ""}
+        text="${args.text}"
+        ${args.icon ? `icon="${args.icon}"` : ''}
+      >
+        <vds-stepper-item-header
+          slot="item-header"
+          title="${args.title}"
+          description="${args.description}"
+        ></vds-stepper-item-header>
+
+        <div slot="item-content" style="width: 500px; height: 500px; border: 1px solid gray; text-align: center">Content</div>
+      </vds-stepper-item>
+    </div>
+  `;
+};
+export const VerticalUsage = codeVerticalTemplate.bind({});
+VerticalUsage.args = {
+    state: 'default',
+    disabled: false,
+    divider: true,
+    activeContent: true,
+    text: '1',
+    icon: '',
+    title: 'Step Title',
+    description: 'Step Description',
+};
+//# sourceMappingURL=vds-stepper-item.stories.js.map

package/dist/collection/components/stepper-item/vds-stepper-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-stepper-item.stories.js","sourceRoot":"","sources":["../../../src/components/stepper-item/vds-stepper-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;YAC1C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;;;;CAcd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;MACH,MAAM;;;0BAGc,IAAI,CAAC,aAAa;iBAC3B,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;UACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;;;;mBAI7B,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,WAAW;;;;;;GAMtC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,aAAa,EAAE,MAAM;IACrB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE;IAClC,OAAO;MACH,MAAM;;;;iBAIK,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;;UAEvB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAA,CAAC,CAAC,EAAE;UACzC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,EAAE;gBACtB,IAAI,CAAC,IAAI;UACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;;;;mBAI7B,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,WAAW;;;;;;GAMtC,CAAC;AAGJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3D,aAAa,CAAC,IAAI,GAAG;IACnB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,IAAI;IACb,aAAa,EAAE,IAAI;IACnB,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,kBAAkB;CAChC,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from '../../utils/icon-utils';\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n  title: 'VDS/Components/Stepper/Stepper-Item',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-129736&m=dev',\n    },\n  },\n  argTypes: {\n    textAlignment: {\n      options: ['center', 'left'],\n      control: { type: 'select' },\n    },\n    state: {\n      options: ['default', 'completed', 'error'],\n      control: { type: 'select' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n    icon: {\n      options: [undefined, ...ICON_LIST],\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst styles = `\n  <style>\n    .container {\n      padding: 1rem;\n    }\n    .vds-stepper-item__content {\n      margin-top: 1rem;\n      padding: 1rem;\n      border: 1px solid var(--color-border-low);\n      border-radius: var(--radius-medium);\n      background-color: var(--surface-lower);\n      color: var(--color-text-high);\n    }\n  </style>\n`;\n\nconst codeTemplate = args => {\n  return `\n    ${styles}\n    <div class=\"container\">\n      <vds-stepper-item\n        text-alignment=\"${args.textAlignment}\"\n        state=\"${args.state}\"\n        disabled=\"${args.disabled}\"\n        text=\"${args.text}\"\n        ${args.icon ? `icon=\"${args.icon}\"` : ''}\n      >\n        <vds-stepper-item-header\n          slot=\"item-header\"\n          title=\"${args.title}\"\n          description=\"${args.description}\"\n        ></vds-stepper-item-header>\n      </vds-stepper-item>\n      <!-- Content moved outside stepper-item to simulate parent behavior -->\n      <div class=\"vds-stepper-item__content\" content-index=\"0\" active>Step content goes here.</div>\n    </div>\n  `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  textAlignment: 'left',\n  state: 'default',\n  disabled: false,\n  text: '1',\n  icon: '',\n  title: 'Step Title',\n  description: 'Step Description',\n};\n\nconst codeVerticalTemplate = args => {\n  return `\n    ${styles}\n    <div class=\"container vds-vertical-stepper vds-vertical-stepper-left-aligned\">\n      <vds-stepper-item\n        text-alignment=\"left\"\n        state=\"${args.state}\"\n        disabled=\"${args.disabled}\"\n        manage-content\n        ${args.activeContent ? \"active-content\": \"\"}\n        ${args.divider ? \"divider\": \"\"}\n        text=\"${args.text}\"\n        ${args.icon ? `icon=\"${args.icon}\"` : ''}\n      >\n        <vds-stepper-item-header\n          slot=\"item-header\"\n          title=\"${args.title}\"\n          description=\"${args.description}\"\n        ></vds-stepper-item-header>\n\n        <div slot=\"item-content\" style=\"width: 500px; height: 500px; border: 1px solid gray; text-align: center\">Content</div>\n      </vds-stepper-item>\n    </div>\n  `;\n\n\n};\n\nexport const VerticalUsage = codeVerticalTemplate.bind({});\n\nVerticalUsage.args = {\n  state: 'default',\n  disabled: false,\n  divider: true,\n  activeContent: true,\n  text: '1',\n  icon: '',\n  title: 'Step Title',\n  description: 'Step Description',\n};\n\n"]}