@eureca/eureca-ui/src/components/ProgressCard/stories/progress-card.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 { ProgressCard } from '../';
import { ProgressCardStory } from './progress-card.stories.js';

<Meta title='Originals/Progress Card' component={ProgressCard} decorators={[withKnobs]}/>

<Title>Progress Card</Title>

<Description>
  Componente de progresso de uma trilha
</Description>

<Preview>
  <Story name="ProgressCard">
    <ProgressCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| title | Tipo da trilha, será o título do card  <br /> 'string' | '' |
| icon | Ícone correspondente à trilha  <br /> 'object' | null |
| progress | Porcentagem de progresso da trilha. Recebe um número de 0 a 100  <br /> 'number' | 0 |
| date | Data de término da trilha. Caso seja vazia a trilha aparecerá como 'Indisponível'  <br /> 'object' | new Date() |
| status | Status do feedback da trilha.  <br /> 'feedback' \| 'feedbackReady' \| 'confirmation' | 'feedback' |
| active | Variável que controla o status ativo <br /> 'bool' | false |
| onClick | Função disparada ao se clicar no componente <br /> 'func' | () => {} |

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

```jsx
<ProgressCard 
  title='Online'
  icon={<FiLayers />}
  progress={85}
  date={date}
  status='feedbackReady'
  active
  onClick={handleClick}
/>
```