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

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

@@ -1,201 +1,201 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import IconBullet from '@components/IconBullet/IconBullet.vue';
-import { action } from '@storybook/addon-actions';
-
-// Meta configuration for the IconBullet component
-const meta: Meta<typeof IconBullet> = {
-  title: 'WL/IconBullet/IconBullet',
-  component: IconBullet,
-  tags: ['autodocs'],
-  argTypes: {
-    content: {
-      control: 'text',
-      description:
-        'HTML content to display in the main content area. Overrides `header` and `subHeader` if provided.',
-    },
-    header: {
-      control: 'text',
-      description:
-        'Header text displayed above the subheader. Only displayed if `content` is not provided.',
-    },
-    subHeader: {
-      control: 'text',
-      description:
-        'Subheader text displayed below the header. Only displayed if `content` is not provided.',
-    },
-    icon: {
-      control: 'text',
-      description:
-        'Icon to display next to the text. If an icon slot is provided, this prop will be ignored.',
-    },
-    iconSize: {
-      control: 'text',
-      description:
-        'Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`IconBullet\` component displays an icon alongside text content. It supports customization through props and slots.
-
-### Props
-- **\`content\`**: HTML content to display in the main content area. Overrides \`header\` and \`subHeader\` if provided.
-- **\`header\`**: Header text displayed above the subheader. Only displayed if \`content\` is not provided.
-- **\`subHeader\`**: Subheader text displayed below the header. Only displayed if \`content\` is not provided.
-- **\`icon\`**: Icon to display next to the text. If an icon slot is provided, this prop will be ignored.
-- **\`iconSize\`**: Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.
-
-### Slots
-- **\`icon\`**: Slot for providing a custom icon. Takes precedence over the \`icon\` prop.
-
-### Example Usage
-The following examples demonstrate different ways to use the \`IconBullet\` component.
-`,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Story using the `content` prop to display custom HTML content.
- */
-export const WithContent: Story = {
-  args: {
-    content:
-      '<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>',
-    icon: 'heroicons:heart',
-    iconSize: '38',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBullet
-    content="<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>"
-    icon="heroicons:heart"
-    iconSize="38"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story using `header` and `subHeader` props.
- */
-export const WithHeaderAndSubHeader: Story = {
-  args: {
-    header: 'Main Header',
-    subHeader: 'This is the subheader text.',
-    icon: 'heroicons:heart',
-    iconSize: '38',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBullet
-    header="Main Header"
-    subHeader="This is the subheader text."
-    icon="heroicons:heart"
-    iconSize="38"
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story using the `icon` slot to provide a custom icon.
- */
-export const WithIconSlot: Story = {
-  args: {
-    header: 'Custom Icon Slot',
-    subHeader: 'Using a custom icon via slot.',
-  },
-  render: (args) => ({
-    components: { IconBullet },
-    setup() {
-      return { args };
-    },
-    template: `
-<IconBullet v-bind="args">
-  <template #icon>
-    <!-- Custom icon content -->
-    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
-  </template>
-</IconBullet>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBullet header="Custom Icon Slot" subHeader="Using a custom icon via slot.">
-    <template #icon>
-      <!-- Custom icon content -->
-      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
-    </template>
-  </IconBullet>
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story demonstrating all props and the icon slot.
- */
-export const FullExample: Story = {
-  args: {
-    header: 'Full Example',
-    subHeader: 'This example uses header, subHeader, and a custom icon slot.',
-    iconSize: '38',
-  },
-  render: (args) => ({
-    components: { IconBullet },
-    setup() {
-      return { args };
-    },
-    template: `
-<IconBullet v-bind="args">
-  <template #icon>
-    <!-- Custom icon content -->
-    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
-  </template>
-</IconBullet>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <IconBullet
-    header="Full Example"
-    subHeader="This example uses header, subHeader, and a custom icon slot."
-  >
-    <template #icon>
-      <!-- Custom icon content -->
-      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
-    </template>
-  </IconBullet>
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import IconBullet from '@components/IconBullet/IconBullet.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the IconBullet component
+const meta: Meta<typeof IconBullet> = {
+  title: 'WL/IconBullet/IconBullet',
+  component: IconBullet,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description:
+        'HTML content to display in the main content area. Overrides `header` and `subHeader` if provided.',
+    },
+    header: {
+      control: 'text',
+      description:
+        'Header text displayed above the subheader. Only displayed if `content` is not provided.',
+    },
+    subHeader: {
+      control: 'text',
+      description:
+        'Subheader text displayed below the header. Only displayed if `content` is not provided.',
+    },
+    icon: {
+      control: 'text',
+      description:
+        'Icon to display next to the text. If an icon slot is provided, this prop will be ignored.',
+    },
+    iconSize: {
+      control: 'text',
+      description:
+        'Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`IconBullet\` component displays an icon alongside text content. It supports customization through props and slots.
+
+### Props
+- **\`content\`**: HTML content to display in the main content area. Overrides \`header\` and \`subHeader\` if provided.
+- **\`header\`**: Header text displayed above the subheader. Only displayed if \`content\` is not provided.
+- **\`subHeader\`**: Subheader text displayed below the header. Only displayed if \`content\` is not provided.
+- **\`icon\`**: Icon to display next to the text. If an icon slot is provided, this prop will be ignored.
+- **\`iconSize\`**: Size of the icon displayed next to the text. Accepts SVG-compatible size values as a string, such as "23", "28", etc. Ignored if an icon slot is provided.
+
+### Slots
+- **\`icon\`**: Slot for providing a custom icon. Takes precedence over the \`icon\` prop.
+
+### Example Usage
+The following examples demonstrate different ways to use the \`IconBullet\` component.
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Story using the `content` prop to display custom HTML content.
+ */
+export const WithContent: Story = {
+  args: {
+    content:
+      '<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>',
+    icon: 'heroicons:heart',
+    iconSize: '38',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    content="<p>This is custom <strong>HTML</strong> content provided via the content prop.</p>"
+    icon="heroicons:heart"
+    iconSize="38"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story using `header` and `subHeader` props.
+ */
+export const WithHeaderAndSubHeader: Story = {
+  args: {
+    header: 'Main Header',
+    subHeader: 'This is the subheader text.',
+    icon: 'heroicons:heart',
+    iconSize: '38',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    header="Main Header"
+    subHeader="This is the subheader text."
+    icon="heroicons:heart"
+    iconSize="38"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story using the `icon` slot to provide a custom icon.
+ */
+export const WithIconSlot: Story = {
+  args: {
+    header: 'Custom Icon Slot',
+    subHeader: 'Using a custom icon via slot.',
+  },
+  render: (args) => ({
+    components: { IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+<IconBullet v-bind="args">
+  <template #icon>
+    <!-- Custom icon content -->
+    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+  </template>
+</IconBullet>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet header="Custom Icon Slot" subHeader="Using a custom icon via slot.">
+    <template #icon>
+      <!-- Custom icon content -->
+      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+    </template>
+  </IconBullet>
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story demonstrating all props and the icon slot.
+ */
+export const FullExample: Story = {
+  args: {
+    header: 'Full Example',
+    subHeader: 'This example uses header, subHeader, and a custom icon slot.',
+    iconSize: '38',
+  },
+  render: (args) => ({
+    components: { IconBullet },
+    setup() {
+      return { args };
+    },
+    template: `
+<IconBullet v-bind="args">
+  <template #icon>
+    <!-- Custom icon content -->
+    <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+  </template>
+</IconBullet>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <IconBullet
+    header="Full Example"
+    subHeader="This example uses header, subHeader, and a custom icon slot."
+  >
+    <template #icon>
+      <!-- Custom icon content -->
+      <v-icon color="#172774" size="38" icon="heroicons:heart"></v-icon>
+    </template>
+  </IconBullet>
+</template>
+        `,
+      },
+    },
+  },
+};