All files / components/Form/Toggle ToggleCheckbox.js

100% Statements 4/4
100% Branches 0/0
100% Functions 1/1
100% Lines 4/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          13x       13x                         2x                         13x      
import styled, { css } from 'styled-components';
import { number } from 'prop-types';
import { getToggleStyle } from '../formSelectors';
import { rem } from '../../Typography';
 
const propTypes = {
  h: number.isRequired,
};
 
const ToggleCheckbox = styled.input.attrs({
  type: 'checkbox',
})`
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  & + span:before {
    left: ${rem(4)};
  }
  ${({ theme, h }) => css`
    & + span {
      ${getToggleStyle(theme, 'normal')}
    }
    &:checked + span {
      ${getToggleStyle(theme, 'checked')}
    }
    &:checked + span:before {
      left: calc(100% - ${rem(h - 4)});
    }
  `}
`;
 
ToggleCheckbox.propTypes = propTypes;
 
export default ToggleCheckbox;