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

UI component library of Eureca's user and admin apps

import React from 'react';
import propTypes from 'prop-types';
import { Box, Typography, useTheme } from '@material-ui/core';

import { IconContext } from 'react-icons';

import { colors } from '../../theme/colors';

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

const StepSuccess = ({
  svg,
  icon,
  title,
  description,
  primaryButtonText,
  onClickPrimaryButton,
  secondaryButtonText,
  onClickSecondaryButton,
}) => {
  const theme = useTheme();
  return (
    <Box
      p={2}
      height="100%"
      style={{
        display: 'flex',
        alignItems: 'center',
        background: colors.white,
      }}
    >
      <Flex>
        <Box pt={4} alignItems="center" justifyContent="center">
          {svg}
        </Box>
        <Box my={3} width="100%" style={{ border: `1px solid ${colors.gray5}`, borderBottom: 0 }} />
        <Box px={2}>
          <Flex directionRow>
            {icon && (
              <Flex
                mr={3}
                alignCenter
                justifyCenter
                bgcolor={colors.green1}
                borderRadius="50%"
                width="100%"
                style={{
                  maxWidth: `${theme.spacing(7)}px`,
                  maxHeight: `${theme.spacing(7)}px`,
                }}
              >
                <IconContext.Provider value={{ color: colors.white, size: 26 }}>
                  {icon}
                </IconContext.Provider>
              </Flex>
            )}
            <div>
              <Box textAlign={icon ? 'left' : 'center'} p={icon ? 0 : 4}>
                <Box marginBottom={2}>
                  <Typography
                    variant="subtitle1"
                    style={{
                      fontSize: '1.25rem',
                      lineHeight: '1.5rem',
                    }}
                  >
                    {title}
                  </Typography>
                </Box>
                <Typography variant="subtitle2" style={{ lineHeight: '1rem' }}>
                  {description}
                </Typography>
              </Box>
            </div>
          </Flex>
        </Box>

        <Box py={3}>
          <Flex>
            <Button variant="contained" onClick={onClickPrimaryButton}>
              {primaryButtonText}
            </Button>
            {onClickSecondaryButton && (
              <Flex w={1} textAlign="center" cursorPointer mt={2} onClick={onClickSecondaryButton}>
                <Typography style={{ color: colors.green1 }}>{secondaryButtonText}</Typography>
              </Flex>
            )}
          </Flex>
        </Box>
      </Flex>
    </Box>
  );
};

StepSuccess.propTypes = {
  svg: propTypes.object,
  icon: propTypes.object,
  title: propTypes.string.isRequired,
  description: propTypes.string.isRequired,
  primaryButtonText: propTypes.string.isRequired,
  onClickPrimaryButton: propTypes.func.isRequired,
  secondaryButtonText: propTypes.string,
  onClickSecondaryButton: propTypes.func,
};

StepSuccess.defaultProps = {
  svg: null,
  icon: null,
  title: 'Title',
  description: 'Description',
  primaryButtonText: 'Primary Button',
  onClickPrimaryButton: () => {},
  secondaryButtonText: 'Secondary Button',
  onClickSecondaryButton: () => {},
};

export { StepSuccess };