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

package/src/stories/Laboratory/TagLabelGroup.stories.ts

@@ -1,234 +1,234 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
-
-// Meta configuration for the TagLabelGroup component
-const meta: Meta<typeof TagLabelGroup> = {
-  title: 'WL/Laboratory/TagLabelGroup',
-  component: TagLabelGroup,
-  tags: ['autodocs'],
-  argTypes: {
-    text: {
-      control: 'text',
-      description: 'The text displayed within the TagLabelGroup.',
-      defaultValue: 'Text',
-    },
-    status: {
-      control: 'text',
-      description: 'The status label, e.g., "Done", "Ready".',
-      defaultValue: 'Done',
-    },
-    iconSize: {
-      control: 'text',
-      description: 'Size of the icons in the group.',
-      defaultValue: '30',
-    },
-    iconsBefore: {
-      control: 'object',
-      description: 'Array of icon configurations displayed before the text.',
-      defaultValue: [
-        { backgroundColor: 'white', borderColor: '#C1C1C2' }, // Default properties for the icons before
-      ],
-    },
-    iconsAfter: {
-      control: 'object',
-      description: 'Array of icon configurations displayed after the text.',
-      defaultValue: [
-        { backgroundColor: 'white', borderColor: '#C1C1C2' }, // Default properties for the icons after
-      ],
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TagLabelGroup\` component displays a group of icons and a status label, allowing for customization of icon properties and display order.
-
-### Props
-
-- **\`text\`**: The text displayed within the TagLabelGroup.
-- **\`status\`**: The status label to display, such as 'Done' or 'Ready'.
-- **\`iconSize\`**: The size of the icons in the group.
-- **\`iconsBefore\`**: An array of icon configurations displayed before the text.
-- **\`iconsAfter\`**: An array of icon configurations displayed after the text.
-
-### Example Usage
-
-Below are examples of how to use the \`TagLabelGroup\` component with different configurations.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default Story
-export const Default: Story = {
-  args: {
-    text: 'Shipping',
-    status: 'Dispatched',
-    iconsBefore: [],
-    iconsAfter: [{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }],
-    iconSize: '28',
-  },
-  render: (args) => ({
-    components: { TagLabelGroup },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <TagLabelGroup v-bind="args" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabelGroup
-    text="Shipping"
-    status="Dispatched"
-    :iconsBefore="[]"
-    :iconsAfter="[{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }]"
-    iconSize="28"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with custom icons and status
-export const DesignReady: Story = {
-  args: {
-    status: 'Ready',
-    iconsBefore: [],
-    iconsAfter: [
-      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
-      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
-      { backgroundColor: '#D8FDE4', borderColor: '#01D449' },
-    ],
-    iconSize: '28',
-  },
-  render: (args) => ({
-    components: { TagLabelGroup },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <TagLabelGroup v-bind="args" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabelGroup
-    status="Ready"
-    :iconsBefore="[]"
-    :iconsAfter="[
-      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
-      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
-      { backgroundColor: '#D8FDE4', borderColor: '#01D449' }
-    ]"
-    iconSize="28"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with custom icons and status
-export const DesignProof: Story = {
-  args: {
-    status: 'Proof',
-    iconsBefore: [
-      { backgroundColor: '#FEEAF2', borderColor: '#4F4700' },
-      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
-    ],
-    iconsAfter: [{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }],
-    iconSize: '28',
-  },
-  render: (args) => ({
-    components: { TagLabelGroup },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <TagLabelGroup v-bind="args" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabelGroup
-    status="Proof"
-    :iconsBefore="[
-      { backgroundColor: '#FEEAF2', borderColor: '#4F4700' },
-      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' }
-    ]"
-    :iconsAfter="[{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }]"
-    iconSize="28"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with icons before the text
-export const TreatmentDone: Story = {
-  args: {
-    status: 'Done',
-    iconsBefore: [
-      { backgroundColor: '#FEEAF2', borderColor: '#172774' },
-      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
-    ],
-    iconsAfter: [],
-    iconSize: '28',
-  },
-  render: (args) => ({
-    components: { TagLabelGroup },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <TagLabelGroup v-bind="args" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TagLabelGroup
-    status="Done"
-    :iconsBefore="[
-      { backgroundColor: '#FEEAF2', borderColor: '#172774' },
-      { backgroundColor: '#CCE8FD', borderColor: '#172774' }
-    ]"
-    :iconsAfter="[]"
-    iconSize="28"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
+
+// Meta configuration for the TagLabelGroup component
+const meta: Meta<typeof TagLabelGroup> = {
+  title: 'WL/Laboratory/TagLabelGroup',
+  component: TagLabelGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'The text displayed within the TagLabelGroup.',
+      defaultValue: 'Text',
+    },
+    status: {
+      control: 'text',
+      description: 'The status label, e.g., "Done", "Ready".',
+      defaultValue: 'Done',
+    },
+    iconSize: {
+      control: 'text',
+      description: 'Size of the icons in the group.',
+      defaultValue: '30',
+    },
+    iconsBefore: {
+      control: 'object',
+      description: 'Array of icon configurations displayed before the text.',
+      defaultValue: [
+        { backgroundColor: 'white', borderColor: '#C1C1C2' }, // Default properties for the icons before
+      ],
+    },
+    iconsAfter: {
+      control: 'object',
+      description: 'Array of icon configurations displayed after the text.',
+      defaultValue: [
+        { backgroundColor: 'white', borderColor: '#C1C1C2' }, // Default properties for the icons after
+      ],
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TagLabelGroup\` component displays a group of icons and a status label, allowing for customization of icon properties and display order.
+
+### Props
+
+- **\`text\`**: The text displayed within the TagLabelGroup.
+- **\`status\`**: The status label to display, such as 'Done' or 'Ready'.
+- **\`iconSize\`**: The size of the icons in the group.
+- **\`iconsBefore\`**: An array of icon configurations displayed before the text.
+- **\`iconsAfter\`**: An array of icon configurations displayed after the text.
+
+### Example Usage
+
+Below are examples of how to use the \`TagLabelGroup\` component with different configurations.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Story
+export const Default: Story = {
+  args: {
+    text: 'Shipping',
+    status: 'Dispatched',
+    iconsBefore: [],
+    iconsAfter: [{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }],
+    iconSize: '28',
+  },
+  render: (args) => ({
+    components: { TagLabelGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TagLabelGroup v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabelGroup
+    text="Shipping"
+    status="Dispatched"
+    :iconsBefore="[]"
+    :iconsAfter="[{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }]"
+    iconSize="28"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with custom icons and status
+export const DesignReady: Story = {
+  args: {
+    status: 'Ready',
+    iconsBefore: [],
+    iconsAfter: [
+      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
+      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
+      { backgroundColor: '#D8FDE4', borderColor: '#01D449' },
+    ],
+    iconSize: '28',
+  },
+  render: (args) => ({
+    components: { TagLabelGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TagLabelGroup v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabelGroup
+    status="Ready"
+    :iconsBefore="[]"
+    :iconsAfter="[
+      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
+      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
+      { backgroundColor: '#D8FDE4', borderColor: '#01D449' }
+    ]"
+    iconSize="28"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with custom icons and status
+export const DesignProof: Story = {
+  args: {
+    status: 'Proof',
+    iconsBefore: [
+      { backgroundColor: '#FEEAF2', borderColor: '#4F4700' },
+      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' },
+    ],
+    iconsAfter: [{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }],
+    iconSize: '28',
+  },
+  render: (args) => ({
+    components: { TagLabelGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TagLabelGroup v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabelGroup
+    status="Proof"
+    :iconsBefore="[
+      { backgroundColor: '#FEEAF2', borderColor: '#4F4700' },
+      { backgroundColor: '#FEFDBD', borderColor: '#4F4700' }
+    ]"
+    :iconsAfter="[{ backgroundColor: '#D8FDE4', borderColor: '#01D449' }]"
+    iconSize="28"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with icons before the text
+export const TreatmentDone: Story = {
+  args: {
+    status: 'Done',
+    iconsBefore: [
+      { backgroundColor: '#FEEAF2', borderColor: '#172774' },
+      { backgroundColor: '#CCE8FD', borderColor: '#172774' },
+    ],
+    iconsAfter: [],
+    iconSize: '28',
+  },
+  render: (args) => ({
+    components: { TagLabelGroup },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <TagLabelGroup v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TagLabelGroup
+    status="Done"
+    :iconsBefore="[
+      { backgroundColor: '#FEEAF2', borderColor: '#172774' },
+      { backgroundColor: '#CCE8FD', borderColor: '#172774' }
+    ]"
+    :iconsAfter="[]"
+    iconSize="28"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};