Add type to checkout input fields (https://github.com/woocommerce/woocommerce-blocks/pull/1401)

* add input type

* fix css issues with types and better change default position

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

@@ -14,6 +14,7 @@ import './style.scss';
 const TextInput = ( {
 	className,
 	id,
+	type = 'text',
 	ariaLabel,
 	label,
 	screenReaderLabel,
@@ -40,7 +41,7 @@ const TextInput = ( {
 				htmlFor={ id }
 			/>
 			<input
-				type="text"
+				type={ type }
 				id={ id }
 				value={ value }
 				onChange={ onChangeValue }

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

@@ -16,8 +16,10 @@
 	transform: translateX(#{$gap - $gap-small}) translateY(#{$gap-smallest}) scale(0.75);
 	transition: all 200ms ease;
 }
-
-.wc-blocks-text-input input[type="text"] {
+.wc-blocks-text-input input[type="tel"],
+.wc-blocks-text-input input[type="url"],
+.wc-blocks-text-input input[type="text"],
+.wc-blocks-text-input input[type="email"] {
 	padding: $gap-small $gap;
 	border-radius: 4px;
 	border: 1px solid $input-border-gray;
@@ -30,7 +32,9 @@
 	height: 48px;
 	color: $input-text-active;
 }
-
-.wc-blocks-text-input.is-active input[type="text"] {
+.wc-blocks-text-input.is-active input[type="tel"],
+.wc-blocks-text-input.is-active input[type="url"],
+.wc-blocks-text-input.is-active input[type="text"],
+.wc-blocks-text-input.is-active input[type="email"] {
 	padding: $gap-large $gap $gap-smallest;
 }

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

@@ -51,6 +51,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 			>
 				<TextInput
 					id="email-field"
+					type="email"
 					label={ __(
 						'Email address',
 						'woo-gutenberg-products-block'
@@ -230,6 +231,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 						</InputRow>
 						<TextInput
 							id="shipping-phone"
+							type="tel"
 							label={ __(
 								'Phone',
 								'woo-gutenberg-products-block'