Skip to content

Commit

Permalink
feat: update checkbox docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Seunghyeon-lunit
Seunghyeon-lunit committed Apr 1, 2024
1 parent 9f8e160 commit 889767f
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 95 deletions.
163 changes: 68 additions & 95 deletions ...onents/SelectControl/Checkbox.stories.tsx → ...onents/CheckBox/BasicCheckBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,22 @@ import {
TableRow,
TableBody,
TableCell,
FormGroup,
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";

export default {
title: "Components/Checkbox",
component: Checkbox,
args: {
checked: false,
disabled: false,
indeterminate: false,
},
argTypes: {
disabled: {
control: "boolean",
Expand All @@ -26,6 +34,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`",
Expand All @@ -42,32 +60,20 @@ 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" } },
description:
"The default checked state. Use when the component is not controlled.",
},
},
args: {
checked: false,
disabled: false,
indeterminate: false,
},
parameters: {
controls: {
expanded: true,
include: [
"disabled",
"indeterminate",
"onChange",
"value",
"required",
"checked",
"defaultChecked",
Expand All @@ -93,7 +99,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);
}}
/>
);
};
Expand All @@ -104,27 +113,33 @@ export const BasicCheckbox = {

const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
const [checked, setChecked] = useState(false);

useEffect(() => {
setChecked(Boolean(args.checked));
}, [args.checked]);

return (
<FormLabel
label="with label"
control={
<Checkbox
{...args}
checked={checked}
onChange={() => setChecked(!checked)}
/>
}
/>
<Box>
<FormControlLabel
control={
<Checkbox
{...args}
defaultChecked
checked={checked}
onChange={(event) => {
args.onChange && args.onChange(event, checked);
setChecked((prev) => !prev);
}}
/>
}
label="Label"
/>
</Box>
);
};

export const Label = {
render: LabelTemplate,

parameters: {
docs: {
description: {
Expand All @@ -134,68 +149,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]);
Expand Down Expand Up @@ -223,34 +179,51 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
);

return (
<div>
<Box>
<FormLabel
label="Parent"
control={
<Checkbox
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.",
},
},
},
};
89 changes: 89 additions & 0 deletions packages/design-system/src/stories/components/CheckBox/CheckboxDocs.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
import Box from "@mui/material/Box";
import Bell from "@lunit/design-system-icons/Bell";

import Button from "@/components/Button";
import * as BasicCheckBox from "./BasicCheckBox.stories";

<Meta name="CheckBox Docs" of={BasicCheckBox} />

# Button

Checkboxes allow the user to select one or more items from a set.

## Usage

### Basic Button

```tsx
import { Button } 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 defaultChecked />} label="Label" />
<FormControlLabel required control={<Checkbox />} label="Required" />
<FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>
```

<Controls />

### 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

0 comments on commit 889767f

Please sign in to comment.