Add styling to checkboxes (https://github.com/woocommerce/woocommerce-blocks/pull/1880)

* Add styling to checkboxes

* Add resets for some themes

* Simplify props

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

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { CheckboxControl as WPCheckboxControl } from 'wordpress-components';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Component used to show a checkbox control with styles.
+ */
+const CheckboxControl = ( { className, ...props } ) => {
+	return (
+		<WPCheckboxControl
+			className={ classNames( 'wc-block-checkbox', className ) }
+			{ ...props }
+		/>
+	);
+};
+
+CheckboxControl.propTypes = {
+	className: PropTypes.string,
+};
+
+export default CheckboxControl;

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

@@ -0,0 +1,13 @@
+.wc-block-checkbox {
+	.components-checkbox-control__input[type="checkbox"]:checked {
+		background: currentColor;
+		border-color: currentColor;
+	}
+	.components-checkbox-control__input[type="checkbox"]:focus {
+		border-color: currentColor;
+		box-shadow: 0 0 2px currentColor;
+	}
+	.components-checkbox-control__label {
+		display: inline;
+	}
+}

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -11,7 +11,7 @@ import CheckoutForm from '@woocommerce/base-components/checkout/form';
 import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
 import TextInput from '@woocommerce/base-components/text-input';
 import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
-import { CheckboxControl } from '@wordpress/components';
+import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import CheckoutProvider from '@woocommerce/base-context/checkout-context';

plugins/woocommerce-blocks/bin/webpack-helpers.js

@@ -132,6 +132,8 @@ const stableMainEntry = {
 	'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
 	'custom-select-control-style':
 		'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
+	'checkbox-control-style':
+		'./node_modules/@wordpress/components/src/checkbox-control/style.scss',
 	'spinner-style':
 		'./node_modules/@wordpress/components/src/spinner/style.scss',
 };