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

package/src/stories/Laboratory/TagLabel.stories.ts

@@ -1,418 +1,418 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-// Meta configuration for the TagLabel component
-const meta: Meta<typeof TagLabel> = {
-  title: 'WL/Laboratory/TagLabel',
-  component: TagLabel,
-  tags: ['autodocs'],
-  argTypes: {
-    status: {
-      control: 'select',
-      options: [
-        'Draft',
-        'Proof',
-        'Ready',
-        'Design Ready',
-        'Production Ready',
-        'Ready for Treatment',
-        'Started',
-        'Dispatched',
-        'Design Started',
-        'Production Started',
-        'Shipping Dispatched',
-        'Took',
-        'Design Proof',
-        'Treatment Took',
-        'Treatment Done',
-        'Done',
-        'Follow-up Case Created',
-        'Arrived',
-        'Warning',
-      ],
-      description: 'The status label to display.',
-    },
-  },
-  args: {
-    status: 'Draft', // Default value
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TagLabel\` component displays a styled label representing various statuses.
-
-### Props
-
-- **\`status\`**: The status label to display. Options include:
-
-  - 'Draft'
-  - 'Proof'
-  - 'Ready'
-  - 'Design Ready'
-  - 'Production Ready'
-  - 'Ready for Treatment'
-  - 'Started'
-  - 'Dispatched'
-  - 'Design Started'
-  - 'Production Started'
-  - 'Shipping Dispatched'
-  - 'Took'
-  - 'Design Proof'
-  - 'Treatment Took'
-  - 'Treatment Done'
-  - 'Done'
-  - 'Follow-up Case Created'
-  - 'Arrived'
-
-### Usage
-
-Use the \`TagLabel\` component to display a status label with appropriate styling based on the provided status.
-
-Below are examples of different statuses.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { TagLabel },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 16px;">
-        <TagLabel v-bind="args" />
-      </div>`,
-  }),
-};
-
-// Stories for each status
-export const Draft: Story = {
-  ...Template,
-  args: {
-    status: 'Draft',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Draft" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Proof: Story = {
-  ...Template,
-  args: {
-    status: 'Proof',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Proof" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Ready: Story = {
-  ...Template,
-  args: {
-    status: 'Ready',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Ready" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DesignReady: Story = {
-  ...Template,
-  args: {
-    status: 'Design Ready',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Design Ready" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ProductionReady: Story = {
-  ...Template,
-  args: {
-    status: 'Production Ready',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Production Ready" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ReadyForTreatment: Story = {
-  ...Template,
-  args: {
-    status: 'Ready for Treatment',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Ready for Treatment" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Started: Story = {
-  ...Template,
-  args: {
-    status: 'Started',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Started" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Dispatched: Story = {
-  ...Template,
-  args: {
-    status: 'Dispatched',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Dispatched" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DesignStarted: Story = {
-  ...Template,
-  args: {
-    status: 'Design Started',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Design Started" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ProductionStarted: Story = {
-  ...Template,
-  args: {
-    status: 'Production Started',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Production Started" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ShippingDispatched: Story = {
-  ...Template,
-  args: {
-    status: 'Shipping Dispatched',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Shipping Dispatched" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Took: Story = {
-  ...Template,
-  args: {
-    status: 'Took',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Took" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DesignProof: Story = {
-  ...Template,
-  args: {
-    status: 'Design Proof',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Design Proof" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const TreatmentTook: Story = {
-  ...Template,
-  args: {
-    status: 'Treatment Took',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Treatment Took" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const TreatmentDone: Story = {
-  ...Template,
-  args: {
-    status: 'Treatment Done',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Treatment Done" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Done: Story = {
-  ...Template,
-  args: {
-    status: 'Done',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Done" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const FollowUpCaseCreated: Story = {
-  ...Template,
-  args: {
-    status: 'Follow-up Case Created',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Follow-up Case Created" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Arrived: Story = {
-  ...Template,
-  args: {
-    status: 'Arrived',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabel status="Arrived" />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+// Meta configuration for the TagLabel component
+const meta: Meta<typeof TagLabel> = {
+  title: 'WL/Laboratory/TagLabel',
+  component: TagLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Proof',
+        'Ready',
+        'Design Ready',
+        'Production Ready',
+        'Ready for Treatment',
+        'Started',
+        'Dispatched',
+        'Design Started',
+        'Production Started',
+        'Shipping Dispatched',
+        'Took',
+        'Design Proof',
+        'Treatment Took',
+        'Treatment Done',
+        'Done',
+        'Follow-up Case Created',
+        'Arrived',
+        'Warning',
+      ],
+      description: 'The status label to display.',
+    },
+  },
+  args: {
+    status: 'Draft', // Default value
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TagLabel\` component displays a styled label representing various statuses.
+
+### Props
+
+- **\`status\`**: The status label to display. Options include:
+
+  - 'Draft'
+  - 'Proof'
+  - 'Ready'
+  - 'Design Ready'
+  - 'Production Ready'
+  - 'Ready for Treatment'
+  - 'Started'
+  - 'Dispatched'
+  - 'Design Started'
+  - 'Production Started'
+  - 'Shipping Dispatched'
+  - 'Took'
+  - 'Design Proof'
+  - 'Treatment Took'
+  - 'Treatment Done'
+  - 'Done'
+  - 'Follow-up Case Created'
+  - 'Arrived'
+
+### Usage
+
+Use the \`TagLabel\` component to display a status label with appropriate styling based on the provided status.
+
+Below are examples of different statuses.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { TagLabel },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <TagLabel v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Stories for each status
+export const Draft: Story = {
+  ...Template,
+  args: {
+    status: 'Draft',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Draft" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Proof: Story = {
+  ...Template,
+  args: {
+    status: 'Proof',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Proof" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Ready: Story = {
+  ...Template,
+  args: {
+    status: 'Ready',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Ready" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DesignReady: Story = {
+  ...Template,
+  args: {
+    status: 'Design Ready',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Design Ready" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProductionReady: Story = {
+  ...Template,
+  args: {
+    status: 'Production Ready',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Production Ready" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ReadyForTreatment: Story = {
+  ...Template,
+  args: {
+    status: 'Ready for Treatment',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Ready for Treatment" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Started: Story = {
+  ...Template,
+  args: {
+    status: 'Started',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Started" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Dispatched: Story = {
+  ...Template,
+  args: {
+    status: 'Dispatched',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Dispatched" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DesignStarted: Story = {
+  ...Template,
+  args: {
+    status: 'Design Started',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Design Started" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProductionStarted: Story = {
+  ...Template,
+  args: {
+    status: 'Production Started',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Production Started" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ShippingDispatched: Story = {
+  ...Template,
+  args: {
+    status: 'Shipping Dispatched',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Shipping Dispatched" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Took: Story = {
+  ...Template,
+  args: {
+    status: 'Took',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Took" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DesignProof: Story = {
+  ...Template,
+  args: {
+    status: 'Design Proof',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Design Proof" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TreatmentTook: Story = {
+  ...Template,
+  args: {
+    status: 'Treatment Took',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Treatment Took" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TreatmentDone: Story = {
+  ...Template,
+  args: {
+    status: 'Treatment Done',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Treatment Done" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Done: Story = {
+  ...Template,
+  args: {
+    status: 'Done',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Done" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const FollowUpCaseCreated: Story = {
+  ...Template,
+  args: {
+    status: 'Follow-up Case Created',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Follow-up Case Created" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Arrived: Story = {
+  ...Template,
+  args: {
+    status: 'Arrived',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabel status="Arrived" />
+</template>
+        `,
+      },
+    },
+  },
+};