From cad3e72769f2cd21ff253591294b7391ac76a6d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Fri, 17 Jan 2020 17:58:08 +0100 Subject: [PATCH] Create CountryInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1585) * Create initial CountryInput component * Create ShippingCountryInput * Create BillingCountryInput * Make backgrounds white * Correctly align options * Add CSS resets for 20xy themes * Fix wrong defaults in countries constants * Make CountryInput respect 'prefers-reduced-motion' * Reverse prefers-reduced-motion check * Set max-width to CountryInput dropdown * Use decodeEntities to print country names * Avoid unnecessary JSON enconding and later parsing * Make sure country name is also encoded when selected * Fix countries default value --- .../country-input/billing-country-input.js | 23 ++++++++ .../components/country-input/country-input.js | 52 +++++++++++++++++++ .../js/base/components/country-input/index.js | 3 ++ .../country-input/shipping-country-input.js | 23 ++++++++ .../base/components/country-input/style.scss | 52 +++++++++++++++++++ .../js/base/components/input-row/style.scss | 4 +- .../js/base/components/text-input/style.scss | 5 ++ .../js/blocks/cart-checkout/checkout/block.js | 3 +- .../assets/js/settings/blocks/constants.js | 2 + .../woocommerce-blocks/bin/webpack-helpers.js | 2 + plugins/woocommerce-blocks/package.json | 7 +-- plugins/woocommerce-blocks/src/Assets.php | 2 + 12 files changed, 173 insertions(+), 5 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/country-input/billing-country-input.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/country-input/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/country-input/shipping-country-input.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/billing-country-input.js b/plugins/woocommerce-blocks/assets/js/base/components/country-input/billing-country-input.js new file mode 100644 index 00000000000..af11b756c7f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/billing-country-input.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; +import { ALLOWED_COUNTRIES } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import CountryInput from './country-input.js'; + +const BillingCountryInput = ( props ) => { + return ; +}; + +BillingCountryInput.propTypes = { + onChange: PropTypes.func.isRequired, + className: PropTypes.string, + label: PropTypes.string, + value: PropTypes.string, +}; + +export default BillingCountryInput; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js new file mode 100644 index 00000000000..d5beb9ee0b2 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.js @@ -0,0 +1,52 @@ +/** + * 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'; + +const CountryInput = ( { + className, + countries, + label, + onChange, + value = '', +} ) => { + const options = Object.keys( countries ).map( ( key ) => ( { + key, + name: decodeEntities( countries[ key ] ), + } ) ); + + return ( + { + onChange( selectedItem.key ); + } } + value={ { + key: value, + name: decodeEntities( countries[ value ] ), + } } + /> + ); +}; + +CountryInput.propTypes = { + countries: PropTypes.objectOf( PropTypes.string ).isRequired, + onChange: PropTypes.func.isRequired, + className: PropTypes.string, + label: PropTypes.string, + value: PropTypes.string, +}; + +export default CountryInput; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/index.js b/plugins/woocommerce-blocks/assets/js/base/components/country-input/index.js new file mode 100644 index 00000000000..b91d8c76cd8 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/index.js @@ -0,0 +1,3 @@ +export { default as CountryInput } from './country-input'; +export { default as BillingCountryInput } from './billing-country-input'; +export { default as ShippingCountryInput } from './shipping-country-input'; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/shipping-country-input.js b/plugins/woocommerce-blocks/assets/js/base/components/country-input/shipping-country-input.js new file mode 100644 index 00000000000..07e06e035b2 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/shipping-country-input.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; +import { SHIPPING_COUNTRIES } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import CountryInput from './country-input.js'; + +const ShippingCountryInput = ( props ) => { + return ; +}; + +ShippingCountryInput.propTypes = { + onChange: PropTypes.func.isRequired, + className: PropTypes.string, + label: PropTypes.string, + value: PropTypes.string, +}; + +export default ShippingCountryInput; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss new file mode 100644 index 00000000000..746760b320f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/style.scss @@ -0,0 +1,52 @@ +.wc-block-country-input { + position: relative; + margin-top: $gap; + + label { + position: absolute; + transform: translateX(#{$gap}) translateY(#{$gap-small}); + transform-origin: top left; + transition: all 200ms ease; + font-size: 16px; + line-height: 22px; + color: $gray-50; + z-index: 1; + + @media screen and (prefers-reduced-motion: reduce) { + transition: none; + } + } + + &.is-active label { + transform: translateX(#{$gap}) translateY(#{$gap-smallest}) scale(0.75); + } + + .components-custom-select-control__button { + background-color: #fff; + font-size: 16px; + font-weight: normal; + height: 100%; + line-height: 1; + padding: $gap-large $gap $gap-smallest; + width: 100%; + + &:hover, + &:focus, + &:active { + background-color: #fff; + } + } + + .components-custom-select-control__menu { + background-color: #fff; + margin: 0; + max-height: 300px; + overflow: auto; + } + + .components-custom-select-control__item { + font-size: 16px; + margin-left: 0; + padding-left: $gap; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss index 1ac45f48fa9..56acba8b053 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/input-row/style.scss @@ -3,8 +3,10 @@ flex-wrap: wrap; justify-content: space-between; - & > .wc-block-text-input { + > .wc-block-country-input, + > .wc-block-text-input { margin-right: $gap-small; + flex-basis: 0; flex-grow: 1; margin-top: $gap; &:last-child { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss index 316487637ef..8cb823c4fb5 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss @@ -21,6 +21,7 @@ .wc-block-text-input input[type="url"], .wc-block-text-input input[type="text"], .wc-block-text-input input[type="email"] { + background-color: #fff; padding: $gap-small $gap; border-radius: 4px; border: 1px solid $input-border-gray; @@ -32,6 +33,10 @@ box-sizing: border-box; height: 48px; color: $input-text-active; + + &:focus { + background-color: #fff; + } } .wc-block-text-input.is-active input[type="tel"], .wc-block-text-input.is-active input[type="url"], diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js index eefa2dd9c7d..330deeabec5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js @@ -7,6 +7,7 @@ import FormStep from '@woocommerce/base-components/checkout/form-step'; 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 RadioControl from '@woocommerce/base-components/radio-control'; import InputRow from '@woocommerce/base-components/input-row'; import { CheckboxControl } from '@wordpress/components'; @@ -179,7 +180,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => { } /> - array_sum( (array) $product_counts ), 'attributes' => array_values( wc_get_attribute_taxonomies() ), 'wcBlocksAssetUrl' => plugins_url( 'assets/', __DIR__ ), + 'shippingCountries' => WC()->countries->get_shipping_countries(), + 'allowedCountries' => WC()->countries->get_allowed_countries(), 'restApiRoutes' => [ '/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ), ],