@lunit/design-system 2.1.0 → 2.2.3

package/src/stories/components/Button/Kind.stories.tsx

@@ -1,105 +1,82 @@
-import React from "react";
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import React from 'react';
+import { Table, TableHead, TableRow, TableBody, TableCell } from '@mui/material';
+import { action } from 'storybook/actions';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    kind: "contained",
-    children: "Text",
+    kind: 'contained',
+    children: 'Text',
     disabled: false,
-    size: "small",
+    size: 'small',
     onClick: () => {
-      action("onClick")();
-      console.log("onClick");
+      action('onClick')();
+      console.log('onClick');
     },
   },
   argTypes: {
     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' },
       },
     },
     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.',
     },
     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' },
       },
     },
     variant: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "text", "ghost"],
-      description: "The variant is alias of kind.",
+      options: ['contained', 'outlined', 'text', 'ghost'],
+      description: 'The variant is alias of kind.',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
   },
   parameters: {
     controls: {
-      include: [
-        "onClick",
-        "children",
-        "color",
-        "size",
-        "disabled",
-        "kind",
-        "variant",
-      ],
+      include: ['onClick', 'children', 'color', 'size', 'disabled', 'kind', 'variant'],
     },
     pseudo: {
-      hover: [
-        "#hover1",
-        "#hover2",
-        "#hover3",
-        "#hover4",
-        "#hover5",
-        "#hover6",
-        "#hover7",
-      ],
+      hover: ['#hover1', '#hover2', '#hover3', '#hover4', '#hover5', '#hover6', '#hover7'],
     },
     docs: {
       description: {
@@ -110,22 +87,18 @@ export default {
   },
 } as Meta<typeof Button>;
 
-const ButtonTemplate: StoryFn<typeof Button> = ({
-  kind,
-  color,
-  variant,
-  children,
-  ...restProps
-}) => {
+const ButtonTemplate: StoryFn<typeof Button> = ({ color, children, ...restProps }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, kind, ...restArgs } = restProps;
   return (
     <>
-      <Button color={color} {...restProps} sx={{ mr: 2 }}>
+      <Button color={color} {...restArgs} sx={{ mr: 2 }}>
         {children}
       </Button>
-      <Button kind="outlined" color="primary" {...restProps} sx={{ mr: 2 }}>
+      <Button kind="outlined" color="primary" {...restArgs} sx={{ mr: 2 }}>
         {children}
       </Button>
-      <Button kind="ghost" color={color} {...restProps}>
+      <Button kind="ghost" color={color} {...restArgs}>
         {children}
       </Button>
     </>
@@ -137,31 +110,28 @@ export const Kind = {
 };
 
 const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { kind, variant, ...restProps } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
         <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>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Contained Error
             </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>
               <Button {...restProps} kind="contained">
                 {args.children}
@@ -179,23 +149,14 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (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>
               <Button {...restProps} id="hover1" kind="contained">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                id="hover2"
-                kind="contained"
-                color="secondary"
-              >
+              <Button {...restProps} id="hover2" kind="contained" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
@@ -206,17 +167,9 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (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>
-              <Button
-                {...restProps}
-                kind="contained"
-                className="Mui-focusVisible"
-              >
+              <Button {...restProps} kind="contained" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
@@ -231,20 +184,13 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="contained"
-                color="error"
-                className="Mui-focusVisible"
-              >
+              <Button {...restProps} kind="contained" color="error" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>
               Disabled
             </TableCell>
             <TableCell>
@@ -253,12 +199,7 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="contained"
-                color="secondary"
-                disabled
-              >
+              <Button {...restProps} kind="contained" color="secondary" disabled>
                 {args.children}
               </Button>
             </TableCell>
@@ -279,47 +220,44 @@ export const KindContained = {
 
   argTypes: {
     color: {
-      control: "false",
-      options: ["primary", "secondary", "error"],
-      defaultValue: "primary",
+      control: 'false',
+      options: ['primary', 'secondary', 'error'],
+      defaultValue: 'primary',
       description: `The color of the component.
       \n It supports both default and custom theme colors,
       \n which can be added as shown in the palette customization guide.`,
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
   },
 
-  name: "Kind: Contained",
+  name: 'Kind: Contained',
 };
 
 const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { kind, variant, ...restProps } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
         <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>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Ghost Error
             </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>
               <Button {...restProps} kind="ghost">
                 {args.children}
@@ -337,11 +275,7 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (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>
               <Button {...restProps} id="hover4" kind="ghost">
                 {args.children}
@@ -359,41 +293,25 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (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>
               <Button {...restProps} kind="ghost" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="ghost"
-                color="secondary"
-                className="Mui-focusVisible"
-              >
+              <Button {...restProps} kind="ghost" color="secondary" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="ghost"
-                color="error"
-                className="Mui-focusVisible"
-              >
+              <Button {...restProps} kind="ghost" color="error" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>
               Disabled
             </TableCell>
             <TableCell>
@@ -425,121 +343,90 @@ export const KindGhost = {
 
   argTypes: {
     color: {
-      control: "false",
-      options: ["primary", "secondary", "error"],
+      control: 'false',
+      options: ['primary', 'secondary', 'error'],
       description: `The color of the component.
       \n It supports both default and custom theme colors,
       \n which can be added as shown in the palette customization guide.`,
-      defaultValue: "primary",
+      defaultValue: 'primary',
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
   },
 
-  name: "Kind: Ghost",
+  name: 'Kind: Ghost',
 };
 
-const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
-  kind,
-  variant,
-  color,
-  ...restProps
-}) => {
+const OutlinedButtonTemplate: StoryFn<typeof Button> = (args) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, kind, color, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 600 }}>
         <TableHead>
           <TableRow>
-            <TableCell></TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell />
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Outlined Primary
             </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
               Outlined 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>
               <Button {...restProps} kind="outlined">
-                {restProps.children}
+                {args.children}
               </Button>
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined" color="secondary">
-                {restProps.children}
+                {args.children}
               </Button>
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Hover
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Hover</TableCell>
             <TableCell>
               <Button {...restProps} id="hover7" kind="outlined">
-                {restProps.children}
+                {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                id="hover7"
-                kind="outlined"
-                color="secondary"
-              >
-                {restProps.children}
+              <Button {...restProps} id="hover7" kind="outlined" color="secondary">
+                {args.children}
               </Button>
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
-              Focus
-            </TableCell>
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>Focus</TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="outlined"
-                className="Mui-focusVisible"
-              >
-                {restProps.children}
+              <Button {...restProps} kind="outlined" className="Mui-focusVisible">
+                {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button
-                {...restProps}
-                kind="outlined"
-                color="secondary"
-                className="Mui-focusVisible"
-              >
-                {restProps.children}
+              <Button {...restProps} kind="outlined" color="secondary" className="Mui-focusVisible">
+                {args.children}
               </Button>
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell
-              sx={{ typography: "body2_14_regular", color: "inherit" }}
-            >
+            <TableCell sx={{ typography: 'body2_14_regular', color: 'inherit' }}>
               Disabled
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined" disabled>
-                {restProps.children}
+                {args.children}
               </Button>
             </TableCell>
             <TableCell>
               <Button {...restProps} kind="outlined" color="secondary" disabled>
-                {restProps.children}
+                {args.children}
               </Button>
             </TableCell>
           </TableRow>
@@ -554,18 +441,18 @@ export const KindOutlined = {
 
   argTypes: {
     color: {
-      control: "false",
-      options: ["primary"],
-      defaultValue: "primary",
+      control: 'false',
+      options: ['primary'],
+      defaultValue: 'primary',
       description: `The color of the component.
       \n It supports both default and custom theme colors,
       \n which can be added as shown in the palette customization guide.`,
       table: {
-        type: { summary: "primary" },
-        defaultValue: { summary: "primary" },
+        type: { summary: 'primary' },
+        defaultValue: { summary: 'primary' },
       },
     },
   },
 
-  name: "Kind: Outlined",
+  name: 'Kind: Outlined',
 };