@lunit/design-system 2.2.0 → 2.2.3

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

@@ -1,32 +1,25 @@
-import React, { useEffect, 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 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-webpack5";
-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: {
@@ -35,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: {
@@ -143,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>
   );
@@ -162,7 +146,7 @@ const BasicToggleButtonTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 
 export const BasicToggleButton = {
   render: BasicToggleButtonTemplate,
-  name: "Basic ToggleButton",
+  name: 'Basic ToggleButton',
   parameters: {
     chromatic: { disableSnapshot: true },
   },
@@ -187,23 +171,17 @@ 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>
@@ -211,10 +189,7 @@ const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
           {sizeList.map((size) => {
             if (size) {
               return (
-                <TableCell
-                  key={size}
-                  sx={{ "& button": { marginRight: "10px" } }}
-                >
+                <TableCell key={size} sx={{ '& button': { marginRight: '10px' } }}>
                   <ToggleButton
                     {...args}
                     icon={<Bell />}
@@ -277,26 +252,26 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
   return (
     <Box
       sx={{
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
         gap: 4,
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
     >
       <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
       >
         <ToggleButton
           {...args}
           value="contained-small"
           size="small"
-          selected={selectedButtons["contained-small"]}
-          onChange={() => handleToggle("contained-small")}
+          selected={selectedButtons['contained-small']}
+          onChange={() => handleToggle('contained-small')}
         >
           Small
         </ToggleButton>
@@ -304,8 +279,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           {...args}
           value="contained-medium"
           size="medium"
-          selected={selectedButtons["contained-medium"]}
-          onChange={() => handleToggle("contained-medium")}
+          selected={selectedButtons['contained-medium']}
+          onChange={() => handleToggle('contained-medium')}
         >
           Medium
         </ToggleButton>
@@ -313,16 +288,16 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           {...args}
           value="contained-large"
           size="large"
-          selected={selectedButtons["contained-large"]}
-          onChange={() => handleToggle("contained-large")}
+          selected={selectedButtons['contained-large']}
+          onChange={() => handleToggle('contained-large')}
         >
           Large
         </ToggleButton>
       </Box>
       <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
       >
         <ToggleButton
@@ -331,8 +306,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           kind="outlined"
           color="primary"
           size="small"
-          selected={selectedButtons["outlined-small"]}
-          onChange={() => handleToggle("outlined-small")}
+          selected={selectedButtons['outlined-small']}
+          onChange={() => handleToggle('outlined-small')}
         >
           Small
         </ToggleButton>
@@ -342,8 +317,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           kind="outlined"
           color="primary"
           size="medium"
-          selected={selectedButtons["outlined-medium"]}
-          onChange={() => handleToggle("outlined-medium")}
+          selected={selectedButtons['outlined-medium']}
+          onChange={() => handleToggle('outlined-medium')}
         >
           Medium
         </ToggleButton>
@@ -353,16 +328,16 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           kind="outlined"
           color="primary"
           size="large"
-          selected={selectedButtons["outlined-large"]}
-          onChange={() => handleToggle("outlined-large")}
+          selected={selectedButtons['outlined-large']}
+          onChange={() => handleToggle('outlined-large')}
         >
           Large
         </ToggleButton>
       </Box>
       <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
       >
         <ToggleButton
@@ -370,8 +345,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="ghost-small"
           kind="ghost"
           size="small"
-          selected={selectedButtons["ghost-small"]}
-          onChange={() => handleToggle("ghost-small")}
+          selected={selectedButtons['ghost-small']}
+          onChange={() => handleToggle('ghost-small')}
         >
           Small
         </ToggleButton>
@@ -380,8 +355,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="ghost-medium"
           kind="ghost"
           size="medium"
-          selected={selectedButtons["ghost-medium"]}
-          onChange={() => handleToggle("ghost-medium")}
+          selected={selectedButtons['ghost-medium']}
+          onChange={() => handleToggle('ghost-medium')}
         >
           Medium
         </ToggleButton>
@@ -390,8 +365,8 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="ghost-large"
           kind="ghost"
           size="large"
-          selected={selectedButtons["ghost-large"]}
-          onChange={() => handleToggle("ghost-large")}
+          selected={selectedButtons['ghost-large']}
+          onChange={() => handleToggle('ghost-large')}
         >
           Large
         </ToggleButton>
@@ -425,10 +400,10 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
   };
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column" }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Box
         sx={{
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
@@ -438,8 +413,8 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="contained-primary"
           kind="contained"
           color="primary"
-          selected={selectedButtons["contained-primary"]}
-          onChange={() => handleToggle("contained-primary")}
+          selected={selectedButtons['contained-primary']}
+          onChange={() => handleToggle('contained-primary')}
         >
           Primary
         </ToggleButton>
@@ -449,8 +424,8 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           kind="contained"
           color="secondary"
           selectedColor="secondary"
-          selected={selectedButtons["contained-secondary"]}
-          onChange={() => handleToggle("contained-secondary")}
+          selected={selectedButtons['contained-secondary']}
+          onChange={() => handleToggle('contained-secondary')}
         >
           Secondary
         </ToggleButton>
@@ -458,7 +433,7 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
       <Box
         sx={{
           marginTop: 4,
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
@@ -468,8 +443,8 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="outlined-primary"
           kind="outlined"
           color="primary"
-          selected={selectedButtons["outlined-primary"]}
-          onChange={() => handleToggle("outlined-primary")}
+          selected={selectedButtons['outlined-primary']}
+          onChange={() => handleToggle('outlined-primary')}
         >
           Primary
         </ToggleButton>
@@ -477,7 +452,7 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
       <Box
         sx={{
           marginTop: 4,
-          "& button": {
+          '& button': {
             marginRight: 2,
           },
         }}
@@ -487,8 +462,8 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="ghost-primary"
           kind="ghost"
           color="primary"
-          selected={selectedButtons["ghost-primary"]}
-          onChange={() => handleToggle("ghost-primary")}
+          selected={selectedButtons['ghost-primary']}
+          onChange={() => handleToggle('ghost-primary')}
         >
           Primary
         </ToggleButton>
@@ -498,8 +473,8 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           kind="ghost"
           color="secondary"
           selectedColor="secondary"
-          selected={selectedButtons["ghost-secondary"]}
-          onChange={() => handleToggle("ghost-secondary")}
+          selected={selectedButtons['ghost-secondary']}
+          onChange={() => handleToggle('ghost-secondary')}
         >
           Secondary
         </ToggleButton>
@@ -528,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}
@@ -586,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,
         },
       }}
@@ -621,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,
         },
       }}
@@ -649,7 +618,7 @@ export const SelectedDocs = {
   },
   parameters: {
     chromatic: { disableSnapshot: true },
-    include: ["color", "size", "disabled", "selected", "kind"],
+    include: ['color', 'size', 'disabled', 'selected', 'kind'],
   },
 };
 
@@ -657,7 +626,7 @@ const DisabledTemplate: StoryFn<typeof ToggleButton> = (args) => {
   return (
     <Box
       sx={{
-        "& button": {
+        '& button': {
           marginRight: 2,
         },
       }}
@@ -665,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>

package/src/stories/components/ToggleButton/ToggleButtonDocs.mdx

@@ -1,11 +1,11 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/addon-docs/blocks";
-import Box from "@mui/material/Box";
-import Bell from "@lunit/design-system-icons/Bell";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import Box from '@mui/material/Box';
+import Bell from '@lunit/design-system-icons/Bell';
 
-import ToggleButton from "@/components/ToggleButton";
-import * as ToggleButtonStories from "./Basic.stories";
-import * as ToggleButtonKindStories from "./ToggleButtonKind.stories";
-import * as ToggleButtonIconStories from "./WithIcon.stories";
+import ToggleButton from '@/components/ToggleButton';
+import * as ToggleButtonStories from './Basic.stories';
+import * as ToggleButtonKindStories from './ToggleButtonKind.stories';
+import * as ToggleButtonIconStories from './WithIcon.stories';
 
 <Meta name="Toggle Button Docs" of={ToggleButtonStories} />
 
@@ -18,9 +18,9 @@ A Toggle Button can be used to group related options.
 ### Basic ToggleButton
 
 ```tsx
-import { ToggleButton } from "@lunit/design-system";
+import { ToggleButton } from '@lunit/design-system';
 // or
-import ToggleButton from "@lunit/design-system/ToggleButton";
+import ToggleButton from '@lunit/design-system/ToggleButton';
 
 <ToggleButton value="value">ToggleButton</ToggleButton>;
 ```
@@ -47,11 +47,7 @@ Value prop is `requried`.
 The ToggleButton has 3 kinds of variants: `contained`, `outlined` and `outlined`. <br />
 Default kind is `contained`.
 
-<Canvas
-  of={ToggleButtonKindStories.KindDocs}
-  meta={ToggleButtonKindStories}
-  sourceState="none"
-/>
+<Canvas of={ToggleButtonKindStories.KindDocs} meta={ToggleButtonKindStories} sourceState="none" />
 
 ```tsx
 <ToggleButton value="first" kind="contained">Text</ToggleButton>