@eureca/eureca-ui/src/components/Chips/stories/chips.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { ThemeProvider } from '@material-ui/core';

import { FiPaperclip } from 'react-icons/fi';

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Chips } from '../';
import { BasicChip } from './chips.stories.js';

<Meta title='Material/Chips' component={Chips} decorators={[withKnobs]}/>

<Title>Chips</Title>

<Description>
  Chip básico dos aplicativos Eureca, extendido do chip padrão do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/chips/#chip) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Basic Chip">
    <BasicChip />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| variant | Variantes do chip <br /> 'outlined' \| 'default' | 'default' |
| size | Tamanho do chip <br /> 'small' \| 'medium' | 'medium' |
| icon | Ícone opcional à esquerda do chip <br /> | - |
| label | Texto do chip <br /> | - |
| onDelete | Função disparada ao se clicar no ícone à direita do chip. <br /> | - |
| props | Todas as props aceitas pelo chip do Material-UI <br /> | - |

<Subtitle>Variações</Subtitle>

> default | outlined | icon | delete

> Caso o `onDelete` seja definido o ícone de remoção será exibido

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceAround>
      <Chips
        variant='default'
        label='Label'
      />
      <Chips
        variant='outlined'
        label='Label'
      />
      <Chips
        variant='default'
        icon={<FiPaperclip color='rgba(0, 0, 0, 0.87)'/>}
        label='Label'
      />
      <Chips
        label='Label'
        onDelete={() => {}}
      />
    </Flex>
  </ThemeProvider>
</Preview>

<Subtitle>Estilo</Subtitle>

> É possível alterar o estilo do Chip utilizando `style`

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceAround>
      <Chips
        variant='default'
        label='Label'
        style={{
          color: 'white',
          backgroundColor: '#522d5b'
        }}
      />
      <Chips
        variant='default'
        label='Label'
        style={{
          backgroundColor: '#d7385e'
        }}
      />
      <Chips
        variant='default'
        label='Label'
        style={{
          backgroundColor: '#fb7b6b'
        }}
      />
      <Chips
        variant='default'
        label='Label'
        style={{
          backgroundColor: '#e7d39f'
        }}
      />
    </Flex>
  </ThemeProvider>
</Preview>

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Chips
  variant='default'
  label='Label'
  onDelete={handleDelete}
  icon={chipIcon}
/>
```