@zap-wunschlachen/wl-shared-components 1.0.25 → 1.0.26

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

@@ -1,111 +1,111 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import StatusNotification from '@components/Laboratory/StatusNotification/StatusNotification.vue'; // Adjust the path accordingly
-
-const meta: Meta<typeof StatusNotification> = {
-  title: 'WL/Laboratory/Chat/StatusNotification',
-  component: StatusNotification,
-  tags: ['autodocs'],
-  argTypes: {
-    header: { control: 'text' },
-    subheader: { control: 'text' },
-    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',
-      ], // Add more statuses if needed
-    },
-  },
-  args: {
-    header: 'Susanne M. hat neuen Status gesetzt',
-    subheader: 'Do. 12. Sept. 2024 – 15:44',
-    status: 'Draft',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a template for the stories
-const Template: Story = {
-  render: (args) => ({
-    components: { StatusNotification },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <StatusNotification v-bind="args" />
-      </div>
-    `,
-  }),
-};
-
-// Different variations of the component
-
-export const Default: Story = { ...Template };
-
-export const DoneStatus: Story = {
-  ...Template,
-  args: {
-    header: 'Max Mustermann hat den Status aktualisiert',
-    subheader: 'Fr. 13. Sept. 2024 – 09:30',
-    status: 'Done',
-  },
-};
-
-export const DispatchedStatus: Story = {
-  ...Template,
-  args: {
-    header: 'Anna Schmidt hat den Status geändert',
-    subheader: 'Mi. 14. Sept. 2024 – 11:20',
-    status: 'Dispatched',
-  },
-};
-
-// Define a story that displays multiple StatusNotification components in a column layout
-export const MultipleStatusNotifications: Story = {
-  render: (args) => ({
-    components: { StatusNotification },
-    setup() {
-      // Define actions for each event if needed
-      const handleStatusChange = action('status:changed');
-
-      return { args, handleStatusChange };
-    },
-    template: `
-      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
-        <!-- Each StatusNotification component with different statuses -->
-        <StatusNotification v-bind="args" header="Susanne M. hat neuen Status gesetzt" status="Draft" subheader="Do. 12. Sept. 2024 – 15:44" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Max Mustermann hat den Status aktualisiert" status="Design Ready" subheader="Fr. 13. Sept. 2024 – 09:30" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Anna Schmidt hat den Status geändert" status="Design Started" subheader="Mi. 14. Sept. 2024 – 11:20" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="John Doe hat den Status aktualisiert" status="Production Ready" subheader="Di. 15. Sept. 2024 – 12:50" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Maria König hat den Status gesetzt" status="Production Started" subheader="Mo. 16. Sept. 2024 – 14:10" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Tom Müller hat den Status gesetzt" status="Shipping Dispatched" subheader="So. 17. Sept. 2024 – 16:00" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Lisa Schulz hat den Status gesetzt" status="Treatment Took" subheader="Sa. 18. Sept. 2024 – 17:30" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Robert Becker hat den Status gesetzt" status="Follow-up Case Created" subheader="Fr. 19. Sept. 2024 – 18:50" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Claudia Neumann hat den Status gesetzt" status="Treatment Done" subheader="Do. 20. Sept. 2024 – 20:10" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Michael Fischer hat den Status gesetzt" status="Ready for Treatment" subheader="Mi. 21. Sept. 2024 – 21:40" @status:changed="handleStatusChange" />
-        <StatusNotification v-bind="args" header="Sandra Hoffmann hat den Status gesetzt" status="Done" subheader="Di. 22. Sept. 2024 – 23:15" @status:changed="handleStatusChange" />
-      </div>
-    `,
-  }),
-  args: {}, // Shared args if needed for all components
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import StatusNotification from '@components/Laboratory/StatusNotification/StatusNotification.vue'; // Adjust the path accordingly
+
+const meta: Meta<typeof StatusNotification> = {
+  title: 'WL/Laboratory/Chat/StatusNotification',
+  component: StatusNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    header: { control: 'text' },
+    subheader: { control: 'text' },
+    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',
+      ], // Add more statuses if needed
+    },
+  },
+  args: {
+    header: 'Susanne M. hat neuen Status gesetzt',
+    subheader: 'Do. 12. Sept. 2024 – 15:44',
+    status: 'Draft',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a template for the stories
+const Template: Story = {
+  render: (args) => ({
+    components: { StatusNotification },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <StatusNotification v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+// Different variations of the component
+
+export const Default: Story = { ...Template };
+
+export const DoneStatus: Story = {
+  ...Template,
+  args: {
+    header: 'Max Mustermann hat den Status aktualisiert',
+    subheader: 'Fr. 13. Sept. 2024 – 09:30',
+    status: 'Done',
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    header: 'Anna Schmidt hat den Status geändert',
+    subheader: 'Mi. 14. Sept. 2024 – 11:20',
+    status: 'Dispatched',
+  },
+};
+
+// Define a story that displays multiple StatusNotification components in a column layout
+export const MultipleStatusNotifications: Story = {
+  render: (args) => ({
+    components: { StatusNotification },
+    setup() {
+      // Define actions for each event if needed
+      const handleStatusChange = action('status:changed');
+
+      return { args, handleStatusChange };
+    },
+    template: `
+      <div class="d-flex flex-column" style="padding: 16px; gap: 16px;">
+        <!-- Each StatusNotification component with different statuses -->
+        <StatusNotification v-bind="args" header="Susanne M. hat neuen Status gesetzt" status="Draft" subheader="Do. 12. Sept. 2024 – 15:44" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Max Mustermann hat den Status aktualisiert" status="Design Ready" subheader="Fr. 13. Sept. 2024 – 09:30" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Anna Schmidt hat den Status geändert" status="Design Started" subheader="Mi. 14. Sept. 2024 – 11:20" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="John Doe hat den Status aktualisiert" status="Production Ready" subheader="Di. 15. Sept. 2024 – 12:50" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Maria König hat den Status gesetzt" status="Production Started" subheader="Mo. 16. Sept. 2024 – 14:10" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Tom Müller hat den Status gesetzt" status="Shipping Dispatched" subheader="So. 17. Sept. 2024 – 16:00" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Lisa Schulz hat den Status gesetzt" status="Treatment Took" subheader="Sa. 18. Sept. 2024 – 17:30" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Robert Becker hat den Status gesetzt" status="Follow-up Case Created" subheader="Fr. 19. Sept. 2024 – 18:50" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Claudia Neumann hat den Status gesetzt" status="Treatment Done" subheader="Do. 20. Sept. 2024 – 20:10" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Michael Fischer hat den Status gesetzt" status="Ready for Treatment" subheader="Mi. 21. Sept. 2024 – 21:40" @status:changed="handleStatusChange" />
+        <StatusNotification v-bind="args" header="Sandra Hoffmann hat den Status gesetzt" status="Done" subheader="Di. 22. Sept. 2024 – 23:15" @status:changed="handleStatusChange" />
+      </div>
+    `,
+  }),
+  args: {}, // Shared args if needed for all components
+};

package/src/stories/Laboratory/MainColumnsBar.stories.ts

@@ -1,48 +1,48 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import MainColumnsBar from '@components/Laboratory/MainColumnsBar/MainColumnsBar.vue'; // Adjust the import to match your component location
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the MainColumnsBar component
-const meta: Meta<typeof MainColumnsBar> = {
-  title: 'WL/Laboratory/MainColumnsBar',
-  component: MainColumnsBar,
-  tags: ['autodocs'],
-  argTypes: {
-    'click:draft': { action: 'click:draft' }, // Track the 'click:draft' event
-    'click:design': { action: 'click:design' }, // Track the 'click:design' event
-    'click:production': { action: 'click:production' }, // Track the 'click:production' event
-    'click:shipping': { action: 'click:shipping' }, // Track the 'click:shipping' event
-    'click:treatment': { action: 'click:treatment' }, // Track the 'click:treatment' event
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Common render template for the component
-const Template: Story = {
-  render: (args) => ({
-    components: { MainColumnsBar },
-    setup() {
-      return { args };
-    },
-    template: `
-      <MainColumnsBar 
-        @click:draft="args['click:draft']"
-        @click:design="args['click:design']"
-        @click:production="args['click:production']"
-        @click:shipping="args['click:shipping']"
-        @click:treatment="args['click:treatment']"
-      />
-    `,
-  }),
-};
-
-// Default story
-export const Default: Story = { ...Template };
-
-// Custom story showing action log when buttons are clicked
-export const WithEventActions: Story = {
-  ...Template,
-  args: {},
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import MainColumnsBar from '@components/Laboratory/MainColumnsBar/MainColumnsBar.vue'; // Adjust the import to match your component location
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the MainColumnsBar component
+const meta: Meta<typeof MainColumnsBar> = {
+  title: 'WL/Laboratory/MainColumnsBar',
+  component: MainColumnsBar,
+  tags: ['autodocs'],
+  argTypes: {
+    'click:draft': { action: 'click:draft' }, // Track the 'click:draft' event
+    'click:design': { action: 'click:design' }, // Track the 'click:design' event
+    'click:production': { action: 'click:production' }, // Track the 'click:production' event
+    'click:shipping': { action: 'click:shipping' }, // Track the 'click:shipping' event
+    'click:treatment': { action: 'click:treatment' }, // Track the 'click:treatment' event
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common render template for the component
+const Template: Story = {
+  render: (args) => ({
+    components: { MainColumnsBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MainColumnsBar 
+        @click:draft="args['click:draft']"
+        @click:design="args['click:design']"
+        @click:production="args['click:production']"
+        @click:shipping="args['click:shipping']"
+        @click:treatment="args['click:treatment']"
+      />
+    `,
+  }),
+};
+
+// Default story
+export const Default: Story = { ...Template };
+
+// Custom story showing action log when buttons are clicked
+export const WithEventActions: Story = {
+  ...Template,
+  args: {},
+};