@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

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

@@ -1,320 +1,320 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
-import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
-import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the InfoCard component
-const meta: Meta<typeof InfoCard> = {
-  title: 'WL/Laboratory/Cards/InfoCard',
-  component: InfoCard,
-  tags: ['autodocs'],
-  argTypes: {
-    dentist: { control: 'text', description: 'The dentist name to display.' },
-    material: {
-      control: 'text',
-      description: 'The material type, e.g., metal.',
-    },
-    color: {
-      control: 'text',
-      description: 'Color associated with the material.',
-    },
-    patientName: { control: 'text', description: 'Name of the patient.' },
-    patientNumber: {
-      control: 'text',
-      description: 'Unique identifier for the patient.',
-    },
-    header: { control: 'text', description: 'Main heading for the card.' },
-    subHeader: {
-      control: 'text',
-      description: 'Subheading for additional details.',
-    },
-    'click:printer': {
-      action: 'click:printer',
-      description: 'Triggered when printer icon is clicked.',
-    },
-    'click:pencil': {
-      action: 'click:pencil',
-      description: 'Triggered when pencil icon is clicked.',
-    },
-  },
-  args: {
-    dentist: 'Martin Paetz',
-    material: 'metal',
-    color: 'white',
-    patientName: 'Rainer Zufall',
-    patientNumber: '12345',
-    header: 'Implant Details',
-    subHeader: 'Full Dental Implant Procedure',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`InfoCard\` component provides detailed information about a dental implant case, displaying dentist, patient, material, and status. This component includes custom slots for tags and progress indicators.
-
-### Props
-- **\`dentist\`**: Name of the dentist handling the case.
-- **\`material\`**: Type of material used.
-- **\`color\`**: Color associated with the material.
-- **\`patientName\`**: Name of the patient.
-- **\`patientNumber\`**: Patient identifier.
-- **\`header\`**: Main title for the card.
-- **\`subHeader\`**: Secondary title for details.
-
-### Slots
-- **\`tagLabel\`**: Slot to insert custom tag labels, typically using the \`TagLabelGroup\` component for displaying multiple tag icons and colors.
-- **\`progress\`**: Slot for adding a progress indicator, such as the \`ProgressCircle\` component, to visually represent completion status.
-
-### Example Usage
-Use this component to display a card with dynamic content, tracking actions on printer and pencil icons, with visual elements for tags and progress.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Common render template with action handlers for the click events
-const Template: Story = {
-  render: (args) => ({
-    components: { InfoCard, TagLabelGroup, ProgressCircle },
-    setup() {
-      const handlePrinterClick = action('click:printer');
-      const handlePencilClick = action('click:pencil');
-
-      return { args, handlePrinterClick, handlePencilClick };
-    },
-    template: `
-      <div class="d-flex flex-column w-full ma-6 ga-2">
-        <InfoCard 
-          v-bind="args"
-          @click:printer="handlePrinterClick"
-          @click:pencil="handlePencilClick"
-        >
-          <!-- Slot for tagLabel -->
-          <template #tagLabel>
-            <TagLabelGroup
-              :iconsAfter="[{
-                backgroundColor: '#FEFDBD', 
-                borderColor: '#4F4700' 
-              }, {
-                backgroundColor: '#CCE8FD', 
-                borderColor: '#172774' 
-              }, {
-                backgroundColor: '#D8FDE4', 
-                borderColor: '#01D449' 
-              }]"
-            />
-          </template>
-
-          <!-- Slot for progress -->
-          <template #progress>
-            <ProgressCircle
-              size="30"
-              :bgColors="['#01D449', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
-            />
-          </template>
-        </InfoCard>
-      </div>
-    `,
-  }),
-};
-
-// Story with different TagLabelGroup icons
-// Story with different TagLabelGroup icons
-export const DraftDone: Story = {
-  ...Template,
-  render: (args) => ({
-    components: { InfoCard, TagLabelGroup, ProgressCircle },
-    setup() {
-      const handlePrinterClick = action('click:printer');
-      const handlePencilClick = action('click:pencil');
-
-      return { args, handlePrinterClick, handlePencilClick };
-    },
-    template: `
-      <div class="d-flex flex-column w-full ma-6 ga-2">
-        <InfoCard 
-          v-bind="args"
-          @click:printer="handlePrinterClick"
-          @click:pencil="handlePencilClick"
-        >
-          <!-- Slot for tagLabel -->
-          <template #tagLabel>
-            <TagLabelGroup
-              status="Done"
-              :iconsBefore="[{
-                backgroundColor: '#E5E6EE', 
-                borderColor: '#172774' 
-              }]"
-            />
-          </template>
-
-          <!-- Slot for progress -->
-          <template #progress>
-            <ProgressCircle
-              size="50"
-              :bgColors="['#01D449', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
-              :borderColors="['transparent', 'transparent', 'transparent', 'transparent', 'transparent']"
-            />
-          </template>
-        </InfoCard>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div class="d-flex flex-column w-full ma-6 ga-2">
-    <InfoCard 
-      v-bind="args"
-      @click:printer="handlePrinterClick"
-      @click:pencil="handlePencilClick"
-    >
-      <!-- Slot for tagLabel -->
-      <template #tagLabel>
-        <TagLabelGroup
-          status="Done"
-          :iconsBefore="[
-            { backgroundColor: '#E5E6EE', borderColor: '#172774' }
-          ]"
-        />
-      </template>
-
-      <!-- Slot for progress -->
-      <template #progress>
-        <ProgressCircle
-          size="50"
-          :bgColors="[
-            '#01D449', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)'
-          ]"
-          :borderColors="[
-            'transparent', 'transparent', 'transparent', 'transparent', 'transparent'
-          ]"
-        />
-      </template>
-    </InfoCard>
-  </div>
-</template>
-
-<script setup>
-import { action } from '@storybook/addon-actions';
-import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
-import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
-import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
-
-const handlePrinterClick = action('click:printer');
-const handlePencilClick = action('click:pencil');
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story with different ProgressCircle colors and size
-// Story with different ProgressCircle colors and size
-export const Draft: Story = {
-  ...Template,
-  render: (args) => ({
-    components: { InfoCard, TagLabelGroup, ProgressCircle },
-    setup() {
-      const handlePrinterClick = action('click:printer');
-      const handlePencilClick = action('click:pencil');
-
-      return { args, handlePrinterClick, handlePencilClick };
-    },
-    template: `
-      <div class="d-flex flex-column w-full ma-6 ga-2">
-        <InfoCard 
-          v-bind="args"
-          @click:printer="handlePrinterClick"
-          @click:pencil="handlePencilClick"
-        >
-          <!-- Slot for tagLabel -->
-          <template #tagLabel>
-            <TagLabelGroup
-              status="Draft"
-              :iconsAfter="[{
-                backgroundColor: '#D8FDE4', 
-                borderColor: '#01D449' 
-              }]"
-            />
-          </template>
-
-          <!-- Slot for progress -->
-          <template #progress>
-            <ProgressCircle
-              size="50"
-              :bgColors="['#E5E6EE', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
-              :borderColors="['#172774', '#DDDDDF', '#DDDDDF', '#DDDDDF', '#DDDDDF']"
-            />
-          </template>
-        </InfoCard>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <div class="d-flex flex-column w-full ma-6 ga-2">
-    <InfoCard 
-      v-bind="args"
-      @click:printer="handlePrinterClick"
-      @click:pencil="handlePencilClick"
-    >
-      <!-- Slot for tagLabel -->
-      <template #tagLabel>
-        <TagLabelGroup
-          status="Draft"
-          :iconsAfter="[
-            { backgroundColor: '#D8FDE4', borderColor: '#01D449' }
-          ]"
-        />
-      </template>
-
-      <!-- Slot for progress -->
-      <template #progress>
-        <ProgressCircle
-          size="50"
-          :bgColors="[
-            '#E5E6EE', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)', 
-            'var(--Soft-Concrete-1)'
-          ]"
-          :borderColors="[
-            '#172774', '#DDDDDF', '#DDDDDF', '#DDDDDF', '#DDDDDF'
-          ]"
-        />
-      </template>
-    </InfoCard>
-  </div>
-</template>
-
-<script setup>
-import { action } from '@storybook/addon-actions';
-import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
-import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
-import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
-
-const handlePrinterClick = action('click:printer');
-const handlePencilClick = action('click:pencil');
-</script>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
+import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
+import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the InfoCard component
+const meta: Meta<typeof InfoCard> = {
+  title: 'WL/Laboratory/Cards/InfoCard',
+  component: InfoCard,
+  tags: ['autodocs'],
+  argTypes: {
+    dentist: { control: 'text', description: 'The dentist name to display.' },
+    material: {
+      control: 'text',
+      description: 'The material type, e.g., metal.',
+    },
+    color: {
+      control: 'text',
+      description: 'Color associated with the material.',
+    },
+    patientName: { control: 'text', description: 'Name of the patient.' },
+    patientNumber: {
+      control: 'text',
+      description: 'Unique identifier for the patient.',
+    },
+    header: { control: 'text', description: 'Main heading for the card.' },
+    subHeader: {
+      control: 'text',
+      description: 'Subheading for additional details.',
+    },
+    'click:printer': {
+      action: 'click:printer',
+      description: 'Triggered when printer icon is clicked.',
+    },
+    'click:pencil': {
+      action: 'click:pencil',
+      description: 'Triggered when pencil icon is clicked.',
+    },
+  },
+  args: {
+    dentist: 'Martin Paetz',
+    material: 'metal',
+    color: 'white',
+    patientName: 'Rainer Zufall',
+    patientNumber: '12345',
+    header: 'Implant Details',
+    subHeader: 'Full Dental Implant Procedure',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`InfoCard\` component provides detailed information about a dental implant case, displaying dentist, patient, material, and status. This component includes custom slots for tags and progress indicators.
+
+### Props
+- **\`dentist\`**: Name of the dentist handling the case.
+- **\`material\`**: Type of material used.
+- **\`color\`**: Color associated with the material.
+- **\`patientName\`**: Name of the patient.
+- **\`patientNumber\`**: Patient identifier.
+- **\`header\`**: Main title for the card.
+- **\`subHeader\`**: Secondary title for details.
+
+### Slots
+- **\`tagLabel\`**: Slot to insert custom tag labels, typically using the \`TagLabelGroup\` component for displaying multiple tag icons and colors.
+- **\`progress\`**: Slot for adding a progress indicator, such as the \`ProgressCircle\` component, to visually represent completion status.
+
+### Example Usage
+Use this component to display a card with dynamic content, tracking actions on printer and pencil icons, with visual elements for tags and progress.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common render template with action handlers for the click events
+const Template: Story = {
+  render: (args) => ({
+    components: { InfoCard, TagLabelGroup, ProgressCircle },
+    setup() {
+      const handlePrinterClick = action('click:printer');
+      const handlePencilClick = action('click:pencil');
+
+      return { args, handlePrinterClick, handlePencilClick };
+    },
+    template: `
+      <div class="d-flex flex-column w-full ma-6 ga-2">
+        <InfoCard 
+          v-bind="args"
+          @click:printer="handlePrinterClick"
+          @click:pencil="handlePencilClick"
+        >
+          <!-- Slot for tagLabel -->
+          <template #tagLabel>
+            <TagLabelGroup
+              :iconsAfter="[{
+                backgroundColor: '#FEFDBD', 
+                borderColor: '#4F4700' 
+              }, {
+                backgroundColor: '#CCE8FD', 
+                borderColor: '#172774' 
+              }, {
+                backgroundColor: '#D8FDE4', 
+                borderColor: '#01D449' 
+              }]"
+            />
+          </template>
+
+          <!-- Slot for progress -->
+          <template #progress>
+            <ProgressCircle
+              size="30"
+              :bgColors="['#01D449', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
+            />
+          </template>
+        </InfoCard>
+      </div>
+    `,
+  }),
+};
+
+// Story with different TagLabelGroup icons
+// Story with different TagLabelGroup icons
+export const DraftDone: Story = {
+  ...Template,
+  render: (args) => ({
+    components: { InfoCard, TagLabelGroup, ProgressCircle },
+    setup() {
+      const handlePrinterClick = action('click:printer');
+      const handlePencilClick = action('click:pencil');
+
+      return { args, handlePrinterClick, handlePencilClick };
+    },
+    template: `
+      <div class="d-flex flex-column w-full ma-6 ga-2">
+        <InfoCard 
+          v-bind="args"
+          @click:printer="handlePrinterClick"
+          @click:pencil="handlePencilClick"
+        >
+          <!-- Slot for tagLabel -->
+          <template #tagLabel>
+            <TagLabelGroup
+              status="Done"
+              :iconsBefore="[{
+                backgroundColor: '#E5E6EE', 
+                borderColor: '#172774' 
+              }]"
+            />
+          </template>
+
+          <!-- Slot for progress -->
+          <template #progress>
+            <ProgressCircle
+              size="50"
+              :bgColors="['#01D449', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
+              :borderColors="['transparent', 'transparent', 'transparent', 'transparent', 'transparent']"
+            />
+          </template>
+        </InfoCard>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="d-flex flex-column w-full ma-6 ga-2">
+    <InfoCard 
+      v-bind="args"
+      @click:printer="handlePrinterClick"
+      @click:pencil="handlePencilClick"
+    >
+      <!-- Slot for tagLabel -->
+      <template #tagLabel>
+        <TagLabelGroup
+          status="Done"
+          :iconsBefore="[
+            { backgroundColor: '#E5E6EE', borderColor: '#172774' }
+          ]"
+        />
+      </template>
+
+      <!-- Slot for progress -->
+      <template #progress>
+        <ProgressCircle
+          size="50"
+          :bgColors="[
+            '#01D449', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)'
+          ]"
+          :borderColors="[
+            'transparent', 'transparent', 'transparent', 'transparent', 'transparent'
+          ]"
+        />
+      </template>
+    </InfoCard>
+  </div>
+</template>
+
+<script setup>
+import { action } from '@storybook/addon-actions';
+import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
+import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
+import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
+
+const handlePrinterClick = action('click:printer');
+const handlePencilClick = action('click:pencil');
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story with different ProgressCircle colors and size
+// Story with different ProgressCircle colors and size
+export const Draft: Story = {
+  ...Template,
+  render: (args) => ({
+    components: { InfoCard, TagLabelGroup, ProgressCircle },
+    setup() {
+      const handlePrinterClick = action('click:printer');
+      const handlePencilClick = action('click:pencil');
+
+      return { args, handlePrinterClick, handlePencilClick };
+    },
+    template: `
+      <div class="d-flex flex-column w-full ma-6 ga-2">
+        <InfoCard 
+          v-bind="args"
+          @click:printer="handlePrinterClick"
+          @click:pencil="handlePencilClick"
+        >
+          <!-- Slot for tagLabel -->
+          <template #tagLabel>
+            <TagLabelGroup
+              status="Draft"
+              :iconsAfter="[{
+                backgroundColor: '#D8FDE4', 
+                borderColor: '#01D449' 
+              }]"
+            />
+          </template>
+
+          <!-- Slot for progress -->
+          <template #progress>
+            <ProgressCircle
+              size="50"
+              :bgColors="['#E5E6EE', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)', 'var(--Soft-Concrete-1)']"
+              :borderColors="['#172774', '#DDDDDF', '#DDDDDF', '#DDDDDF', '#DDDDDF']"
+            />
+          </template>
+        </InfoCard>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="d-flex flex-column w-full ma-6 ga-2">
+    <InfoCard 
+      v-bind="args"
+      @click:printer="handlePrinterClick"
+      @click:pencil="handlePencilClick"
+    >
+      <!-- Slot for tagLabel -->
+      <template #tagLabel>
+        <TagLabelGroup
+          status="Draft"
+          :iconsAfter="[
+            { backgroundColor: '#D8FDE4', borderColor: '#01D449' }
+          ]"
+        />
+      </template>
+
+      <!-- Slot for progress -->
+      <template #progress>
+        <ProgressCircle
+          size="50"
+          :bgColors="[
+            '#E5E6EE', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)', 
+            'var(--Soft-Concrete-1)'
+          ]"
+          :borderColors="[
+            '#172774', '#DDDDDF', '#DDDDDF', '#DDDDDF', '#DDDDDF'
+          ]"
+        />
+      </template>
+    </InfoCard>
+  </div>
+</template>
+
+<script setup>
+import { action } from '@storybook/addon-actions';
+import InfoCard from '@components/Laboratory/InfoCard/InfoCard.vue';
+import TagLabelGroup from '@components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
+import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
+
+const handlePrinterClick = action('click:printer');
+const handlePencilClick = action('click:pencil');
+</script>
+        `,
+      },
+    },
+  },
+};