@mozaic-ds/vue/src/components/numberbadge/MNumberBadge.stories.ts

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

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

const meta: Meta<typeof MNumberBadge> = {
  title: 'Indicators/Number Badge',
  component: MNumberBadge,
  parameters: {
    docs: {
      description: {
        component:
          'A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
      },
    },
  },
  args: { label: 99 },
  render: (args) => ({
    components: { MNumberBadge },
    setup() {
      return { args };
    },
    template: `
      <MNumberBadge v-bind="args"></MNumberBadge>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MNumberBadge>;

export const Standard: Story = {};

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

export const Danger: Story = {
  args: { appearance: 'danger' },
};

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

export const Size: Story = {
  args: { size: 'm' },
};