@eureca/eureca-ui/src/components/Cards/stories/user-opportunity.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 { OpportunityCardUser } from '../';
import { OpportunityUserCardStory } from './user-opportunity.stories.js';

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

<Title>User Opportunity Card</Title>

<Description>
  User Opportunity Card dos aplicativos Eureca.
</Description>

<Description>
É uma extensão do componente Card.
</Description>

<Preview>
  <Story name="User Opportunity Card">
    <OpportunityUserCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| id | ID do card <br /> 'string' | null |
| title | Título a ser exibido <br /> 'string' | '' |
| organization | Empresa a ser exibida <br /> 'string' | '' |
| type | Tipo da oportunidade <br /> 'string' | '' |
| date | Data a ser exibida <br /> 'date' | new Date() |
| image | Url a ser exibida <br /> 'date' | '' |
| progress | Progresso a ser exibido <br /> 'date' | 0 |
| currentTrack | Trilhas a ser exibida no tempo restante <br /> 'date' | '' |
| onClick | Função de onClick do card <br /> 'string' | ( ) => { } |

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

```jsx
<OpportunityCardUser 
  id={0}
  title='Título do card'
  organization='EDP Brasil'
  type='Educação & Seleção'
  date={new Date()}
  image='url-da-imagem'
  progress={45}
  currentTrack='Marketing'
  onClick={handleClick}
/>
```