@mozaic-ds/vue/src/components/linearprogressbarbuffer/MLinearProgressbarBuffer.stories.ts

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

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

const meta: Meta<typeof MLinearProgressbarBuffer> = {
  title: 'Indicators/Linear Progress Bar (Buffer)',
  component: MLinearProgressbarBuffer,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.',
      },
    },
  },
  argTypes: {
    value: {
      control: { type: 'range', min: 0, max: 100 },
    },
  },
  args: {
    value: 40,
    ariaLabel: 'Progress bar',
  },
  render: (args) => ({
    components: { MLinearProgressbarBuffer },
    setup() {
      return { args };
    },
    template: `
      <MLinearProgressbarBuffer v-bind="args"></MLinearProgressbarBuffer>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MLinearProgressbarBuffer>;

export const Standard: Story = {};

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