import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/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" />
````

### Multiline

By default, Chips displays labels only in a single line. To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles.

<Canvas of={ChipStories.Multiline} />
```tsx
<Chip
  sx={{
    height: 'auto',
    '& .MuiChip-label': {
      display: 'block',
      whiteSpace: 'normal',
    },
  }}
  label="This is a chip that has multiple lines."
/>
<Chip label="This is a chip that has ellipsis." />
````

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