@eureca/eureca-ui/src/components/Steps/stories/steps.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 { TrackStepper } from '../';
import { TrackStepperStory } from './steps.stories.js';

<Meta title='Originals/Track Stepper' component={TrackStepper} decorators={[withKnobs]}/>

<Title>Track Stepper</Title>

<Description>
  Componente que representa os módulos com participação do usuário e seus feedbacks
</Description>

<Preview>
  <Story name="TrackStepper">
    <TrackStepperStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| tracks | Array de objetos com os dados de um módulo  <br /> 'array' | - |
| companyName | Nome da empresa à qual a vaga pertence  <br /> 'string' | '' |
| onClickFile | Função disparada ao se clicar em "Desafio enviado". Retorna o id do módulo clicado.  <br /> 'string' | () => { } |
| onClickTrack | Função disparada ao se clicar em um módulo incompleto. Retorna o id do módulo clicado.  <br /> 'string' | () => { } |

<Subtitle>Formato do objeto de uma trilha</Subtitle>

Uma trilha possui:

- `type`: 'initial' \| 'fit' \| 'pdf' \| 'audio' \| 'video'
- `status`: 'incomplete' \| 'complete'
- `title`: string
- `date`: date
- `score`: string
- `maxScore`: string
- `content`: string

```jsx
{
  type: 'pdf',
  status: 'complete',
  title: 'Módulo 3: Desafio #1  | Conta pra mim...',
  date: new Date(2019, 7, 30),
  score: '495',
  maxScore: '500',
  content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
}
```

<Subtitle>Exemplo de dados de entrada</Subtitle>

```jsx
[
  {
    type: 'initial',
    status: 'complete',
    title: 'Módulo 1: Comece por aqui.',
    date: null,
    score: '',
    maxScore: '',
    content: '',
  },
  {
    type: 'fit',
    status: 'incomplete',
    title: 'Módulo 2: Fit Cultural',
    date: new Date(2018, 10, 13),
    score: '76%',
    maxScore: '',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
  {
    type: 'pdf',
    status: 'complete',
    title: 'Módulo 3: Desafio #1  | Conta pra mim...',
    date: new Date(2019, 7, 30),
    score: '495',
    maxScore: '500',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
  {
    type: 'pdf',
    status: 'complete',
    title: 'Módulo 4: Desafio #1  | Energia limpa para que te quero',
    date: new Date(),
    score: '484',
    maxScore: '500',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
]
```

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

```jsx
<TrackStepper
  tracks={trackOptions}
  companyName="EDP"
  onClickFile={handleClickFile}
  onClickTrack={handleClickTrack}
/>
```