@mozaic-ds/vue/src/components/stepperstacked/MStepperStacked.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MStepperStacked from './MStepperStacked.vue';

const meta: Meta<typeof MStepperStacked> = {
  title: 'Indicators/Stepper Stacked',
  component: MStepperStacked,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.',
      },
    },
  },
  args: {
    currentStep: 1,
    steps: [
      { id: '1', label: 'Cart' },
      { id: '2', label: 'Delivery address' },
      { id: '3', label: 'Payment' },
      { id: '4', label: 'Order confirmation' },
    ],
  },
  render: (args) => ({
    components: { MStepperStacked },
    setup() {
      return { args };
    },
    template: `<MStepperStacked v-bind="args" />`,
  }),
};

export default meta;
type Story = StoryObj<typeof MStepperStacked>;

export const Default: Story = {};

export const AditionnalInfo: Story = {
  args: {
    currentStep: 2,
    steps: [
      { id: '1', label: 'Cart', additionalInfo: 'Additional information' },
      {
        id: '2',
        label: 'Delivery address',
        additionalInfo: 'Additional information',
      },
      { id: '3', label: 'Payment', additionalInfo: 'Additional information' },
      {
        id: '4',
        label: 'Order confirmation',
        additionalInfo: 'Additional information',
      },
    ],
  },
};