@eureca/eureca-ui/src/components/TrackContextHeader/stories/track-context-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 { Box } from '@material-ui/core';

import { TrackContextHeader } from '../';
import { TrackContextHeaderStory } from './track-context-header.stories.js';

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

<Title>TrackContextHeader</Title>

<Description>
  Componente que exibe dados específicos de uma fase de uma oportunidade.
</Description>

<Preview>
  <Story name="TrackContextHeader">
    <TrackContextHeaderStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| title | Título da fase a ser exibido <br /> 'string' | '' |
| icon | Ícone a ser exibido <br /> 'object' | null |
| status | Status da fase <br /> 'open' \| 'closed' | 'open' |
| endDate | Data final da fase <br /> 'date' | new Date() |
| score | Nota da fase <br /> 'number' | 0 |
| totalScore | Nota máxima da fase <br /> 'number' | 0 |
| results | Booleano que controla se a fase já está fechada e com resultados disponíveis <br /> 'bool' | false |

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

```jsx
<TrackContextHeader
  type='Online'
  icon={<FiLayers />}
  status='open'
  endDate={new Date()}
  score={100}
  totalScore={500}
  results={false}
/>
```