@eureca/eureca-ui/src/components/UnorderedList/stories/unordered-list.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 { Box } from '@material-ui/core';

import { UnorderedList } from '../';
import { UnorderedListStory } from './unordered-list.stories.js';

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

<Title>Unordered List</Title>

<Description>
  Componente de lista não ordenada dos aplicativos Eureca
</Description>

<Preview>
  <Story name="Unordered List">
    <UnorderedListStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| list | Array de entrada do componente <br /> 'number' | 5 |
| removeItem | Função chamada ao se clicar em remover um item <br /> 'number' | 0 |

<Subtitle>Variações</Subtitle>

Versão com duas e três colunas (arrays com dois ou três items)
Caso o `List` tenha vários valores ele deve ser passado como um array e sua exibição será simplificada.

<Preview>
  <Flex directionRow justifySpaceAround>
    <UnorderedList
      list={[
          {
            id: 0,
            list: ['Lista', 'com 2 linhas'],
          },
          {
            id: 1,
            list: ['Lista', ['valor um', 'valor dois']],
          },
          {
            id: 2,
            list: ['Lista', ['valor um', 'valor dois', 'valor tres', 'valor quatro']],
          },
          {
            id: 3,
            list: ['Lista', 'teste'],
          },
        ]}
      removeItem={() => {}}
    />
    <Box mt='24px'>
    <UnorderedList
      list={[
        {
          id: 0,
          list: ['Lista', ['valor um', 'valor dois'], '3 linhas'],
        },
        {
          id: 1,
          list: ['Lista', 'com', ['valor um', 'valor dois']],
        },
      ]}
      removeItem={() => {}}
      />
    </Box>
  </Flex>
</Preview>

<Subtitle>Exemplo de itens de entrada</Subtitle>

Com duas colunas

```jsx
[
  {
    id: 0,
    list: ['Lista', 'com 2 linhas'],
  },
  {
    id: 1,
    list: ['Lista', ['valor um', 'valor dois']],
  },
]
```

Com três colunas

```jsx
[
  {
    id: 0,
    list: ['Lista', ['valor um', 'valor dois'], '3 linhas'],
  },
  {
    id: 1,
    list: ['Lista', 'com', ['valor um', 'valor dois']],
  },
]
```

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

```jsx
<UnorderedList 
  list={array}
  removeItem={handleRemove}
/>
```