@mozaic-ds/vue/src/components/navigationindicator/MNavigationIndicator.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 MNavigationIndicator from './MNavigationIndicator.vue';

const meta: Meta<typeof MNavigationIndicator> = {
  title: 'Indicators/Navigation indicator',
  component: MNavigationIndicator,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.',
      },
    },
  },
  args: {
    steps: 6,
    modelValue: 1,
  },
  render: (args) => ({
    components: { MNavigationIndicator },
    setup() {
      const handleAction = action('action');
      return { args, handleAction };
    },
    template: `
      <MNavigationIndicator v-bind="args" v-model="args.modelValue" @action="handleAction"></MNavigationIndicator>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MNavigationIndicator>;

export const Default: Story = {};

export const Standalone: Story = {
  args: {
    player: false,
  },
};