@eureca/eureca-ui/src/components/Cards/journey.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { format } from 'date-fns';

import { Typography, Box } from '@material-ui/core';
import { Flex } from '../Flex';
import { Card } from './card';

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

const CardHeader = ({ title, titleColor, headerColor }) => {
  return (
    <Flex
      justifyCenter
      alignCenter
      py={0.5}
      bgcolor={headerColor}
      borderRadius="4px 4px 0 0"
      data-testid="header-testid"
    >
      <Typography variant="body2" style={{ color: titleColor || colors.white, fontWeight: 400 }}>
        {title}
      </Typography>
    </Flex>
  );
};

CardHeader.propTypes = {
  title: PropTypes.string.isRequired,
  titleColor: PropTypes.string,
  headerColor: PropTypes.string.isRequired,
};

function JourneyCard({ date, text, title, titleColor, headerColor }) {
  return (
    <Card width={184} data-testid="card-testid">
      <CardHeader title={title} headerColor={headerColor} titleColor={titleColor} />
      <Flex id="card-body" py={1} px={2} alignCenter>
        <Flex directionRow alignCenter justifyCenter>
          <Box mr={1}>
            <Typography variant="h6" style={{ fontWeight: 500 }}>
              {format(date, 'dd')}
            </Typography>
          </Box>
          <Typography variant="overline">{format(date, 'MMM')}</Typography>
        </Flex>
        <Box id="divider" width={1} height="1px" bgcolor={colors.gray5} my={1} />
        <Flex justifyCenter textAlign="center" height={[32, 56]}>
          <Typography variant="body2" style={{ fontWeight: 400 }} data-testid="text-testid">
            {text}
          </Typography>
        </Flex>
      </Flex>
    </Card>
  );
}

JourneyCard.defaultProps = {
  date: new Date(),
  text: '',
  title: '',
  titleColor: colors.white,
  headerColor: colors.gray3,
};

JourneyCard.propTypes = {
  date: PropTypes.object.isRequired,
  text: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  titleColor: PropTypes.string,
  headerColor: PropTypes.string,
};

export { JourneyCard };