@zap-wunschlachen/wl-shared-components 1.0.11 → 1.0.13

package/src/stories/IconBullet/IconBulletList.stories.ts

@@ -1,275 +1,275 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import IconBulletList from '@components/IconBullet/IconBulletList.vue';
-import IconBullet from '@components/IconBullet/IconBullet.vue';
-
-// Meta configuration for the IconBulletList component
-const meta: Meta<typeof IconBulletList> = {
-  title: 'Wl/IconBullet/IconBulletList',
-  tags: ['autodocs'],
-  component: IconBulletList,
-  argTypes: {
-    header: {
-      control: 'text',
-      description: 'Header text displayed if the header slot is not provided.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`IconBulletList\` component displays a list of \`IconBullet\` components with an optional header. The header can be provided via a prop or a slot.
-
-### Props
-- **\`header\`**: Header text displayed if the \`header\` slot is not provided.
-
-### Slots
-- **\`header\`**: Slot for custom header content. Overrides the \`header\` prop.
-- **Default Slot**: Used to pass in \`IconBullet\` components.
-
-### Example Usage
-Below are examples demonstrating how to use the \`IconBulletList\` component.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Story using the `header` prop and including child `IconBullet` components.
- */
-export const WithHeaderAndBullets: Story = {
-  args: {
-    header:
-      'Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?',
-  },
-  render: (args) => ({
-    components: { IconBulletList, IconBullet },
-    setup() {
-      return { args };
-    },
-    template: `
-      <IconBulletList v-bind="args">
-        <IconBullet
-          header="Bequemer Zugang"
-          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
-        >
-          <template #icon>
-            <v-icon size="38" icon="heroicons:calendar" color="#172774" />
-          </template>
-        </IconBullet>
-        <IconBullet
-          header="Einfühlsame Behandlung"
-          subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
-          icon="heroicons:calendar"
-          iconSize="38"
-        />
-        <IconBullet
-          header="Regelmäßige Kontrollen"
-          subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
-          icon="heroicons:calendar"
-          iconSize="38"
-        />
-        <IconBullet
-          header="Bequemer Zugang"
-          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
-          icon="heroicons:calendar"
-          iconSize="38"
-        />
-      </IconBulletList>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBulletList
-    header="Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?"
-  >
-    <IconBullet
-      header="Bequemer Zugang"
-      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
-    >
-      <template #icon>
-        <v-icon size="38" icon="heroicons:calendar" color="#172774" />
-      </template>
-    </IconBullet>
-    <IconBullet
-      header="Einfühlsame Behandlung"
-      subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
-      icon="heroicons:calendar"
-      iconSize="38"
-    />
-    <IconBullet
-      header="Regelmäßige Kontrollen"
-      subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
-      icon="heroicons:calendar"
-      iconSize="38"
-    />
-    <IconBullet
-      header="Bequemer Zugang"
-      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
-      icon="heroicons:calendar"
-      iconSize="38"
-    />
-  </IconBulletList>
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story overriding the header using the `header` slot.
- */
-export const WithHeaderSlot: Story = {
-  render: () => ({
-    components: { IconBulletList, IconBullet },
-    template: `
-      <IconBulletList>
-        <template #header>
-          <h2>Custom Header Content via Slot</h2>
-        </template>
-        <IconBullet
-          header="Custom Bullet"
-          subHeader="This bullet uses a custom icon via slot."
-        >
-          <template #icon>
-            <v-icon size="38" icon="heroicons:star" color="#172774" />
-          </template>
-        </IconBullet>
-      </IconBulletList>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBulletList>
-    <template #header>
-      <h2>Custom Header Content via Slot</h2>
-    </template>
-    <IconBullet
-      header="Custom Bullet"
-      subHeader="This bullet uses a custom icon via slot."
-    >
-      <template #icon>
-        <v-icon size="38" icon="heroicons:star" color="#172774" />
-      </template>
-    </IconBullet>
-  </IconBulletList>
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story demonstrating multiple `IconBullet` components without additional content.
- */
-export const MultipleBullets: Story = {
-  args: {
-    header: 'IconBulletList with Multiple Bullets',
-  },
-  render: (args) => ({
-    components: { IconBulletList, IconBullet },
-    setup() {
-      return { args };
-    },
-    template: `
-      <IconBulletList v-bind="args">
-        <IconBullet
-          header="Erster Punkt"
-          subHeader="Details zum ersten Punkt."
-          icon="heroicons:check-circle"
-          iconSize="38"
-        />
-        <IconBullet
-          header="Zweiter Punkt"
-          subHeader="Details zum zweiten Punkt."
-          icon="heroicons:check-circle"
-          iconSize="38"
-        />
-        <IconBullet
-          header="Dritter Punkt"
-          subHeader="Details zum dritten Punkt."
-          icon="heroicons:check-circle"
-          iconSize="38"
-        />
-      </IconBulletList>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBulletList header="IconBulletList with Multiple Bullets">
-    <IconBullet
-      header="Erster Punkt"
-      subHeader="Details zum ersten Punkt."
-      icon="heroicons:check-circle"
-      iconSize="38"
-    />
-    <IconBullet
-      header="Zweiter Punkt"
-      subHeader="Details zum zweiten Punkt."
-      icon="heroicons:check-circle"
-      iconSize="38"
-    />
-    <IconBullet
-      header="Dritter Punkt"
-      subHeader="Details zum dritten Punkt."
-      icon="heroicons:check-circle"
-      iconSize="38"
-    />
-  </IconBulletList>
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story demonstrating the component without a header (neither prop nor slot).
- */
-export const WithoutHeader: Story = {
-  render: () => ({
-    components: { IconBulletList, IconBullet },
-    template: `
-      <IconBulletList>
-        <IconBullet
-          header="Bullet Without List Header"
-          subHeader="This list has no header."
-          icon="heroicons:information-circle"
-          iconSize="38"
-        />
-      </IconBulletList>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBulletList>
-    <IconBullet
-      header="Bullet Without List Header"
-      subHeader="This list has no header."
-      icon="heroicons:information-circle"
-      iconSize="38"
-    />
-  </IconBulletList>
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import IconBulletList from '@components/IconBullet/IconBulletList.vue';
+import IconBullet from '@components/IconBullet/IconBullet.vue';
+
+// Meta configuration for the IconBulletList component
+const meta: Meta<typeof IconBulletList> = {
+  title: 'Wl/IconBullet/IconBulletList',
+  tags: ['autodocs'],
+  component: IconBulletList,
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'Header text displayed if the header slot is not provided.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`IconBulletList\` component displays a list of \`IconBullet\` components with an optional header. The header can be provided via a prop or a slot.
+
+### Props
+- **\`header\`**: Header text displayed if the \`header\` slot is not provided.
+
+### Slots
+- **\`header\`**: Slot for custom header content. Overrides the \`header\` prop.
+- **Default Slot**: Used to pass in \`IconBullet\` components.
+
+### Example Usage
+Below are examples demonstrating how to use the \`IconBulletList\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Story using the `header` prop and including child `IconBullet` components.
+ */
+export const WithHeaderAndBullets: Story = {
+  args: {
+    header:
+      'Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?',
+  },
+  render: (args) => ({
+    components: { IconBulletList, IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+      <IconBulletList v-bind="args">
+        <IconBullet
+          header="Bequemer Zugang"
+          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+        >
+          <template #icon>
+            <v-icon size="38" icon="heroicons:calendar" color="#172774" />
+          </template>
+        </IconBullet>
+        <IconBullet
+          header="Einfühlsame Behandlung"
+          subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Regelmäßige Kontrollen"
+          subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Bequemer Zugang"
+          subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+          icon="heroicons:calendar"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList
+    header="Welche Vorteile haben festsitzende Zähne an einem Tag gegenüber Prothesen?"
+  >
+    <IconBullet
+      header="Bequemer Zugang"
+      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+    >
+      <template #icon>
+        <v-icon size="38" icon="heroicons:calendar" color="#172774" />
+      </template>
+    </IconBullet>
+    <IconBullet
+      header="Einfühlsame Behandlung"
+      subHeader="Speziell geschult für ältere und pflegebedürftige Patienten"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Regelmäßige Kontrollen"
+      subHeader="Untersuchungen für Ihre Zahngesundheit bei regelmäßigen Besuchen"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Bequemer Zugang"
+      subHeader="Unsere Zahnärzte kommen direkt ins Pflegeheim"
+      icon="heroicons:calendar"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story overriding the header using the `header` slot.
+ */
+export const WithHeaderSlot: Story = {
+  render: () => ({
+    components: { IconBulletList, IconBullet },
+    template: `
+      <IconBulletList>
+        <template #header>
+          <h2>Custom Header Content via Slot</h2>
+        </template>
+        <IconBullet
+          header="Custom Bullet"
+          subHeader="This bullet uses a custom icon via slot."
+        >
+          <template #icon>
+            <v-icon size="38" icon="heroicons:star" color="#172774" />
+          </template>
+        </IconBullet>
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList>
+    <template #header>
+      <h2>Custom Header Content via Slot</h2>
+    </template>
+    <IconBullet
+      header="Custom Bullet"
+      subHeader="This bullet uses a custom icon via slot."
+    >
+      <template #icon>
+        <v-icon size="38" icon="heroicons:star" color="#172774" />
+      </template>
+    </IconBullet>
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating multiple `IconBullet` components without additional content.
+ */
+export const MultipleBullets: Story = {
+  args: {
+    header: 'IconBulletList with Multiple Bullets',
+  },
+  render: (args) => ({
+    components: { IconBulletList, IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+      <IconBulletList v-bind="args">
+        <IconBullet
+          header="Erster Punkt"
+          subHeader="Details zum ersten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Zweiter Punkt"
+          subHeader="Details zum zweiten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+        <IconBullet
+          header="Dritter Punkt"
+          subHeader="Details zum dritten Punkt."
+          icon="heroicons:check-circle"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList header="IconBulletList with Multiple Bullets">
+    <IconBullet
+      header="Erster Punkt"
+      subHeader="Details zum ersten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Zweiter Punkt"
+      subHeader="Details zum zweiten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+    <IconBullet
+      header="Dritter Punkt"
+      subHeader="Details zum dritten Punkt."
+      icon="heroicons:check-circle"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating the component without a header (neither prop nor slot).
+ */
+export const WithoutHeader: Story = {
+  render: () => ({
+    components: { IconBulletList, IconBullet },
+    template: `
+      <IconBulletList>
+        <IconBullet
+          header="Bullet Without List Header"
+          subHeader="This list has no header."
+          icon="heroicons:information-circle"
+          iconSize="38"
+        />
+      </IconBulletList>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBulletList>
+    <IconBullet
+      header="Bullet Without List Header"
+      subHeader="This list has no header."
+      icon="heroicons:information-circle"
+      iconSize="38"
+    />
+  </IconBulletList>
+</template>
+        `,
+      },
+    },
+  },
+};