@lunit/design-system 1.0.0-a.2 → 1.0.0-a.4

package/src/stories/components/ToggleButton/Basic.stories.tsx

@@ -7,11 +7,11 @@ import {
   TableBody,
   TableCell,
 } from "@mui/material";
-import { Bell } from "@lunit/design-system-icons";
+import Bell from "@lunit/design-system-icons/Bell";
 import ToggleButton from "@/components/ToggleButton";
 import ToggleButtonGroup from "@/components/ToggleButtonGroup";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react";
 import type { ButtonProps } from "@/components/Button/Button.types";
 
 type Size = Pick<ButtonProps, "size">;
@@ -21,12 +21,19 @@ const sizeList: SizeValues[] = ["small", "medium", "large"];
 export default {
   title: "Components/ToggleButton",
   component: ToggleButton,
+  args: {
+    children: "Text",
+    kind: "contained",
+    color: "primary",
+    selectedColor: "primary",
+    size: "small",
+    disabled: false,
+  },
   argTypes: {
     icon: {
       control: false,
       description: `Use this prop when you want to add icon.
-        \n It is added to the left of the text criteria,
-        \n and only Icon can be checked when used with hasIconOnly.`,
+        \n It is added to the left of the text criteria`,
       table: {
         defaultValue: { summary: "undefined" },
         type: { summary: "React.ReactNode" },
@@ -38,7 +45,6 @@ export default {
     },
     children: {
       type: "string",
-      defaultValue: "Text",
     },
     selected: {
       control: false,
@@ -51,7 +57,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary"],
-      defaultValue: "primary",
       description:
         "The color of the button when it is in an select state. It has nothing to do with active button",
       table: {
@@ -64,7 +69,6 @@ export default {
       },
       options: ["contained", "outlined", "ghost"],
       description: "Button has three Kinds Contained, Outlined, Ghost",
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -74,7 +78,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary"],
-      defaultValue: "primary",
       table: {
         defaultValue: { summary: "primary" },
       },
@@ -83,14 +86,12 @@ export default {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
     },
     size: {
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -103,7 +104,6 @@ export default {
         function: action("onChange"),
         undefined: undefined,
       },
-      defaultValue: "function",
     },
     onClick: {
       type: "function",
@@ -113,7 +113,6 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
@@ -141,11 +140,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ToggleButton>;
+} as Meta<typeof ToggleButton>;
 
-const BasicToggleButtonTemplate: ComponentStory<typeof ToggleButton> = (
-  arg
-) => {
+const BasicToggleButtonTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [selected, setSelected] = useState(false);
   useEffect(() => {
     setSelected(Boolean(arg.selected));
@@ -163,10 +160,12 @@ const BasicToggleButtonTemplate: ComponentStory<typeof ToggleButton> = (
   );
 };
 
-export const BasicToggleButton = BasicToggleButtonTemplate.bind({});
-BasicToggleButton.storyName = "Basic ToggleButton";
+export const BasicToggleButton = {
+  render: BasicToggleButtonTemplate,
+  name: "Basic ToggleButton",
+};
 
-const SizeTemplate: ComponentStory<typeof ToggleButton> = (args) => {
+const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
   const [values, setValues] = React.useState({
     small: "",
     medium: "",
@@ -271,14 +270,17 @@ const SizeTemplate: ComponentStory<typeof ToggleButton> = (args) => {
   );
 };
 
-export const Size = SizeTemplate.bind({});
-Size.argTypes = {
-  size: {
-    control: false,
+export const Size = {
+  render: SizeTemplate,
+
+  argTypes: {
+    size: {
+      control: false,
+    },
   },
 };
 
-const SelectedColorTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
+const SelectedColorTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [selected1, setSelected1] = useState(true);
   const [selected2, setSelected2] = useState(true);
 
@@ -329,14 +331,16 @@ const SelectedColorTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
   );
 };
 
-export const SelectedColor = SelectedColorTemplate.bind({});
+export const SelectedColor = {
+  render: SelectedColorTemplate,
 
-SelectedColor.argTypes = {
-  selectedColor: {
-    control: false,
+  argTypes: {
+    selectedColor: {
+      control: false,
+    },
   },
-};
 
-SelectedColor.args = {
-  selected: true,
+  args: {
+    selected: true,
+  },
 };

package/src/stories/components/ToggleButton/Group.stories.tsx

@@ -4,17 +4,24 @@ import { action } from "@storybook/addon-actions";
 import ToggleButton from "@/components/ToggleButton";
 import ToggleButtonGroup from "@/components/ToggleButtonGroup";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react";
 
 export default {
   title: "Components/ToggleButton",
   component: ToggleButton,
+  args: {
+    children: "Text",
+    kind: "contained",
+    color: "primary",
+    selectedColor: "primary",
+    size: "small",
+    disabled: false,
+  },
   argTypes: {
     icon: {
       control: false,
       description: `Use this prop when you want to add icon.
-        \n It is added to the left of the text criteria,
-        \n and only Icon can be checked when used with hasIconOnly.`,
+        \n It is added to the left of the text criteria`,
       table: {
         defaultValue: { summary: "undefined" },
         type: { summary: "React.ReactNode" },
@@ -46,7 +53,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary"],
-      defaultValue: "primary",
       description: "Button has three Kinds Contained, Ghost",
       table: {
         defaultValue: { summary: "primary" },
@@ -57,20 +63,17 @@ export default {
         type: "radio",
       },
       options: ["contained", "outlined", "ghost"],
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
     },
     children: {
       type: "string",
-      defaultValue: "Text",
     },
     disabled: {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -80,7 +83,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -93,7 +95,6 @@ export default {
         function: action("onChange"),
         undefined: undefined,
       },
-      defaultValue: "function",
     },
     onClick: {
       type: "function",
@@ -105,15 +106,10 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
   },
-  args: {
-    kind: "contained",
-    selectedColor: "primary",
-  },
   parameters: {
     controls: {
       include: [
@@ -137,9 +133,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ToggleButton>;
+} as Meta<typeof ToggleButton>;
 
-const GroupTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
+const GroupTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [alignment, setAlignment] = React.useState<string | null>("left");
 
   const handleAlignment = (
@@ -177,10 +173,12 @@ const GroupTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
   );
 };
 
-export const Group = GroupTemplate.bind({});
-Group.storyName = "Group";
+export const Group = {
+  render: GroupTemplate,
+  name: "Group",
+};
 
-const GroupMultipleTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
+const GroupMultipleTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [alignments, setAlignments] = React.useState(() => ["left", "center"]);
 
   const handleAlignments = (
@@ -217,5 +215,7 @@ const GroupMultipleTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
   );
 };
 
-export const GroupMultiple = GroupMultipleTemplate.bind({});
-GroupMultiple.storyName = "Group: Multiple selection";
+export const GroupMultiple = {
+  render: GroupMultipleTemplate,
+  name: "Group: Multiple selection",
+};

package/src/stories/components/ToggleButton/ToggleButtonKind.stories.tsx

@@ -5,17 +5,24 @@ import {
   TableRow,
   TableBody,
   TableCell,
-  Typography,
 } from "@mui/material";
 import { action } from "@storybook/addon-actions";
 
 import ToggleButton from "@/components/ToggleButton";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react";
 
 export default {
   title: "Components/ToggleButton",
   component: ToggleButton,
+  args: {
+    children: "Text",
+    kind: "contained",
+    color: "primary",
+    selectedColor: "primary",
+    size: "small",
+    disabled: false,
+  },
   argTypes: {
     value: {
       control: false,
@@ -29,13 +36,11 @@ export default {
     },
     children: {
       type: "string",
-      defaultValue: "Text",
     },
     disabled: {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -45,7 +50,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -54,7 +58,6 @@ export default {
       control: {
         type: "radio",
       },
-      defaultValue: "primary",
       options: ["primary", "secondary"],
       description:
         "The color of the button when it is in an select state. It has nothing to do with active button",
@@ -70,7 +73,6 @@ export default {
         function: action("onChange"),
         undefined: undefined,
       },
-      defaultValue: "function",
     },
     onClick: {
       type: "function",
@@ -82,13 +84,11 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
     color: {
       options: ["primary", "secondary"],
-      defaultValue: "primary",
       table: {
         defaultValue: { summary: "primary" },
       },
@@ -97,7 +97,6 @@ export default {
       control: false,
       options: ["contained", "outlined", "ghost"],
       description: "Button has three Kinds Contained, Outlined, Ghost",
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -124,10 +123,13 @@ export default {
 				see [Material-UI Toggle Button](https://mui.com/material-ui/react-toggle-button/).`,
       },
     },
+    pseudo: {
+      hover: ["#hover1", "#hover2", "#hover3"],
+    },
   },
-} as ComponentMeta<typeof ToggleButton>;
+} as Meta<typeof ToggleButton>;
 
-const ButtonTemplate: ComponentStory<typeof ToggleButton> = ({
+const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
   kind,
   color,
   children,
@@ -222,17 +224,19 @@ const ButtonTemplate: ComponentStory<typeof ToggleButton> = ({
   );
 };
 
-export const Kind = ButtonTemplate.bind({});
+export const Kind = {
+  render: ButtonTemplate,
 
-Kind.argTypes = {
-  color: {
-    control: {
-      type: "radio",
+  argTypes: {
+    color: {
+      control: {
+        type: "radio",
+      },
     },
   },
 };
 
-const ContainedTemplate: ComponentStory<typeof ToggleButton> = (args) => {
+const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
   const [values, setValues] = useState({
     primary: {
       enable: false,
@@ -248,7 +252,7 @@ const ContainedTemplate: ComponentStory<typeof ToggleButton> = (args) => {
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof typeof values[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values]
   ) => {
     setValues({
       ...values,
@@ -308,7 +312,7 @@ const ContainedTemplate: ComponentStory<typeof ToggleButton> = (args) => {
           <TableCell>
             <ToggleButton
               {...args}
-              id="hover"
+              id="hover1"
               kind="contained"
               value="hover"
               onChange={() => handleChange("primary", "hover")}
@@ -320,7 +324,7 @@ const ContainedTemplate: ComponentStory<typeof ToggleButton> = (args) => {
           <TableCell>
             <ToggleButton
               {...args}
-              id="hover"
+              id="hover2"
               kind="contained"
               color="secondary"
               value="hover"
@@ -387,16 +391,18 @@ const ContainedTemplate: ComponentStory<typeof ToggleButton> = (args) => {
   );
 };
 
-export const KindContained = ContainedTemplate.bind({});
-KindContained.storyName = "Kind: Contained";
+export const KindContained = {
+  render: ContainedTemplate,
+  name: "Kind: Contained",
 
-KindContained.argTypes = {
-  color: {
-    control: false,
+  argTypes: {
+    color: {
+      control: false,
+    },
   },
 };
 
-const GhostTemplate: ComponentStory<typeof ToggleButton> = (args) => {
+const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
   const [values, setValues] = useState({
     primary: {
       enable: false,
@@ -412,7 +418,7 @@ const GhostTemplate: ComponentStory<typeof ToggleButton> = (args) => {
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof typeof values[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values]
   ) => {
     setValues({
       ...values,
@@ -477,7 +483,7 @@ const GhostTemplate: ComponentStory<typeof ToggleButton> = (args) => {
             <TableCell>
               <ToggleButton
                 {...args}
-                id="hover"
+                id="hover1"
                 kind="ghost"
                 value="hover"
                 onChange={() => handleChange("primary", "hover")}
@@ -489,7 +495,7 @@ const GhostTemplate: ComponentStory<typeof ToggleButton> = (args) => {
             <TableCell>
               <ToggleButton
                 {...args}
-                id="hover"
+                id="hover2"
                 kind="ghost"
                 color="secondary"
                 value="hover"
@@ -563,16 +569,18 @@ const GhostTemplate: ComponentStory<typeof ToggleButton> = (args) => {
   );
 };
 
-export const KindGhost = GhostTemplate.bind({});
-KindGhost.storyName = "Kind: Ghost";
+export const KindGhost = {
+  render: GhostTemplate,
+  name: "Kind: Ghost",
 
-KindGhost.argTypes = {
-  color: {
-    control: false,
+  argTypes: {
+    color: {
+      control: false,
+    },
   },
 };
 
-const OutlinedTemplate: ComponentStory<typeof ToggleButton> = ({
+const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
   color,
   ...restProps
 }) => {
@@ -586,7 +594,7 @@ const OutlinedTemplate: ComponentStory<typeof ToggleButton> = ({
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof typeof values[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values]
   ) => {
     setValues({
       ...values,
@@ -636,7 +644,7 @@ const OutlinedTemplate: ComponentStory<typeof ToggleButton> = ({
             <TableCell>
               <ToggleButton
                 {...restProps}
-                id="hover"
+                id="hover1"
                 kind="outlined"
                 value="hover"
                 onChange={() => handleChange("primary", "hover")}
@@ -688,11 +696,13 @@ const OutlinedTemplate: ComponentStory<typeof ToggleButton> = ({
   );
 };
 
-export const KindOutlined = OutlinedTemplate.bind({});
-KindOutlined.storyName = "Kind: Outlined";
+export const KindOutlined = {
+  render: OutlinedTemplate,
+  name: "Kind: Outlined",
 
-KindOutlined.argTypes = {
-  color: {
-    control: false,
+  argTypes: {
+    color: {
+      control: false,
+    },
   },
 };