Create CountyInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1727)

* Split CountryInput and Select

* Create County Input

* Show text input when there are no county options

* Reset county value when changing country

* Fix keyboard navigation

* Hide checkmark

* Add reset styles for several popular themes

* Add country prop to ShippingCountyInput

plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js

@@ -2,14 +2,12 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { CustomSelectControl } from 'wordpress-components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
+import Select from '../select';
 
 const CountryInput = ( {
 	className,
@@ -24,19 +22,12 @@ const CountryInput = ( {
 	} ) );
 
 	return (
-		<CustomSelectControl
-			className={ classnames( 'wc-block-country-input', className, {
-				'is-active': value,
-			} ) }
+		<Select
+			className={ className }
 			label={ label }
+			onChange={ onChange }
 			options={ options }
-			onChange={ ( { selectedItem } ) => {
-				onChange( selectedItem.key );
-			} }
-			value={ {
-				key: value,
-				name: decodeEntities( countries[ value ] ),
-			} }
+			value={ options.find( ( option ) => option.key === value ) }
 		/>
 	);
 };

plugins/woocommerce-blocks/assets/js/base/components/county-input/billing-county-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { ALLOWED_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const BillingCountyInput = ( props ) => {
+	return <CountyInput counties={ ALLOWED_COUNTIES } { ...props } />;
+};
+
+BillingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default BillingCountyInput;

plugins/woocommerce-blocks/assets/js/base/components/county-input/county-input.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import TextInput from '../text-input';
+import Select from '../select';
+
+const CountyInput = ( {
+	className,
+	counties,
+	country,
+	label,
+	onChange,
+	value = '',
+} ) => {
+	const countryCounties = counties[ country ];
+	if ( ! countryCounties || Object.keys( countryCounties ).length === 0 ) {
+		return (
+			<TextInput
+				className={ className }
+				label={ label }
+				onChange={ onChange }
+				value={ value }
+			/>
+		);
+	}
+
+	const options = Object.keys( countryCounties ).map( ( key ) => ( {
+		key,
+		name: decodeEntities( countryCounties[ key ] ),
+	} ) );
+
+	return (
+		<Select
+			className={ className }
+			label={ label }
+			onChange={ onChange }
+			options={ options }
+			value={ options.find( ( option ) => option.key === value ) }
+		/>
+	);
+};
+
+CountyInput.propTypes = {
+	counties: PropTypes.objectOf(
+		PropTypes.oneOfType( [
+			PropTypes.array,
+			PropTypes.objectOf( PropTypes.string ),
+		] )
+	).isRequired,
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	country: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default CountyInput;

plugins/woocommerce-blocks/assets/js/base/components/county-input/index.js

@@ -0,0 +1,3 @@
+export { default as CountyInput } from './county-input';
+export { default as BillingCountyInput } from './billing-county-input';
+export { default as ShippingCountyInput } from './shipping-county-input';

plugins/woocommerce-blocks/assets/js/base/components/county-input/shipping-county-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { SHIPPING_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const ShippingCountyInput = ( props ) => {
+	return <CountyInput counties={ SHIPPING_COUNTIES } { ...props } />;
+};
+
+ShippingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default ShippingCountyInput;

plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss

@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	justify-content: space-between;
 
-	> .wc-block-country-input,
+	> .wc-block-select,
 	> .wc-block-text-input {
 		margin-right: $gap-small;
 		flex-basis: 0;

plugins/woocommerce-blocks/assets/js/base/components/select/index.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CustomSelectControl } from 'wordpress-components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Select = ( { className, label, onChange, options, value } ) => {
+	return (
+		<CustomSelectControl
+			className={ classnames( 'wc-block-select', className, {
+				'is-active': value,
+			} ) }
+			label={ label }
+			onChange={ ( { selectedItem } ) => {
+				onChange( selectedItem.key );
+			} }
+			options={ options }
+			value={ value }
+		/>
+	);
+};
+
+Select.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			key: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+		} ).isRequired
+	).isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.shape( {
+		key: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+	} ),
+};
+
+export default Select;

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

@@ -1,4 +1,4 @@
-.wc-block-country-input {
+.wc-block-select {
 	position: relative;
 	margin-top: $gap;
 
@@ -23,17 +23,23 @@
 
 	.components-custom-select-control__button {
 		background-color: #fff;
+		box-shadow: none;
+		color: $input-text-active;
+		font-family: inherit;
 		font-size: 16px;
 		font-weight: normal;
 		height: 100%;
+		letter-spacing: inherit;
 		line-height: 1;
 		padding: $gap-large $gap $gap-smallest;
+		text-transform: none;
 		width: 100%;
 
 		&:hover,
 		&:focus,
 		&:active {
 			background-color: #fff;
+			text-decoration: none;
 		}
 	}
 
@@ -49,4 +55,8 @@
 		margin-left: 0;
 		padding-left: $gap;
 	}
+
+	.components-custom-select-control__item-icon {
+		display: none;
+	}
 }

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

@@ -8,6 +8,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 { ShippingCountryInput } from '@woocommerce/base-components/country-input';
+import { ShippingCountyInput } from '@woocommerce/base-components/county-input';
 import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
 import InputRow from '@woocommerce/base-components/input-row';
 import { CheckboxControl } from '@wordpress/components';
@@ -171,6 +172,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 								setShippingFields( {
 									...shippingFields,
 									country: newValue,
+									county: '',
 								} )
 							}
 						/>
@@ -189,7 +191,8 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 						/>
 					</InputRow>
 					<InputRow>
-						<TextInput
+						<ShippingCountyInput
+							country={ shippingFields.country }
 							label={ __(
 								'County',
 								'woo-gutenberg-products-block'

plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js

@@ -35,3 +35,5 @@ export const ATTRIBUTES = getSetting( 'attributes', [] );
 export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
 export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
 export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );
+export const SHIPPING_COUNTIES = getSetting( 'shippingCounties', {} );
+export const ALLOWED_COUNTIES = getSetting( 'allowedCounties', {} );

plugins/woocommerce-blocks/src/BlockTypes/Checkout.php

@@ -52,6 +52,8 @@ class Checkout extends AbstractBlock {
 		);
 		$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
 		$data_registry->add( 'shippingCountries', WC()->countries->get_shipping_countries() );
+		$data_registry->add( 'allowedCounties', WC()->countries->get_allowed_country_states() );
+		$data_registry->add( 'shippingCounties', WC()->countries->get_shipping_country_states() );
 		\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
 		return $content;
 	}