@lunit/design-system 1.0.0 → 2.0.1

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

@@ -6,6 +6,7 @@ import {
   TableRow,
   TableBody,
   TableCell,
+  Box,
 } from "@mui/material";
 import Bell from "@lunit/design-system-icons/Bell";
 import ToggleButton from "@/components/ToggleButton";
@@ -163,6 +164,9 @@ const BasicToggleButtonTemplate: StoryFn<typeof ToggleButton> = (arg) => {
 export const BasicToggleButton = {
   render: BasicToggleButtonTemplate,
   name: "Basic ToggleButton",
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
@@ -280,6 +284,203 @@ export const Size = {
   },
 };
 
+const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  const [values, setValues] = React.useState({
+    small: "",
+    medium: "",
+    large: "",
+  });
+
+  const handleChange = (value: string | null, size: SizeValues) => {
+    if (!size) return;
+
+    setValues({
+      ...values,
+      [size]: value,
+    });
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        "& button": {
+          marginRight: 2,
+        },
+      }}
+    >
+      <ToggleButtonGroup
+        sx={{
+          display: "flex",
+          alignItems: "center",
+        }}
+        value={values.small}
+        onChange={(_, value) => handleChange(value, "small")}
+      >
+        <ToggleButton {...args} value="small" size="small">
+          Small
+        </ToggleButton>
+        <ToggleButton {...args} value="medium" size="medium">
+          Medium
+        </ToggleButton>
+        <ToggleButton {...args} value="large" size="large">
+          Large
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <ToggleButtonGroup
+        sx={{
+          display: "flex",
+          alignItems: "center",
+        }}
+        value={values.medium}
+        onChange={(_, value) => handleChange(value, "medium")}
+      >
+        <ToggleButton
+          {...args}
+          value="small"
+          kind="outlined"
+          color="primary"
+          size="small"
+        >
+          Small
+        </ToggleButton>
+        <ToggleButton
+          {...args}
+          value="medium"
+          kind="outlined"
+          color="primary"
+          size="medium"
+        >
+          Medium
+        </ToggleButton>
+        <ToggleButton
+          {...args}
+          value="large"
+          kind="outlined"
+          color="primary"
+          size="large"
+        >
+          Large
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <ToggleButtonGroup
+        sx={{
+          display: "flex",
+          alignItems: "center",
+        }}
+        value={values.large}
+        onChange={(_, value) => handleChange(value, "large")}
+      >
+        <ToggleButton {...args} value="small" kind="ghost" size="small">
+          Small
+        </ToggleButton>
+        <ToggleButton {...args} value="medium" kind="ghost" size="medium">
+          Medium
+        </ToggleButton>
+        <ToggleButton {...args} value="large" kind="ghost" size="large">
+          Large
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+};
+
+export const SizeDocs = {
+  render: SizeDocsTemplate,
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  const [contained, setContained] = useState("");
+  const [outlined, setOutlined] = useState("");
+  const [ghost, setGhost] = useState("");
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <ToggleButtonGroup
+        sx={{
+          "& button": {
+            marginRight: 2,
+          },
+        }}
+        value={contained}
+        onChange={(_, value) => setContained(value)}
+      >
+        <ToggleButton {...args} value="first" kind="contained" color="primary">
+          Primary
+        </ToggleButton>
+        <ToggleButton
+          {...args}
+          value="second"
+          kind="contained"
+          color="secondary"
+          selectedColor="secondary"
+        >
+          Secondary
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <ToggleButtonGroup
+        sx={{
+          marginTop: 4,
+          "& button": {
+            marginRight: 2,
+          },
+        }}
+        value={outlined}
+        onChange={(_, value) => setOutlined(value)}
+      >
+        <ToggleButton {...args} value="first" kind="outlined" color="primary">
+          Primary
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <ToggleButtonGroup
+        sx={{
+          marginTop: 4,
+          "& button": {
+            marginRight: 2,
+          },
+        }}
+        value={ghost}
+        onChange={(_, value) => setGhost(value)}
+      >
+        <ToggleButton {...args} value="first" kind="ghost" color="primary">
+          Primary
+        </ToggleButton>
+        <ToggleButton
+          {...args}
+          value="second"
+          kind="ghost"
+          color="secondary"
+          selectedColor="secondary"
+        >
+          Secondary
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+};
+
+export const Color = {
+  render: ColorTemplate,
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const SelectedColorTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [selected1, setSelected1] = useState(true);
   const [selected2, setSelected2] = useState(true);
@@ -344,3 +545,114 @@ export const SelectedColor = {
     selected: true,
   },
 };
+
+const SelectedColorDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  const { kind, selectedColor, color, ...restProps } = args;
+  return (
+    <Box
+      sx={{
+        "& button": {
+          marginRight: 2,
+        },
+      }}
+    >
+      <ToggleButton {...restProps} value="first" selectedColor="primary">
+        Primary
+      </ToggleButton>
+      <ToggleButton {...restProps} value="second" selectedColor="secondary">
+        Secondary
+      </ToggleButton>
+    </Box>
+  );
+};
+
+export const SelectedColorDocs = {
+  render: SelectedColorDocsTemplate,
+  argTypes: {
+    selectedColor: {
+      control: false,
+    },
+  },
+  args: {
+    selected: true,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const SelectedDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  const { kind, selectedColor, color, selected, ...restProps } = args;
+  return (
+    <Box
+      sx={{
+        "& button": {
+          marginRight: 2,
+        },
+      }}
+    >
+      <ToggleButton {...restProps} value="first">
+        Not Selected
+      </ToggleButton>
+      <ToggleButton {...restProps} value="second" selected={true}>
+        Selected
+      </ToggleButton>
+    </Box>
+  );
+};
+
+export const SelectedDocs = {
+  render: SelectedDocsTemplate,
+  argTypes: {
+    selectedColor: {
+      control: false,
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    include: ["color", "size", "disabled", "selected", "kind"],
+  },
+};
+
+const DisabledTemplate: StoryFn<typeof ToggleButton> = (args) => {
+  return (
+    <Box
+      sx={{
+        "& button": {
+          marginRight: 2,
+        },
+      }}
+    >
+      <ToggleButton {...args} value="first" disabled>
+        Text
+      </ToggleButton>
+      <ToggleButton
+        {...args}
+        kind="outlined"
+        color="primary"
+        value="second"
+        disabled
+      >
+        Text
+      </ToggleButton>
+      <ToggleButton {...args} kind="ghost" value="second" disabled>
+        Text
+      </ToggleButton>
+    </Box>
+  );
+};
+
+export const DisabledDocs = {
+  render: DisabledTemplate,
+  argTypes: {
+    selectedColor: {
+      control: false,
+    },
+  },
+  args: {
+    selected: false,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};

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

@@ -0,0 +1,180 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/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";
+
+<Meta name="Toggle Button Docs" of={ToggleButtonStories} />
+
+# ToggleButton
+
+A Toggle Button can be used to group related options.
+
+## Usage
+
+### Basic ToggleButton
+
+```tsx
+import { ToggleButton } from "@lunit/design-system";
+// or
+import ToggleButton from "@lunit/design-system/ToggleButton";
+
+<ToggleButton value="value">ToggleButton</ToggleButton>;
+```
+
+### Demo
+
+<Canvas of={ToggleButtonStories.BasicToggleButton} sourceState="none" />
+
+<Controls />
+
+### Value
+
+The value to associate with the button when selected in a ToggleButtonGroup.<br />
+Value prop is `requried`.
+
+<Canvas of={ToggleButtonStories.BasicToggleButton} sourceState="none" />
+
+```tsx
+<ToggleButton value="value">Text</ToggleButton>
+```
+
+### Kind
+
+The ToggleButton has 3 kinds of variants: `contained`, `outlined` and `outlined`. <br />
+Default kind is `contained`.
+
+<Canvas
+  of={ToggleButtonKindStories.KindDocs}
+  meta={ToggleButtonKindStories}
+  sourceState="none"
+/>
+
+```tsx
+<ToggleButton value="first" kind="contained">Text</ToggleButton>
+<ToggleButton value="secound" kind="outlined">Text</ToggleButton>
+<ToggleButton value="thrid" kind="ghost">Text</ToggleButton>
+```
+
+### Color
+
+The ToggleButton has two colors: `primary` and `secondary`.<br />
+Using the `color` prop, you can change the color of the ToggleButton.<br />
+`outlined` kind does not have `secondary` color state.<br />
+Default color is `primary`.
+
+<Canvas of={ToggleButtonStories.Color} sourceState="none" />
+
+```tsx
+// Contained
+<ToggleButton value="first" kind="contained" color="primary">Primary</ToggleButton>
+<ToggleButton value="second" kind="contained" color="secondary">Secondary</ToggleButton>
+
+// Outlined
+<ToggleButton value="first" kind="outlined" color="primary">Primary</ToggleButton>
+
+// ghost
+<ToggleButton value="first" kind="ghost" color="primary">Primary</ToggleButton>
+<ToggleButton value="second" kind="ghost" color="secondary">Secondary</ToggleButton>
+```
+
+### Selected
+
+If true, the ToggleButton is rendered in an active state.<br />
+Default Selected is `false`.
+
+<Canvas of={ToggleButtonStories.SelectedDocs} sourceState="none" />
+
+```tsx
+<ToggleButton selected={false} value="first">Not Selected</ToggleButton>
+<ToggleButton selected={true} value="second">Selected</ToggleButton>
+```
+
+### SelectedColor
+
+The ToggleButton has two selectedColor: `primary` and `secoundary`.<br />
+Using the `color` prop, you can change the color of the ToggleButton.<br />
+Default color is `primary`.
+
+<Canvas of={ToggleButtonStories.SelectedColorDocs} sourceState="none" />
+
+```tsx
+<ToggleButton value="first" selectedColor="primary" selected="true">Primary</ToggleButton>
+<ToggleButton value="second" selectedColor="secondary" selected="true">Secondary</ToggleButton>
+```
+
+### Size
+
+The ToggleButton has three sizes: `small`, `medium` and `large`.<br />
+Using the `size` prop, you can change the size of the ToggleButton.<br />
+Default size is `small`.
+
+<Canvas of={ToggleButtonStories.SizeDocs} sourceState="none" />
+
+```tsx
+// Contained
+<ToggleButton size="small" value="first" kind="contained">small</ToggleButton>
+<ToggleButton size="medium" value="second" kind="contained">medium</ToggleButton>
+<ToggleButton size="large" value="third" kind="contained">large</ToggleButton>
+
+// Outlined
+<ToggleButton size="small" value="first" kind="outlined">small</ToggleButton>
+<ToggleButton size="medium" value="second" kind="outlined">medium</ToggleButton>
+<ToggleButton size="large" value="third" kind="outlined">large</ToggleButton>
+
+// ghost
+<ToggleButton size="small" value="first" kind="ghost">small</ToggleButton>
+<ToggleButton size="medium" value="second" kind="ghost">medium</ToggleButton>
+<ToggleButton size="large" value="third" kind="ghost">large</ToggleButton>
+```
+
+### With Icon and Text
+
+If you want to use an icon and text together, you can use the `icon` prop and `children` prop.
+
+<Canvas of={ToggleButtonIconStories.IconDocs} sourceState="none" />
+
+```tsx
+<ToggleButton icon={<Bell />} value="first" kind="contained">Contained</ToggleButton>
+<ToggleButton icon={<Bell />} value="secound" kind="outlined">Outlined</ToggleButton>
+<ToggleButton icon={<Bell />} value="thrid" kind="ghost">Ghost</ToggleButton>
+```
+
+### With Icon only
+
+If you want to use only an icon, you can use the `icon` prop.
+
+<Canvas of={ToggleButtonIconStories.IconOnlyDocs} sourceState="none" />
+
+```tsx
+<ToggleButton icon={<Bell />} value="first" kind="contained" />
+<ToggleButton icon={<Bell />} value="secound" kind="outlined" />
+<ToggleButton icon={<Bell />} value="thrid" kind="ghost" />
+```
+
+### Disabled
+
+If you want to disable the ToggleButton, you can use the `disabled` prop.<br />
+Default disabled is `false`.
+
+<Canvas of={ToggleButtonStories.DisabledDocs} sourceState="none" />
+
+```tsx
+<ToggleButton disabled value="first" kind="contained" />
+<ToggleButton disabled value="secound" kind="outlined" />
+<ToggleButton disabled value="thrid" kind="ghost" />
+```
+
+## Reference
+
+- [Material-UI ToggleButton](https://mui.com/material-ui/react-toggle-button/)
+- [Material-UI ToggleButton API](https://mui.com/material-ui/api/toggle-button/)
+- [Lunit Design System ToggleButton Figma](https://www.figma.com/file/cvCwvrIV9Xo1iOLcbvD904/old_Components_Lunit-Design?type=design&node-id=284-3&mode=design&t=FaggRMVgOmnJveHg-0)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import {
+  Box,
   Table,
   TableHead,
   TableRow,
@@ -236,6 +237,70 @@ export const Kind = {
   },
 };
 
+const ToggleButtonDocsTemplate: StoryFn<typeof ToggleButton> = ({
+  kind,
+  color,
+  children,
+  ...restProps
+}) => {
+  const [values, setValues] = useState({
+    contained: false,
+    outlined: false,
+    ghost: false,
+  });
+
+  const handleChange = (value: keyof typeof values) => {
+    setValues({ ...values, [value]: !values[value] });
+  };
+
+  return (
+    <Box
+      sx={{
+        "& button": {
+          marginRight: "7px",
+        },
+      }}
+    >
+      <ToggleButton
+        color={color}
+        {...restProps}
+        value="contained"
+        onChange={() => handleChange("contained")}
+        selected={values.contained}
+      >
+        {children}
+      </ToggleButton>
+      <ToggleButton
+        kind="outlined"
+        color="primary"
+        {...restProps}
+        value="outlined"
+        onChange={() => handleChange("outlined")}
+        selected={values.outlined}
+      >
+        {children}
+      </ToggleButton>
+      <ToggleButton
+        kind="ghost"
+        color={color}
+        {...restProps}
+        value="ghost"
+        onChange={() => handleChange("ghost")}
+        selected={values.ghost}
+      >
+        {children}
+      </ToggleButton>
+    </Box>
+  );
+};
+
+export const KindDocs = {
+  render: ToggleButtonDocsTemplate,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
   const [values, setValues] = useState({
     primary: {