@mozaic-ds/vue/src/components/stepperinline/MStepperInline.stories.ts

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

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

const meta: Meta<typeof MStepperInline> = {
  title: 'Indicators/Stepper Inline',
  component: MStepperInline,
  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: [
      { label: 'Cart' },
      { label: 'Delivery address' },
      { label: 'Payment' },
      { label: 'Order confirmation' },
    ],
  },
  render: (args) => ({
    components: { MStepperInline },
    setup() {
      return { args };
    },
    template: `<MStepperInline v-bind="args" />`,
  }),
};

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

export const Default: Story = {};

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