@eureca/eureca-ui/src/components/Wizard/stories/step-success.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 { StepSuccess } from '../';
import { StepSuccessStory } from './step-success.stories.js';

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

<Title>Step Success</Title>

<Description>
  Componente de card mobile utilizado no Wizard da aplicação do jovem.
</Description>

<Preview>
  <Story name="Step Success">
    <StepSuccessStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| svg | SVG que ilustra a etapa do wizard  <br /> 'object' | null |
| icon | Ícone presente no card.  <br /> 'object' | null |
| title | Título do card  <br /> 'string' | '' |
| description | Descrição do card  <br /> 'string' | '' |
| primaryButtonText | Texto do primeiro botão  <br /> 'string' | '' |
| onClickPrimaryButton | Função disparada ao se clicar no primeiro botão.  <br /> 'func' | () => {} |
| secondaryButtonText | Texto do segundo botão  <br /> 'string' | '' |
| onClickSecondaryButton | Função disparada ao se clicar no segundo botão.  <br /> 'func' | () => {} |

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

```jsx
 <StepSuccess
  svg={
    <Flex justifyCenter alignCenter>
      <SVGStep7 />
    </Flex>
  }
  title='Perfil completo'
  description='Lembre-se: Sempre que fizer algum curso novo ou viver alguma experiência marcante, conte pra gente aqui no perfil!'
  primaryButtonText='Explorar novas oportunidades'
  onClickPrimaryButton={handleClickFirst}
  secondaryButtonText='Secondary Button
  onClickSecondaryButton={handleClickSecond}
  icon={<FaUserEdit />}
/>
```