Jia/QUILL-1752/enhance storybook (#208)

* chore: enhance badge, social button, dropdown * chore: enchance storybook props
deriv-com · Jun 11, 2024 · e55ed2c · e55ed2c
1 parent 101aa7b
commit e55ed2c
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 16 deletions.
diff --git a/lib/components/Badge/badge-container.stories.tsx b/lib/components/Badge/badge-container.stories.tsx
@@ -20,6 +20,12 @@ const meta = {
             control: { type: "radio" },
             description: "To select the color of the badge",
         },
+        contentSize: { table: { disable: true } },
+        position: {
+            options: ["top-right", "center", "bottom-right"],
+            control: { type: "radio" },
+            description: "Position of the badge in the container",
+        },
     },
     tags: ["autodocs"],
 } satisfies Meta<typeof Badge>;

diff --git a/lib/components/Button/base/button.stories.tsx b/lib/components/Button/base/button.stories.tsx
@@ -58,6 +58,7 @@ const meta = {
                 disable: true,
             },
         },
+        dropdown: { table: { disable: true } },
     },
 } satisfies Meta<typeof Button>;
 

diff --git a/lib/components/Button/social/social.stories.tsx b/lib/components/Button/social/social.stories.tsx
@@ -30,7 +30,10 @@ const meta = {
             options: ["true", "false"],
             control: { type: "boolean" },
         },
-
+        social: {
+            options: ["google", "facebook", "apple"],
+            control: { type: "radio" },
+        },
         onClick: {
             table: {
                 disable: true,

diff --git a/lib/components/Chip/selectable-chip/selectable-chip.stories.ts b/lib/components/Chip/selectable-chip/selectable-chip.stories.ts
@@ -26,6 +26,7 @@ const meta = {
             description: "disabled the chip",
             control: { type: "boolean" },
         },
+        className: { table: { disable: true } },
     },
 } satisfies Meta<typeof SelectableChip>;
 

diff --git a/lib/components/Input/dropdown-field/dropdown-autocomplete.stories.tsx b/lib/components/Input/dropdown-field/dropdown-autocomplete.stories.tsx
@@ -33,6 +33,24 @@ const meta = {
         placeholder: "Select",
         variant: "fill",
     },
+    argTypes: {
+        status: {
+            options: ["neutral", "success", "error"],
+            control: { type: "radio" },
+        },
+        textAlignment: {
+            options: ["left", "center"],
+            control: { type: "radio" },
+        },
+        inputSize: {
+            options: ["sm", "md"],
+            control: { type: "radio" },
+        },
+        variant: {
+            options: ["fill", "outline"],
+            control: { type: "radio" },
+        },
+    },
 } satisfies Meta<typeof InputDropdown>;
 
 export default meta;

diff --git a/lib/components/Input/dropdown-field/dropdown.stories.tsx b/lib/components/Input/dropdown-field/dropdown.stories.tsx
@@ -32,6 +32,27 @@ const meta = {
         placeholder: "Select",
         variant: "fill",
     },
+    argTypes: {
+        status: {
+            options: ["neutral", "success", "error"],
+            control: { type: "radio" },
+        },
+        textAlignment: {
+            options: ["left", "center"],
+            control: { type: "radio" },
+        },
+        inputSize: {
+            options: ["sm", "md"],
+            control: { type: "radio" },
+        },
+        variant: {
+            options: ["fill", "outline"],
+            control: { type: "radio" },
+        },
+        isAutocomplete: {
+            control: { type: "boolean" },
+        },
+    },
 } satisfies Meta<typeof InputDropdown>;
 
 export default meta;

diff --git a/lib/components/Notification/banner/banner.stories.tsx b/lib/components/Notification/banner/banner.stories.tsx
@@ -1,9 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
-import { StandaloneCirclePlusBoldIcon } from "@deriv/quill-icons";
+import {
+    LabelPairedPlaceholderCaptionBoldIcon,
+    StandaloneCirclePlusBoldIcon,
+} from "@deriv/quill-icons";
 import { TYPE } from "@utils/notification-utils";
 import NotificationBanner from ".";
 
+const icons: Record<string, object | null> = {
+    custom_icon: <LabelPairedPlaceholderCaptionBoldIcon />,
+    default_icon: null,
+};
+
 const meta = {
     title: "Components/Notification/NotificationBanner",
     component: NotificationBanner,
@@ -30,6 +38,9 @@ const meta = {
         },
         icon: {
             description: "Optional. Custom icon component.",
+            options: Object.keys(icons),
+            mapping: icons,
+            control: "radio",
             table: {
                 type: { summary: "ReactNode | undefined" },
             },

diff --git a/lib/components/Notification/item/item.stories.tsx b/lib/components/Notification/item/item.stories.tsx
@@ -3,6 +3,12 @@ import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { fn } from "@storybook/test";
 import { STATUS, TYPE } from "@utils/notification-utils";
 import NotificationItem from ".";
+import { LabelPairedPlaceholderCaptionBoldIcon } from "@deriv/quill-icons";
+
+const icons: Record<string, object | null> = {
+    custom_icon: <LabelPairedPlaceholderCaptionBoldIcon />,
+    default_icon: null,
+};
 
 const meta = {
     title: "Components/Notification/NotificationItem",
@@ -52,6 +58,9 @@ const meta = {
         },
         icon: {
             description: "Optional. Custom icon component.",
+            options: Object.keys(icons),
+            mapping: icons,
+            control: "radio",
             table: {
                 type: { summary: "ReactNode | undefined" },
             },

diff --git a/lib/components/SectionMessage/section-message.stories.tsx b/lib/components/SectionMessage/section-message.stories.tsx
@@ -18,14 +18,6 @@ const data = [
     },
     {
         id: 2,
-        linkProps: {
-            hasChevron: true,
-            children: "Click here",
-            href: "/",
-        },
-    },
-    {
-        id: 3,
         linkProps: {
             hasChevron: true,
             children: "Disabled Link",
@@ -37,8 +29,7 @@ const data = [
 
 const links = {
     one: data.slice(0, 1),
-    two: data.slice(0, 2),
-    three: data,
+    two: data,
     none: null,
 };
 

diff --git a/lib/components/Tag/custom-tag.stories.tsx b/lib/components/Tag/custom-tag.stories.tsx
@@ -1,11 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
+    LabelPairedPlaceholderCaptionBoldIcon,
     LabelPairedPlaceholderSmRegularIcon,
     LabelPairedThumbsUpCaptionFillIcon,
 } from "@deriv/quill-icons/LabelPaired";
 import "./custom-tag-stories.scss";
 import Tag from ".";
 
+const icons: Record<string, object | null> = {
+    with_icon: <LabelPairedPlaceholderCaptionBoldIcon />,
+    none: null,
+};
+
 const meta = {
     title: "Components/Tag/Custom",
     component: Tag,
@@ -24,16 +30,15 @@ const meta = {
             control: "text",
         },
         icon: {
-            table: {
-                disable: true,
-            },
+            options: Object.keys(icons),
+            mapping: icons,
+            control: "radio",
         },
         size: {
             options: ["xs", "sm", "md", "lg"],
             control: { type: "radio" },
             description: "To select the size of icon and font-size",
         },
-
         className: {
             name: "Class Name",
             control: "text",
@@ -51,6 +56,11 @@ const meta = {
                 disable: true,
             },
         },
+        variant: {
+            table: {
+                disable: true,
+            },
+        },
     },
     tags: ["autodocs"],
 } satisfies Meta<typeof Tag>;

diff --git a/lib/components/Tooltip/tooltip-base.stories.tsx b/lib/components/Tooltip/tooltip-base.stories.tsx
@@ -27,6 +27,10 @@ const meta = {
         actionText: "label",
     },
     argTypes: {
+        tooltipPosition: {
+            options: ["left", "right", "bottom", "top"],
+            control: "select",
+        },
         variant: {
             table: { type: { summary: "string" } },
             description: "Variant of the tooltip",

diff --git a/lib/components/Tooltip/tooltip-rich.stories.tsx b/lib/components/Tooltip/tooltip-rich.stories.tsx
@@ -20,6 +20,10 @@ const meta = {
         title: "Title",
     },
     argTypes: {
+        tooltipPosition: {
+            options: ["left", "right", "bottom", "top"],
+            control: "select",
+        },
         variant: {
             table: { type: { summary: "string" } },
             description: "Variant of the tooltip",

diff --git a/lib/components/Typography/caption/caption.stories.tsx b/lib/components/Typography/caption/caption.stories.tsx
@@ -14,6 +14,7 @@ const meta = {
     argTypes: {
         as: { table: { disable: true } },
         size: { table: { disable: true } },
+        color: { description: "className for color", control: "text" },
     },
 } satisfies Meta<typeof CaptionText>;
 

diff --git a/lib/components/Typography/code/code.stories.tsx b/lib/components/Typography/code/code.stories.tsx
@@ -14,6 +14,7 @@ const meta = {
     argTypes: {
         as: { table: { disable: true } },
         size: { options: ["sm", "md", "lg", "xl"], control: { type: "radio" } },
+        color: { description: "className for color", control: "text" },
     },
 } satisfies Meta<typeof CodeText>;
 

diff --git a/lib/components/Typography/heading/heading.stories.tsx b/lib/components/Typography/heading/heading.stories.tsx
@@ -7,6 +7,7 @@ const meta = {
     tags: ["autodocs"],
     argTypes: {
         as: { table: { disable: true } },
+        color: { description: "className for color", control: "text" },
     },
 } satisfies Meta<typeof Heading.H1>;
 

diff --git a/lib/components/Typography/text/text.stories.tsx b/lib/components/Typography/text/text.stories.tsx
@@ -14,6 +14,7 @@ const meta = {
     argTypes: {
         as: { table: { disable: true } },
         size: { options: ["sm", "md", "lg", "xl"], control: { type: "radio" } },
+        color: { description: "className for color", control: "text" },
     },
 } satisfies Meta<typeof Text>;