@mozaic-ds/vue/src/components/circularprogressbar/MCircularProgressbar.stories.ts

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

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

const meta: Meta<typeof MCircularProgressbar> = {
  title: 'Indicators/Circular Progress Bar',
  component: MCircularProgressbar,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.',
      },
    },
  },
  argTypes: {
    value: {
      control: { type: 'range', min: 0, max: 100 },
    },
  },
  args: {
    value: 40,
    ariaLabel: 'Progress bar',
  },
  render: (args) => ({
    components: { MCircularProgressbar },
    setup() {
      return { args };
    },
    template: `
      <MCircularProgressbar v-bind="args"></MCircularProgressbar>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MCircularProgressbar>;

export const Standard: Story = {};

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

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

export const Content: Story = {
  args: {
    type: 'content',
    contentValue: '999 999€',
    additionalInfo: 'additional Info',
  },
};