@eureca/eureca-ui/src/components/TopBar/stories/top-bar.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 { TopBar } from '../';
import { TopBarStory } from './top-bar.stories.js';

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

<Title>TopBar</Title>

<Description>
  Componente de TopBar dos aplicativos Eureca
</Description>

<Preview>
  <Story name="TopBar">
    <TopBarStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| type | Tipo de Top Bar <br /> 'manager' \| 'user' | 'manager' |
| onClickLeft | Função disparada ao se clicar no ícone à esquerda. Caso não seja passada o ícone não é exibido. <br /> 'func' | null |
| onClickLogo | Função disparada ao se clicar na Logo.  <br /> 'func' | () => {} |
| onClickRight | Função disparada ao se clicar no ícone à direita. Caso não seja passada o ícone não é exibido. <br /> 'func' | null |

<Subtitle>Variações</Subtitle>

> O componente possui duas versões controladas pela prop `type`: `manager` e `user`

<Preview>
  <TopBar type='manager' onClickLeft={() => {}}/>
</Preview>

<Preview>
  <TopBar type='user' onClickLeft={() => {}}/>
</Preview>

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

```jsx
<TopBar
  type={type}
  onClickLeft={handleClickLeft}
  onClickLogo={handleClickLogo}
  onClickRight={handleClickRight}
/>
```