All files / src/Header Header.js

85.71% Statements 6/7
100% Branches 0/0
66.67% Functions 2/3
83.33% Lines 5/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54              12x                           12x 1x 1x                                         12x                  
import React, { Fragment } from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Lens from '@material-ui/icons/Lens';
 
const useStyles = makeStyles(theme => ({
  title: {
    color: theme.palette.text.primary,
  },
  subtitle: {
    color: theme.palette.text.secondary,
    lineHeight: 1.3,
  },
  icon: {
    height: '0.35em',
    color: theme.palette.text.secondary,
  },
}));
 
const Header = ({ header }) => {
  const classes = useStyles();
  return (
    <div className={classes.container}>
      <Typography variant="h5" className={classes.title}>
        {R.prop('title')(header)}
      </Typography>
      <Typography variant="subtitle1" className={classes.subtitle}>
        {R.pipe(
          R.propOr([], 'subtitle'),
          R.intersperse(<Lens className={classes.icon} />),
          R.addIndex(R.map)((v, index) => (
            <Fragment key={R.toString([R.prop('title')(header), index])}>{v}</Fragment>
          )),
        )(header)}
      </Typography>
      <Typography variant="subtitle1" className={classes.subtitle}>
        {R.prop('uprs')(header)}
      </Typography>
    </div>
  );
};
 
Header.propTypes = {
  header: PropTypes.shape({
    title: PropTypes.string,
    subtitle: PropTypes.array,
    uprs: PropTypes.string,
  }),
};
 
export default Header;