vcc-ui/dist/esm/components/radio/radio.js

A React library for building user interfaces at Volvo Cars

import _extends from "@babel/runtime/helpers/extends";
import { bool, func, node, string } from 'prop-types';
import React, { useContext } from 'react';
import { useId } from '../../utils/auto-id';
import { Block } from '../block';
import { RadioContext } from '../radioGroup';
import { View } from '../view';
const radioStyle = _ref => {
  let {
    isValid
  } = _ref;
  return _ref2 => {
    let {
      theme
    } = _ref2;
    return {
      boxSizing: 'border-box',
      borderWidth: 1,
      borderStyle: 'solid',
      appearance: 'none',
      borderRadius: '50%',
      flexShrink: 0,
      width: 20,
      height: 20,
      margin: 0,
      padding: 0,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
      cursor: 'pointer',
      borderColor: theme.tokens.inputControlBorder,
      backgroundColor: theme.tokens.inputBackground,
      outlineWidth: 0,
      extend: [{
        condition: !isValid,
        style: {
          borderColor: theme.color.foreground.alert,
          borderWidth: 2
        }
      }, {
        condition: isValid,
        style: {
          ':focus-visible': theme.states.focus
        }
      }],
      ':checked': {
        backgroundColor: theme.tokens.inputControlBackground,
        borderColor: theme.tokens.inputControlBackground,
        ':before': {
          borderRadius: '50%',
          display: 'block',
          content: "''",
          width: 8,
          height: 8,
          position: 'absolute',
          backgroundColor: theme.tokens.inputControlForeground
        }
      },
      ':disabled': {
        cursor: 'not-allowed',
        borderColor: theme.tokens.inputDisabledBorder,
        backgroundColor: theme.tokens.inputDisabledBackground,
        ':checked': {
          borderColor: theme.tokens.inputDisabledBorder,
          backgroundColor: theme.tokens.inputDisabledBackground,
          ':before': {
            backgroundColor: theme.tokens.inputDisabledControl
          }
        }
      }
    };
  };
};
const labelStyle = _ref3 => {
  let {
    isValid
  } = _ref3;
  return _ref4 => {
    let {
      theme
    } = _ref4;
    return {
      color: isValid ? theme.color.foreground.primary : theme.color.foreground.alert,
      fontSize: 16,
      letterSpacing: '0.02em',
      marginTop: -1,
      lineHeight: 1.3,
      fontFamily: theme.fontTypes.NOVUM,
      fontWeight: 300
    };
  };
};
/**
 * @deprecated Use `import { Radio } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
 */
export const Radio = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
  let {
    isValid: userIsValid,
    value: userValue,
    onChange: userOnChange,
    checked: userChecked,
    name: userName,
    label = '',
    ...props
  } = _ref5;
  const {
    name,
    value,
    isValid,
    onChange
  } = useContext(RadioContext);
  const styleProps = {
    isValid: userIsValid !== undefined ? userIsValid : isValid !== undefined ? isValid : true
  };
  const id = useId(name ? name + '-' + userValue : userValue, props.id);
  const checked = userChecked || value === userValue;
  return /*#__PURE__*/React.createElement(View, {
    spacing: 1,
    direction: "row",
    alignItems: "center",
    shrink: 1
  }, /*#__PURE__*/React.createElement(Block, _extends({
    ref: ref,
    onChange: event => {
      if (userOnChange) {
        userOnChange(event);
      } else if (onChange) {
        onChange(event);
      }
    },
    checked: checked
  }, props, {
    as: "input",
    type: "radio",
    value: userValue,
    name: name || userName,
    id: id,
    extend: radioStyle(styleProps)
  })), /*#__PURE__*/React.createElement(Block, {
    as: "label",
    htmlFor: id,
    extend: labelStyle(styleProps)
  }, label));
});
Radio.displayName = 'Radio';
Radio.propTypes = {
  onChange: func,
  checked: bool,
  /** Should be the same for all radio buttons belonging to same group. */
  name: string,
  id: string,
  isValid: bool,
  /** Value of the radio button. */
  value: string,
  /** The label text that is associated with the radio button. */
  label: node.isRequired
};