@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,20 +1,20 @@
-import React from "react";
-import Bell from "@lunit/design-system-icons/Bell";
-import { action } from "@storybook/addon-actions";
+import React from 'react';
+import Bell from '@lunit/design-system-icons/Bell';
+import { action } from 'storybook/actions';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryFn, Meta } from "@storybook/react";
-import { Box } from "@mui/material";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import { Box } from '@mui/material';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    color: "primary",
+    color: 'primary',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     icon: {
@@ -22,61 +22,52 @@ 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' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["primary", "secondary", "error"],
+      options: ['primary', 'secondary', 'error'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     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.',
     },
   },
   parameters: {
     controls: {
-      include: [
-        "icon",
-        "onClick",
-        "disabled",
-        "size",
-        "kind",
-        "variant",
-        "color",
-      ],
+      include: ['icon', 'onClick', 'disabled', 'size', 'kind', 'variant', 'color'],
     },
     docs: {
       description: {
@@ -88,17 +79,18 @@ export default {
 } as Meta<typeof Button>;
 
 const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { variant, kind, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button icon={<Bell />} {...restArgs} kind="contained">
         Contained
       </Button>
       <Button
         icon={<Bell />}
         {...restArgs}
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       >
         Outlined
@@ -111,15 +103,16 @@ const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
 };
 
 const IconOnlyButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { variant, kind, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button icon={<Bell />} {...restArgs} kind="contained" />
       <Button
         icon={<Bell />}
         {...restArgs}
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       />
       <Button icon={<Bell />} {...restArgs} kind="ghost" />
@@ -132,25 +125,25 @@ export const IconOnlyButton = {
   argTypes: {
     children: {
       control: false,
-      type: "string",
+      type: 'string',
       table: {
-        defaultValue: { summary: "undefined" },
+        defaultValue: { summary: 'undefined' },
       },
     },
   },
-  name: "Icon only",
+  name: 'Icon only',
 };
 
 export const IconWithTextButton = {
   render: IconButtonTemplate,
   argTypes: {
     children: {
-      type: "string",
+      type: 'string',
       table: {
-        defaultValue: { summary: "undefined" },
+        defaultValue: { summary: 'undefined' },
       },
     },
   },
 
-  name: "Icon",
+  name: 'Icon',
 };