@eureca/eureca-ui/src/components/Menu/stories/icon-and-label.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 { IconAndLabelMenuList } from '../';
import { IconAndLabelStory } from './icon-and-label.stories.js';

<Meta title='Originals/Menu' component={IconAndLabelMenuList} decorators={[withKnobs]}/>

<Title>IconAndLabelMenuList</Title>

<Description>
  Menu com opções contendo ícones e texto dos aplicativos Eureca. 
</Description>

<Description>
  Recebe um array de opções pré-definidas (ícones e texto) ou um componente customizado.
</Description>

<Preview>
  <Story name="Icon And Label Menu List">
    <IconAndLabelStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

> O IconAndLabelMenuList pode receber também as props do componente [Menu do Material-UI](https://material-ui.com/components/menus/#menus).

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| options | Array de objetos com as opções do menu <br /> ['object'] | [] |
| onClose | Função disparada ao se fechar o menu <br /> 'func' | () => { } |
| onClick | Função de onClick de um item do menu <br /> 'func' | () => { } |
| anchor | Variável de estado para controle do menu <br /> 'object' \| 'node' | null |

<Subtitle>Formato do options</Subtitle>

```jsx
[
  { id: 0, icon: <FaUserEdit />, label: 'Item 1', value: 'item-1' },
  { id: 1, icon: <FaUserEdit />, label: 'Item 2', value: 'item-2' },
  { id: 2, icon: <FaUserEdit />, label: 'Item 3', value: 'item-3' },
]
```

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

```jsx
<IconAndLabelMenuList
  options={options}
  anchor={anchor}
  onClose={handleClose}
  onClick={handleClickItem}
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
  transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
/>
```