@shopware-ag/meteor-component-library/src/components/feedback-indicator/mt-progress-bar/mt-progress-bar.stories.ts

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import MtProgressBar from "./mt-progress-bar.vue";
import type { StoryObj } from "@storybook/vue3";
import type { SlottedMeta } from "@/_internal/story-helper";

export type MtProgressBarMeta = SlottedMeta<typeof MtProgressBar, "error">;

export default {
  title: "Components/mt-progress-bar",
  component: MtProgressBar,
  render: (args) => ({
    setup() {
      return {
        args,
      };
    },
    components: { MtProgressBar },
    template: '<mt-progress-bar v-bind="args"></mt-progress-bar>',
  }),
  args: {
    modelValue: 121,
    maxValue: 356,
    label: "Example progress bar",
    error: undefined,
    progressLabelType: undefined,
  },
} as MtProgressBarMeta;

export type MtProgressBarStory = StoryObj<MtProgressBarMeta>;

export const Default: MtProgressBarStory = {};

export const Extended: MtProgressBarStory = {
  args: {
    modelValue: 277,
    error: {
      code: 500,
      detail: "Error while loading",
    },
    progressLabelType: "kb",
  },
};