@lunit/design-system 1.0.0-a.1 → 1.0.0-a.2

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

@@ -0,0 +1,514 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import { action } from "@storybook/addon-actions";
+
+import Button from "@/components/Button";
+
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    children: {
+      type: "string",
+      defaultValue: "Text",
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      defaultValue: "small",
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      defaultValue: "function",
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+    kind: {
+      control: false,
+      options: ["contained", "outlined", "ghost"],
+      description: "Button has three Kinds Contained, Outlined, Ghost",
+      defaultValue: "contained",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["onClick", "children", "color", "size", "disabled", "kind"],
+    },
+    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 ComponentMeta<typeof Button>;
+
+const ButtonTemplate: ComponentStory<typeof Button> = ({
+  kind,
+  color,
+  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>
+    </>
+  );
+};
+
+export const Kind = ButtonTemplate.bind({});
+
+const ContainedButtonTemplate: ComponentStory<typeof Button> = (args) => {
+  return (
+    <>
+      <Table sx={{ width: 650 }}>
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Contained Primary
+            </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Contained Secondary
+            </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Contained Error
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Enable
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" color="secondary">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" color="error">
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Hover
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="contained">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="contained" color="secondary">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="contained" color="error">
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Focus
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" className="Mui-focusVisible">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...args}
+                kind="contained"
+                color="secondary"
+                className="Mui-focusVisible"
+              >
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...args}
+                kind="contained"
+                color="error"
+                className="Mui-focusVisible"
+              >
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Disabled
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" color="secondary" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="contained" color="error" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export const KindContained = ContainedButtonTemplate.bind({});
+KindContained.argTypes = {
+  color: {
+    control: "false",
+    options: ["primary", "secondary", "error"],
+    defaultValue: "primary",
+    description: `The color of the component.
+    \n It supports both default and custom theme colors,
+    \n which can be added as shown in the palette customization guide.`,
+    table: {
+      defaultValue: { summary: "primary" },
+    },
+  },
+};
+KindContained.storyName = "Kind: Contained";
+
+const GhostButtonTemplate: ComponentStory<typeof Button> = (args) => {
+  return (
+    <>
+      <Table sx={{ width: 650 }}>
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Ghost Primary
+            </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Ghost Secondary
+            </TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Ghost Error
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Enable
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" color="secondary">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" color="error">
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Hover
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="ghost">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="ghost" color="secondary">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} id="hover" kind="ghost" color="error">
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Focus
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" className="Mui-focusVisible">
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...args}
+                kind="ghost"
+                color="secondary"
+                className="Mui-focusVisible"
+              >
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button
+                {...args}
+                kind="ghost"
+                color="error"
+                className="Mui-focusVisible"
+              >
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Disabled
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" color="secondary" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+            <TableCell>
+              <Button {...args} kind="ghost" color="error" disabled>
+                {args.children}
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <br />
+      <br />
+    </>
+  );
+};
+
+export const KindGhost = GhostButtonTemplate.bind({});
+KindGhost.argTypes = {
+  color: {
+    control: "false",
+    options: ["primary", "secondary", "error"],
+    description: `The color of the component.
+    \n It supports both default and custom theme colors,
+    \n which can be added as shown in the palette customization guide.`,
+    defaultValue: "primary",
+    table: {
+      defaultValue: { summary: "primary" },
+    },
+  },
+};
+KindGhost.storyName = "Kind: Ghost";
+
+const OutlinedButtonTemplate: ComponentStory<typeof Button> = ({
+  color,
+  ...restProps
+}) => {
+  return (
+    <>
+      <Table sx={{ width: 250 }}>
+        <TableHead>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+              Outlined Primary
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Enable
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined">
+                Text
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Hover
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} id="hover" kind="outlined">
+                Text
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Focus
+            </TableCell>
+            <TableCell>
+              <Button
+                {...restProps}
+                kind="outlined"
+                className="Mui-focusVisible"
+              >
+                Text
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell
+              sx={{ typography: "body2_14_regular", color: "inherit" }}
+            >
+              Disabled
+            </TableCell>
+            <TableCell>
+              <Button {...restProps} kind="outlined" disabled>
+                Text
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export const KindOutlined = OutlinedButtonTemplate.bind({});
+KindOutlined.argTypes = {
+  color: {
+    control: "false",
+    options: ["primary"],
+    defaultValue: "primary",
+    description: `The color of the component.
+    \n It supports both default and custom theme colors,
+    \n which can be added as shown in the palette customization guide.`,
+    table: {
+      type: { summary: "primary" },
+      defaultValue: { summary: "primary" },
+    },
+  },
+};
+KindOutlined.storyName = "Kind: Outlined";

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

@@ -0,0 +1,196 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import Chip from "@/components/Chip";
+import {
+  Logo16,
+  Avatar16,
+  Success16,
+  Error16,
+  Information16,
+  Warning16,
+} from "@lunit/design-system-icons";
+
+import type {
+  OutlinedChipProps,
+  ReadOnlyContainedChipProps,
+  EnableContainedChipProps,
+  DeletableContainedChipProps,
+  ChipProps,
+  ChipThumbnail,
+} from "@/components/Chip/Chip.types";
+
+export default {
+  title: "Components/Chips",
+  component: Chip,
+  argTypes: {
+    kind: {
+      description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
+    },
+    onClick: {
+      description: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+      control: {
+        type: "select",
+        defaultValue: undefined,
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+    },
+    onDelete: {
+      description:
+        "Contained chip can have onDelete event. When Chip is deletable, onClick is disabled.",
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onDelete"),
+        undefined: undefined,
+      },
+      defaultValue: null,
+    },
+
+    thumbnail: {
+      control: {
+        type: "select",
+        defaultValue: "undefined",
+      },
+      options: [
+        undefined,
+        "Initial",
+        "Logo16",
+        "Avatar16",
+        "Avatar16Filled",
+        "Success16",
+        "Success16Filled",
+        "Error16",
+        "Error16Filled",
+        "Information16",
+        "Information16Filled",
+        "Warning16",
+        "Warning16Filled",
+      ],
+      mapping: {
+        undefined: undefined,
+        Initial: "W as initial",
+        Logo16: <Logo16 />,
+        Avatar16: <Avatar16 />,
+        Avatar16Filled: <Avatar16 variant="filled" />,
+        Success16: <Success16 />,
+        Success16Filled: <Success16 variant="filled" />,
+        Error16: <Error16 />,
+        Error16Filled: <Error16 variant="filled" />,
+        Information16: <Information16 />,
+        Information16Filled: <Information16 variant="filled" />,
+        Warning16: <Warning16 />,
+        Warning16Filled: <Warning16 variant="filled" />,
+      },
+    },
+  },
+  args: {
+    kind: "contained",
+    label: "label@lunit.io",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `Chips are compact elements that represent an input, attribute, or action.`,
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+} as ComponentMeta<typeof Chip>;
+
+const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />;
+
+export const Outlined = Template.bind({});
+
+Outlined.parameters = {
+  docs: {
+    description: {
+      story: `Outlined chip only contains label and shows the state of disabled.`,
+    },
+  },
+  controls: {
+    exclude: [
+      "thumbnail",
+      "onClick",
+      "onDelete",
+      "disabled",
+      "clickable",
+      "skipFocusWhenDisabled",
+    ],
+  },
+};
+Outlined.args = {
+  color: "primary",
+  kind: "outlined",
+};
+
+export const Contained = Template.bind({});
+Contained.parameters = {
+  controls: {
+    exclude: [
+      "thumbnail",
+      "onClick",
+      "onDelete",
+      "disabled",
+      "clickable",
+      "skipFocusWhenDisabled",
+    ],
+  },
+};
+Contained.args = {
+  color: "primary",
+  kind: "contained",
+};
+
+export const ContainedWithClick = Template.bind({});
+ContainedWithClick.args = {
+  onClick: action("onClick"),
+  onDelete: undefined,
+};
+ContainedWithClick.parameters = {
+  docs: {
+    description: {
+      story: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+    },
+  },
+  controls: {
+    exclude: ["onDelete", "deletable"],
+  },
+};
+
+export const ContainedWithDelete = Template.bind({});
+ContainedWithDelete.args = {
+  ...Contained.args,
+  onClick: undefined,
+  onDelete: action("onDelete"),
+};
+ContainedWithDelete.parameters = {
+  docs: {
+    description: {
+      story: `Contained chip can have delete button. When Chip is deletable, onClick is disabled.`,
+    },
+  },
+  controls: {
+    exclude: ["onClick", "clickable"],
+  },
+};
+
+export const ContainedWithThumbnail = Template.bind({});
+ContainedWithThumbnail.args = {
+  thumbnail: "Initial",
+};
+ContainedWithThumbnail.parameters = {
+  docs: {
+    description: {
+      story: `Contained chip can have thumbnail as "avatar", "logo", and lunit icons.`,
+    },
+  },
+};