vcc-ui/_src/components/checkbox/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import { bool, func } from 'prop-types';
import { useFela } from 'react-fela';
import { Block } from '../block';
import { getThemeStyle } from '../../get-theme-style';

const checkboxStyle = ({ theme, isValid }) => ({
  boxSizing: 'border-box',
  borderWidth: 1,
  borderStyle: 'solid',
  appearance: 'none',
  width: 20,
  height: 20,
  margin: 0,
  padding: 0,
  flexShrink: 0,
  flexGrow: 0,
  outline: 0,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  position: 'relative',
  cursor: 'pointer',
  borderColor: theme.tokens.inputBorder,
  background: theme.tokens.inputBackground,
  extend: [
    {
      condition: !isValid,
      style: {
        borderColor: theme.color.foreground.alert,
      },
    },
    {
      condition: isValid,
      style: {
        ':focus': {
          borderColor: theme.tokens.inputBorderFocus,
        },
      },
    },
    {
      condition: isValid,
      style: {
        ':active': {
          color: 'pink',
        },
      },
    },
  ],

  ':disabled': {
    cursor: 'not-allowed',
    borderColor: theme.tokens.inputDisabledBorder,
    ':checked': {
      ':before': {
        borderRight: `2px solid ${theme.tokens.inputDisabledControl}`,
        borderBottom: `2px solid ${theme.tokens.inputDisabledControl}`,
      },
    },
  },

  ':checked': {
    ':before': {
      boxSizing: 'border-box',
      transform: 'translateY(-1px) rotate(45deg)',
      display: 'block',
      content: "''",
      width: 5,
      height: 10,
      position: 'absolute',
      borderRight: `2px solid ${theme.tokens.inputControl}`,
      borderBottom: `2px solid ${theme.tokens.inputControl}`,
    },
  },
});

export const Checkbox = React.forwardRef(
  ({ isValid = true, ...props }, ref) => {
    const { theme } = useFela();

    const styleProps = {
      isValid,
      theme,
    };

    return (
      <Block
        {...props}
        ref={ref}
        as="input"
        type="checkbox"
        extend={[
          checkboxStyle(styleProps),
          getThemeStyle('checkbox', theme, styleProps),
        ]}
      />
    );
  }
);

Checkbox.displayName = 'Checkbox';

Checkbox.propTypes = {
  onChange: func.isRequired,
  checked: bool,
  isValid: bool,
};