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

package/src/stories/Laboratory/Cards/TicketCard/TicketCard.stories.ts

@@ -1,335 +1,335 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
-
-// Meta configuration for the TicketCard component
-const meta: Meta<typeof TicketCard> = {
-  title: 'WL/Laboratory/Cards/TicketCard',
-  component: TicketCard,
-  tags: ['autodocs'],
-  argTypes: {
-    status: {
-      control: 'select',
-      options: [
-        'Draft',
-        'Done',
-        'Ready',
-        'Took',
-        'Started',
-        'Dispatched',
-        'Proof',
-      ],
-      description: 'The status displayed by the TagLabel component.',
-    },
-    number: {
-      control: 'number',
-      description: 'The number displayed in the notification bubble.',
-    },
-    tagNumber: { control: 'text', description: 'The tag number displayed.' },
-    name: { control: 'text', description: 'The name to display.' },
-    description: {
-      control: 'text',
-      description: 'The description to display.',
-    },
-    taskNumber: {
-      control: 'text',
-      description:
-        'If provided, displays a button with the task number as the label.',
-    },
-  },
-  args: {
-    status: 'Done',
-    tagNumber: '12345',
-    name: 'Zufall, Rainer',
-    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`TicketCard\` component displays information about a ticket in the laboratory context, including the status, ticket number, name, and description.
-
-### Props
-- **\`status\`**: Status label displayed by the TagLabel component, such as Draft, Done, Ready, etc.
-- **\`number\`**: Numeric value displayed in the notification bubble.
-- **\`tagNumber\`**: A unique identifier or tag number for the ticket.
-- **\`name\`**: Name associated with the ticket.
-- **\`description\`**: Additional details describing the ticket.
-- **\`taskNumber\`**: Optional task number. If specified, shows a button with this label.
-
-### Example Usage
-Below are examples of how to use the \`TicketCard\` component with various ticket statuses.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { TicketCard },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 16px;">
-        <TicketCard v-bind="args" />
-      </div>`,
-  }),
-};
-
-// Define different stories using the common template
-export const Default: Story = {
-  ...Template,
-  args: {
-    status: 'Done',
-    tagNumber: '12345',
-    name: 'Zufall, Rainer',
-    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TicketCard
-    status="Done"
-    tagNumber="12345"
-    name="Zufall, Rainer"
-    description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DispatchedStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Dispatched',
-    number: 10,
-    tagNumber: '54321',
-    name: 'Doe, John',
-    description: 'This is a dispatched ticket description.',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TicketCard
-    status="Dispatched"
-    number="10"
-    tagNumber="54321"
-    name="Doe, John"
-    description="This is a dispatched ticket description."
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ReadyStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Ready',
-    number: 5,
-    tagNumber: '67890',
-    name: 'Smith, Jane',
-    description: 'This ticket is ready for review.',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TicketCard
-    status="Ready"
-    number="5"
-    tagNumber="67890"
-    name="Smith, Jane"
-    description="This ticket is ready for review."
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ProofStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Proof',
-    tagNumber: '77777',
-    name: 'Dr. Olivia Brown',
-    description: 'Review the documentation for accuracy.',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TicketCard
-    status="Proof"
-    tagNumber="77777"
-    name="Dr. Olivia Brown"
-    description="Review the documentation for accuracy."
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story demonstrating the use of `taskNumber` prop
-export const TaskNumberButton: Story = {
-  ...Template,
-  args: {
-    status: 'Started',
-    tagNumber: '99999',
-    name: 'Johnson, Emily',
-    description: 'Processing is underway.',
-    taskNumber: 'TASK-00123',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <TicketCard
-    status="Started"
-    tagNumber="99999"
-    name="Johnson, Emily"
-    description="Processing is underway."
-    taskNumber="TASK-00123"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Example: Multiple Ticket Cards in a List with v-item-group
-export const TicketCardList: Story = {
-  render: (args) => ({
-    components: { TicketCard },
-    setup() {
-      const tickets = [
-        {
-          id: 1,
-          status: 'Done',
-          number: 11,
-          tagNumber: '11001',
-          name: 'Rainer Zufall',
-          description:
-            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-        },
-        {
-          id: 2,
-          status: 'Ready',
-          number: 12,
-          tagNumber: '11002',
-          name: 'John Doe',
-          description:
-            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-        },
-        {
-          id: 3,
-          status: 'Dispatched',
-          number: 9,
-          tagNumber: '11003',
-          name: 'Jane Doe',
-          description:
-            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-        },
-      ];
-      return { args, tickets };
-    },
-    template: `
-      <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
-        <v-item
-          v-for="(ticket, index) in tickets"
-          :key="ticket.id"
-          v-slot="{ isSelected, toggle }"
-        >
-          <TicketCard
-            :status="ticket.status"
-            :number="ticket.number"
-            :tagNumber="ticket.tagNumber"
-            :name="ticket.name"
-            :description="ticket.description"
-            :isSelected="isSelected"
-            :toggle="toggle"
-          />
-        </v-item>
-      </v-item-group>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<script setup>
-import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
-
-const tickets = [
-  {
-    id: 1,
-    status: 'Done',
-    number: 11,
-    tagNumber: '11001',
-    name: 'Rainer Zufall',
-    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-  },
-  {
-    id: 2,
-    status: 'Ready',
-    number: 12,
-    tagNumber: '11002',
-    name: 'John Doe',
-    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-  },
-  {
-    id: 3,
-    status: 'Dispatched',
-    number: 9,
-    tagNumber: '11003',
-    name: 'Jane Doe',
-    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
-  },
-];
-</script>
-
-<template>
-  <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
-    <v-item
-      v-for="ticket in tickets"
-      :key="ticket.id"
-      v-slot="{ isSelected, toggle }"
-    >
-      <TicketCard
-        :status="ticket.status"
-        :number="ticket.number"
-        :tagNumber="ticket.tagNumber"
-        :name="ticket.name"
-        :description="ticket.description"
-        :isSelected="isSelected"
-        :toggle="toggle"
-      />
-    </v-item>
-  </v-item-group>
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
+
+// Meta configuration for the TicketCard component
+const meta: Meta<typeof TicketCard> = {
+  title: 'WL/Laboratory/Cards/TicketCard',
+  component: TicketCard,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Done',
+        'Ready',
+        'Took',
+        'Started',
+        'Dispatched',
+        'Proof',
+      ],
+      description: 'The status displayed by the TagLabel component.',
+    },
+    number: {
+      control: 'number',
+      description: 'The number displayed in the notification bubble.',
+    },
+    tagNumber: { control: 'text', description: 'The tag number displayed.' },
+    name: { control: 'text', description: 'The name to display.' },
+    description: {
+      control: 'text',
+      description: 'The description to display.',
+    },
+    taskNumber: {
+      control: 'text',
+      description:
+        'If provided, displays a button with the task number as the label.',
+    },
+  },
+  args: {
+    status: 'Done',
+    tagNumber: '12345',
+    name: 'Zufall, Rainer',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TicketCard\` component displays information about a ticket in the laboratory context, including the status, ticket number, name, and description.
+
+### Props
+- **\`status\`**: Status label displayed by the TagLabel component, such as Draft, Done, Ready, etc.
+- **\`number\`**: Numeric value displayed in the notification bubble.
+- **\`tagNumber\`**: A unique identifier or tag number for the ticket.
+- **\`name\`**: Name associated with the ticket.
+- **\`description\`**: Additional details describing the ticket.
+- **\`taskNumber\`**: Optional task number. If specified, shows a button with this label.
+
+### Example Usage
+Below are examples of how to use the \`TicketCard\` component with various ticket statuses.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { TicketCard },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <TicketCard v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Define different stories using the common template
+export const Default: Story = {
+  ...Template,
+  args: {
+    status: 'Done',
+    tagNumber: '12345',
+    name: 'Zufall, Rainer',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Done"
+    tagNumber="12345"
+    name="Zufall, Rainer"
+    description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Dispatched',
+    number: 10,
+    tagNumber: '54321',
+    name: 'Doe, John',
+    description: 'This is a dispatched ticket description.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Dispatched"
+    number="10"
+    tagNumber="54321"
+    name="Doe, John"
+    description="This is a dispatched ticket description."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ReadyStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Ready',
+    number: 5,
+    tagNumber: '67890',
+    name: 'Smith, Jane',
+    description: 'This ticket is ready for review.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Ready"
+    number="5"
+    tagNumber="67890"
+    name="Smith, Jane"
+    description="This ticket is ready for review."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProofStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Proof',
+    tagNumber: '77777',
+    name: 'Dr. Olivia Brown',
+    description: 'Review the documentation for accuracy.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Proof"
+    tagNumber="77777"
+    name="Dr. Olivia Brown"
+    description="Review the documentation for accuracy."
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story demonstrating the use of `taskNumber` prop
+export const TaskNumberButton: Story = {
+  ...Template,
+  args: {
+    status: 'Started',
+    tagNumber: '99999',
+    name: 'Johnson, Emily',
+    description: 'Processing is underway.',
+    taskNumber: 'TASK-00123',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <TicketCard
+    status="Started"
+    tagNumber="99999"
+    name="Johnson, Emily"
+    description="Processing is underway."
+    taskNumber="TASK-00123"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Example: Multiple Ticket Cards in a List with v-item-group
+export const TicketCardList: Story = {
+  render: (args) => ({
+    components: { TicketCard },
+    setup() {
+      const tickets = [
+        {
+          id: 1,
+          status: 'Done',
+          number: 11,
+          tagNumber: '11001',
+          name: 'Rainer Zufall',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+        {
+          id: 2,
+          status: 'Ready',
+          number: 12,
+          tagNumber: '11002',
+          name: 'John Doe',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+        {
+          id: 3,
+          status: 'Dispatched',
+          number: 9,
+          tagNumber: '11003',
+          name: 'Jane Doe',
+          description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+        },
+      ];
+      return { args, tickets };
+    },
+    template: `
+      <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
+        <v-item
+          v-for="(ticket, index) in tickets"
+          :key="ticket.id"
+          v-slot="{ isSelected, toggle }"
+        >
+          <TicketCard
+            :status="ticket.status"
+            :number="ticket.number"
+            :tagNumber="ticket.tagNumber"
+            :name="ticket.name"
+            :description="ticket.description"
+            :isSelected="isSelected"
+            :toggle="toggle"
+          />
+        </v-item>
+      </v-item-group>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<script setup>
+import TicketCard from '@components/Laboratory/TicketCard/TicketCard.vue';
+
+const tickets = [
+  {
+    id: 1,
+    status: 'Done',
+    number: 11,
+    tagNumber: '11001',
+    name: 'Rainer Zufall',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  {
+    id: 2,
+    status: 'Ready',
+    number: 12,
+    tagNumber: '11002',
+    name: 'John Doe',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+  {
+    id: 3,
+    status: 'Dispatched',
+    number: 9,
+    tagNumber: '11003',
+    name: 'Jane Doe',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+  },
+];
+</script>
+
+<template>
+  <v-item-group class="d-flex flex-column w-100 pa-2 ga-2">
+    <v-item
+      v-for="ticket in tickets"
+      :key="ticket.id"
+      v-slot="{ isSelected, toggle }"
+    >
+      <TicketCard
+        :status="ticket.status"
+        :number="ticket.number"
+        :tagNumber="ticket.tagNumber"
+        :name="ticket.name"
+        :description="ticket.description"
+        :isSelected="isSelected"
+        :toggle="toggle"
+      />
+    </v-item>
+  </v-item-group>
+</template>
+        `,
+      },
+    },
+  },
+};