All files / src/ToggleButton ToggleButton.js

60% Statements 3/5
0% Branches 0/8
0% Functions 0/2
75% Lines 3/4

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                12x                                           12x             12x              
import React from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import ArrowUp from '@material-ui/icons/KeyboardArrowUp';
import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
 
const StyledButton = withStyles(theme => ({
  root: {
    minHeight: '43px',
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(0.75, 2, 0.5, 2),
    color: theme.palette.common.white,
    backgroundColor:
      R.path(['palette', 'button', 'mainOpacity'], theme) || theme.palette.primary.main,
    display: 'flex',
    justifyContent: 'space-between',
    '&:hover': {
      backgroundColor: R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark,
    },
  },
  label: {
    textTransform: 'uppercase',
    textAlign: 'left',
    fontSize: '0.9375rem',
    lineHeight: '1.0',
  },
}))(Button);
 
const ToggleButton = ({ isOpen, label, toggle }) => (
  <StyledButton fullWidth variant="text" onClick={R.is(Function)(toggle) ? toggle : null}>
    {label}
    {isOpen ? <ArrowUp /> : <ArrowDown />}
  </StyledButton>
);
 
ToggleButton.propTypes = {
  isOpen: PropTypes.bool,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  toggle: PropTypes.func,
};
 
export default ToggleButton;