@eureca/eureca-ui/src/components/Header/stories/header.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 { Header } from '../';
import { HeaderStory } from './header.stories.js';

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

<Title>Header</Title>

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

<Preview>
  <Story name="Header">
    <HeaderStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

> `breadcrumbs` é um array com as chaves:

- `href`: 'string'
- `label`: 'string'

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| breadcrumbs | Array com os breadcrumbs <br /> 'object' | [{ href: '', label: '' }] |
| rightSide | Texto exibido no canto direito do header <br /> 'string' \| 'node' | '' |
| component | Componente a ser usado no Link interno <br /> 'element' | null |

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

```jsx
<Header
  breadcrumbs={[
    { href: '/oportunidades', label: 'Oportunidades' },
    { href: '/oportunidades', label: 'Estágio Globo.com 2019' },
    { href: '/example', label: anotherBreadCrumb },
  ]}
  rightSide='Salvo automaticamente às 14:03 de 19/08/2019'
/>
```