@lunit/design-system 2.2.0 → 2.2.3

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

@@ -1,121 +1,113 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
-import { action } from "storybook/actions";
+import React, { useState } from 'react';
+import { Box, Table, TableHead, TableRow, TableBody, TableCell } from '@mui/material';
+import { action } from 'storybook/actions';
 
-import ToggleButton from "@/components/ToggleButton";
+import ToggleButton from '@/components/ToggleButton';
 
-import type { StoryFn, Meta } from "@storybook/react-webpack5";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 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: {
     value: {
       control: false,
-      table: { type: { summary: "any" } },
+      table: { type: { summary: 'any' } },
     },
     selected: {
       control: false,
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     children: {
-      type: "string",
+      type: 'string',
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     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' },
       },
     },
     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: {
-        type: "radio",
+        type: 'radio',
       },
-      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.',
     },
     color: {
-      options: ["primary", "secondary"],
+      options: ['primary', 'secondary'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     kind: {
       control: false,
-      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' },
       },
     },
   },
   parameters: {
     controls: {
       include: [
-        "value",
-        "kind",
-        "selectedColor",
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "selected",
-        "color",
-        "onChange",
+        'value',
+        'kind',
+        'selectedColor',
+        'onClick',
+        'children',
+        'disabled',
+        'size',
+        'selected',
+        'color',
+        'onChange',
       ],
     },
     docs: {
@@ -125,17 +117,14 @@ export default {
       },
     },
     pseudo: {
-      hover: ["#hover1", "#hover2", "#hover3"],
+      hover: ['#hover1', '#hover2', '#hover3'],
     },
   },
 } as Meta<typeof ToggleButton>;
 
-const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
-  kind,
-  color,
-  children,
-  ...restProps
-}) => {
+const ButtonTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color, children, kind, ...restArgs } = args;
   const [values, setValues] = useState({
     contained: false,
     outlined: false,
@@ -154,8 +143,8 @@ const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
             <TableCell
               colSpan={3}
               sx={{
-                typography: "body1_16_semibold",
-                color: "inherit",
+                typography: 'body1_16_semibold',
+                color: 'inherit',
               }}
             >
               Kind
@@ -164,19 +153,15 @@ const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
           <TableRow>
             <TableCell
               sx={{
-                width: "33.33333%",
-                typography: "body2_14_medium",
-                color: "inherit",
+                width: '33.33333%',
+                typography: 'body2_14_medium',
+                color: 'inherit',
               }}
             >
               Contained(default)
             </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Outlined
-            </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Ghost
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Outlined</TableCell>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Ghost</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -184,9 +169,9 @@ const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
             <TableCell>
               <ToggleButton
                 color={color}
-                {...restProps}
+                {...restArgs}
                 value="contained"
-                onChange={() => handleChange("contained")}
+                onChange={() => handleChange('contained')}
                 selected={values.contained}
               >
                 {children}
@@ -196,9 +181,9 @@ const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
               <ToggleButton
                 kind="outlined"
                 color="primary"
-                {...restProps}
+                {...restArgs}
                 value="outlined"
-                onChange={() => handleChange("outlined")}
+                onChange={() => handleChange('outlined')}
                 selected={values.outlined}
               >
                 {children}
@@ -208,9 +193,9 @@ const ButtonTemplate: StoryFn<typeof ToggleButton> = ({
               <ToggleButton
                 kind="ghost"
                 color={color}
-                {...restProps}
+                {...restArgs}
                 value="ghost"
-                onChange={() => handleChange("ghost")}
+                onChange={() => handleChange('ghost')}
                 selected={values.ghost}
               >
                 {children}
@@ -231,18 +216,15 @@ export const Kind = {
   argTypes: {
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
     },
   },
 };
 
-const ToggleButtonDocsTemplate: StoryFn<typeof ToggleButton> = ({
-  kind,
-  color,
-  children,
-  ...restProps
-}) => {
+const ToggleButtonDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color, children, kind, ...restArgs } = args;
   const [values, setValues] = useState({
     contained: false,
     outlined: false,
@@ -256,36 +238,36 @@ const ToggleButtonDocsTemplate: StoryFn<typeof ToggleButton> = ({
   return (
     <Box
       sx={{
-        "& button": {
-          marginRight: "7px",
+        '& button': {
+          marginRight: '7px',
         },
       }}
     >
       <ToggleButton
         color={color}
-        {...restProps}
+        {...restArgs}
         value="contained"
-        onChange={() => handleChange("contained")}
+        onChange={() => handleChange('contained')}
         selected={values.contained}
       >
         {children}
       </ToggleButton>
       <ToggleButton
         kind="outlined"
-        color="primary"
-        {...restProps}
+        {...restArgs}
         value="outlined"
-        onChange={() => handleChange("outlined")}
+        onChange={() => handleChange('outlined')}
         selected={values.outlined}
       >
         {children}
       </ToggleButton>
+
       <ToggleButton
         kind="ghost"
         color={color}
-        {...restProps}
+        {...restArgs}
         value="ghost"
-        onChange={() => handleChange("ghost")}
+        onChange={() => handleChange('ghost')}
         selected={values.ghost}
       >
         {children}
@@ -302,6 +284,8 @@ export const KindDocs = {
 };
 
 const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color: _, ...restArgs } = args;
   const [values, setValues] = useState({
     primary: {
       enable: false,
@@ -332,26 +316,24 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
     <Table sx={{ width: 450 }}>
       <TableHead>
         <TableRow>
-          <TableCell></TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell />
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Contained Primary
           </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Contained Secondary
           </TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_regular", color: "inherit" }}>
-            Enable
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Enable</TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               kind="contained"
               value="enable"
-              onChange={() => handleChange("primary", "enable")}
+              onChange={() => handleChange('primary', 'enable')}
               selected={values.primary.enable}
             >
               {args.children}
@@ -359,11 +341,11 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               kind="contained"
               color="secondary"
               value="enable"
-              onChange={() => handleChange("secondary", "enable")}
+              onChange={() => handleChange('secondary', 'enable')}
               selected={values.secondary.enable}
             >
               {args.children}
@@ -371,16 +353,14 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
         </TableRow>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_regular", color: "inherit" }}>
-            Hover
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Hover</TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               id="hover1"
               kind="contained"
               value="hover"
-              onChange={() => handleChange("primary", "hover")}
+              onChange={() => handleChange('primary', 'hover')}
               selected={values.primary.hover}
             >
               {args.children}
@@ -388,12 +368,12 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               id="hover2"
               kind="contained"
               color="secondary"
               value="hover"
-              onChange={() => handleChange("secondary", "hover")}
+              onChange={() => handleChange('secondary', 'hover')}
               selected={values.secondary.hover}
             >
               {args.children}
@@ -401,16 +381,14 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
         </TableRow>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_regular", color: "inherit" }}>
-            Focus
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Focus</TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               kind="contained"
               className="Mui-focusVisible"
               value="focus"
-              onChange={() => handleChange("primary", "focus")}
+              onChange={() => handleChange('primary', 'focus')}
               selected={values.primary.focus}
             >
               {args.children}
@@ -418,12 +396,12 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
           <TableCell>
             <ToggleButton
-              {...args}
+              {...restArgs}
               kind="contained"
               color="secondary"
               className="Mui-focusVisible"
               value="focus"
-              onChange={() => handleChange("secondary", "focus")}
+              onChange={() => handleChange('secondary', 'focus')}
               selected={values.secondary.focus}
             >
               {args.children}
@@ -431,22 +409,14 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
           </TableCell>
         </TableRow>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_regular", color: "inherit" }}>
-            Disabled
-          </TableCell>
+          <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Disabled</TableCell>
           <TableCell>
-            <ToggleButton {...args} kind="contained" disabled value="disabled">
+            <ToggleButton {...restArgs} kind="contained" disabled value="disabled">
               {args.children}
             </ToggleButton>
           </TableCell>
           <TableCell>
-            <ToggleButton
-              {...args}
-              kind="contained"
-              color="secondary"
-              disabled
-              value="text8"
-            >
+            <ToggleButton {...restArgs} kind="contained" color="secondary" disabled value="text8">
               {args.children}
             </ToggleButton>
           </TableCell>
@@ -458,7 +428,7 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
 
 export const KindContained = {
   render: ContainedTemplate,
-  name: "Kind: Contained",
+  name: 'Kind: Contained',
 
   argTypes: {
     color: {
@@ -468,6 +438,8 @@ export const KindContained = {
 };
 
 const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color: _, ...restArgs } = args;
   const [values, setValues] = useState({
     primary: {
       enable: false,
@@ -499,28 +471,24 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
       <Table sx={{ width: 450 }}>
         <TableHead>
           <TableRow>
-            <TableCell></TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell />
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Ghost Primary
             </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Ghost Secondary
             </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Enable
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Enable</TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 kind="ghost"
                 value="enable"
-                onChange={() => handleChange("primary", "enable")}
+                onChange={() => handleChange('primary', 'enable')}
                 selected={values.primary.enable}
               >
                 {args.children}
@@ -528,11 +496,11 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 kind="ghost"
                 color="secondary"
                 value="enable"
-                onChange={() => handleChange("secondary", "enable")}
+                onChange={() => handleChange('secondary', 'enable')}
                 selected={values.secondary.enable}
               >
                 {args.children}
@@ -540,18 +508,14 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Hover
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Hover</TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 id="hover1"
                 kind="ghost"
                 value="hover"
-                onChange={() => handleChange("primary", "hover")}
+                onChange={() => handleChange('primary', 'hover')}
                 selected={values.primary.hover}
               >
                 {args.children}
@@ -559,12 +523,12 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 id="hover2"
                 kind="ghost"
                 color="secondary"
                 value="hover"
-                onChange={() => handleChange("secondary", "hover")}
+                onChange={() => handleChange('secondary', 'hover')}
                 selected={values.secondary.hover}
               >
                 {args.children}
@@ -572,18 +536,14 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Focus
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Focus</TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 kind="ghost"
                 className="Mui-focusVisible"
                 value="focus"
-                onChange={() => handleChange("primary", "focus")}
+                onChange={() => handleChange('primary', 'focus')}
                 selected={values.primary.focus}
               >
                 {args.children}
@@ -591,12 +551,12 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
             <TableCell>
               <ToggleButton
-                {...args}
+                {...restArgs}
                 kind="ghost"
                 color="secondary"
                 className="Mui-focusVisible"
                 value="focus"
-                onChange={() => handleChange("secondary", "focus")}
+                onChange={() => handleChange('secondary', 'focus')}
                 selected={values.secondary.focus}
               >
                 {args.children}
@@ -604,24 +564,16 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>
               Disabled
             </TableCell>
             <TableCell>
-              <ToggleButton {...args} kind="ghost" disabled value="disabled">
+              <ToggleButton {...restArgs} kind="ghost" disabled value="disabled">
                 {args.children}
               </ToggleButton>
             </TableCell>
             <TableCell>
-              <ToggleButton
-                {...args}
-                kind="ghost"
-                color="secondary"
-                disabled
-                value="disabled"
-              >
+              <ToggleButton {...restArgs} kind="ghost" color="secondary" disabled value="disabled">
                 {args.children}
               </ToggleButton>
             </TableCell>
@@ -636,7 +588,7 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
 
 export const KindGhost = {
   render: GhostTemplate,
-  name: "Kind: Ghost",
+  name: 'Kind: Ghost',
 
   argTypes: {
     color: {
@@ -645,10 +597,9 @@ export const KindGhost = {
   },
 };
 
-const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
-  color,
-  ...restProps
-}) => {
+const OutlinedTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { color, ...restProps } = args;
   const [values, setValues] = useState({
     primary: {
       enable: false,
@@ -675,25 +626,22 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
       <Table sx={{ width: 250 }}>
         <TableHead>
           <TableRow>
-            <TableCell></TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell />
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Outlined Primary
             </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Enable
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Enable</TableCell>
             <TableCell>
               <ToggleButton
                 {...restProps}
                 kind="outlined"
+                color="primary"
                 value="enable"
-                onChange={() => handleChange("primary", "enable")}
+                onChange={() => handleChange('primary', 'enable')}
                 selected={values.primary.enable}
               >
                 Text
@@ -701,18 +649,15 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Hover
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Hover</TableCell>
             <TableCell>
               <ToggleButton
                 {...restProps}
                 id="hover1"
                 kind="outlined"
+                color="primary"
                 value="hover"
-                onChange={() => handleChange("primary", "hover")}
+                onChange={() => handleChange('primary', 'hover')}
                 selected={values.primary.hover}
               >
                 Text
@@ -720,18 +665,15 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Focus
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Focus</TableCell>
             <TableCell>
               <ToggleButton
                 {...restProps}
                 kind="outlined"
+                color="primary"
                 className="Mui-focusVisible"
                 value="focus"
-                onChange={() => handleChange("primary", "focus")}
+                onChange={() => handleChange('primary', 'focus')}
                 selected={values.primary.focus}
               >
                 Text
@@ -739,15 +681,14 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>
               Disabled
             </TableCell>
             <TableCell>
               <ToggleButton
                 {...restProps}
                 kind="outlined"
+                color="primary"
                 disabled
                 value="disabled"
               >
@@ -763,7 +704,7 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
 
 export const KindOutlined = {
   render: OutlinedTemplate,
-  name: "Kind: Outlined",
+  name: 'Kind: Outlined',
 
   argTypes: {
     color: {