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

const meta: Meta<typeof MCheckboxGroup> = {
  title: 'Form Elements/Checkbox Group',
  component: MCheckboxGroup,
  parameters: {
    docs: {
      description: {
        component:
          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#checkbox-group).',
      },
    },
  },
  args: {
    name: 'checkboxGroupName',
    modelValue: ['checkbox2'],
    options: [
      {
        id: 'checkbox-01',
        label: 'checkbox Label',
        value: 'checkbox1',
      },
      {
        id: 'checkbox-02',
        label: 'checkbox Label',
        value: 'checkbox2',
      },
      {
        id: 'checkbox-03',
        label: 'checkbox Label',
        value: 'checkbox3',
      },
      {
        id: 'checkbox-04',
        label: 'checkbox Label',
        value: 'checkbox4',
      },
    ],
  },
  render: (args) => ({
    components: { MCheckboxGroup },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};