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

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

<Title>Opportunity Card</Title>

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

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

<Preview>
  <Story name="Opportunity Card">
    <OpportunityCardStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| id | Id card <br /> 'string' \| 'number' | null |
| title | Título a ser exibido no card <br /> 'string' | '' |
| subtitle | Subtítulo a ser exibido no card <br /> 'string' | '' |
| statusColor | Cor do círculo representando o status <br /> 'string' | null |
| menuOptions | Opções do menu do card <br /> '[object]' | [] |
| image | Imagem a ser exibida no card <br /> 'string' | '' |
| like | Número de likes de uma oportunidade <br /> 'number' | null |
| origin | Origem de uma oportunidade <br /> 'string' | '' |
| originList | Lista de possíveis origens de uma oportunidade <br /> 'object' | {} |
| onClickItem | Função disparada ao se clicar no card <br /> 'func' | () => { } |

<Subtitle>Formato do menuOptions</Subtitle>

```jsx
[
  { id: 1, icon: <FiEye />, value: '1', label: 'label' },
  { id: 2, icon: <FiEdit />, value: '2', label: 'label2' },
]
```

<Subtitle>Formato do originList</Subtitle>

```jsx
{
  private: {
    label: 'Privada',
    background: colors.error2,
    color: colors.white,
  },
  partner: {
    label: 'Parceiro',
    background: colors.gray4,
    color: colors.gray2,
  },
}
```

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

```jsx
<OpportunityCard 
  id={0}
  title='Título do card'
  subtitle='Subtítulo do card'
  statusColor='#EBEBEB'
  menuOptions={menuOptions}
  image='url-da-imagem'
  like={40}
  origin: 'eureca'
  originList={originList}
  onClickItem={handleClickItem}
>
```