@eureca/eureca-ui/src/components/Wizard/stories/step-success.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { action } from '@storybook/addon-actions';
import { text, withKnobs } from '@storybook/addon-knobs';
import { Box } from '@material-ui/core';

import { FaUserEdit } from 'react-icons/fa';

import { ReactComponent as SVGStep7 } from '../../../assets/images/success_step7.svg';
import { StepSuccess } from '..';

import { Flex } from '../../Flex';

export default { title: 'Originals/Wizard', decorators: [withKnobs], includeStories: [] };

export function StepSuccessStory() {
  const secondaryButton = text('Texto do botão secundário', '');
  return (
    <Box maxWidth={375} p={2}>
      <StepSuccess
        svg={
          <Flex justifyCenter alignCenter>
            <SVGStep7 />
          </Flex>
        }
        title={text('Título', 'Perfil completo')}
        description={text(
          'Descrição',
          'Lembre-se: Sempre que fizer algum curso novo ou viver alguma experiência marcante, conte pra gente aqui no perfil!'
        )}
        primaryButtonText={text('Texto do botão primário', 'Explorar novas oportunidades')}
        onClickPrimaryButton={action('primary-button-click')}
        secondaryButtonText={secondaryButton}
        onClickSecondaryButton={action('secondary-button-click')}
        icon={<FaUserEdit />}
      />
    </Box>
  );
}