import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Adjustments } from '@useblu/ocean-icons-react';
import Chips from '../Chips';

<Meta title="Components/Chips" component={Chips} />

# Badge APIs

The API documentation of the Chips React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Chips } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Chips
      label="Selecione o filtro"
      options={[
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' },
        { label: 'Option 4', value: '4' },
        { label: 'Option 5', value: '5' },
        { label: 'Option 6', value: '6' },
        { label: 'Option 7', value: '7' },
        { label: 'Option 8', value: '8' },
        { label: 'Option 9', value: '9' },
        { label: 'Option 10', value: '10' },
      ]}
    />
  </Story>
</Canvas>

## CSS

| Global class          | Description                           |
| --------------------- | ------------------------------------- |
| .ods-chips            | Styles applied to the root element.   |
| .ods-chips\_\_button  | Styles applied to the button element  |
| .ods-chips\_\_label   | Styles applied to the label element   |
| .ods-chips\_\_options | Styles applied to the options element |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Chips/Chips.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      label: 'Selecione o filtro',
      icon: <Adjustments />,
      disabled: false,
      multiChoice: false,
      clearLabel: 'Limpar',
      filterLabel: 'Filtrar',
      initialCounter: undefined,
      options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' },
        { label: 'Option 4', value: '4' },
        { label: 'Option 5', value: '5' },
        { label: 'Option 6', value: '6' },
        { label: 'Option 7', value: '7' },
        { label: 'Option 8', value: '8' },
        { label: 'Option 9', value: '9' },
        { label: 'Option 10', value: '10' },
      ],
      actived: false,
      onClick: () => null,
      onChange: () => null,
      onClose: () => null,
      selectedValue: undefined,
    }}
    argTypes={{
      label: {
        control: 'text',
      },
      disabled: {
        control: 'boolean',
      },
      actived: {
        control: 'boolean',
      },
      multiChoice: {
        control: 'boolean',
      },
      clearLabel: {
        control: 'string',
      },
      filterLabel: {
        control: 'string',
      },
      initialCounter: {
        control: 'number',
      },
    }}
  >
    {(props) => <Chips {...props} />}
  </Story>
</Canvas>
