@mozaic-ds/vue/src/components/loader/MLoader.stories.ts

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

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

const meta: Meta<typeof MLoader> = {
  title: 'Indicators/Loader',
  component: MLoader,
  parameters: {
    docs: {
      description: {
        component:
          'A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.',
      },
    },
  },
  render: (args) => ({
    components: { MLoader },
    setup() {
      return { args };
    },
    template: `
      <MLoader v-bind="args"></MLoader>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MLoader>;

export const Standard: Story = {};

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

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

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