@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.17

package/src/stories/Laboratory/Chat/ChatNotification.stories.ts

@@ -1,144 +1,144 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import ChatNotification from '@components/Laboratory/ChatNotification/ChatNotification.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the ChatNotification component
-const meta: Meta<typeof ChatNotification> = {
-  title: 'WL/Laboratory/Chat/ChatNotification',
-  component: ChatNotification,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['cta', 'date', 'tag'],
-      description: 'The type of content displayed (CTA, date, or tag).',
-    },
-    date: {
-      control: 'text',
-      description: 'The date to display.',
-    },
-    patient: {
-      control: 'text',
-      description: 'The patient name to display in the tag scenario.',
-    },
-    status: {
-      control: 'text',
-      description: 'The status to display inside the TagLabel component.',
-    },
-    'click:start': {
-      action: 'click:start',
-      description: 'Event emitted when the Start button is clicked.',
-    },
-    'click:further': {
-      action: 'click:further',
-      description: 'Event emitted when the Weiter (Further) button is clicked.',
-    },
-    'click:cancel': {
-      action: 'click:cancel',
-      description:
-        'Event emitted when the Zurücklegen (Cancel) button is clicked.',
-    },
-    'click:finish': {
-      action: 'click:finish',
-      description:
-        'Event emitted when the Abschließen (Finish) button is clicked.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a template for the stories
-const Template: Story = {
-  render: (args) => ({
-    components: { ChatNotification },
-    setup() {
-      // Define actions for each event
-      const handleStart = action('click:start');
-      const handleFurther = action('click:further');
-      const handleCancel = action('click:cancel');
-      const handleFinish = action('click:finish');
-
-      return { args, handleStart, handleFurther, handleCancel, handleFinish };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <ChatNotification
-          v-bind="args"
-          @click:start="handleStart"
-          @click:further="handleFurther"
-          @click:cancel="handleCancel"
-          @click:finish="handleFinish"
-        />
-      </div>
-    `,
-  }),
-};
-
-// Stories for different scenarios
-
-export const Empty: Story = {
-  ...Template,
-  args: {},
-};
-
-export const DateExample: Story = {
-  ...Template,
-  args: {
-    type: 'date',
-    date: '20. Oktober 2024',
-  },
-};
-
-export const TagExample: Story = {
-  ...Template,
-  args: {
-    type: 'tag',
-    patient: 'Rainer Zufall',
-    status: 'Dispatched',
-    date: '20. Oktober 2024',
-  },
-};
-
-export const CTAExample: Story = {
-  ...Template,
-  args: {
-    type: 'cta',
-    status: 'Draft',
-  },
-};
-
-// Define a story that displays 11 CTA components in a column layout
-export const MultipleCTAsInColumn: Story = {
-  render: (args) => ({
-    components: { ChatNotification },
-    setup() {
-      // Define actions for each event
-      const handleStart = action('click:start');
-      const handleFurther = action('click:further');
-      const handleCancel = action('click:cancel');
-      const handleFinish = action('click:finish');
-
-      return { args, handleStart, handleFurther, handleCancel, handleFinish };
-    },
-    template: `
-      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
-        <!-- Each ChatNotification component with different statuses -->
-        <ChatNotification v-bind="args" type="cta" status="Draft" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Design Ready" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Design Started" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Design Proof" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Production Ready" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Production Started" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Shipping Dispatched" @click:start="handleStart" />
-        <ChatNotification v-bind="args" type="cta" status="Treatment Took" @click:start="handleStart" />
-
-        <ChatNotification v-bind="args" type="cta" status="Follow-up Case Created" @click:further="handleFurther" />
-        <ChatNotification v-bind="args" type="cta" status="Treatment Done"@click:cancel="handleCancel" @click:finish="handleFinish" />
-          <ChatNotification v-bind="args" type="cta" status="Ready for Treatment" @click:start="handleStart" />
-      </div>
-    `,
-  }),
-  args: {}, // Shared args if needed for all components
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatNotification from '@components/Laboratory/ChatNotification/ChatNotification.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the ChatNotification component
+const meta: Meta<typeof ChatNotification> = {
+  title: 'WL/Laboratory/Chat/ChatNotification',
+  component: ChatNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['cta', 'date', 'tag'],
+      description: 'The type of content displayed (CTA, date, or tag).',
+    },
+    date: {
+      control: 'text',
+      description: 'The date to display.',
+    },
+    patient: {
+      control: 'text',
+      description: 'The patient name to display in the tag scenario.',
+    },
+    status: {
+      control: 'text',
+      description: 'The status to display inside the TagLabel component.',
+    },
+    'click:start': {
+      action: 'click:start',
+      description: 'Event emitted when the Start button is clicked.',
+    },
+    'click:further': {
+      action: 'click:further',
+      description: 'Event emitted when the Weiter (Further) button is clicked.',
+    },
+    'click:cancel': {
+      action: 'click:cancel',
+      description:
+        'Event emitted when the Zurücklegen (Cancel) button is clicked.',
+    },
+    'click:finish': {
+      action: 'click:finish',
+      description:
+        'Event emitted when the Abschließen (Finish) button is clicked.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a template for the stories
+const Template: Story = {
+  render: (args) => ({
+    components: { ChatNotification },
+    setup() {
+      // Define actions for each event
+      const handleStart = action('click:start');
+      const handleFurther = action('click:further');
+      const handleCancel = action('click:cancel');
+      const handleFinish = action('click:finish');
+
+      return { args, handleStart, handleFurther, handleCancel, handleFinish };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <ChatNotification
+          v-bind="args"
+          @click:start="handleStart"
+          @click:further="handleFurther"
+          @click:cancel="handleCancel"
+          @click:finish="handleFinish"
+        />
+      </div>
+    `,
+  }),
+};
+
+// Stories for different scenarios
+
+export const Empty: Story = {
+  ...Template,
+  args: {},
+};
+
+export const DateExample: Story = {
+  ...Template,
+  args: {
+    type: 'date',
+    date: '20. Oktober 2024',
+  },
+};
+
+export const TagExample: Story = {
+  ...Template,
+  args: {
+    type: 'tag',
+    patient: 'Rainer Zufall',
+    status: 'Dispatched',
+    date: '20. Oktober 2024',
+  },
+};
+
+export const CTAExample: Story = {
+  ...Template,
+  args: {
+    type: 'cta',
+    status: 'Draft',
+  },
+};
+
+// Define a story that displays 11 CTA components in a column layout
+export const MultipleCTAsInColumn: Story = {
+  render: (args) => ({
+    components: { ChatNotification },
+    setup() {
+      // Define actions for each event
+      const handleStart = action('click:start');
+      const handleFurther = action('click:further');
+      const handleCancel = action('click:cancel');
+      const handleFinish = action('click:finish');
+
+      return { args, handleStart, handleFurther, handleCancel, handleFinish };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
+        <!-- Each ChatNotification component with different statuses -->
+        <ChatNotification v-bind="args" type="cta" status="Draft" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Ready" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Started" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Design Proof" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Production Ready" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Production Started" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Shipping Dispatched" @click:start="handleStart" />
+        <ChatNotification v-bind="args" type="cta" status="Treatment Took" @click:start="handleStart" />
+
+        <ChatNotification v-bind="args" type="cta" status="Follow-up Case Created" @click:further="handleFurther" />
+        <ChatNotification v-bind="args" type="cta" status="Treatment Done"@click:cancel="handleCancel" @click:finish="handleFinish" />
+          <ChatNotification v-bind="args" type="cta" status="Ready for Treatment" @click:start="handleStart" />
+      </div>
+    `,
+  }),
+  args: {}, // Shared args if needed for all components
+};

package/src/stories/Laboratory/Chat/ProgressLinear.stories.ts

@@ -1,186 +1,186 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
-import SolidArrowRight from '@components/Icons/SolidArrowRight.vue';
-import Circle from '@components/Icons/Circle.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-// Meta configuration for the ProgressLinear component
-const meta: Meta<typeof ProgressLinear> = {
-  title: 'WL/Laboratory/Chat/ProgressLinear',
-  component: ProgressLinear,
-  tags: ['autodocs'],
-  argTypes: {
-    date: {
-      control: 'text',
-      description: 'Displays the estimated project duration, e.g., "1d 4h"',
-    },
-    progressValue: {
-      control: 'number',
-      description: 'The progress value as a percentage (0-100)',
-    },
-    status: {
-      control: 'text',
-      description:
-        'Status label for the progress bar (e.g., "Dispatched", "Ready")',
-    },
-  },
-  args: {
-    date: '1d 4h',
-    progressValue: 20,
-    status: 'Dispatched',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`ProgressLinear\` component visually represents the progress of a project or task with a linear progress bar. It includes an estimated duration, progress value, and status label, making it useful for tracking different project stages.
-
-### Props
-- **\`date\`**: Estimated time remaining for the project or task, formatted as a string (e.g., '1d 4h').
-- **\`progressValue\`**: Numeric value representing the progress percentage, where 0 is no progress and 100 is complete.
-- **\`status\`**: Describes the current status of the task, displayed as a label next to the progress bar.
-
-### Usage
-Use this component to track project progress visually, adjusting properties like \`progressValue\` and \`status\` to reflect the current state.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <ProgressLinear v-bind="args" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressLinear 
-    :date="date" 
-    :progressValue="progressValue" 
-    :status="status" 
-  />
-</template>
-
-<script setup>
-import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Define different stories using the common template
-export const Default: Story = { ...Template, args: {} };
-
-export const Progress50: Story = {
-  ...Template,
-  args: {
-    progressValue: 50,
-    date: '2d 5h',
-    status: 'Took',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressLinear 
-    date="2d 5h" 
-    progressValue="50" 
-    status="Took" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const Progress80: Story = {
-  ...Template,
-  args: {
-    progressValue: 80,
-    date: '3d',
-    status: 'Ready',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ProgressLinear 
-    date="3d" 
-    progressValue="80" 
-    status="Ready" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const MultipleProgressBars: Story = {
-  render: (args) => ({
-    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
-        <!-- Each ProgressLinear component with different progress values and statuses -->
-        <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
-        <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
-        <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
-        <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
-        <ProgressLinear progressValue="60" date="3d" status="Ready" />
-        <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
-        <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
-        <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
-        <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
-    <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
-    <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
-    <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
-    <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
-    <ProgressLinear progressValue="60" date="3d" status="Ready" />
-    <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
-    <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
-    <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
-    <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
-  </div>
-</template>
-
-<script setup>
-import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
-</script>
-        `,
-      },
-    },
-  },
-  args: {},
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+import SolidArrowRight from '@components/Icons/SolidArrowRight.vue';
+import Circle from '@components/Icons/Circle.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+// Meta configuration for the ProgressLinear component
+const meta: Meta<typeof ProgressLinear> = {
+  title: 'WL/Laboratory/Chat/ProgressLinear',
+  component: ProgressLinear,
+  tags: ['autodocs'],
+  argTypes: {
+    date: {
+      control: 'text',
+      description: 'Displays the estimated project duration, e.g., "1d 4h"',
+    },
+    progressValue: {
+      control: 'number',
+      description: 'The progress value as a percentage (0-100)',
+    },
+    status: {
+      control: 'text',
+      description:
+        'Status label for the progress bar (e.g., "Dispatched", "Ready")',
+    },
+  },
+  args: {
+    date: '1d 4h',
+    progressValue: 20,
+    status: 'Dispatched',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ProgressLinear\` component visually represents the progress of a project or task with a linear progress bar. It includes an estimated duration, progress value, and status label, making it useful for tracking different project stages.
+
+### Props
+- **\`date\`**: Estimated time remaining for the project or task, formatted as a string (e.g., '1d 4h').
+- **\`progressValue\`**: Numeric value representing the progress percentage, where 0 is no progress and 100 is complete.
+- **\`status\`**: Describes the current status of the task, displayed as a label next to the progress bar.
+
+### Usage
+Use this component to track project progress visually, adjusting properties like \`progressValue\` and \`status\` to reflect the current state.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <ProgressLinear v-bind="args" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    :date="date" 
+    :progressValue="progressValue" 
+    :status="status" 
+  />
+</template>
+
+<script setup>
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const Progress50: Story = {
+  ...Template,
+  args: {
+    progressValue: 50,
+    date: '2d 5h',
+    status: 'Took',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    date="2d 5h" 
+    progressValue="50" 
+    status="Took" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const Progress80: Story = {
+  ...Template,
+  args: {
+    progressValue: 80,
+    date: '3d',
+    status: 'Ready',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressLinear 
+    date="3d" 
+    progressValue="80" 
+    status="Ready" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const MultipleProgressBars: Story = {
+  render: (args) => ({
+    components: { ProgressLinear, SolidArrowRight, Circle, TagLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
+        <!-- Each ProgressLinear component with different progress values and statuses -->
+        <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
+        <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
+        <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
+        <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
+        <ProgressLinear progressValue="60" date="3d" status="Ready" />
+        <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
+        <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
+        <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
+        <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="d-flex flex-column" style="padding: 40px; gap: 16px;">
+    <ProgressLinear progressValue="15" date="1d 4h" status="Draft" />
+    <ProgressLinear progressValue="30" date="1d 8h" status="Done" />
+    <ProgressLinear progressValue="50" date="2d 5h" status="Took" />
+    <ProgressLinear progressValue="70" date="3d" status="Dispatched" />
+    <ProgressLinear progressValue="60" date="3d" status="Ready" />
+    <ProgressLinear progressValue="80" date="3d 6h" status="Treatment Done" />
+    <ProgressLinear progressValue="20" date="3d 6h" status="Production Ready" />
+    <ProgressLinear progressValue="30" date="3d 6h" status="Production Started" />
+    <ProgressLinear progressValue="40" date="3d 6h" status="Ready for Treatment" />
+  </div>
+</template>
+
+<script setup>
+import ProgressLinear from '@components/Laboratory/ProgressLinear/ProgressLinear.vue';
+</script>
+        `,
+      },
+    },
+  },
+  args: {},
+};