@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

package/src/stories/Laboratory/ProgressCircle.stories.ts

@@ -1,261 +1,261 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
-
-// Meta configuration for the ProgressCircle component
-const meta: Meta<typeof ProgressCircle> = {
-  title: 'WL/Laboratory/ProgressCircle',
-  component: ProgressCircle,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'text',
-      description: 'Size of the circle in pixels.',
-    },
-    text: {
-      control: 'text',
-      description: 'Text displayed inside the circle.',
-    },
-    bgColors: {
-      control: 'object',
-      description: 'Array of background colors for the segments.',
-    },
-    borderColors: {
-      control: 'object',
-      description: 'Array of border colors for the segments.',
-    },
-  },
-  args: {
-    size: '60',
-    text: 'A',
-    bgColors: [
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-    ],
-    borderColors: [
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`ProgressCircle\` component displays a circular progress indicator with customizable colors, sizes, and text.
-
-### Props
-- **\`size\`**: Sets the size of the circle in pixels.
-- **\`text\`**: Text displayed inside the circle.
-- **\`bgColors\`**: An array of background colors for the circle's segments.
-- **\`borderColors\`**: An array of border colors for the circle's segments.
-
-### Usage
-Use the \`ProgressCircle\` component to display progress in a circular format, with options to customize the appearance.
-
-Below are examples of different configurations of the \`ProgressCircle\` component.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { ProgressCircle },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 16px;">
-        <ProgressCircle v-bind="args" />
-      </div>`,
-  }),
-};
-
-// Default story
-export const Default: Story = {
-  ...Template,
-  args: {},
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressCircle
-    :size="'60'"
-    text="A"
-    :bgColors="[
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)'
-    ]"
-    :borderColors="[
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent'
-    ]"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Draft story
-export const Draft: Story = {
-  ...Template,
-  args: {
-    text: '1',
-    bgColors: [
-      '#E5E6EE',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-    ],
-    borderColors: [
-      '#172774',
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-    ],
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressCircle
-    text="1"
-    :size="'60'"
-    :bgColors="[
-      '#E5E6EE',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)',
-      'var(--Soft-Concrete-1)'
-    ]"
-    :borderColors="[
-      '#172774',
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent'
-    ]"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// DesignStarted story
-export const DesignStarted: Story = {
-  ...Template,
-  args: {
-    text: '2',
-    size: '60',
-    bgColors: ['var(--Check-0)', '#FEFDBD', '#DDDDDF', '#DDDDDF', '#DDDDDF'],
-    borderColors: [
-      'transparent',
-      '#4F4700',
-      'transparent',
-      'transparent',
-      'transparent',
-    ],
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressCircle
-    text="2"
-    :size="'60'"
-    :bgColors="[
-      'var(--Check-0)',
-      '#FEFDBD',
-      '#DDDDDF',
-      '#DDDDDF',
-      '#DDDDDF'
-    ]"
-    :borderColors="[
-      'transparent',
-      '#4F4700',
-      'transparent',
-      'transparent',
-      'transparent'
-    ]"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// DesignStarted story
-export const TreatmentDone: Story = {
-  ...Template,
-  args: {
-    text: '5',
-    size: '60',
-    bgColors: [
-      'var(--Check-0)',
-      'var(--Check-0)',
-      'var(--Check-0)',
-      'var(--Check-0)',
-      'var(--Check-0)',
-    ],
-    borderColors: [
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-      'transparent',
-    ],
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressCircle
-    text="2"
-    :size="'60'"
-    :bgColors="[
-      'var(--Check-0)',
-      '#FEFDBD',
-      '#DDDDDF',
-      '#DDDDDF',
-      '#DDDDDF'
-    ]"
-    :borderColors="[
-      'transparent',
-      '#4F4700',
-      'transparent',
-      'transparent',
-      'transparent'
-    ]"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
+
+// Meta configuration for the ProgressCircle component
+const meta: Meta<typeof ProgressCircle> = {
+  title: 'WL/Laboratory/ProgressCircle',
+  component: ProgressCircle,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+      description: 'Size of the circle in pixels.',
+    },
+    text: {
+      control: 'text',
+      description: 'Text displayed inside the circle.',
+    },
+    bgColors: {
+      control: 'object',
+      description: 'Array of background colors for the segments.',
+    },
+    borderColors: {
+      control: 'object',
+      description: 'Array of border colors for the segments.',
+    },
+  },
+  args: {
+    size: '60',
+    text: 'A',
+    bgColors: [
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+    ],
+    borderColors: [
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ProgressCircle\` component displays a circular progress indicator with customizable colors, sizes, and text.
+
+### Props
+- **\`size\`**: Sets the size of the circle in pixels.
+- **\`text\`**: Text displayed inside the circle.
+- **\`bgColors\`**: An array of background colors for the circle's segments.
+- **\`borderColors\`**: An array of border colors for the circle's segments.
+
+### Usage
+Use the \`ProgressCircle\` component to display progress in a circular format, with options to customize the appearance.
+
+Below are examples of different configurations of the \`ProgressCircle\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <ProgressCircle v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Default story
+export const Default: Story = {
+  ...Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    :size="'60'"
+    text="A"
+    :bgColors="[
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)'
+    ]"
+    :borderColors="[
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Draft story
+export const Draft: Story = {
+  ...Template,
+  args: {
+    text: '1',
+    bgColors: [
+      '#E5E6EE',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+    ],
+    borderColors: [
+      '#172774',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="1"
+    :size="'60'"
+    :bgColors="[
+      '#E5E6EE',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)'
+    ]"
+    :borderColors="[
+      '#172774',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// DesignStarted story
+export const DesignStarted: Story = {
+  ...Template,
+  args: {
+    text: '2',
+    size: '60',
+    bgColors: ['var(--Check-0)', '#FEFDBD', '#DDDDDF', '#DDDDDF', '#DDDDDF'],
+    borderColors: [
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="2"
+    :size="'60'"
+    :bgColors="[
+      'var(--Check-0)',
+      '#FEFDBD',
+      '#DDDDDF',
+      '#DDDDDF',
+      '#DDDDDF'
+    ]"
+    :borderColors="[
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// DesignStarted story
+export const TreatmentDone: Story = {
+  ...Template,
+  args: {
+    text: '5',
+    size: '60',
+    bgColors: [
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+    ],
+    borderColors: [
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="2"
+    :size="'60'"
+    :bgColors="[
+      'var(--Check-0)',
+      '#FEFDBD',
+      '#DDDDDF',
+      '#DDDDDF',
+      '#DDDDDF'
+    ]"
+    :borderColors="[
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};