@mozaic-ds/vue/src/components/checklistmenu/MCheckListMenu.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MCheckListMenu from './MCheckListMenu.vue';
import { action } from 'storybook/actions';

const meta: Meta<typeof MCheckListMenu> = {
  title: 'Navigation/Check-list menu',
  component: MCheckListMenu,
  parameters: {
    docs: {
      description: {
        component:
          'A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.',
      },
    },
  },
  args: {
    items: [
      { label: 'Label', checked: true },
      { label: 'Label', checked: true },
      { label: 'Label', checked: false },
      { label: 'Label', checked: true },
    ],
    modelValue: 0,
  },
  render: (args) => ({
    components: { MCheckListMenu },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

export const Outlined: Story = {
  args: {
    outlined: true,
  },
};