@mozaic-ds/vue/src/components/statusmessage/MStatusMessage.stories.ts

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

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

const meta: Meta<typeof MStatusMessage> = {
  title: 'Status/Status Message',
  component: MStatusMessage,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.',
      },
    },
  },
  args: {
    label: 'Brief status message',
  },
  render: (args) => ({
    components: { MStatusMessage },
    setup() {
      return { args };
    },
    template: `
      <MStatusMessage v-bind="args"></MStatusMessage>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MStatusMessage>;

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 Neutral: Story = {
  args: { status: 'neutral' },
};

export const InProgress: Story = {
  args: { status: 'inprogress' },
};