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

import { Box } from '@material-ui/core';

import { List } from '../';
import { ListStory } from './list.stories.js';

<Meta title='Originals/Layout' component={List} decorators={[withKnobs]}/>

<Title>List</Title>

<Description>
  List dos aplicativos Eureca. 
</Description>

<Preview>
  <Story name="List">
    <ListStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| type | Tipo da lista <br /> 'number' \| 'checkbox' \| 'radio' | 'number' |
| updateList | Retorna a lista atualizada <br /> 'func' | () => { } |

<Subtitle>Variações</Subtitle>

> A lista pode ter os tipos `number`, `checkbox` ou `radio`

<Preview>
  <div>
    <List updateList={() => {}} />
    <Box my={3}>
      <List type='checkbox' updateList={() => {}} />
    </Box>
    <List type='radio' updateList={() => {}} />
  </div>
</Preview>

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

```jsx
<List type='checkbox' updateList={handleUpdate} />
```