@mozaic-ds/vue/src/components/statusdot/MStatusDot.stories.ts

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

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

const meta: Meta<typeof MStatusDot> = {
  title: 'Status/Status Dot',
  component: MStatusDot,
  parameters: {
    docs: {
      description: {
        component:
          'A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.',
      },
    },
  },
  render: (args) => ({
    components: { MStatusDot },
    setup() {
      return { args };
    },
    template: `
      <MStatusDot v-bind="args"></MStatusDot>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MStatusDot>;

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 Size: Story = {
  args: { size: 'l' },
};