@mozaic-ds/vue/src/components/statusbadge/MStatusBadge.stories.ts

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

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

const meta: Meta<typeof MStatusBadge> = {
  title: 'Status/Status Badge',
  component: MStatusBadge,
  parameters: {
    docs: {
      description: {
        component:
          'A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.',
      },
    },
  },
  args: { label: 'Badge label', size: 'm' },
  render: (args) => ({
    components: { MStatusBadge },
    setup() {
      return { args };
    },
    template: `
      <MStatusBadge v-bind="args"></MStatusBadge>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MStatusBadge>;

export const Info: Story = {};

export const Small: Story = {
  args: { size: 's' },
};

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' },
};