@eureca/eureca-ui/src/components/Wizard/mobile-card.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 { FiChevronRight } from 'react-icons/fi';

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

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

function ChevronArea({ children, ...props }) {
  const theme = useTheme();
  const areaStyle = {
    position: 'absolute',
    height: theme.spacing(6),
    width: theme.spacing(6),
    right: 0,
  };
  return (
    <Box style={areaStyle} {...props}>
      <Flex alignCenter justifyCenter style={{ height: '100%' }}>
        {children}
      </Flex>
    </Box>
  );
}

ChevronArea.propTypes = {
  children: PropTypes.node,
};

function LeftIcon({ color, icon }) {
  const theme = useTheme();
  const iconStyle = {
    height: theme.spacing(6),
    width: theme.spacing(6),
    borderRadius: theme.spacing(5),
    border: `2px solid ${color}`,
  };
  return (
    <Box mr={2} style={iconStyle}>
      <Flex alignCenter justifyCenter style={{ height: '100%' }}>
        <IconContext.Provider
          value={{
            color: color,
            size: 22,
            attr: { 'data-testid': 'left-icon' },
          }}
        >
          {icon}
        </IconContext.Provider>
      </Flex>
    </Box>
  );
}

LeftIcon.propTypes = {
  color: PropTypes.string,
  icon: PropTypes.object,
};

function MobileCard({ icon, completed, disabled, step, title, onClick }) {
  const theme = useTheme();
  const turnDisabled = disabled && colors.gray3;
  const turnCompleted = completed ? colors.white : colors.gray3;
  const turnCompletedBlack = completed ? colors.white : null;

  const color = turnDisabled || turnCompleted;
  const colorBlack = turnDisabled || turnCompletedBlack;

  function handleClick() {
    if (!disabled) {
      onClick();
    }
  }

  return (
    <Card width="100%" height="82px" style={{ cursor: 'pointer', position: 'relative' }}>
      <Flex
        p={2}
        alignCenter
        directionRow
        borderRadius={`${theme.spacing(0.5)}px`}
        bgcolor={completed ? colors.green1 : colors.white}
        border={`1px solid ${colors.gray4}`}
        onClick={handleClick}
      >
        <LeftIcon color={color} icon={icon} />
        <Flex>
          <Typography
            variant="subtitle2"
            style={{ textTransform: 'uppercase', color, letterSpacing: 1 }}
          >
            {`Passo ${step}`}
          </Typography>
          <Typography variant="subtitle2" style={{ color: colorBlack }}>
            {title}
          </Typography>
        </Flex>
        <ChevronArea>
          <FiChevronRight color={colorBlack} size={36} />
        </ChevronArea>
      </Flex>
    </Card>
  );
}

MobileCard.propTypes = {
  icon: PropTypes.object,
  completed: PropTypes.bool,
  disabled: PropTypes.bool,
  step: PropTypes.number,
  title: PropTypes.string,
  onClick: PropTypes.func,
};

MobileCard.defaultProps = {
  icon: null,
  completed: false,
  disabled: false,
  step: 0,
  title: '',
  onClick: () => {},
};

export { MobileCard };