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 }) => ({
	boxSizing: "border-box",
	borderWidth: 1,
	borderStyle: "solid",
	appearance: "none",
	width: 20,
	height: 20,
	margin: 0,
	padding: 0,
	flexShrink: 0,
	flexGrow: 0,
	display: "flex",
	justifyContent: "center",
	alignItems: "center",
	position: "relative",
	cursor: "pointer",
	outline: 0,
	borderColor: theme.tokens.inputBorder,
	background: theme.tokens.inputBackground,
	":focus": {
		borderColor: theme.tokens.inputBorderFocus
	},
	"[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 function Checkbox(props) {
	const { theme } = useFela();

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

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