All files / elements/forms/CheckboxField/CheckboxLabel index.js

100% Statements 11/11
50% Branches 1/2
100% Functions 2/2
100% Lines 10/10

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                                                    8x 89x 8x 89x             89x 89x               8x       8x       8x                                 8x            
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
  fontWeight,
  layout,
  space,
} from 'styled-system';
import propTypes from '@styled-system/prop-types';
import {
  colorCore,
  ellipsisCore,
  fontFamilyCore,
  fontSizeCore,
  fontStyleCore,
  letterSpacingCore,
  lineHeightCore,
  scaleFont,
  textAlignCore,
  textDecorationCore,
  typography,
} from 'src/utils/styledHelpers';
import { removeSomeProps } from 'src/utils/componentHelpers';
import { getGlobalStyles } from 'src/global-styles';
 
const { grid: { gutter } } = getGlobalStyles();
const opacity = props => `${props.disabled ? 'opacity: 0.6;' : ''}`;
const CheckboxLabelComponent = ({ children, ...props }) => {
  const propsToTrim = [
    ...Object.keys(typography.propTypes),
    ...Object.keys(propTypes.flexbox),
    ...Object.keys(propTypes.layout),
    ...Object.keys(propTypes.space),
    'controlGroupProps',
  ];
  const labelProps = removeSomeProps(props, propsToTrim);
  return (
    // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
    <label {...labelProps}>
      { children }
    </label>
  );
};
 
CheckboxLabelComponent.propTypes = {
  children: PropTypes.any,
};
 
CheckboxLabelComponent.defaultProps = {
  children: null,
};
 
const CheckboxLabel = styled(CheckboxLabelComponent)`
  ${colorCore}
  ${ellipsisCore}
  ${fontFamilyCore}
  ${fontSizeCore}
  ${fontWeight}
  ${layout}
  ${letterSpacingCore}
  ${lineHeightCore}
  ${fontStyleCore}
  ${textAlignCore}
  ${textDecorationCore}
  ${opacity}
  ${space}
  cursor: pointer;
`;
 
CheckboxLabel.defaultProps = {
  display: 'inline-block',
  mr: scaleFont(gutter, 1),
};
 
export { CheckboxLabel };