import checkbox from single place (#12015)

Author: senadir

assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

@@ -8,10 +8,10 @@ import {
 	noticeContexts,
 } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
 import {
 	StoreNoticesContainer,
 	ValidatedTextInput,
+	CheckboxControl,
 } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -9,8 +9,10 @@ import {
 	useEditorContext,
 	noticeContexts,
 } from '@woocommerce/base-context';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { StoreNoticesContainer } from '@woocommerce/blocks-components';
+import {
+	StoreNoticesContainer,
+	CheckboxControl,
+} from '@woocommerce/blocks-components';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 import type {
 	BillingAddress,

packages/checkout/components/checkbox-control/index.tsx

@@ -1,80 +1 @@
-/**
- * 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;
+export { CheckboxControl } from '@woocommerce/blocks-components';