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

const meta: Meta<typeof MSegmentedControl> = {
  title: 'Action/Segmented Control',
  component: MSegmentedControl,
  parameters: {
    docs: {
      description: {
        component:
          'A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.',
      },
    },
  },
  args: {
    segments: [
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
    ],
  },
  render: (args) => ({
    components: { MSegmentedControl },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MSegmentedControl
        v-bind="args"
        @update:modelValue="handleUpdate"
      ></MSegmentedControl>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MSegmentedControl>;

export const Default: Story = {};

export const Icons: Story = {
  args: {
    segments: [
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
      {
        label: 'Label',
      },
    ],
  },
};

export const Size: Story = {
  args: { size: 'm' },
};

export const Full: Story = {
  args: { full: true },
};