@lunit/design-system 1.0.0-b.3 → 1.0.0

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

@@ -64,10 +64,28 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
   },
   parameters: {
     controls: {
-      include: ["onClick", "children", "color", "size", "disabled", "kind"],
+      include: [
+        "onClick",
+        "children",
+        "color",
+        "size",
+        "disabled",
+        "kind",
+        "variant",
+      ],
     },
     pseudo: {
       hover: [
@@ -92,6 +110,7 @@ export default {
 const ButtonTemplate: StoryFn<typeof Button> = ({
   kind,
   color,
+  variant,
   children,
   ...restProps
 }) => {
@@ -157,6 +176,7 @@ export const Kind = {
 };
 
 const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { kind, variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -182,17 +202,17 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               Enable
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained">
+              <Button {...restProps} kind="contained">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" color="secondary">
+              <Button {...restProps} kind="contained" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" color="error">
+              <Button {...restProps} kind="contained" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -204,17 +224,22 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               Hover
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover1" kind="contained">
+              <Button {...restProps} id="hover1" kind="contained">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover2" kind="contained" color="secondary">
+              <Button
+                {...restProps}
+                id="hover2"
+                kind="contained"
+                color="secondary"
+              >
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover3" kind="contained" color="error">
+              <Button {...restProps} id="hover3" kind="contained" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -226,13 +251,17 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               Focus
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" className="Mui-focusVisible">
+              <Button
+                {...restProps}
+                kind="contained"
+                className="Mui-focusVisible"
+              >
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="contained"
                 color="secondary"
                 className="Mui-focusVisible"
@@ -242,7 +271,7 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="contained"
                 color="error"
                 className="Mui-focusVisible"
@@ -258,17 +287,22 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
               Disabled
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" disabled>
+              <Button {...restProps} kind="contained" disabled>
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" color="secondary" disabled>
+              <Button
+                {...restProps}
+                kind="contained"
+                color="secondary"
+                disabled
+              >
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="contained" color="error" disabled>
+              <Button {...restProps} kind="contained" color="error" disabled>
                 {args.children}
               </Button>
             </TableCell>
@@ -300,6 +334,7 @@ export const KindContained = {
 };
 
 const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { kind, variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -325,17 +360,17 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
               Enable
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost">
+              <Button {...restProps} kind="ghost">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" color="secondary">
+              <Button {...restProps} kind="ghost" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" color="error">
+              <Button {...restProps} kind="ghost" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -347,17 +382,17 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
               Hover
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover4" kind="ghost">
+              <Button {...restProps} id="hover4" kind="ghost">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover5" kind="ghost" color="secondary">
+              <Button {...restProps} id="hover5" kind="ghost" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover6" kind="ghost" color="error">
+              <Button {...restProps} id="hover6" kind="ghost" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -369,13 +404,13 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
               Focus
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" className="Mui-focusVisible">
+              <Button {...restProps} kind="ghost" className="Mui-focusVisible">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="ghost"
                 color="secondary"
                 className="Mui-focusVisible"
@@ -385,7 +420,7 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="ghost"
                 color="error"
                 className="Mui-focusVisible"
@@ -401,17 +436,17 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
               Disabled
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" disabled>
+              <Button {...restProps} kind="ghost" disabled>
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" color="secondary" disabled>
+              <Button {...restProps} kind="ghost" color="secondary" disabled>
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} kind="ghost" color="error" disabled>
+              <Button {...restProps} kind="ghost" color="error" disabled>
                 {args.children}
               </Button>
             </TableCell>
@@ -445,6 +480,8 @@ export const KindGhost = {
 };
 
 const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
+  kind,
+  variant,
   color,
   ...restProps
 }) => {

package/src/stories/components/Chip/Chip.stories.tsx

@@ -18,6 +18,13 @@ export default {
     kind: {
       description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
     },
+    variant: {
+      description: `The variant is alias of kind. It is Filled or Outlined.`,
+      control: {
+        type: "select",
+      },
+      options: [undefined, "filled", "outlined"],
+    },
     onClick: {
       description: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
       control: {
@@ -80,6 +87,7 @@ export default {
   },
   args: {
     kind: "contained",
+    variant: "filled",
     label: "label@lunit.io",
   },
   parameters: {
@@ -116,9 +124,10 @@ export const Outlined = {
   args: {
     color: "primary",
     kind: "outlined",
+    variant: "outlined",
   },
 
-  name: "Kind: Outlined",
+  name: "Kind(Variant): Outlined",
 };
 
 export const Contained = {
@@ -138,9 +147,10 @@ export const Contained = {
   args: {
     color: "primary",
     kind: "contained",
+    variant: "filled",
   },
 
-  name: "Kind: Contained / Read Only",
+  name: "Kind(Variant): Contained / Read Only",
 };
 
 export const ContainedWithClick = {
@@ -161,7 +171,7 @@ export const ContainedWithClick = {
     },
   },
 
-  name: "Kind: Contained / Enable",
+  name: "Kind(Variant): Contained / Enable",
 };
 
 export const ContainedWithDelete = {
@@ -182,7 +192,7 @@ export const ContainedWithDelete = {
     },
   },
 
-  name: "Kind: Contained / Deletable",
+  name: "Kind(Variant): Contained / Deletable",
 };
 
 export const ContainedWithThumbnail = {
@@ -204,5 +214,5 @@ export const ContainedWithThumbnail = {
     },
   },
 
-  name: "Kind: Contained with Thumbnail",
+  name: "Kind(Variant): Contained with Thumbnail",
 };

package/src/stories/components/SelectControl/Toggle.stories.tsx

@@ -45,7 +45,7 @@ export default {
     },
   },
   args: {
-    size: "medium",
+    size: "small",
     indeterminate: false,
     disabled: false,
   },
@@ -103,7 +103,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <Toggle {...args} checked />
         </TableCell>
@@ -115,7 +115,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <Toggle {...args} className="focus-test" checked />
         </TableCell>
@@ -166,15 +166,15 @@ const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
-          <Toggle {...args} checked />
+          <Toggle {...args} size="small" checked />
         </TableCell>
         <TableCell>
-          <Toggle {...args} indeterminate />
+          <Toggle {...args} size="small" indeterminate />
         </TableCell>
         <TableCell>
-          <Toggle {...args} />
+          <Toggle {...args} size="small" />
         </TableCell>
       </TableRow>
       <TableRow>
@@ -205,7 +205,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <FormLabel label="Label 1" control={<Toggle {...args} checked />} />
         </TableCell>
@@ -223,7 +223,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <FormLabel
             className="focus-test"
@@ -319,7 +319,7 @@ const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell>MEDIUM</TableCell>
+          <TableCell>SMALL</TableCell>
           <TableCell>LARGE</TableCell>
         </TableRow>
       </TableHead>