@lunit/design-system 1.0.0-b.4 → 2.0.0

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

@@ -0,0 +1,132 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { action } from "@storybook/addon-actions";
+
+import Button from "@/components/Button";
+
+import type { StoryFn, Meta } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    children: "Text",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
+  argTypes: {
+    children: {
+      type: "string",
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["onClick", "children", "size", "disabled", "kind", "variant"],
+    },
+    pseudo: {
+      hover: [
+        "#hover1",
+        "#hover2",
+        "#hover3",
+        "#hover4",
+        "#hover5",
+        "#hover6",
+        "#hover7",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a kind Button docs. For more details, please
+				see [Material-UI Button](https://mui.com/material-ui/react-button/).`,
+      },
+    },
+  },
+} as Meta<typeof Button>;
+
+const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { children, kind, variant, ...restArgs } = args;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <Box>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="contained"
+          color="primary"
+        >
+          {children}
+        </Button>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="contained"
+          color="secondary"
+        >
+          {children}
+        </Button>
+        <Button {...restArgs} variant="contained" color="error">
+          {children}
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="primary">
+          {children}
+        </Button>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          color="secondary"
+        >
+          {children}
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" color="primary">
+          {children}
+        </Button>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" color="secondary">
+          {children}
+        </Button>
+        <Button {...restArgs} variant="text" color="error">
+          {children}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export const Color = {
+  render: ColorButtonTemplate,
+};

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

@@ -5,12 +5,12 @@ import { action } from "@storybook/addon-actions";
 import Button from "@/components/Button";
 
 import type { StoryFn, Meta } from "@storybook/react";
+import { Box } from "@mui/material";
 
 export default {
   title: "Components/Button",
   component: Button,
   args: {
-    kind: "contained",
     color: "primary",
     disabled: false,
     size: "small",
@@ -26,16 +26,6 @@ export default {
         type: { summary: "React.ReactNode" },
       },
     },
-    kind: {
-      control: {
-        type: "radio",
-      },
-      options: ["contained", "outlined", "ghost"],
-      description: "Button has three Kinds Contained, Outlined, Ghost",
-      table: {
-        defaultValue: { summary: "contained" },
-      },
-    },
     color: {
       control: {
         type: "radio",
@@ -79,12 +69,12 @@ export default {
   parameters: {
     controls: {
       include: [
-        "children",
         "icon",
         "onClick",
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
       ],
     },
@@ -97,15 +87,48 @@ export default {
   },
 } as Meta<typeof Button>;
 
-const IconButtonTemplate: StoryFn<typeof Button> = (args) => (
-  <Button icon={<Bell />} {...args}>
-    {args.children}
-  </Button>
-);
+const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { variant, kind, ...restArgs } = args;
 
-export const IconOnlyButton = {
-  render: IconButtonTemplate,
+  return (
+    <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}
+        kind="outlined"
+      >
+        Outlined
+      </Button>
+      <Button icon={<Bell />} {...restArgs} kind="ghost">
+        Ghost
+      </Button>
+    </Box>
+  );
+};
 
+const IconOnlyButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { variant, kind, ...restArgs } = args;
+
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <Button icon={<Bell />} {...restArgs} kind="contained" />
+      <Button
+        icon={<Bell />}
+        {...restArgs}
+        color={args.color === "error" ? "primary" : args.color}
+        kind="outlined"
+      />
+      <Button icon={<Bell />} {...restArgs} kind="ghost" />
+    </Box>
+  );
+};
+
+export const IconOnlyButton = {
+  render: IconOnlyButtonTemplate,
   argTypes: {
     children: {
       control: false,
@@ -115,17 +138,11 @@ export const IconOnlyButton = {
       },
     },
   },
-
   name: "Icon only",
 };
 
 export const IconWithTextButton = {
   render: IconButtonTemplate,
-
-  args: {
-    children: "Text",
-  },
-
   argTypes: {
     children: {
       type: "string",

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

@@ -20,7 +20,10 @@ export default {
     children: "Text",
     disabled: false,
     size: "small",
-    onClick: action("onClick"),
+    onClick: () => {
+      action("onClick")();
+      console.log("onClick");
+    },
   },
   argTypes: {
     children: {
@@ -64,10 +67,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,62 +113,21 @@ export default {
 const ButtonTemplate: StoryFn<typeof Button> = ({
   kind,
   color,
+  variant,
   children,
   ...restProps
 }) => {
   return (
     <>
-      <Table sx={{ width: 600 }}>
-        <TableHead>
-          <TableRow>
-            <TableCell
-              colSpan={3}
-              sx={{
-                typography: "body1_16_semibold",
-                color: "inherit",
-              }}
-            >
-              Kind
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell
-              sx={{
-                width: "33.33333%",
-                typography: "body2_14_medium",
-                color: "inherit",
-              }}
-            >
-              Contained(default)
-            </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Outlined
-            </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Ghost
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <Button color={color} {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-            <TableCell>
-              <Button kind="outlined" color="primary" {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-            <TableCell>
-              <Button kind="ghost" color={color} {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
+      <Button color={color} {...restProps} sx={{ mr: 2 }}>
+        {children}
+      </Button>
+      <Button kind="outlined" color="primary" {...restProps} sx={{ mr: 2 }}>
+        {children}
+      </Button>
+      <Button kind="ghost" color={color} {...restProps}>
+        {children}
+      </Button>
     </>
   );
 };
@@ -157,6 +137,7 @@ export const Kind = {
 };
 
 const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { kind, variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -182,17 +163,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 +185,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 +212,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 +232,7 @@ const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="contained"
                 color="error"
                 className="Mui-focusVisible"
@@ -258,17 +248,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 +295,7 @@ export const KindContained = {
 };
 
 const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { kind, variant, ...restProps } = args;
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -325,17 +321,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 +343,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 +365,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 +381,7 @@ const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
             </TableCell>
             <TableCell>
               <Button
-                {...args}
+                {...restProps}
                 kind="ghost"
                 color="error"
                 className="Mui-focusVisible"
@@ -401,17 +397,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 +441,8 @@ export const KindGhost = {
 };
 
 const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
+  kind,
+  variant,
   color,
   ...restProps
 }) => {