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

package/src/stories/components/{SelectControl/Checkbox.stories.tsx → CheckBox/BasicCheckbox.stories.tsx}

@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from "react";
-import {
-  Box,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
+import { Box, FormControlLabel } from "@mui/material";
+import { action } from "@storybook/addon-actions";
 import Checkbox from "@/components/Checkbox";
 import FormLabel from "@/components/FormLabel";
 import { Meta, StoryFn } from "@storybook/react";
@@ -14,6 +8,11 @@ import { Meta, StoryFn } from "@storybook/react";
 export default {
   title: "Components/Checkbox",
   component: Checkbox,
+  args: {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+  },
   argTypes: {
     disabled: {
       control: "boolean",
@@ -26,6 +25,16 @@ export default {
       description: "If true, the component appears indeterminate.",
     },
     onChange: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onChange"),
+        undefined: undefined,
+      },
+      defaultValue: "function",
       table: { type: { summary: "func" } },
       description:
         "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
@@ -42,12 +51,6 @@ export default {
       },
       description: "If true, the component is checked.",
     },
-    value: {
-      control: "text",
-      table: { type: { summary: "any" } },
-      description:
-        "The value of the component. The DOM API casts this to a string.",
-    },
     defaultChecked: {
       control: "boolean",
       table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
@@ -55,11 +58,6 @@ export default {
         "The default checked state. Use when the component is not controlled.",
     },
   },
-  args: {
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-  },
   parameters: {
     controls: {
       expanded: true,
@@ -67,7 +65,6 @@ export default {
         "disabled",
         "indeterminate",
         "onChange",
-        "value",
         "required",
         "checked",
         "defaultChecked",
@@ -93,7 +90,10 @@ const BasicCheckboxTemplate: StoryFn<typeof Checkbox> = (args) => {
     <Checkbox
       {...args}
       checked={checked}
-      onChange={() => setChecked(!checked)}
+      onChange={(event) => {
+        args.onChange && args.onChange(event, checked);
+        setChecked((prev) => !prev);
+      }}
     />
   );
 };
@@ -103,28 +103,49 @@ export const BasicCheckbox = {
 };
 
 const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
-  const [checked, setChecked] = useState(false);
+  const [checked1, setChecked1] = useState(true);
+  const [checked2, setChecked2] = useState(false);
+
   useEffect(() => {
-    setChecked(Boolean(args.checked));
+    setChecked1(Boolean(args.checked));
+    setChecked2(Boolean(args.checked));
   }, [args.checked]);
 
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    args.onChange && args.onChange(event, checked1);
+    setChecked1((prev) => !prev);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    args.onChange && args.onChange(event, checked2);
+    setChecked2((prev) => !prev);
+  };
+
   return (
-    <FormLabel
-      label="with label"
-      control={
-        <Checkbox
-          {...args}
-          checked={checked}
-          onChange={() => setChecked(!checked)}
-        />
-      }
-    />
+    <Box sx={{ display: "flex", gap: 4 }}>
+      <FormControlLabel
+        control={
+          <Checkbox {...args} checked={checked1} onChange={handleChange1} />
+        }
+        label="Label"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            {...args}
+            disabled
+            checked={checked2}
+            onChange={handleChange2}
+          />
+        }
+        label="Disabled Label"
+      />
+    </Box>
   );
 };
 
 export const Label = {
   render: LabelTemplate,
-
   parameters: {
     docs: {
       description: {
@@ -134,68 +155,9 @@ export const Label = {
   },
 };
 
-const StatusTemplate: StoryFn<typeof Checkbox> = (args) => (
-  <Table sx={{ width: 650 }}>
-    <TableHead>
-      <TableRow>
-        <TableCell></TableCell>
-        <TableCell>Enabled</TableCell>
-        <TableCell>Focuse</TableCell>
-        <TableCell>Disabled</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>On</TableCell>
-        <TableCell>
-          <Checkbox {...args} checked />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked className="Mui-focusVisible" />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked disabled />
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Off</TableCell>
-        <TableCell>
-          <Checkbox {...args} />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} className="Mui-focusVisible" />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} disabled />
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Indeterminate</TableCell>
-        <TableCell>
-          <Checkbox {...args} checked indeterminate />
-        </TableCell>
-        <TableCell>
-          <Checkbox
-            {...args}
-            checked
-            indeterminate
-            className="Mui-focusVisible"
-          />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked indeterminate disabled />
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
-
-export const Status = {
-  render: StatusTemplate,
-};
-
 const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = React.useState([true, false]);
+  const { disabled } = args;
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked([event.target.checked, event.target.checked]);
@@ -223,7 +185,7 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   );
 
   return (
-    <div>
+    <Box>
       <FormLabel
         label="Parent"
         control={
@@ -231,26 +193,43 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
             checked={checked[0] && checked[1]}
             indeterminate={checked[0] !== checked[1]}
             onChange={handleChange1}
+            disabled={disabled}
           />
         }
       />
       {children}
-    </div>
+    </Box>
   );
 };
 
 export const Indeterminate = {
   render: IndeterminateTemplate,
-
-  argTypes: {
-    disabled: {
-      control: false,
-    },
-    checked: {
-      control: false,
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
     },
-    indeterminate: {
-      control: false,
+  },
+};
+
+const DisabledTemplate: StoryFn<typeof Checkbox> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 4 }}>
+      <Checkbox {...args} disabled checked />
+      <Checkbox {...args} indeterminate disabled />
+      <Checkbox {...args} disabled />
+    </Box>
+  );
+};
+
+export const Disabled = {
+  render: DisabledTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
     },
   },
 };

package/src/stories/components/CheckBox/CheckboxDocs.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import Box from "@mui/material/Box";
+import Bell from "@lunit/design-system-icons/Bell";
+
+import * as BasicCheckbox from "./BasicCheckbox.stories";
+
+<Meta name="Checkbox Docs" of={BasicCheckbox} />
+
+# Checkbox
+
+Checkboxes allow the user to select one or more items from a set.
+
+## Usage
+
+### Basic Checkbox
+
+```tsx
+import { Checkbox } from "@lunit/design-system";
+// or
+import Checkbox from "@lunit/design-system/Checkbox";
+
+<Checkbox />;
+```
+
+### Demo
+
+<Canvas of={BasicCheckbox.BasicCheckbox} sourceState="none" />
+
+<Controls />
+
+### Label
+
+You can provide a label to the Checkbox thanks to the FormControlLabel component.
+
+<Canvas of={BasicCheckbox.Label} sourceState="none" />
+
+```tsx
+<FormGroup>
+  <FormControlLabel control={<Checkbox />} label="Label" />
+  <FormControlLabel disabled control={<Checkbox />} label="Disabled Label" />
+</FormGroup>
+```
+
+### Indeterminate
+
+A Checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.
+
+<Canvas of={BasicCheckbox.Indeterminate} sourceState="none" />
+
+```tsx
+<FormLabel
+  label="Parent"
+  control={
+    <Checkbox
+      checked={checked[0] && checked[1]}
+      indeterminate={checked[0] !== checked[1]}
+      onChange={handleChange1}
+    />
+  }
+/>
+```
+
+### Disabled
+
+If you want to disable the button, you can use the disabled prop.
+Default disabled is false.
+
+<Canvas of={BasicCheckbox.Disabled} sourceState="none" />
+
+```tsx
+<Checkbox checked disabed />
+<Checkbox indeterminate disabed />
+<Checkbox disabed />
+```
+
+## Reference
+
+- [Material-UI Checkbox](https://mui.com/material-ui/react-checkbox/)
+- [Material-UI Checkbox API](https://mui.com/material-ui/api/checkbox/)
+- [Lunit Design System Button Figma](https://www.figma.com/file/BSdRUpEPp7XiJ9YnEqpf6F/1.0.0_Components?type=design&node-id=1923-6820&mode=design&t=0BjGJV6Ef9WjfuCD-0)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
+import { Box } from "@mui/system";
+
 import Chip from "@/components/Chip";
 import {
   Logo16,
@@ -17,6 +19,17 @@ export default {
   argTypes: {
     kind: {
       description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
+      control: {
+        type: "select",
+      },
+      options: ["contained", "outlined"],
+    },
+    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.`,
@@ -80,6 +93,7 @@ export default {
   },
   args: {
     kind: "contained",
+    variant: "filled",
     label: "label@lunit.io",
   },
   parameters: {
@@ -94,6 +108,8 @@ export default {
   },
 } as Meta<typeof Chip>;
 
+export const Basic = {};
+
 export const Outlined = {
   parameters: {
     docs: {
@@ -116,9 +132,10 @@ export const Outlined = {
   args: {
     color: "primary",
     kind: "outlined",
+    variant: "outlined",
   },
 
-  name: "Kind: Outlined",
+  name: "Kind(Variant): Outlined",
 };
 
 export const Contained = {
@@ -138,9 +155,45 @@ export const Contained = {
   args: {
     color: "primary",
     kind: "contained",
+    variant: "filled",
   },
 
-  name: "Kind: Contained / Read Only",
+  name: "Kind(Variant): Contained / Read Only",
+};
+
+export const Kind = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip kind="outlined" label="label@lunit.io" />
+      <Chip kind="contained" label="label@lunit.io" />
+    </Box>
+  ),
+};
+
+export const Color = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip color="primary" label="label@lunit.io" />
+      <Chip color="secondary" label="label@lunit.io" />
+      <Chip color="warning" label="label@lunit.io" />
+      <Chip color="error" label="label@lunit.io" />
+      <Chip color="success" label="label@lunit.io" />
+    </Box>
+  ),
+};
+
+export const Thumbnail = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip thumbnail={<Logo16 />} label="label@lunit.io" />
+      <Chip thumbnail={<Avatar16 />} label="label@lunit.io" />
+      <Chip thumbnail={<Success16 />} label="label@lunit.io" />
+      <Chip thumbnail="W as initial" label="label@lunit.io" />
+    </Box>
+  ),
 };
 
 export const ContainedWithClick = {
@@ -161,7 +214,7 @@ export const ContainedWithClick = {
     },
   },
 
-  name: "Kind: Contained / Enable",
+  name: "Kind(Variant): Contained / Enable",
 };
 
 export const ContainedWithDelete = {
@@ -182,7 +235,7 @@ export const ContainedWithDelete = {
     },
   },
 
-  name: "Kind: Contained / Deletable",
+  name: "Kind(Variant): Contained / Deletable",
 };
 
 export const ContainedWithThumbnail = {
@@ -204,5 +257,27 @@ export const ContainedWithThumbnail = {
     },
   },
 
-  name: "Kind: Contained with Thumbnail",
+  name: "Kind(Variant): Contained with Thumbnail",
+};
+
+export const ContainedWithDeleteAndThumbnail = {
+  args: {
+    ...Contained.args,
+    thumbnail: "Initial",
+    onClick: undefined,
+    onDelete: action("onDelete"),
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have thumbnail and delete button.`,
+      },
+    },
+    controls: {
+      exclude: ["onClick"],
+    },
+  },
+
+  name: "Kind(Variant): Contained with Thumbnail and Deletable",
 };

package/src/stories/components/Chip/ChipDocs.mdx

@@ -0,0 +1,132 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import { Error } from "@lunit/design-system-icons";
+
+import Chip from "@/components/Chip";
+import * as ChipStories from "./Chip.stories";
+
+<Meta name="Chip Docs" of={ChipStories} />
+
+# Chip
+
+Chips are compact elements that represent an input, attribute, or action.
+
+## Usage
+
+### Basic Chip
+
+```tsx
+import { Chip } from "@lunit/design-system";
+// or
+import Chip from "@lunit/design-system/Chip";
+
+<Chip />;
+```
+
+### Demo
+
+<Canvas of={ChipStories.Basic} />
+
+<Controls />
+
+### Label
+
+The label is the text that will be displayed in the Chip.
+If the label is not provided, the Chip will be rendered as a circle.
+
+<Canvas of={ChipStories.Contained} meta={ChipStories.Contained.meta} />
+```tsx
+<Chip label="label@lunit.io" />
+````
+
+### Kind(variant)
+
+The Chip has 2 kinds of variants: outlined and contained. <br />
+(In the Lunit Design System, the variant and kind are used interchangeably. The variant is a fallback prop of the kind.) <br />
+You can change the kind of the Chip by using the kind or variant prop, and the outcome will be the same.
+The `contained` kind corresponds to the `filled` and `contained` variants of the MUI system. <br />
+The default kind(variant) is contained. <br />
+
+<Canvas of={ChipStories.Kind} meta={ChipStories.Contained.meta} />
+```tsx
+<Chip variant="contained" label="label@lunit.io" />
+<Chip variant="outlined" label="label@lunit.io" />
+// or (kind is a fallback prop of the variant)
+<Chip kind="contained" label="label@lunit.io" />
+<Chip kind="outlined" label="label@lunit.io" />
+````
+
+### Color
+
+The Chip has 5 kinds of colors: `primary`, `secondary`, `warning`, `error`, and `success`. <br />
+By using the color prop, you can change the color of the Chip. <br />
+The default color is `primary`.
+
+<Canvas of={ChipStories.Color} meta={ChipStories.Contained.meta} />
+
+```tsx
+<Chip color="primary" label="label@lunit.io" />
+<Chip color="secondary" label="label@lunit.io" />
+<Chip color="warning" label="label@lunit.io" />
+<Chip color="error" label="label@lunit.io" />
+<Chip color="success" label="label@lunit.io" />
+```
+
+### Clickable
+
+Chips with the `onClick` are clickable. <br />
+You cannot pass the `onClick` prop to the Chip when its variant is `outlined`. <br />
+
+<Canvas of={ChipStories.ContainedWithClick} />
+```tsx
+<Chip label="label@lunit.io" onClick={() => console.log("onClick")} />
+
+````
+
+### Deletable
+
+Chips with the `onDelete` are deletable. <br />
+You cannot pass the `onDelete` prop to the Chip when its variant is `outlined`. <br />
+The hover/pressed effects are only applied to the delete icon. <br />
+
+<Canvas of={ChipStories.ContainedWithDelete} />
+
+```tsx
+<Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} />
+
+````
+
+### Thumbnail(logo, avatar, icon, first letter)
+
+Chips with the thumbnail prop can display a logo, avatar, icon, or the first letter of a string.<br />
+The thumbnail replaces all the left side icons of MUI, so you cannot use the icon or avatar prop of the MUI system. <br />
+The thumbnail prop cannot be used when the kind (variant) is outlined.
+
+<Canvas of={ChipStories.Thumbnail} />
+```tsx
+<Chip thumbnail={<Logo16 />} label="label@lunit.io" />
+<Chip thumbnail={<Avatar16 />} label="label@lunit.io" />
+<Chip thumbnail={<Success16 />} label="label@lunit.io" />
+<Chip thumbnail="W as initial" label="label@lunit.io" />
+
+````
+
+### Thumbnail and Deletable
+
+The Chip can have a thumbnail and be deletable. <br />
+The hover/pressed effects are only applied to the delete icon. <br />
+
+<Canvas of={ChipStories.ContainedWithDeleteAndThumbnail} />
+```tsx
+<Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} thumbnail="W as initial" />
+````
+
+## Reference
+
+- [Material-UI Chip](https://mui.com/material-ui/react-chip/)
+- [Material-UI Chip API](https://mui.com/material-ui/api/chip/)
+- [Lunit Design System Chip Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?type=design&node-id=1887-7970&mode=design)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system