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

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

@@ -1,260 +1,260 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
-
-// Meta configuration for the AppointmentCard component
-const meta: Meta<typeof AppointmentCard> = {
-  title: 'WL/Laboratory/Cards/AppointmentCard',
-  component: AppointmentCard,
-  tags: ['autodocs'],
-  argTypes: {
-    date: {
-      control: 'text',
-      description: 'The date to display on the appointment card.',
-    },
-    status: {
-      control: 'select',
-      options: [
-        'Draft',
-        'Done',
-        'Ready',
-        'Took',
-        'Started',
-        'Dispatched',
-        'Proof',
-      ],
-      description: 'Status string like Draft, Done, Ready, etc.',
-    },
-    treatmentName: { control: 'text', description: 'Name of the treatment.' },
-    dentistName: { control: 'text', description: 'Name of the dentist.' },
-    buttonTextColor: {
-      control: 'text',
-      description: 'Text color of the button.',
-    },
-    buttonBackgroundColor: {
-      control: 'text',
-      description: 'Background color of the button.',
-    },
-    buttonBorderColor: {
-      control: 'text',
-      description: 'Border color of the button.',
-    },
-  },
-  args: {
-    date: '16.05.2024',
-    status: 'Draft', // Default value
-    treatmentName: '01 Kontrolle',
-    dentistName: 'Dr. Anna Smith',
-    buttonTextColor: '--Dental-Blue-0',
-    buttonBackgroundColor: 'rgba(186, 230, 234, 0.10)',
-    buttonBorderColor: '--Trkis',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`AppointmentCard\` component displays information about a dental appointment, including date, treatment name, dentist name, and status.
-
-### Props
-- **\`date\`**: The date of the appointment.
-- **\`status\`**: Represents the status of the appointment. Options include Draft, Done, Ready, etc.
-- **\`treatmentName\`**: The name of the treatment.
-- **\`dentistName\`**: The name of the dentist.
-- **\`buttonTextColor\`**, **\`buttonBackgroundColor\`**, **\`buttonBorderColor\`**: Colors for customizing the button.
-
-### Example Usage
-Below are examples of how to use the \`AppointmentCard\` component with various appointment statuses.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { AppointmentCard },
-    setup() {
-      return { args };
-    },
-    template: `<div style="padding: 16px;">
-        <AppointmentCard v-bind="args" />
-      </div>`,
-  }),
-};
-
-// Define different stories using the common template
-export const DraftStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Draft',
-    treatmentName: 'Initial Consultation',
-    dentistName: 'Dr. Anna Smith',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Draft"
-    treatmentName="Initial Consultation"
-    dentistName="Dr. Anna Smith"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DoneStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Done',
-    treatmentName: 'Implantat Checkup',
-    dentistName: 'Dr. John Doe',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Done"
-    treatmentName="Implantat Checkup"
-    dentistName="Dr. John Doe"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ReadyStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Ready',
-    treatmentName: 'Kontrolluntersuchung',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Ready"
-    treatmentName="Kontrolluntersuchung"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const TookStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Took',
-    treatmentName: 'Zahnreinigung',
-    dentistName: 'Dr. John Doe',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Took"
-    treatmentName="Zahnreinigung"
-    dentistName="Dr. John Doe"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const StartedStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Started',
-    treatmentName: 'Implant Procedure',
-    dentistName: 'Dr. Sarah Lee',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Started"
-    treatmentName="Implant Procedure"
-    dentistName="Dr. Sarah Lee"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const DispatchedStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Dispatched',
-    treatmentName: 'Routine Checkup',
-    dentistName: 'Dr. Emily Davis',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Dispatched"
-    treatmentName="Routine Checkup"
-    dentistName="Dr. Emily Davis"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const ProofStatus: Story = {
-  ...Template,
-  args: {
-    status: 'Proof',
-    treatmentName: 'Documentation Review',
-    dentistName: 'Dr. Olivia Brown',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <AppointmentCard
-    date="16.05.2024"
-    status="Proof"
-    treatmentName="Documentation Review"
-    dentistName="Dr. Olivia Brown"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import AppointmentCard from '@components/Laboratory/AppointmentCard/AppointmentCard.vue';
+
+// Meta configuration for the AppointmentCard component
+const meta: Meta<typeof AppointmentCard> = {
+  title: 'WL/Laboratory/Cards/AppointmentCard',
+  component: AppointmentCard,
+  tags: ['autodocs'],
+  argTypes: {
+    date: {
+      control: 'text',
+      description: 'The date to display on the appointment card.',
+    },
+    status: {
+      control: 'select',
+      options: [
+        'Draft',
+        'Done',
+        'Ready',
+        'Took',
+        'Started',
+        'Dispatched',
+        'Proof',
+      ],
+      description: 'Status string like Draft, Done, Ready, etc.',
+    },
+    treatmentName: { control: 'text', description: 'Name of the treatment.' },
+    dentistName: { control: 'text', description: 'Name of the dentist.' },
+    buttonTextColor: {
+      control: 'text',
+      description: 'Text color of the button.',
+    },
+    buttonBackgroundColor: {
+      control: 'text',
+      description: 'Background color of the button.',
+    },
+    buttonBorderColor: {
+      control: 'text',
+      description: 'Border color of the button.',
+    },
+  },
+  args: {
+    date: '16.05.2024',
+    status: 'Draft', // Default value
+    treatmentName: '01 Kontrolle',
+    dentistName: 'Dr. Anna Smith',
+    buttonTextColor: '--Dental-Blue-0',
+    buttonBackgroundColor: 'rgba(186, 230, 234, 0.10)',
+    buttonBorderColor: '--Trkis',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`AppointmentCard\` component displays information about a dental appointment, including date, treatment name, dentist name, and status.
+
+### Props
+- **\`date\`**: The date of the appointment.
+- **\`status\`**: Represents the status of the appointment. Options include Draft, Done, Ready, etc.
+- **\`treatmentName\`**: The name of the treatment.
+- **\`dentistName\`**: The name of the dentist.
+- **\`buttonTextColor\`**, **\`buttonBackgroundColor\`**, **\`buttonBorderColor\`**: Colors for customizing the button.
+
+### Example Usage
+Below are examples of how to use the \`AppointmentCard\` component with various appointment statuses.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { AppointmentCard },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <AppointmentCard v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Define different stories using the common template
+export const DraftStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Draft',
+    treatmentName: 'Initial Consultation',
+    dentistName: 'Dr. Anna Smith',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Draft"
+    treatmentName="Initial Consultation"
+    dentistName="Dr. Anna Smith"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DoneStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Done',
+    treatmentName: 'Implantat Checkup',
+    dentistName: 'Dr. John Doe',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Done"
+    treatmentName="Implantat Checkup"
+    dentistName="Dr. John Doe"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ReadyStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Ready',
+    treatmentName: 'Kontrolluntersuchung',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Ready"
+    treatmentName="Kontrolluntersuchung"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const TookStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Took',
+    treatmentName: 'Zahnreinigung',
+    dentistName: 'Dr. John Doe',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Took"
+    treatmentName="Zahnreinigung"
+    dentistName="Dr. John Doe"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const StartedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Started',
+    treatmentName: 'Implant Procedure',
+    dentistName: 'Dr. Sarah Lee',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Started"
+    treatmentName="Implant Procedure"
+    dentistName="Dr. Sarah Lee"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const DispatchedStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Dispatched',
+    treatmentName: 'Routine Checkup',
+    dentistName: 'Dr. Emily Davis',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Dispatched"
+    treatmentName="Routine Checkup"
+    dentistName="Dr. Emily Davis"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const ProofStatus: Story = {
+  ...Template,
+  args: {
+    status: 'Proof',
+    treatmentName: 'Documentation Review',
+    dentistName: 'Dr. Olivia Brown',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <AppointmentCard
+    date="16.05.2024"
+    status="Proof"
+    treatmentName="Documentation Review"
+    dentistName="Dr. Olivia Brown"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};