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

const meta: Meta<typeof MCheckbox> = {
  title: 'Form Elements/Checkbox',
  component: MCheckbox,
  parameters: {
    docs: {
      description: {
        component:
          'A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.',
      },
    },
  },
  args: {
    label: 'Label',
    id: 'checkboxId',
  },
  render: (args) => ({
    components: { MCheckbox },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

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

export const Indeterminate: Story = {
  args: {
    indeterminate: true,
    id: 'IndeterminateId',
  },
};

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

export const Invalid: Story = {
  args: {
    isInvalid: true,
    id: 'invalidId',
  },
};

export const IndeterminateDisabled: Story = {
  args: {
    indeterminate: true,
    disabled: true,
    id: 'checkedIndeterminateId',
  },
};

export const CheckedDisabled: Story = {
  args: {
    modelValue: true,
    disabled: true,
    id: 'checkedDisabledId',
  },
};