@mozaic-ds/vue/src/components/callout/MCallout.stories.ts

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

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

const meta: Meta<typeof MCallout> = {
  title: 'Content/Callout',
  component: MCallout,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.',
      },
    },
  },
  args: {
    icon: '<ImageAlt32 aria-hidden="true" />',
    title:
      'This is a title, be concise and use the description message to give details.',
    description: 'Description message.',
  },
  render: (args) => ({
    components: { MCallout, MButton, MLink, ArrowNext20, ImageAlt32 },
    setup() {
      return { args };
    },
    template: `
      <MCallout 
        v-bind="args"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
      </MCallout>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MCallout>;

export const Standard: Story = {};

export const Accent: Story = {
  args: { appearance: 'accent' },
};

export const Tips: Story = {
  args: { appearance: 'tips' },
};

export const Inverse: Story = {
  globals: {
    backgrounds: { value: 'inverse' },
  },
  args: { appearance: 'inverse' },
};

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

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

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

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