@mozaic-ds/vue/src/components/modal/MModal.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import { action } from 'storybook/actions';
import MModal from './MModal.vue';
import MButton from '../button/MButton.vue';
import MLink from '../link/MLink.vue';
import InfoCircle32 from '@mozaic-ds/icons-vue/src/components/InfoCircle32/InfoCircle32.vue';
import ExternalLink24 from '@mozaic-ds/icons-vue/src/components/ExternalLink24/ExternalLink24.vue';

const meta: Meta<typeof MModal> = {
  title: 'Overlay/Modal',
  component: MModal,
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '400px' },
      description: {
        component:
          'A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.',
      },
    },
  },
  args: {
    open: true,
    title: 'Modal title',
    description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
    footer: `
      <MButton ghost>Cancel</MButton>
      <MButton>Primary action</MButton>
    `,
  },
  render: (args) => ({
    components: { MModal, MButton, MLink, InfoCircle32, ExternalLink24 },
    setup() {
      const handleUpdate = action('update:open');
      const openState = ref(args.open);

      watch(
        () => args.open,
        (val) => {
          openState.value = val;
        },
      );

      const onUpdateOpen = (val: boolean) => {
        openState.value = val;
        handleUpdate(val);
        args.open = val;
      };

      return { args, openState, onUpdateOpen };
    },
    template: `
      <MModal 
        v-bind="args"
        @update:open="onUpdateOpen"
        v-model:open="openState"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
        <template v-if="${'link' in args}" v-slot:link>${args.link}</template>
        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
      </MModal>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MModal>;

export const Default: Story = {};

export const Icon = {
  args: {
    icon: '<InfoCircle32/>',
  },
};

export const ValidationOnly = {
  args: {
    footer: `
      <MButton>Primary action</MButton>
    `,
  },
};

export const TwoOptions = {
  args: {
    footer: `
      <MButton outlined>Secondary action</MButton>
      <MButton>Primary action</MButton>
    `,
  },
};

export const Cancel = {
  args: {
    footer: `
      <MButton ghost>Cancel</MButton>
      <MButton outlined>Secondary action</MButton>
      <MButton>Primary action</MButton>
    `,
  },
};

export const Link = {
  args: {
    link: `
      <MLink class="mc-modal__link" href="#" size="m" icon-position="right">
        Learn more
        <template #icon><ExternalLink24 /></template>
      </MLink>
    `,
    footer: `
      <MButton ghost>Cancel</MButton>
      <MButton>Primary action</MButton>
    `,
  },
};

export const Danger = {
  args: {
    footer: `
      <MButton ghost>Cancel</MButton>
      <MButton appearance="danger">Primary action</MButton>
    `,
  },
};