@mozaic-ds/vue/src/components/radio/MRadio.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3';
import { action } from '@storybook/addon-actions';

import MRadio from './MRadio.vue';

const meta: Meta<typeof MRadio> = {
  title: 'Form Elements/Radio',
  component: MRadio,
  parameters: {
    docs: {
      description: {
        component:
          'A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.',
      },
    },
  },
  args: {
    id: 'RadioId',
    label: 'Label',
  },
  render: (args) => ({
    components: { MRadio },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

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

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

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

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