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

const meta: Meta<typeof MToggle> = {
  title: 'Form Elements/Toggle',
  component: MToggle,
  parameters: {
    docs: {
      description: {
        component:
          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.',
      },
    },
  },
  args: {
    id: 'ToggleId',
    label: 'Toggle Label',
  },
  render: (args) => ({
    components: { MToggle },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

export const Checked: Story = {
  args: {
    modelValue: true,
    id: 'checkedId',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    id: 'disabledId',
  },
};

export const Size: Story = {
  args: {
    id: 'sizeId',
    size: 's',
  },
};

export const HideLabel: Story = {
  args: {
    id: 'hideLabelId',
    label: undefined,
    ariaLabel: 'Label',
  },
};