@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

package/src/stories/NotificationBubble.stories.ts

@@ -1,194 +1,194 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue'; // Adjust the import to match your component location
-
-// Meta configuration for the NotificationBubble component
-const meta: Meta<typeof NotificationBubble> = {
-  title: 'WL/NotificationBubble',
-  component: NotificationBubble,
-  tags: ['autodocs'],
-  argTypes: {
-    color: { control: 'color' },
-    size: { control: 'text' },
-    text: { control: 'text' },
-    textColor: { control: 'color' },
-    icon: { control: 'text' },
-    iconSize: { control: 'text' },
-  },
-  args: {
-    color: 'var(--Dental-Blue-0)',
-    size: '40',
-    textColor: 'white',
-    iconSize: '24',
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`NotificationBubble\` component is a visual indicator used for displaying notifications with either an icon or text. The component offers customizable properties for color, size, and icon/text options.
-
-### Props
-- **\`color\`**: Sets the background color of the notification bubble.
-- **\`size\`**: Determines the size of the bubble.
-- **\`text\`**: Text displayed inside the bubble, typically used to show a count.
-- **\`textColor\`**: Sets the color of the text within the bubble.
-- **\`icon\`**: Icon name to display if no text is present.
-- **\`iconSize\`**: Controls the size of the icon.
-
-### Example Usage
-Examples below show the \`NotificationBubble\` in different states, including icon-only and text-only modes.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Common render template for the component
-const Template: Story = {
-  render: (args) => ({
-    components: { NotificationBubble },
-    setup() {
-      return { args };
-    },
-    template: `
-      <NotificationBubble v-bind="args" />
-    `,
-  }),
-};
-
-/**
- * Default Notification Bubble Story
- */
-export const Default: Story = {
-  ...Template,
-  args: {
-    icon: 'heroicons:bell',
-    text: '',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble icon="heroicons:bell" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Story with Text Display
- */
-export const WithText: Story = {
-  ...Template,
-  args: {
-    text: '9',
-    icon: '',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble text="9" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Custom Color and Text Notification Bubble Story
- */
-export const CustomColorAndText: Story = {
-  ...Template,
-  args: {
-    color: 'red',
-    icon: 'heroicons:calendar',
-    iconSize: '25',
-    textColor: 'white',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-/**
- * Custom Icon Notification Bubble Story
- */
-export const CustomIcon: Story = {
-  ...Template,
-  args: {
-    color: 'green',
-    icon: 'heroicons:check-circle',
-    iconSize: '30',
-    text: '',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble color="green" icon="heroicons:check-circle" iconSize="30" />
-</template>
-        `,
-      },
-    },
-  },
-};
-
-export const OutlinedIcon: Story = {
-  ...Template,
-  args: {
-    color: 'var(--Dental-Blue-0)',
-    icon: 'heroicons:x-mark',
-    iconSize: '25',
-    textColor: 'var(--Dental-Blue-0)',
-    variant: 'outlined',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
-</template>
-        `,
-      },
-    },
-  },
-};
-export const OutlinedText: Story = {
-  ...Template,
-  args: {
-    color: 'var(--Dental-Blue-0)',
-    text: '9',
-    iconSize: '25',
-    textColor: 'var(--Dental-Blue-0)',
-    variant: 'outlined',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<template>
-  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
-</template>
-        `,
-      },
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/vue3';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue'; // Adjust the import to match your component location
+
+// Meta configuration for the NotificationBubble component
+const meta: Meta<typeof NotificationBubble> = {
+  title: 'WL/NotificationBubble',
+  component: NotificationBubble,
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    size: { control: 'text' },
+    text: { control: 'text' },
+    textColor: { control: 'color' },
+    icon: { control: 'text' },
+    iconSize: { control: 'text' },
+  },
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    size: '40',
+    textColor: 'white',
+    iconSize: '24',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`NotificationBubble\` component is a visual indicator used for displaying notifications with either an icon or text. The component offers customizable properties for color, size, and icon/text options.
+
+### Props
+- **\`color\`**: Sets the background color of the notification bubble.
+- **\`size\`**: Determines the size of the bubble.
+- **\`text\`**: Text displayed inside the bubble, typically used to show a count.
+- **\`textColor\`**: Sets the color of the text within the bubble.
+- **\`icon\`**: Icon name to display if no text is present.
+- **\`iconSize\`**: Controls the size of the icon.
+
+### Example Usage
+Examples below show the \`NotificationBubble\` in different states, including icon-only and text-only modes.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common render template for the component
+const Template: Story = {
+  render: (args) => ({
+    components: { NotificationBubble },
+    setup() {
+      return { args };
+    },
+    template: `
+      <NotificationBubble v-bind="args" />
+    `,
+  }),
+};
+
+/**
+ * Default Notification Bubble Story
+ */
+export const Default: Story = {
+  ...Template,
+  args: {
+    icon: 'heroicons:bell',
+    text: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble icon="heroicons:bell" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Story with Text Display
+ */
+export const WithText: Story = {
+  ...Template,
+  args: {
+    text: '9',
+    icon: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble text="9" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Custom Color and Text Notification Bubble Story
+ */
+export const CustomColorAndText: Story = {
+  ...Template,
+  args: {
+    color: 'red',
+    icon: 'heroicons:calendar',
+    iconSize: '25',
+    textColor: 'white',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Custom Icon Notification Bubble Story
+ */
+export const CustomIcon: Story = {
+  ...Template,
+  args: {
+    color: 'green',
+    icon: 'heroicons:check-circle',
+    iconSize: '30',
+    text: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="green" icon="heroicons:check-circle" iconSize="30" />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+export const OutlinedIcon: Story = {
+  ...Template,
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    icon: 'heroicons:x-mark',
+    iconSize: '25',
+    textColor: 'var(--Dental-Blue-0)',
+    variant: 'outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};
+export const OutlinedText: Story = {
+  ...Template,
+  args: {
+    color: 'var(--Dental-Blue-0)',
+    text: '9',
+    iconSize: '25',
+    textColor: 'var(--Dental-Blue-0)',
+    variant: 'outlined',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <NotificationBubble color="red" icon="heroicons:calendar" iconSize="25" textColor="white" />
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/OtpInput.stories.ts

@@ -1,101 +1,101 @@
-import OtpInput from '@/components/OtpInput/OtpInput.vue';
-import { Meta, StoryObj } from '@storybook/vue3';
-import { reactive } from 'vue';
-
-const meta: Meta<typeof OtpInput> = {
-  title: 'WL/OtpInput',
-  component: OtpInput,
-  tags: ['autodocs'],
-  argTypes: {
-    phoneNumber: { control: 'text', description: 'The phone number to send the OTP to' },
-    message: { control: 'text', description: 'The status message to display under the input' },
-    otpState: { control: 'select', options: ['default', 'error', 'success'], description: 'The state of the OTP input' },
-    submitFn: { control: 'function', description: 'The function to call when the OTP is submitted' },
-    resendFn: { control: 'function', description: 'The function to call when the resend button is clicked' },
-    loading: { control: 'boolean', description: 'Whether the component is loading' },
-    colors: { control: 'object', description: 'The colors to use for the component' }
-  },
-  args: {
-    phoneNumber: '+4915211122344',
-    message: 'Please enter the OTP sent to your phone.',
-    otpState: 'default',
-    submitFn: () => {
-      console.log('OTP submitted');
-    },
-    resendFn: () => {
-      console.log('Resend OTP');
-    },
-    loading: false,
-    colors: {
-      error: 'var(--Error-Red-0)',
-      success: 'var(--Success-Green-0)'
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: ''
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: Story = {
-  render: (args) => ({
-    components: { OtpInput },
-    setup() {
-      const state = reactive({
-        otpState: args.otpState,
-        message: args.message,
-        loading: args.loading,
-      });
-
-      const submitFn = () => {
-        state.loading = true;
-
-        const states = ['error', 'success'] as const;
-        const randomState = states[Math.floor(Math.random() * states.length)];
-
-        setTimeout(() => {
-          state.loading = false;
-
-          state.otpState = randomState;
-          state.message =
-            randomState === 'error'
-              ? 'Invalid OTP. Please try again.'
-              : randomState === 'success'
-                ? 'OTP verified successfully!'
-                : 'Please enter the OTP sent to your phone.';
-        }, 1000);
-      };
-
-      const resendFn = () => {
-        state.loading = true;
-
-        setTimeout(() => {
-          state.loading = false;
-        }, 1000);
-      };
-
-      return { args, state, submitFn, resendFn };
-    },
-    template: `
-      <div style="padding: 16px;">
-        <OtpInput
-          :phone-number="args.phoneNumber"
-          :otp-state="state.otpState"
-          :message="state.message"
-          :loading="state.loading"
-          :submit-fn="submitFn"
-          :resend-fn="resendFn"
-          :colors="args.colors"
-        />
-      </div>
-    `,
-  }),
-};
-
+import OtpInput from '@/components/OtpInput/OtpInput.vue';
+import { Meta, StoryObj } from '@storybook/vue3';
+import { reactive } from 'vue';
+
+const meta: Meta<typeof OtpInput> = {
+  title: 'WL/OtpInput',
+  component: OtpInput,
+  tags: ['autodocs'],
+  argTypes: {
+    phoneNumber: { control: 'text', description: 'The phone number to send the OTP to' },
+    message: { control: 'text', description: 'The status message to display under the input' },
+    otpState: { control: 'select', options: ['default', 'error', 'success'], description: 'The state of the OTP input' },
+    submitFn: { control: 'function', description: 'The function to call when the OTP is submitted' },
+    resendFn: { control: 'function', description: 'The function to call when the resend button is clicked' },
+    loading: { control: 'boolean', description: 'Whether the component is loading' },
+    colors: { control: 'object', description: 'The colors to use for the component' }
+  },
+  args: {
+    phoneNumber: '+4915211122344',
+    message: 'Please enter the OTP sent to your phone.',
+    otpState: 'default',
+    submitFn: () => {
+      console.log('OTP submitted');
+    },
+    resendFn: () => {
+      console.log('Resend OTP');
+    },
+    loading: false,
+    colors: {
+      error: 'var(--Error-Red-0)',
+      success: 'var(--Success-Green-0)'
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: ''
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: Story = {
+  render: (args) => ({
+    components: { OtpInput },
+    setup() {
+      const state = reactive({
+        otpState: args.otpState,
+        message: args.message,
+        loading: args.loading,
+      });
+
+      const submitFn = () => {
+        state.loading = true;
+
+        const states = ['error', 'success'] as const;
+        const randomState = states[Math.floor(Math.random() * states.length)];
+
+        setTimeout(() => {
+          state.loading = false;
+
+          state.otpState = randomState;
+          state.message =
+            randomState === 'error'
+              ? 'Invalid OTP. Please try again.'
+              : randomState === 'success'
+                ? 'OTP verified successfully!'
+                : 'Please enter the OTP sent to your phone.';
+        }, 1000);
+      };
+
+      const resendFn = () => {
+        state.loading = true;
+
+        setTimeout(() => {
+          state.loading = false;
+        }, 1000);
+      };
+
+      return { args, state, submitFn, resendFn };
+    },
+    template: `
+      <div style="padding: 16px;">
+        <OtpInput
+          :phone-number="args.phoneNumber"
+          :otp-state="state.otpState"
+          :message="state.message"
+          :loading="state.loading"
+          :submit-fn="submitFn"
+          :resend-fn="resendFn"
+          :colors="args.colors"
+        />
+      </div>
+    `,
+  }),
+};
+
 export const Default: Story = { ...Template, args: {} };