@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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>
+        `,
+      },
+    },
+  },
+};

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

@@ -0,0 +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>
+        `,
+      },
+    },
+  },
+};