@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,27 +1,20 @@
-import React, { useState } from "react";
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-  Box,
-} from "@mui/material";
-import { action } from "@storybook/addon-actions";
-import Bell from "@lunit/design-system-icons/Bell";
+import React, { useState } from 'react';
+import { Table, TableHead, TableRow, TableBody, TableCell, Box } from '@mui/material';
+import { action } from 'storybook/actions';
+import Bell from '@lunit/design-system-icons/Bell';
 
-import ToggleButton from "@/components/ToggleButton";
+import ToggleButton from '@/components/ToggleButton';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/ToggleButton",
+  title: 'Components/ToggleButton',
   component: ToggleButton,
   args: {
-    kind: "contained",
-    color: "primary",
-    selectedColor: "primary",
-    size: "small",
+    kind: 'contained',
+    color: 'primary',
+    selectedColor: 'primary',
+    size: 'small',
     disabled: false,
   },
   argTypes: {
@@ -30,87 +23,86 @@ 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' } },
     },
     selected: {
       control: false,
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     selectedColor: {
       control: false,
-      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' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["primary", "secondary"],
-      description: "Button has three Kinds Contained, Ghost",
+      options: ['primary', 'secondary'],
+      description: 'Button has three Kinds Contained, Ghost',
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     kind: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "ghost"],
+      options: ['contained', 'outlined', 'ghost'],
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     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: "select",
+        type: 'select',
       },
-      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.',
     },
     onChange: {
-      type: "function",
+      type: 'function',
       control: false,
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onChange"),
+        function: action('onChange'),
         undefined: undefined,
       },
     },
@@ -118,17 +110,17 @@ export default {
   parameters: {
     controls: {
       include: [
-        "icon",
-        "value",
-        "kind",
-        "selectedColor",
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "selected",
-        "color",
-        "onChange",
+        'icon',
+        'value',
+        'kind',
+        'selectedColor',
+        'onClick',
+        'children',
+        'disabled',
+        'size',
+        'selected',
+        'color',
+        'onChange',
       ],
     },
     docs: {
@@ -157,28 +149,22 @@ const Template: 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}
               icon={<Bell />}
               value="primary"
-              onChange={() => handleChange("primary")}
+              onChange={() => handleChange('primary')}
               selected={values.primary}
             >
               {arg.children}
@@ -190,7 +176,7 @@ const Template: StoryFn<typeof ToggleButton> = (arg) => {
               icon={<Bell />}
               selectedColor="secondary"
               value="secondary"
-              onChange={() => handleChange("secondary")}
+              onChange={() => handleChange('secondary')}
               selected={values.secondary}
             >
               {arg.children}
@@ -204,16 +190,16 @@ const Template: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const IconStory = {
   render: Template,
-  name: "Icon",
+  name: 'Icon',
 
   args: {
-    children: "Text",
+    children: 'Text',
   },
 
   argTypes: {
     children: {
-      type: "string",
-      defaultValue: "text",
+      type: 'string',
+      defaultValue: 'text',
     },
   },
 };
@@ -233,12 +219,12 @@ const IconDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   };
 
   return (
-    <Box sx={{ "& button": { marginRight: 2 } }}>
+    <Box sx={{ '& button': { marginRight: 2 } }}>
       <ToggleButton
         {...arg}
         icon={<Bell />}
         value="contained"
-        onChange={() => handleChange("contained")}
+        onChange={() => handleChange('contained')}
         selected={values.contained}
       >
         Contained
@@ -249,7 +235,7 @@ const IconDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
         kind="outlined"
         color="primary"
         value="outlined"
-        onChange={() => handleChange("outlined")}
+        onChange={() => handleChange('outlined')}
         selected={values.outlined}
       >
         Outlined
@@ -259,7 +245,7 @@ const IconDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
         icon={<Bell />}
         kind="ghost"
         value="ghost"
-        onChange={() => handleChange("ghost")}
+        onChange={() => handleChange('ghost')}
         selected={values.ghost}
       >
         Ghost
@@ -270,20 +256,20 @@ const IconDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const IconDocs = {
   render: IconDocsTemplate,
-  name: "Icon Docs",
+  name: 'Icon Docs',
   args: {
-    children: "Text",
+    children: 'Text',
   },
   argTypes: {
     children: {
-      type: "string",
-      defaultValue: "text",
+      type: 'string',
+      defaultValue: 'text',
     },
   },
   parameters: {
     chromatic: { disableSnapshot: true },
     controls: {
-      include: ["color", "size", "disabled", "children"],
+      include: ['color', 'size', 'disabled', 'children'],
     },
   },
 };
@@ -305,28 +291,22 @@ const IconOnlyTemplate: 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}
               icon={<Bell />}
               value="primary"
-              onChange={() => handleChange("primary")}
+              onChange={() => handleChange('primary')}
               selected={values.primary}
             >
               {arg.children}
@@ -338,7 +318,7 @@ const IconOnlyTemplate: StoryFn<typeof ToggleButton> = (arg) => {
               icon={<Bell />}
               selectedColor="secondary"
               value="secondary"
-              onChange={() => handleChange("secondary")}
+              onChange={() => handleChange('secondary')}
               selected={values.secondary}
             >
               {arg.children}
@@ -352,18 +332,18 @@ const IconOnlyTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const WithIconOnlyStory = {
   render: IconOnlyTemplate,
-  name: "Icon only",
+  name: 'Icon only',
 
   argTypes: {
     children: {
-      type: "string",
+      type: 'string',
       controls: false,
     },
   },
 };
 
 const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
-  const { children, ...restArg } = arg;
+  const { ...restArg } = arg;
 
   const [values, setValues] = useState({
     contained: false,
@@ -379,12 +359,12 @@ const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   };
 
   return (
-    <Box sx={{ "& button": { marginRight: 2 } }}>
+    <Box sx={{ '& button': { marginRight: 2 } }}>
       <ToggleButton
         {...restArg}
         icon={<Bell />}
         value="contained"
-        onChange={() => handleChange("contained")}
+        onChange={() => handleChange('contained')}
         selected={values.contained}
       />
       <ToggleButton
@@ -393,7 +373,7 @@ const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
         kind="outlined"
         color="primary"
         value="outlined"
-        onChange={() => handleChange("outlined")}
+        onChange={() => handleChange('outlined')}
         selected={values.outlined}
       />
 
@@ -402,7 +382,7 @@ const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
         icon={<Bell />}
         kind="ghost"
         value="ghost"
-        onChange={() => handleChange("ghost")}
+        onChange={() => handleChange('ghost')}
         selected={values.ghost}
       />
     </Box>
@@ -411,20 +391,20 @@ const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const IconOnlyDocs = {
   render: IconOnlyDocsTemplate,
-  name: "Icon Only Docs",
+  name: 'Icon Only Docs',
   args: {
-    children: "Text",
+    children: 'Text',
   },
   argTypes: {
     children: {
-      type: "string",
-      defaultValue: "text",
+      type: 'string',
+      defaultValue: 'text',
     },
   },
   parameters: {
     chromatic: { disableSnapshot: true },
     controls: {
-      include: ["color", "size", "disabled", "children"],
+      include: ['color', 'size', 'disabled', 'children'],
     },
   },
 };

package/src/stories/components/Tooltip/Tooltip.stories.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import Tooltip from "@/components/Tooltip";
+import Tooltip from '@/components/Tooltip';
 
 export default {
-  title: "Components/Tooltip",
+  title: 'Components/Tooltip',
   component: Tooltip,
 } as Meta<typeof Tooltip>;