@mozaic-ds/vue/src/components/toaster/MToaster.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import MToaster from './MToaster.vue';
import { action } from 'storybook/actions';
import MButton from '../button/MButton.vue';
import MLink from '../link/MLink.vue';
import { ref, watch } from 'vue';

const meta: Meta<typeof MToaster> = {
  title: 'Overlay/Toaster',
  component: MToaster,
  tags: ['v2'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: { height: '300px' },
      description: {
        component:
          'A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.',
      },
    },
  },
  args: {
    open: true,
    description: 'This message must be short, be concise.',
  },
  argTypes: {
    '--toaster-z-index': {
      description: 'Customise the z-index of the toaster',
      control: false,
      table: {
        category: 'Custom Properties',
        type: { summary: 'number' },
        defaultValue: { summary: '4' },
      },
    },
  },
  render: (args) => ({
    components: { MToaster, MButton, MLink },
    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: `
      <MToaster 
        v-bind="args"
        @update:open="onUpdateOpen"
        v-model:open="openState"
      >
        <template v-if="${'action' in args}" v-slot:action>${args.action}</template>
      </MToaster>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MToaster>;

export const Info: Story = {};

export const Success: Story = {
  args: { status: 'success' },
};

export const Warning: Story = {
  args: { status: 'warning' },
};

export const Error: Story = {
  args: { status: 'error' },
};

export const Timeout: Story = {
  args: { timeout: 5000 },
};

export const WithButton = {
  args: {
    action: `
      <MButton size="s" appearance="inverse" outlined>Undo</MButton>
    `,
  },
};

export const WithLink = {
  args: {
    action: `
      <MLink href="#" appearance="inverse">
        Learn more
      </MLink>
    `,
  },
};