index.tsx000064400000003237151556670000006425 0ustar00/**
 * External dependencies
 */
import classNames from 'classnames';
import { useInstanceId } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import './style.scss';

export type CheckboxControlProps = {
	className?: string;
	label?: string | React.ReactNode;
	id?: string;
	onChange: ( value: boolean ) => void;
	children?: React.ReactChildren;
	hasError?: boolean;
	checked?: boolean;
	disabled?: boolean;
};

/**
 * Component used to show a checkbox control with styles.
 */
export const CheckboxControl = ( {
	className,
	label,
	id,
	onChange,
	children,
	hasError = false,
	checked = false,
	disabled = false,
	...rest
}: CheckboxControlProps ): JSX.Element => {
	const instanceId = useInstanceId( CheckboxControl );
	const checkboxId = id || `checkbox-control-${ instanceId }`;

	return (
		<div
			className={ classNames(
				'wc-block-components-checkbox',
				{
					'has-error': hasError,
				},
				className
			) }
		>
			<label htmlFor={ checkboxId }>
				<input
					id={ checkboxId }
					className="wc-block-components-checkbox__input"
					type="checkbox"
					onChange={ ( event ) => onChange( event.target.checked ) }
					aria-invalid={ hasError === true }
					checked={ checked }
					disabled={ disabled }
					{ ...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>
		</div>
	);
};

export default CheckboxControl;
stories/index.tsx000064400000001055151556670000010111 0ustar00/**
 * External dependencies
 */
import type { Story, Meta } from '@storybook/react';

/**
 * Internal dependencies
 */
import CheckboxControl, { CheckboxControlProps } from '..';

export default {
	title: 'WooCommerce Blocks/Checkout Blocks/CheckboxControl',
	component: CheckboxControl,
	args: {
		instanceId: 'my-checkbox-id',
		label: 'Check me out',
	},
} as Meta< CheckboxControlProps >;

const Template: Story< CheckboxControlProps > = ( args ) => (
	<CheckboxControl { ...args } />
);

export const Default = Template.bind( {} );
Default.args = {};
style.scss000064400000005164151556670000006614 0ustar00.wc-block-components-checkbox {
	@include reset-color();
	@include reset-typography();
	margin-top: em($gap);

	label {
		align-items: flex-start;
		display: flex;
		position: relative;
		cursor: pointer;
		@include font-size(small);

		input[type="checkbox"] {
			cursor: inherit;
		}
	}

	.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;
		margin-right: em($gap);
		min-height: em(24px);
		min-width: em(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);
		pointer-events: none;

		.has-dark-controls & {
			fill: #fff;
		}
	}

	> span,
	.wc-block-components-checkbox__label {
		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;
	}
}