vcc-ui/_src/components/radio/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 { useFela } from 'react-fela';
import { string, bool, func } from 'prop-types';
import { Inline } from '../inline';
import { getThemeStyle } from '../../get-theme-style';

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

  ':checked': {
    ':before': {
      borderRadius: '50%',
      display: 'block',
      content: "''",
      width: 8,
      height: 8,
      backgroundColor: theme.tokens.inputControl,
      position: 'absolute',
    },
  },
  ':disabled': {
    cursor: 'not-allowed',
    borderColor: theme.tokens.inputDisabledBorder,
    ':checked': {
      ':before': {
        backgroundColor: theme.tokens.inputDisabledControl,
      },
    },
  },
});

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

  const styleProps = {
    isValid,
    theme,
  };

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

Radio.displayName = 'Radio';

Radio.propTypes = {
  onChange: func.isRequired,
  checked: bool.isRequired,
  /** Should be the same for all radio buttons belonging to same group */
  name: string.isRequired,
  isValid: bool,
};