@mozaic-ds/vue/src/components/stepperbottombar/MStepperBottomBar.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';

import MStepperBottomBar from './MStepperBottomBar.vue';

const meta: Meta<typeof MStepperBottomBar> = {
  title: 'Structure/Stepper Bottom Bar',
  component: MStepperBottomBar,
  tags: ['v2'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '200px' },
      description: {
        component:
          'A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.',
      },
    },
  },
  argTypes: {
    // @ts-expect-error: custom css property
    '--stepper-bottom-bar-z-index': {
      description: 'Customise the z-index of the stepper bottom bar',
      control: false,
      table: {
        category: 'Custom Properties',
        type: { summary: 'number' },
        defaultValue: { summary: '3' },
      },
    },
  },
  args: {
    steps: 3,
    modelValue: 0,
  },
  render: (args) => ({
    components: { MStepperBottomBar },
    setup() {
      const onUpdate = action('update:modelValue');
      const onCancel = action('cancel');
      const onValidate = action('validate');

      return { args, onUpdate, onCancel, onValidate };
    },
    template: `
        <MStepperBottomBar
          v-bind="args"
          @update:modelValue="onUpdate"
          @cancel="onCancel"
          @validate="onValidate"
        />
    `,
  }),
};

export default meta;

type Story = StoryObj<typeof MStepperBottomBar>;

export const First: Story = {};

export const Middle: Story = {
  args: {
    modelValue: 2,
  },
};

export const Last: Story = {
  args: {
    modelValue: 3,
  },
};