@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,176 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the DocumentCard component
+const meta: Meta<typeof DocumentCard> = {
+  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCard',
+  component: DocumentCard,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'The title displayed on the card.' },
+    'download:all': {
+      action: 'download:all',
+      description:
+        'Action triggered when the "Download all" button is clicked.',
+    },
+  },
+  args: {
+    title: 'Attachments',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`DocumentCard\` component provides a list of downloadable documents, with each item representing a document entry.
+It includes a main title and individual items with headers and subheaders, each with an option to trigger a download.
+
+### Props
+- **\`title\`**: Sets the title displayed at the top of the card.
+
+### Events
+- **\`download:all\`**: Emitted when the "Download all" button is clicked, allowing for bulk download actions.
+- **\`click:icon\`** (in each \`DocumentCardItem\`): Emitted when the download icon on each document item is clicked, triggering an individual download.
+
+### Usage
+Use this component to list documents with options for individual and bulk downloads.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { DocumentCard, DocumentCardItem },
+    setup() {
+      function handleDownloadAll() {
+        console.log('All documents downloaded');
+      }
+
+      function handleDownload() {
+        console.log('Document downloaded');
+      }
+
+      return {
+        args,
+        handleDownloadAll,
+        handleDownload,
+      };
+    },
+    template: `
+      <DocumentCard v-bind="args" @download:all="handleDownloadAll">
+        <DocumentCardItem
+          header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+          subheader="Uploaded 06.09.24 09:43"
+          @click:icon="handleDownload"
+        />
+        <DocumentCardItem
+          header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+          subheader="Uploaded 07.09.24 10:15"
+          @click:icon="handleDownload"
+        />
+        <DocumentCardItem
+          header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+          subheader="Uploaded 08.09.24 11:30"
+          @click:icon="handleDownload"
+        />
+      </DocumentCard>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <DocumentCard v-bind="args" @download:all="handleDownloadAll">
+    <DocumentCardItem
+      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+      subheader="Uploaded 06.09.24 09:43"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+      subheader="Uploaded 08.09.24 11:30"
+      @click:icon="handleDownload"
+    />
+  </DocumentCard>
+</template>
+
+<script setup>
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+function handleDownloadAll() {
+  console.log('All documents downloaded');
+}
+
+function handleDownload() {
+  console.log('Document downloaded');
+}
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const CustomTitle: Story = {
+  ...Template,
+  args: {
+    title: 'Custom Attachments',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <DocumentCard title="Custom Attachments" @download:all="handleDownloadAll">
+    <DocumentCardItem
+      header="06.09.2024 Rainer Zufall, Lzp. 45 Mandibular"
+      subheader="Uploaded 06.09.24 09:43"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="handleDownload"
+    />
+    <DocumentCardItem
+      header="08.09.2024 John Doe, Lzp. 33 Mandibular"
+      subheader="Uploaded 08.09.24 11:30"
+      @click:icon="handleDownload"
+    />
+  </DocumentCard>
+</template>
+
+<script setup>
+import DocumentCard from '@components/Laboratory/DocumentCard/DocumentCard.vue';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+function handleDownloadAll() {
+  console.log('All documents downloaded');
+}
+
+function handleDownload() {
+  console.log('Document downloaded');
+}
+</script>
+        `,
+      },
+    },
+  },
+};

package/src/stories/Laboratory/Cards/DocumentCard/DocumentCardItem.stories.ts

@@ -0,0 +1,119 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import DocumentCardItem from '@components/Laboratory/DocumentCard/DocumentCardItem.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the DocumentCardItem component
+const meta: Meta<typeof DocumentCardItem> = {
+  title: 'WL/Laboratory/Cards/DocumentCard/DocumentCardItem',
+  component: DocumentCardItem,
+  tags: ['autodocs'],
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'The main header text displayed on the item.',
+    },
+    subheader: {
+      control: 'text',
+      description: 'Additional information displayed below the header.',
+    },
+    'click:icon': {
+      action: 'click:icon',
+      description: 'Triggered when the icon is clicked.',
+    },
+  },
+  args: {
+    header: '06.09.2024 Rainer Zufall, Lzp. 45 Mandibular',
+    subheader: 'Uploaded 06.09.24 09:43',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`DocumentCardItem\` component displays an individual document entry with a header and subheader.
+It includes a hardcoded download icon that triggers a click event when pressed.
+
+### Props
+- **\`header\`**: Main text for the document entry.
+- **\`subheader\`**: Additional text displayed beneath the header.
+
+### Events
+- **\`click:icon\`**: Emitted when the download icon is clicked, allowing for custom actions to be triggered.
+
+### Usage
+Use this component to represent a document item in a list with a customizable header, subheader, and download icon actions.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { DocumentCardItem },
+    setup() {
+      // Define the action for the click event
+      const iconClick = action('click:icon');
+
+      return {
+        args,
+        iconClick,
+      };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <DocumentCardItem
+          v-bind="args"
+          @click:icon="iconClick"
+        />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="padding: 16px;">
+    <DocumentCardItem
+      v-bind="args"
+      @click:icon="iconClick"
+    />
+  </div>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Define different stories using the common template
+export const Default: Story = { ...Template, args: {} };
+
+export const CustomHeaderAndSubheader: Story = {
+  ...Template,
+  args: {
+    header: '07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary',
+    subheader: 'Uploaded 07.09.24 10:15',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <div style="padding: 16px;">
+    <DocumentCardItem
+      header="07.09.2024 Anna Musterfrau, Lzp. 23 Maxillary"
+      subheader="Uploaded 07.09.24 10:15"
+      @click:icon="iconClick"
+    />
+  </div>
+</template>
+        `,
+      },
+    },
+  },
+};

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

@@ -0,0 +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>
+        `,
+      },
+    },
+  },
+};