@nuvia-ui/components 4.0.1

package/src/ds-stepper/ds-stepper.stories.js

@@ -0,0 +1,530 @@
+import { html, LitElement, css } from 'lit';
+import './ds-stepper.js';
+import '../ds-stepper-item/ds-stepper-item.js';
+import '../ds-button/ds-button.js';
+import '../ds-checkbox/ds-checkbox.js';
+import '../ds-input/ds-input.js';
+import '../ds-button-group/ds-button-group.js';
+
+// Helper component for interactive demo (CONTROLLED MODE)
+class StepperDemo extends LitElement {
+  static properties = {
+    currentStep: { type: Number },
+    maxStepReached: { type: Number },
+    _completedSteps: { type: Array, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ds-space-lg, 24px);
+      font-family: var(--ds-typo-font-family);
+      color: var(--ds-color-text-default);
+    }
+    .controls {
+      display: flex;
+      gap: var(--ds-space-md, 16px);
+      margin-top: var(--ds-space-xl, 32px);
+      justify-content: space-between;
+      align-items: center;
+    }
+    .nav-buttons {
+      display: flex;
+      gap: var(--ds-space-md, 16px);
+    }
+    .content {
+      margin-top: var(--ds-space-xl, 32px);
+      padding: var(--ds-space-lg, 24px);
+      background: var(--ds-color-bg-surface-secondary, #f5f5f5);
+      border-radius: var(--ds-radius-lg, 8px);
+      text-align: center;
+      border: 1px dashed var(--ds-color-border-default, #e0e0e0);
+    }
+    .content h3 {
+      margin-top: 0;
+      font: var(--ds-typo-heading-xs);
+      color: var(--ds-color-text-heading);
+    }
+    .content p {
+        font: var(--ds-typo-content-body-regular);
+        color: var(--ds-color-text-secondary);
+    }
+    .step-actions {
+      margin-top: var(--ds-space-md, 16px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: var(--ds-space-sm, 8px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.currentStep = 1;
+    this.maxStepReached = 1;
+    this.totalSteps = 4;
+    this._completedSteps = [];
+  }
+
+  _isCompleted(step) {
+    return this._completedSteps.includes(step);
+  }
+
+  _toggleComplete(e) {
+    const checked = e.detail ? e.detail.checked : e.target.checked;
+
+    if (checked) {
+      if (!this._completedSteps.includes(this.currentStep)) {
+        this._completedSteps = [...this._completedSteps, this.currentStep];
+      }
+    } else {
+      this._completedSteps = this._completedSteps.filter(s => s !== this.currentStep);
+    }
+  }
+
+  // Handle ds-change event from stepper
+  _handleStepChange(e) {
+    const newStepIndex = e.detail.currentStep; // 0-based
+    const stepNumber = newStepIndex + 1;       // 1-based
+
+    // Logic: Allow going back, or going forward only if unlocked
+    if (stepNumber <= this.maxStepReached + 1) {
+      this.currentStep = stepNumber;
+      if (this.currentStep > this.maxStepReached) {
+        this.maxStepReached = this.currentStep;
+      }
+    }
+  }
+
+  _next() {
+    if (this.currentStep < this.totalSteps) {
+      if (!this._completedSteps.includes(this.currentStep)) {
+        this._completedSteps = [...this._completedSteps, this.currentStep];
+      }
+
+      this.currentStep++;
+      if (this.currentStep > this.maxStepReached) {
+        this.maxStepReached = this.currentStep;
+      }
+    }
+  }
+
+  _prev() {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  render() {
+    // Note: We use active-step (0-based) prop, converting from our 1-based state
+    return html`
+      <ds-stepper 
+        active-step="${this.currentStep - 1}"
+        .autoComplete=${false}
+        @ds-change=${this._handleStepChange}
+      >
+        <ds-stepper-item ?completed=${this._isCompleted(1)}>Account Info</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._isCompleted(2)}>Personal Details</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._isCompleted(3)}>Payment</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._isCompleted(4)}>Confirmation</ds-stepper-item>
+      </ds-stepper>
+
+      <div class="content">
+        <h3>Step ${this.currentStep}: ${this._getStepValidation(this.currentStep)}</h3>
+        <p>Interactive content for step ${this.currentStep} goes here.</p>
+        
+        <div class="step-actions">
+           <ds-checkbox 
+              .checked=${this._isCompleted(this.currentStep)}
+              @change=${this._toggleComplete}
+          >
+             Mark step as completed
+           </ds-checkbox>
+        </div>
+      </div>
+
+      <div class="controls">
+        <ds-button 
+            variant="secondary" 
+            @click=${this._prev} 
+            ?disabled=${this.currentStep === 1}
+        >
+            Previous
+        </ds-button>
+        
+        <div class="nav-buttons">
+          <ds-button 
+            variant="primary" 
+            @click=${this._next} 
+            ?disabled=${this.currentStep === this.totalSteps}
+          >
+            ${this.currentStep === this.totalSteps ? 'Finish' : 'Next'}
+          </ds-button>
+        </div>
+      </div>
+    `;
+  }
+
+  _getStepValidation(step) {
+    switch (step) {
+      case 1: return 'Enter Account Info';
+      case 2: return 'Enter Personal Details';
+      case 3: return 'Enter Payment Info';
+      case 4: return 'Confirm Order';
+      default: return '';
+    }
+  }
+}
+
+if (!customElements.get('ds-stepper-demo')) {
+  customElements.define('ds-stepper-demo', StepperDemo);
+}
+
+export default {
+  title: 'Components/Stepper',
+  component: 'ds-stepper',
+  tags: ['autodocs'],
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Layout direction of the stepper'
+    },
+    activeStep: {
+      control: { type: 'number', min: 0, max: 4 },
+      description: 'Controlled active step index (0-based)'
+    }
+  }
+};
+
+// ===== UNCONTROLLED (Self-managed) =====
+export const Uncontrolled = {
+  args: {
+    direction: 'horizontal'
+  },
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <p style="font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-secondary);">
+        <strong>Uncontrolled Mode:</strong> No <code>active-step</code> prop provided. Click any step to navigate. The component manages its own state.
+      </p>
+      <ds-stepper direction="${args.direction}">
+        <ds-stepper-item>Step 1</ds-stepper-item>
+        <ds-stepper-item>Step 2</ds-stepper-item>
+        <ds-stepper-item>Step 3</ds-stepper-item>
+        <ds-stepper-item>Step 4</ds-stepper-item>
+      </ds-stepper>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'In Uncontrolled mode (no `active-step` prop), the stepper automatically updates its state when clicked. Ideal for simple navigation or tabs.'
+      }
+    }
+  }
+};
+
+// ===== CONTROLLED (Prop-driven) =====
+export const Controlled = {
+  args: {
+    direction: 'horizontal',
+    activeStep: 1
+  },
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <p style="font: var(--ds-typo-content-body-regular); color: var(--ds-color-text-secondary);">
+        <strong>Controlled Mode:</strong> <code>active-step</code> is set to <strong>${args.activeStep}</strong>. Clicking steps emits <code>ds-change</code> but DOES NOT change the UI unless the prop is updated (try changing the control below).
+      </p>
+      <ds-stepper direction="${args.direction}" active-step="${args.activeStep}">
+        <ds-stepper-item>Step 1</ds-stepper-item>
+        <ds-stepper-item>Step 2</ds-stepper-item>
+        <ds-stepper-item>Step 3</ds-stepper-item>
+        <ds-stepper-item>Step 4</ds-stepper-item>
+      </ds-stepper>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'In Controlled mode (with `active-step` prop), the component effectively becomes read-only regarding internal state changes. It relies on the parent to update the prop.'
+      }
+    }
+  }
+};
+
+// ===== LINEAR MODE =====
+export const Linear = {
+  args: {
+    direction: 'horizontal',
+    activeStep: 1
+  },
+  render: (args) => html`
+    <div style="display: flex; flex-direction: column; gap: 48px;">
+      <div>
+        <h3 style="font: var(--ds-typo-heading-xs); color: var(--ds-color-text-heading); margin-bottom: 16px;">Linear Mode (future steps non-interactive)</h3>
+        <ds-stepper direction="${args.direction}" active-step="${args.activeStep}" linear>
+          <ds-stepper-item>Step 1</ds-stepper-item>
+          <ds-stepper-item>Step 2</ds-stepper-item>
+          <ds-stepper-item>Step 3</ds-stepper-item>
+          <ds-stepper-item>Step 4</ds-stepper-item>
+        </ds-stepper>
+      </div>
+    </div>
+  `
+};
+
+// ===== ERROR STATE =====
+export const ErrorState = {
+  render: (args) => html`
+    <ds-stepper direction="horizontal" active-step="1">
+        <ds-stepper-item>Account Info</ds-stepper-item>
+        <ds-stepper-item error>Payment Details</ds-stepper-item>
+        <ds-stepper-item>Review</ds-stepper-item>
+        <ds-stepper-item>Confirm</ds-stepper-item>
+    </ds-stepper>
+  `
+};
+
+// ===== INTERACTIVE DEMO =====
+export const InteractiveDemo = {
+  render: () => html`<ds-stepper-demo></ds-stepper-demo>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A fully interactive demo using CONTROLLED mode. The parent component listens to `ds-change` and updates the `active-step` prop.'
+      }
+    }
+  }
+};
+
+// Vertical Wizard Demo
+class VerticalWizardDemo extends LitElement {
+  static properties = {
+    currentStep: { type: Number }, // 1-based
+    maxStepReached: { type: Number }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ds-space-lg, 24px);
+      font-family: var(--ds-typo-font-family);
+      color: var(--ds-color-text-default);
+    }
+    h2 {
+        font: var(--ds-typo-heading-md);
+        margin-bottom: var(--ds-space-lg, 24px);
+        color: var(--ds-color-text-heading);
+    }
+    .step-content {
+      padding: var(--ds-space-md, 16px) 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-lg, 24px);
+      max-width: 400px;
+    }
+    .actions {
+      display: flex;
+      gap: var(--ds-space-sm, 8px);
+      margin-top: var(--ds-space-md, 16px);
+      padding-top: var(--ds-space-md, 16px);
+      border-top: 1px solid var(--ds-color-border-subtle);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.currentStep = 1;
+    this.maxStepReached = 1;
+  }
+
+  // Handle ds-change event (Uncontrolled or Controlled, here we use Controlled pattern logic)
+  _handleStepChange(e) {
+    const step = e.detail.currentStep + 1;
+    if (step <= this.maxStepReached) {
+      this.currentStep = step;
+    }
+  }
+
+  _next() {
+    const nextStep = this.currentStep + 1;
+    if (nextStep > this.maxStepReached) {
+      this.maxStepReached = nextStep;
+    }
+    this.currentStep = nextStep;
+  }
+
+  _prev() {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  render() {
+    // Using UNCONTROLLED mode for demonstration where possible, or CONTROLLED if we need to sync content
+    // Actually for a wizard, CONTROLLED is best to sync the content slots visibility (although CSS handles some of it)
+    // Here we use active-step to ensure complete sync
+    return html`
+      <div style="display: flex; flex-direction: column; gap: var(--ds-space-lg, 24px);">
+        <h2>Checkout Process</h2>
+        <ds-stepper 
+            direction="vertical" 
+            active-step="${this.currentStep - 1}"
+            @ds-change=${this._handleStepChange}
+        >
+          
+          <!-- Step 1 -->
+          <ds-stepper-item>
+            <span style="font: var(--ds-typo-heading-xs); color: var(--ds-color-text-default);">Account Details</span>
+            <div slot="content" class="step-content">
+              <ds-input label="Username" style="width: 100%;"></ds-input>
+              <ds-input label="Email" type="email" style="width: 100%;"></ds-input>
+              <div class="actions">
+                <ds-button variant="primary" @click=${this._next}>Continue</ds-button>
+              </div>
+            </div>
+          </ds-stepper-item>
+          
+          <!-- Step 2 -->
+          <ds-stepper-item ?disabled=${this.maxStepReached < 2}>
+            <span style="font: var(--ds-typo-heading-xs); color: var(--ds-color-text-default);">Shipping Address</span>
+            <div slot="content" class="step-content">
+              <ds-input label="Street Address" style="width: 100%;"></ds-input>
+              <div class="actions">
+                <ds-button variant="secondary" @click=${this._prev}>Back</ds-button>
+                <ds-button variant="primary" @click=${this._next}>Continue</ds-button>
+              </div>
+            </div>
+          </ds-stepper-item>
+
+          <!-- Step 3 -->
+          <ds-stepper-item ?disabled=${this.maxStepReached < 3}>
+            <span style="font: var(--ds-typo-heading-xs); color: var(--ds-color-text-default);">Payment</span>
+            <div slot="content" class="step-content">
+              <p>Payment details go here.</p>
+              <div class="actions">
+                <ds-button variant="secondary" @click=${this._prev}>Back</ds-button>
+                <ds-button variant="primary">Submit Order</ds-button>
+              </div>
+            </div>
+          </ds-stepper-item>
+
+        </ds-stepper>
+      </div>
+    `;
+  }
+}
+customElements.define('vertical-wizard-demo', VerticalWizardDemo);
+
+export const VerticalWizard = {
+  render: () => html`<vertical-wizard-demo></vertical-wizard-demo>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical wizard example using Controlled mode.'
+      }
+    }
+  }
+};
+
+// Demo component for non-sequential navigation
+class NonSequentialDemo extends LitElement {
+  static properties = {
+    currentStep: { type: Number },
+    _completedSteps: { type: Set, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--ds-space-lg, 24px);
+      font-family: var(--ds-typo-font-family);
+      color: var(--ds-color-text-default);
+    }
+    .info {
+      margin-bottom: var(--ds-space-lg, 24px);
+      padding: var(--ds-space-md, 16px);
+      background: var(--ds-color-bg-info-subtle, #e3f2fd);
+      border-radius: var(--ds-radius-md, 4px);
+      border-left: 4px solid var(--ds-color-border-info, #1976d2);
+    }
+    h4 {
+      margin: 0 0 var(--ds-space-xs, 4px);
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+    }
+    p {
+      margin: 0;
+      font: var(--ds-typo-content-caption-regular);
+      color: var(--ds-color-text-secondary);
+    }
+    .controls {
+      margin-top: var(--ds-space-lg, 24px);
+      display: flex;
+      gap: var(--ds-space-md, 16px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.currentStep = 0;
+    this._completedSteps = new Set();
+  }
+
+  _handleChange(e) {
+    this.currentStep = e.detail.currentStep;
+  }
+
+  _completeStep(stepIndex) {
+    this._completedSteps = new Set([...this._completedSteps, stepIndex]);
+  }
+
+  _uncompleteStep(stepIndex) {
+    const newSet = new Set(this._completedSteps);
+    newSet.delete(stepIndex);
+    this._completedSteps = newSet;
+  }
+
+  render() {
+    return html`
+      <div class="info">
+        <h4>🎯 Non-Sequential Navigation (auto-complete="false")</h4>
+        <p>Click any step to navigate freely. Completed state is controlled manually — try the buttons below.</p>
+      </div>
+
+      <ds-stepper 
+        .activeStep=${this.currentStep}
+        .autoComplete=${false}
+        @ds-change=${this._handleChange}
+      >
+        <ds-stepper-item ?completed=${this._completedSteps.has(0)}>Account Setup</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._completedSteps.has(1)}>Personal Details</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._completedSteps.has(2)}>Preferences</ds-stepper-item>
+        <ds-stepper-item ?completed=${this._completedSteps.has(3)}>Confirmation</ds-stepper-item>
+      </ds-stepper>
+
+      <div class="controls">
+        <ds-button 
+          variant="primary" 
+          @click=${() => this._completeStep(this.currentStep)}
+        >✓ Mark Current Step Complete</ds-button>
+        <ds-button 
+          variant="secondary" 
+          @click=${() => this._uncompleteStep(this.currentStep)}
+        >✗ Uncomplete Current Step</ds-button>
+      </div>
+    `;
+  }
+}
+customElements.define('non-sequential-demo', NonSequentialDemo);
+
+export const NonSequentialNavigation = {
+  render: () => html`<non-sequential-demo></non-sequential-demo>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates `auto-complete="false"` mode: clicking steps changes `current` but does NOT auto-complete previous steps. Completion is fully manual via the `completed` attribute.'
+      }
+    }
+  }
+};