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 }) => ({
	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,
	":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 function Radio(props) {
	const { theme } = useFela();

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

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