@mozaic-ds/vue/src/components/statusnotification/MStatusNotification.stories.ts

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

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

const meta: Meta<typeof MStatusNotification> = {
  title: 'Status/Status Notification',
  component: MStatusNotification,
  parameters: {
    docs: {
      description: {
        component:
          'A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.',
      },
    },
  },
  args: {
    title:
      'This is a title, be concise and use the description message to give details.',
    description: 'Description message.',
  },
  render: (args) => ({
    components: { MStatusNotification, MButton, MLink, ArrowNext20 },
    setup() {
      const handleClick = action('close');

      return { args, handleClick };
    },
    template: `
      <MStatusNotification 
        v-bind="args"
        @click="handleClick"
      >
        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
      </MStatusNotification>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MStatusNotification>;

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 Closable: Story = {
  args: { closable: true },
};

export const WithButton = {
  args: {
    footer: `
      <MButton outlined>Button Label</MButton>
    `,
  },
};

export const WithLink = {
  args: {
    footer: `
      <MLink href="#" iconPosition="right">
        Stand-alone link

        <template #icon><ArrowNext20 /></template>
      </MLink>
    `,
  },
};

export const WithButtons = {
  args: {
    footer: `
      <MButton>Button Label</MButton>
      <MButton outlined>Button Label</MButton>
    `,
  },
};