@mozaic-ds/vue/src/components/fieldgroup/MFieldGroup.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 MFieldGroup from './MFieldGroup.vue';
import MCheckboxGroup from '../checkboxgroup/MCheckboxGroup.vue';
import MRadioGroup from '../radiogroup/MRadioGroup.vue';
import MToggleGroup from '../togglegroup/MToggleGroup.vue';

const meta: Meta<typeof MFieldGroup> = {
  title: 'Form Elements/Field Group',
  component: MFieldGroup,
  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.',
      },
    },
  },
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    requirementText: 'required',
    helpText: 'Help text',
    default: `
      <MCheckboxGroup
        name="checkboxGroupName"
        :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',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
  render: (args) => ({
    components: { MFieldGroup, MCheckboxGroup, MRadioGroup, MToggleGroup },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MFieldGroup v-bind="args">
        ${args.default}
      </MFieldGroup>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MFieldGroup>;

export const Default: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    helpText: 'Help text',
    requirementText: 'optional',
    default: `
      <!-- All the code below must be replaced by a form element. -->
      <div class="content-slot">
        Insert a form element here to replace this slot.
      </div>
    `,
  },
  render: (args) => ({
    components: { MFieldGroup },
    setup() {
      return { args };
    },
    template: `
      <MFieldGroup v-bind="args">
        ${args.default}
      </MFieldGroup>
    `,
  }),
};

export const CheckboxGroup: Story = {};

export const CheckboxGroupValid: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    requirementText: 'required',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MCheckboxGroup
        name="checkboxGroupName"
        :options="
          [
            {
              id: 'checkbox-05',
              label: 'checkbox Label',
              value: 'checkbox5',
            },
            {
              id: 'checkbox-06',
              label: 'checkbox Label',
              value: 'checkbox6',
            },
            {
              id: 'checkbox-07',
              label: 'checkbox Label',
              value: 'checkbox7',
            },
            {
              id: 'checkbox-08',
              label: 'checkbox Label',
              value: 'checkbox8',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const CheckboxGroupInvalid: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    requirementText: 'required',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MCheckboxGroup
        name="checkboxGroupName"
        isInvalid
        :options="
          [
            {
              id: 'checkbox-09',
              label: 'checkbox Label',
              value: 'checkbox9',
            },
            {
              id: 'checkbox-10',
              label: 'checkbox Label',
              value: 'checkbox10',
            },
            {
              id: 'checkbox-11',
              label: 'checkbox Label',
              value: 'checkbox11',
            },
            {
              id: 'checkbox-12',
              label: 'checkbox Label',
              value: 'checkbox12',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const RadioGroup: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    default: `
      <MRadioGroup
        name="radioGroupName"
        :options="
          [
            {
              id: 'radio-01',
              label: 'Radio button Label',
              value: 'radio1'
            },
            {
              id: 'radio-02',
              label: 'Radio button Label',
              value: 'radio2'
            },
            {
              id: 'radio-03',
              label: 'Radio button Label',
              value: 'radio3'
            },
            {
              id: 'radio-04',
              label: 'Radio button Label',
              value: 'radio4'
            }
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const RadioGroupValid: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    requirementText: 'required',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MRadioGroup
        name="radioGroupValidName"
        :options="
          [
            {
              id: 'radio05',
              label: 'Radio button Label',
              value: 'radio5'
            },
            {
              id: 'radio06',
              label: 'Radio button Label',
              value: 'radio6'
            },
            {
              id: 'radio07',
              label: 'Radio button Label',
              value: 'radio7'
            },
            {
              id: 'radio08',
              label: 'Radio button Label',
              value: 'radio8'
            }
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const RadioGroupInvalid: Story = {
  args: {
    legend: 'Label',
    id: 'ReplaceByInputId',
    requirementText: 'required',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MRadioGroup
        name="radioGroupInvalidName"
        isInvalid
        :options="
          [
            {
              id: 'radio-9',
              label: 'Radio button Label',
              value: 'radio9'
            },
            {
              id: 'radio-10',
              label: 'Radio button Label',
              value: 'radio10'
            },
            {
              id: 'radio-11',
              label: 'Radio button Label',
              value: 'radio11'
            },
            {
              id: 'radio-12',
              label: 'Radio button Label',
              value: 'radio12'
            }
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const ToggleGroup: Story = {
  args: {
    legend: 'Label',
    id: 'ToggleGroupId',
    requirementText: 'required',
    default: `
      <MToggleGroup
        name="ToggleGroupName"
        :options="
          [
            {
              id: 'toggle-01',
              label: 'Toggle Label',
              value: 'toggle1',
            },
            {
              id: 'toggle-02',
              label: 'Toggle Label',
              value: 'toggle2',
            },
            {
              id: 'toggle-03',
              label: 'Toggle Label',
              value: 'toggle3',
            },
            {
              id: 'toggle-04',
              label: 'Toggle Label',
              value: 'toggle4',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const ToggleGroupValid: Story = {
  args: {
    legend: 'Label',
    id: 'ToggleGroupId',
    requirementText: 'required',
    isValid: true,
    message: 'Validation message (Be concise and use comprehensive words).',
    default: `
      <MToggleGroup
        name="ToggleGroupName"
        :options="
          [
            {
              id: 'toggle-05',
              label: 'Toggle Label',
              value: 'toggle5',
            },
            {
              id: 'toggle-06',
              label: 'Toggle Label',
              value: 'toggle6',
            },
            {
              id: 'toggle-07',
              label: 'Toggle Label',
              value: 'toggle7',
            },
            {
              id: 'toggle-08',
              label: 'Toggle Label',
              value: 'toggle8',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};

export const ToggleGroupInvalid: Story = {
  args: {
    legend: 'Label',
    id: 'ToggleGroupId',
    requirementText: 'required',
    isInvalid: true,
    message: 'Error message (Be concise and use comprehensive words)',
    default: `
      <MToggleGroup
        name="ToggleGroupName"
        :options="
          [
            {
              id: 'toggle-09',
              label: 'Toggle Label',
              value: 'toggle9',
            },
            {
              id: 'toggle-10',
              label: 'Toggle Label',
              value: 'toggle10',
            },
            {
              id: 'toggle-11',
              label: 'Toggle Label',
              value: 'toggle11',
            },
            {
              id: 'toggle-12',
              label: 'Toggle Label',
              value: 'toggle12',
            },
          ]
        "
        @update:modelValue="handleUpdate"
      />
    `,
  },
};