@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,33 +1,25 @@
-import React, { useEffect, useState } from "react";
-import { action } from "@storybook/addon-actions";
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-  Box,
-} from "@mui/material";
-import Bell from "@lunit/design-system-icons/Bell";
-import ToggleButton from "@/components/ToggleButton";
-import ToggleButtonGroup from "@/components/ToggleButtonGroup";
+import React, { useState } from 'react';
+import { action } from 'storybook/actions';
+import { Table, TableHead, TableRow, TableBody, TableCell, Box } from '@mui/material';
+import Bell from '@lunit/design-system-icons/Bell';
+import ToggleButton from '@/components/ToggleButton';
 
-import type { StoryFn, Meta } from "@storybook/react";
-import type { ButtonProps } from "@/components/Button/Button.types";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { ButtonProps } from '@/components/Button/Button.types';
 
-type Size = Pick<ButtonProps, "size">;
-type SizeValues = Size[keyof Size];
-const sizeList: SizeValues[] = ["small", "medium", "large"];
+type ButtonSizeType = Pick<ButtonProps, 'size'>;
+type SizeValues = ButtonSizeType[keyof ButtonSizeType];
+const sizeList: SizeValues[] = ['small', 'medium', 'large'];
 
 export default {
-  title: "Components/ToggleButton",
+  title: 'Components/ToggleButton',
   component: ToggleButton,
   args: {
-    children: "Text",
-    kind: "contained",
-    color: "primary",
-    selectedColor: "primary",
-    size: "small",
+    children: 'Text',
+    kind: 'contained',
+    color: 'primary',
+    selectedColor: 'primary',
+    size: 'small',
     disabled: false,
   },
   argTypes: {
@@ -36,102 +28,101 @@ export default {
       description: `Use this prop when you want to add icon.
         \n It is added to the left of the text criteria`,
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'React.ReactNode' },
       },
     },
     value: {
       control: false,
-      table: { type: { summary: "any" } },
+      table: { type: { summary: 'any' } },
     },
     children: {
-      type: "string",
+      type: 'string',
     },
     selected: {
       control: false,
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     selectedColor: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["primary", "secondary"],
+      options: ['primary', 'secondary'],
       description:
-        "The color of the button when it is in an select state. It has nothing to do with active button",
+        'The color of the button when it is in an select state. It has nothing to do with active button',
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     kind: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "ghost"],
-      description: "Button has three Kinds Contained, Outlined, Ghost",
+      options: ['contained', 'outlined', 'ghost'],
+      description: 'Button has three Kinds Contained, Outlined, Ghost',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["primary", "secondary"],
+      options: ['primary', 'secondary'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onChange: {
-      type: "function",
+      type: 'function',
       control: false,
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onChange"),
+        function: action('onChange'),
         undefined: undefined,
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: false,
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
       include: [
-        "onChange",
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "kind",
-        "color",
-        "selectedColor",
-        "selected",
-        "value",
-        "icon",
+        'onChange',
+        'onClick',
+        'children',
+        'disabled',
+        'size',
+        'kind',
+        'color',
+        'selectedColor',
+        'selected',
+        'value',
+        'icon',
       ],
     },
     docs: {
@@ -144,18 +135,10 @@ export default {
 } as Meta<typeof ToggleButton>;
 
 const BasicToggleButtonTemplate: StoryFn<typeof ToggleButton> = (arg) => {
-  const [selected, setSelected] = useState(false);
-  useEffect(() => {
-    setSelected(Boolean(arg.selected));
-  }, [arg.selected]);
+  const [selected, setSelected] = useState(Boolean(arg.selected));
 
   return (
-    <ToggleButton
-      {...arg}
-      value="test"
-      selected={selected}
-      onChange={() => setSelected(!selected)}
-    >
+    <ToggleButton {...arg} value="test" selected={selected} onChange={() => setSelected(!selected)}>
       {arg.children}
     </ToggleButton>
   );
@@ -163,38 +146,24 @@ const BasicToggleButtonTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const BasicToggleButton = {
   render: BasicToggleButtonTemplate,
-  name: "Basic ToggleButton",
+  name: 'Basic ToggleButton',
   parameters: {
     chromatic: { disableSnapshot: true },
   },
 };
 
 const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [values, setValues] = React.useState({
-    small: "",
-    medium: "",
-    large: "",
-  });
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
 
-  const handleChange = (value: string | null, size: SizeValues) => {
-    if (size) {
-      setValues({
-        ...values,
-        [size]: value,
-      });
-    }
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
   };
 
-  const group = sizeList.map((size) => {
-    if (size) {
-      return {
-        size: size,
-        handler: (_: React.MouseEvent<HTMLElement>, value: string | null) =>
-          handleChange(value, size),
-      };
-    }
-  });
-
   return (
     <Table sx={{ width: 900 }}>
       <TableHead>
@@ -202,68 +171,52 @@ const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
           <TableCell
             colSpan={3}
             sx={{
-              typography: "body1_16_semibold",
-              color: "inherit",
+              typography: 'body1_16_semibold',
+              color: 'inherit',
             }}
           >
             Size
           </TableCell>
         </TableRow>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Small
-          </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Medium
-          </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Large
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Small</TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Medium</TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Large</TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         <TableRow>
-          {group.map((item) => {
-            if (item) {
-              const { size, handler } = item;
+          {sizeList.map((size) => {
+            if (size) {
               return (
-                <TableCell
-                  key={size}
-                  sx={{ "& button": { marginRight: "10px" } }}
-                >
-                  <ToggleButtonGroup
-                    value={values[size]}
-                    exclusive
-                    onChange={handler}
-                    aria-label="text alignment"
-                    sx={{
-                      "& button": {
-                        marginRight: "7px",
-                      },
-                    }}
+                <TableCell key={size} sx={{ '& button': { marginRight: '10px' } }}>
+                  <ToggleButton
+                    {...args}
+                    icon={<Bell />}
+                    size={size}
+                    value={`${size}-1`}
+                    selected={selectedButtons[`${size}-1`]}
+                    onChange={() => handleToggle(`${size}-1`)}
+                  />
+                  <ToggleButton
+                    {...args}
+                    size={size}
+                    value={`${size}-2`}
+                    selected={selectedButtons[`${size}-2`]}
+                    onChange={() => handleToggle(`${size}-2`)}
+                  >
+                    {args.children}
+                  </ToggleButton>
+                  <ToggleButton
+                    {...args}
+                    icon={<Bell />}
+                    size={size}
+                    value={`${size}-3`}
+                    selected={selectedButtons[`${size}-3`]}
+                    onChange={() => handleToggle(`${size}-3`)}
                   >
-                    <ToggleButton
-                      {...args}
-                      icon={<Bell />}
-                      size={size}
-                      value={String(size) + 1}
-                    />
-                    <ToggleButton
-                      {...args}
-                      size={size}
-                      value={String(size) + 2}
-                    >
-                      {args.children}
-                    </ToggleButton>
-                    <ToggleButton
-                      {...args}
-                      icon={<Bell />}
-                      size={size}
-                      value={String(size) + 3}
-                    >
-                      {args.children}
-                    </ToggleButton>
-                  </ToggleButtonGroup>
+                    {args.children}
+                  </ToggleButton>
                 </TableCell>
               );
             }
@@ -285,104 +238,139 @@ export const Size = {
 };
 
 const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [values, setValues] = React.useState({
-    small: "",
-    medium: "",
-    large: "",
-  });
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
 
-  const handleChange = (value: string | null, size: SizeValues) => {
-    if (!size) return;
-
-    setValues({
-      ...values,
-      [size]: value,
-    });
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
   };
 
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         gap: 4,
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
     >
-      <ToggleButtonGroup
+      <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
-        value={values.small}
-        onChange={(_, value) => handleChange(value, "small")}
       >
-        <ToggleButton {...args} value="small" size="small">
+        <ToggleButton
+          {...args}
+          value="contained-small"
+          size="small"
+          selected={selectedButtons['contained-small']}
+          onChange={() => handleToggle('contained-small')}
+        >
           Small
         </ToggleButton>
-        <ToggleButton {...args} value="medium" size="medium">
+        <ToggleButton
+          {...args}
+          value="contained-medium"
+          size="medium"
+          selected={selectedButtons['contained-medium']}
+          onChange={() => handleToggle('contained-medium')}
+        >
           Medium
         </ToggleButton>
-        <ToggleButton {...args} value="large" size="large">
+        <ToggleButton
+          {...args}
+          value="contained-large"
+          size="large"
+          selected={selectedButtons['contained-large']}
+          onChange={() => handleToggle('contained-large')}
+        >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
-        value={values.medium}
-        onChange={(_, value) => handleChange(value, "medium")}
       >
         <ToggleButton
           {...args}
-          value="small"
+          value="outlined-small"
           kind="outlined"
           color="primary"
           size="small"
+          selected={selectedButtons['outlined-small']}
+          onChange={() => handleToggle('outlined-small')}
         >
           Small
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="medium"
+          value="outlined-medium"
           kind="outlined"
           color="primary"
           size="medium"
+          selected={selectedButtons['outlined-medium']}
+          onChange={() => handleToggle('outlined-medium')}
         >
           Medium
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="large"
+          value="outlined-large"
           kind="outlined"
           color="primary"
           size="large"
+          selected={selectedButtons['outlined-large']}
+          onChange={() => handleToggle('outlined-large')}
         >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
-        value={values.large}
-        onChange={(_, value) => handleChange(value, "large")}
       >
-        <ToggleButton {...args} value="small" kind="ghost" size="small">
+        <ToggleButton
+          {...args}
+          value="ghost-small"
+          kind="ghost"
+          size="small"
+          selected={selectedButtons['ghost-small']}
+          onChange={() => handleToggle('ghost-small')}
+        >
           Small
         </ToggleButton>
-        <ToggleButton {...args} value="medium" kind="ghost" size="medium">
+        <ToggleButton
+          {...args}
+          value="ghost-medium"
+          kind="ghost"
+          size="medium"
+          selected={selectedButtons['ghost-medium']}
+          onChange={() => handleToggle('ghost-medium')}
+        >
           Medium
         </ToggleButton>
-        <ToggleButton {...args} value="large" kind="ghost" size="large">
+        <ToggleButton
+          {...args}
+          value="ghost-large"
+          kind="ghost"
+          size="large"
+          selected={selectedButtons['ghost-large']}
+          onChange={() => handleToggle('ghost-large')}
+        >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
+      </Box>
     </Box>
   );
 };
@@ -400,71 +388,97 @@ export const SizeDocs = {
 };
 
 const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [contained, setContained] = useState("");
-  const [outlined, setOutlined] = useState("");
-  const [ghost, setGhost] = useState("");
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
+  };
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column" }}>
-      <ToggleButtonGroup
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      <Box
         sx={{
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
-        value={contained}
-        onChange={(_, value) => setContained(value)}
       >
-        <ToggleButton {...args} value="first" kind="contained" color="primary">
+        <ToggleButton
+          {...args}
+          value="contained-primary"
+          kind="contained"
+          color="primary"
+          selected={selectedButtons['contained-primary']}
+          onChange={() => handleToggle('contained-primary')}
+        >
           Primary
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="second"
+          value="contained-secondary"
           kind="contained"
           color="secondary"
           selectedColor="secondary"
+          selected={selectedButtons['contained-secondary']}
+          onChange={() => handleToggle('contained-secondary')}
         >
           Secondary
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           marginTop: 4,
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
-        value={outlined}
-        onChange={(_, value) => setOutlined(value)}
       >
-        <ToggleButton {...args} value="first" kind="outlined" color="primary">
+        <ToggleButton
+          {...args}
+          value="outlined-primary"
+          kind="outlined"
+          color="primary"
+          selected={selectedButtons['outlined-primary']}
+          onChange={() => handleToggle('outlined-primary')}
+        >
           Primary
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           marginTop: 4,
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
-        value={ghost}
-        onChange={(_, value) => setGhost(value)}
       >
-        <ToggleButton {...args} value="first" kind="ghost" color="primary">
+        <ToggleButton
+          {...args}
+          value="ghost-primary"
+          kind="ghost"
+          color="primary"
+          selected={selectedButtons['ghost-primary']}
+          onChange={() => handleToggle('ghost-primary')}
+        >
           Primary
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="second"
+          value="ghost-secondary"
           kind="ghost"
           color="secondary"
           selectedColor="secondary"
+          selected={selectedButtons['ghost-secondary']}
+          onChange={() => handleToggle('ghost-secondary')}
         >
           Secondary
         </ToggleButton>
-      </ToggleButtonGroup>
+      </Box>
     </Box>
   );
 };
@@ -489,22 +503,16 @@ const SelectedColorTemplate: StoryFn<typeof ToggleButton> = (arg) => {
     <Table sx={{ width: 330 }}>
       <TableHead>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Selected color
           </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Primary
-          </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Secondary
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Primary</TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Secondary</TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Selected
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Selected</TableCell>
           <TableCell>
             <ToggleButton
               {...arg}
@@ -547,11 +555,11 @@ export const SelectedColor = {
 };
 
 const SelectedColorDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const { kind, selectedColor, color, ...restProps } = args;
+  const { ...restProps } = args;
   return (
     <Box
       sx={{
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
@@ -582,11 +590,11 @@ export const SelectedColorDocs = {
 };
 
 const SelectedDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const { kind, selectedColor, color, selected, ...restProps } = args;
+  const { ...restProps } = args;
   return (
     <Box
       sx={{
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
@@ -610,7 +618,7 @@ export const SelectedDocs = {
   },
   parameters: {
     chromatic: { disableSnapshot: true },
-    include: ["color", "size", "disabled", "selected", "kind"],
+    include: ['color', 'size', 'disabled', 'selected', 'kind'],
   },
 };
 
@@ -618,7 +626,7 @@ const DisabledTemplate: StoryFn<typeof ToggleButton> = (args) => {
   return (
     <Box
       sx={{
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
@@ -626,13 +634,7 @@ const DisabledTemplate: StoryFn<typeof ToggleButton> = (args) => {
       <ToggleButton {...args} value="first" disabled>
         Text
       </ToggleButton>
-      <ToggleButton
-        {...args}
-        kind="outlined"
-        color="primary"
-        value="second"
-        disabled
-      >
+      <ToggleButton {...args} kind="outlined" color="primary" value="second" disabled>
         Text
       </ToggleButton>
       <ToggleButton {...args} kind="ghost" value="second" disabled>