@mozaic-ds/vue/src/components/steppercompact/MStepperCompact.stories.ts

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

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

const meta: Meta<typeof MStepperCompact> = {
  title: 'Indicators/Stepper Compact',
  component: MStepperCompact,
  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.',
      },
    },
  },
  argTypes: {
    value: {
      control: { type: 'number', min: 1, max: 10 },
    },
    maxSteps: {
      control: { type: 'number', min: 2, max: 10 },
    },
  },
  args: {
    value: 1,
    maxSteps: 4,
    label: 'Current Step',
    description: 'Next: Step label',
  },
  render: (args) => ({
    components: { MStepperCompact },
    setup() {
      return { args };
    },
    template: `
      <MStepperCompact v-bind="args"></MStepperCompact>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MStepperCompact>;

export const Default: Story = {};