@zap-wunschlachen/wl-shared-components 1.0.3 → 1.0.5

package/src/stories/Laboratory/Chat/ChatMessageBadge.stories.ts

@@ -1,204 +1,204 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
-
-// Meta configuration for the ChatMessageBadge component
-const meta: Meta<typeof ChatMessageBadge> = {
-  title: 'WL/Laboratory/Chat/ChatMessageBadge',
-  component: ChatMessageBadge,
-  tags: ['autodocs'],
-  argTypes: {
-    badgeColor: {
-      control: 'color',
-      description: 'The background color of the badge.',
-    },
-    icon: {
-      control: 'text',
-      description: 'The icon displayed inside the badge, e.g., mdi-mail.',
-    },
-    iconColor: {
-      control: 'color',
-      description: 'The color of the icon displayed in the badge.',
-    },
-    fabBaseColor: {
-      control: 'color',
-      description: 'The base color of the floating action button (FAB).',
-    },
-    fabColor: {
-      control: 'color',
-      description: 'The background color of the FAB.',
-    },
-    fabIcon: { control: 'text', description: 'The icon displayed in the FAB.' },
-    fabText: {
-      control: 'text',
-      description: 'Text displayed within the FAB, e.g., initials.',
-    },
-    textColor: {
-      control: 'color',
-      description: 'The color of the text displayed in the badge.',
-    },
-  },
-  args: {
-    badgeColor: 'var(--Power-Red-0)', // Default badge color
-    icon: 'mdi-mail', // Default icon
-    iconColor: 'white', // Default icon color
-    fabBaseColor: 'white', // Default FAB base color
-    fabColor: 'var(--Dental-Blue-0)', // Default FAB color
-    fabIcon: '$vuetify', // Default FAB icon
-    fabText: 'Mj', // Default FAB text
-    textColor: 'white', // Default text color
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`ChatMessageBadge\` component is used to display a badge with customizable colors, icons, and text. It provides flexibility for different styles, supporting options like background colors, icon colors, and floating action button (FAB) properties.
-
-### Props
-- **\`badgeColor\`**: Sets the background color of the badge.
-- **\`icon\`**: The icon displayed within the badge.
-- **\`iconColor\`**: Defines the color of the icon.
-- **\`fabBaseColor\`**: The base color of the floating action button (FAB).
-- **\`fabColor\`**: The background color of the FAB.
-- **\`fabIcon\`**: The icon displayed in the FAB.
-- **\`fabText\`**: Text displayed within the FAB, often used for initials or abbreviations.
-- **\`textColor\`**: Sets the color of any text displayed in the badge.
-
-### Usage
-This component is suitable for displaying notification badges in a chat application or messaging interface, allowing customization for both appearance and content.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Define a common render template
-const Template: Story = {
-  render: (args) => ({
-    components: { ChatMessageBadge },
-    setup() {
-      return { args };
-    },
-    template: '<ChatMessageBadge v-bind="args" />',
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ChatMessageBadge 
-    :badgeColor="badgeColor" 
-    :icon="icon" 
-    :iconColor="iconColor" 
-    :fabBaseColor="fabBaseColor" 
-    :fabColor="fabColor" 
-    :fabIcon="fabIcon" 
-    :fabText="fabText" 
-    :textColor="textColor" 
-  />
-</template>
-
-<script setup>
-import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
-</script>
-        `,
-      },
-    },
-  },
-};
-
-// Story with default values
-export const Default: Story = { ...Template };
-
-// Story with custom badge color and icon
-export const CustomBadgeIcon: Story = {
-  ...Template,
-  args: {
-    badgeColor: 'blue',
-    icon: 'mdi-bell',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ChatMessageBadge 
-    badgeColor="blue" 
-    icon="mdi-bell" 
-    iconColor="white" 
-    fabBaseColor="white" 
-    fabColor="var(--Dental-Blue-0)" 
-    fabIcon="$vuetify" 
-    fabText="Mj" 
-    textColor="white" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with a custom FAB icon and text
-export const CustomFabIconText: Story = {
-  ...Template,
-  args: {
-    fabIcon: 'mdi-home',
-    fabText: 'AB',
-    fabColor: 'green',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ChatMessageBadge 
-    badgeColor="var(--Power-Red-0)" 
-    icon="mdi-mail" 
-    iconColor="white" 
-    fabBaseColor="white" 
-    fabColor="green" 
-    fabIcon="mdi-home" 
-    fabText="AB" 
-    textColor="white" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-// Story with all custom colors
-export const AllCustomColors: Story = {
-  ...Template,
-  args: {
-    badgeColor: 'purple',
-    iconColor: 'yellow',
-    fabBaseColor: 'black',
-    fabColor: 'orange',
-    textColor: 'blue',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <ChatMessageBadge 
-    badgeColor="purple" 
-    icon="mdi-mail" 
-    iconColor="yellow" 
-    fabBaseColor="black" 
-    fabColor="orange" 
-    fabIcon="$vuetify" 
-    fabText="Mj" 
-    textColor="blue" 
-  />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
+
+// Meta configuration for the ChatMessageBadge component
+const meta: Meta<typeof ChatMessageBadge> = {
+  title: 'WL/Laboratory/Chat/ChatMessageBadge',
+  component: ChatMessageBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    badgeColor: {
+      control: 'color',
+      description: 'The background color of the badge.',
+    },
+    icon: {
+      control: 'text',
+      description: 'The icon displayed inside the badge, e.g., mdi-mail.',
+    },
+    iconColor: {
+      control: 'color',
+      description: 'The color of the icon displayed in the badge.',
+    },
+    fabBaseColor: {
+      control: 'color',
+      description: 'The base color of the floating action button (FAB).',
+    },
+    fabColor: {
+      control: 'color',
+      description: 'The background color of the FAB.',
+    },
+    fabIcon: { control: 'text', description: 'The icon displayed in the FAB.' },
+    fabText: {
+      control: 'text',
+      description: 'Text displayed within the FAB, e.g., initials.',
+    },
+    textColor: {
+      control: 'color',
+      description: 'The color of the text displayed in the badge.',
+    },
+  },
+  args: {
+    badgeColor: 'var(--Power-Red-0)', // Default badge color
+    icon: 'mdi-mail', // Default icon
+    iconColor: 'white', // Default icon color
+    fabBaseColor: 'white', // Default FAB base color
+    fabColor: 'var(--Dental-Blue-0)', // Default FAB color
+    fabIcon: '$vuetify', // Default FAB icon
+    fabText: 'Mj', // Default FAB text
+    textColor: 'white', // Default text color
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ChatMessageBadge\` component is used to display a badge with customizable colors, icons, and text. It provides flexibility for different styles, supporting options like background colors, icon colors, and floating action button (FAB) properties.
+
+### Props
+- **\`badgeColor\`**: Sets the background color of the badge.
+- **\`icon\`**: The icon displayed within the badge.
+- **\`iconColor\`**: Defines the color of the icon.
+- **\`fabBaseColor\`**: The base color of the floating action button (FAB).
+- **\`fabColor\`**: The background color of the FAB.
+- **\`fabIcon\`**: The icon displayed in the FAB.
+- **\`fabText\`**: Text displayed within the FAB, often used for initials or abbreviations.
+- **\`textColor\`**: Sets the color of any text displayed in the badge.
+
+### Usage
+This component is suitable for displaying notification badges in a chat application or messaging interface, allowing customization for both appearance and content.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ChatMessageBadge },
+    setup() {
+      return { args };
+    },
+    template: '<ChatMessageBadge v-bind="args" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    :badgeColor="badgeColor" 
+    :icon="icon" 
+    :iconColor="iconColor" 
+    :fabBaseColor="fabBaseColor" 
+    :fabColor="fabColor" 
+    :fabIcon="fabIcon" 
+    :fabText="fabText" 
+    :textColor="textColor" 
+  />
+</template>
+
+<script setup>
+import ChatMessageBadge from '@components/Laboratory/ChatMessage/ChatMessageBadge.vue';
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Story with default values
+export const Default: Story = { ...Template };
+
+// Story with custom badge color and icon
+export const CustomBadgeIcon: Story = {
+  ...Template,
+  args: {
+    badgeColor: 'blue',
+    icon: 'mdi-bell',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="blue" 
+    icon="mdi-bell" 
+    iconColor="white" 
+    fabBaseColor="white" 
+    fabColor="var(--Dental-Blue-0)" 
+    fabIcon="$vuetify" 
+    fabText="Mj" 
+    textColor="white" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with a custom FAB icon and text
+export const CustomFabIconText: Story = {
+  ...Template,
+  args: {
+    fabIcon: 'mdi-home',
+    fabText: 'AB',
+    fabColor: 'green',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="var(--Power-Red-0)" 
+    icon="mdi-mail" 
+    iconColor="white" 
+    fabBaseColor="white" 
+    fabColor="green" 
+    fabIcon="mdi-home" 
+    fabText="AB" 
+    textColor="white" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with all custom colors
+export const AllCustomColors: Story = {
+  ...Template,
+  args: {
+    badgeColor: 'purple',
+    iconColor: 'yellow',
+    fabBaseColor: 'black',
+    fabColor: 'orange',
+    textColor: 'blue',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ChatMessageBadge 
+    badgeColor="purple" 
+    icon="mdi-mail" 
+    iconColor="yellow" 
+    fabBaseColor="black" 
+    fabColor="orange" 
+    fabIcon="$vuetify" 
+    fabText="Mj" 
+    textColor="blue" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};