initial commit

packages/woocommerce-blocks/assets/js/base/components/checkbox-control/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+type CheckboxControlProps = {
+	className?: string;
+	label?: string;
+	id?: string;
+	instanceId: string;
+	onChange: ( value: boolean ) => void;
+	children: React.ReactChildren;
+	hasError: boolean;
+};
+
+/**
+ * Component used to show a checkbox control with styles.
+ */
+const CheckboxControl = ( {
+	className,
+	label,
+	id,
+	instanceId,
+	onChange,
+	children,
+	hasError = false,
+	...rest
+}: CheckboxControlProps ): JSX.Element => {
+	const checkboxId = id || `checkbox-control-${ instanceId }`;
+
+	return (
+		<label
+			className={ classNames(
+				'wc-block-components-checkbox',
+				{
+					'has-error': hasError,
+				},
+				className
+			) }
+			htmlFor={ checkboxId }
+		>
+			<input
+				id={ checkboxId }
+				className="wc-block-components-checkbox__input"
+				type="checkbox"
+				onChange={ ( event ) => onChange( event.target.checked ) }
+				aria-invalid={ hasError === true }
+				{ ...rest }
+			/>
+			<svg
+				className="wc-block-components-checkbox__mark"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 20"
+			>
+				<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+			</svg>
+			{ label && (
+				<span className="wc-block-components-checkbox__label">
+					{ label }
+				</span>
+			) }
+			{ children }
+		</label>
+	);
+};
+
+export default withInstanceId( CheckboxControl );

packages/woocommerce-blocks/assets/js/base/components/checkbox-control/stories/index.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import CheckboxControl from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/CheckboxControl',
+	component: CheckboxControl,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( false );
+
+	return (
+		<CheckboxControl
+			label={ text( 'Label', 'Yes please' ) }
+			checked={ checked }
+			onChange={ ( value ) => setChecked( value ) }
+		/>
+	);
+};

packages/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss

@@ -0,0 +1,126 @@
+.wc-block-components-checkbox {
+	@include reset-typography();
+	align-items: flex-start;
+	display: flex;
+	position: relative;
+	margin-top: em($gap-large);
+
+	.wc-block-components-checkbox__input[type="checkbox"] {
+		font-size: 1em;
+		appearance: none;
+		border: 2px solid $input-border-gray;
+		border-radius: 2px;
+		box-sizing: border-box;
+		height: em(24px);
+		width: em(24px);
+		margin: 0;
+		min-height: 24px;
+		min-width: 24px;
+		overflow: hidden;
+		position: static;
+		vertical-align: middle;
+		background-color: #fff;
+
+		&:checked {
+			background: #fff;
+			border-color: $input-border-gray;
+		}
+
+		&:focus {
+			outline: 2px solid $input-border-gray;
+			outline-offset: 2px;
+		}
+
+		&::before,
+		&::after {
+			content: "";
+		}
+
+		&:not(:checked) + .wc-block-components-checkbox__mark {
+			display: none;
+		}
+
+		.has-dark-controls & {
+			border-color: $controls-border-dark;
+			background-color: $input-background-dark;
+
+			&:checked {
+				background: $input-background-dark;
+				border-color: $controls-border-dark;
+			}
+
+			&:focus {
+				outline: 2px solid $controls-border-dark;
+				outline-offset: 2px;
+			}
+		}
+	}
+
+	&.has-error {
+		color: $alert-red;
+
+		a {
+			color: $alert-red;
+		}
+		.wc-block-components-checkbox__input {
+			&,
+			&:hover,
+			&:focus,
+			&:active {
+				border-color: $alert-red;
+			}
+			&:focus {
+				outline: 2px solid $alert-red;
+				outline-offset: 2px;
+			}
+		}
+	}
+
+	.wc-block-components-checkbox__mark {
+		fill: #000;
+		position: absolute;
+		margin-left: em(3px);
+		margin-top: em(1px);
+		width: em(18px);
+		height: em(18px);
+
+		.has-dark-controls & {
+			fill: #fff;
+		}
+	}
+
+	> span,
+	.wc-block-components-checkbox__label {
+		padding-left: $gap;
+		vertical-align: middle;
+		line-height: em(24px);
+	}
+}
+
+// Hack to hide the check mark in IE11
+// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576
+@include ie11() {
+	.wc-block-components-checkbox__mark {
+		display: none;
+	}
+}
+
+.theme-twentytwentyone {
+	.wc-block-components-checkbox__input[type="checkbox"],
+	.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"] {
+		background-color: #fff;
+		border-color: var(--form--border-color);
+		position: relative;
+	}
+
+	.wc-block-components-checkbox__input[type="checkbox"]:checked,
+	.has-dark-controls
+	.wc-block-components-checkbox__input[type="checkbox"]:checked {
+		background-color: #fff;
+		border-color: var(--form--border-color);
+	}
+
+	.wc-block-components-checkbox__mark {
+		display: none;
+	}
+}