From aa1c300197603778d7a78b1ff84529ec59a04c71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 14:59:48 +0200
Subject: [PATCH 1/9] Create Label and OrderSelect components

---
 assets/js/base/components/label/index.js      | 61 +++++++++++++
 .../label/test/__snapshots__/index.js.snap    | 62 ++++++++++++++
 assets/js/base/components/label/test/index.js | 85 +++++++++++++++++++
 .../base/components/load-more-button/index.js | 18 ++--
 .../js/base/components/order-select/index.js  | 58 +++++++++++++
 .../style.scss                                |  4 +-
 .../components/review-order-select/index.js   | 47 ++++------
 package.json                                  |  1 +
 8 files changed, 290 insertions(+), 46 deletions(-)
 create mode 100644 assets/js/base/components/label/index.js
 create mode 100644 assets/js/base/components/label/test/__snapshots__/index.js.snap
 create mode 100644 assets/js/base/components/label/test/index.js
 create mode 100644 assets/js/base/components/order-select/index.js
 rename assets/js/base/components/{review-order-select => order-select}/style.scss (63%)

diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js
new file mode 100644
index 00000000000..dcf6ad69d68
--- /dev/null
+++ b/assets/js/base/components/label/index.js
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import elementType from 'prop-types-elementtype';
+import { Fragment } from 'react';
+import classNames from 'classnames';
+
+const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProps } ) => {
+	if ( label && screenReaderLabel && label !== screenReaderLabel ) {
+		return (
+			<Wrapper { ...wrapperProps }>
+				<span aria-hidden>
+					{ label }
+				</span>
+				<span className="screen-reader-text">
+					{ screenReaderLabel }
+				</span>
+			</Wrapper>
+		);
+	}
+
+	if ( ! label && screenReaderLabel ) {
+		if ( typeof Wrapper === 'symbol' && Symbol.keyFor( Wrapper ) === 'react.fragment' ) {
+			Wrapper = 'span';
+		}
+		wrapperProps = {
+			...wrapperProps,
+			className: classNames( wrapperProps.className, 'screen-reader-text' ),
+		};
+
+		return (
+			<Wrapper { ...wrapperProps }>
+				{ screenReaderLabel }
+			</Wrapper>
+		);
+	}
+
+	return (
+		<Wrapper { ...wrapperProps }>
+			{ label }
+		</Wrapper>
+	);
+};
+
+Label.propTypes = {
+	label: PropTypes.string,
+	screenReaderLabel: PropTypes.string,
+	wrapperElement: PropTypes.oneOfType( [
+		PropTypes.string,
+		elementType,
+	] ),
+	wrapperProps: PropTypes.object,
+};
+
+Label.defaultProps = {
+	wrapperElement: Fragment,
+	wrapperProps: {},
+};
+
+export default Label;
diff --git a/assets/js/base/components/label/test/__snapshots__/index.js.snap b/assets/js/base/components/label/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000..30bdb1fe5da
--- /dev/null
+++ b/assets/js/base/components/label/test/__snapshots__/index.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label with wrapperElement should render both label and screen reader label 1`] = `
+<label
+  className="foo-bar"
+  data-foo="bar"
+>
+  <span
+    aria-hidden={true}
+  >
+    Lorem
+  </span>
+  <span
+    className="screen-reader-text"
+  >
+    Ipsum
+  </span>
+</label>
+`;
+
+exports[`Label with wrapperElement should render only the label 1`] = `
+<label
+  className="foo-bar"
+  data-foo="bar"
+>
+  Lorem
+</label>
+`;
+
+exports[`Label with wrapperElement should render only the scree reader label 1`] = `
+<label
+  className="foo-bar screen-reader-text"
+  data-foo="bar"
+>
+  Ipsum
+</label>
+`;
+
+exports[`Label without wrapperElement should render both label and screen reader label 1`] = `
+Array [
+  <span
+    aria-hidden={true}
+  >
+    Lorem
+  </span>,
+  <span
+    className="screen-reader-text"
+  >
+    Ipsum
+  </span>,
+]
+`;
+
+exports[`Label without wrapperElement should render only the label 1`] = `"Lorem"`;
+
+exports[`Label without wrapperElement should render only the scree reader label 1`] = `
+<span
+  className="screen-reader-text"
+>
+  Ipsum
+</span>
+`;
diff --git a/assets/js/base/components/label/test/index.js b/assets/js/base/components/label/test/index.js
new file mode 100644
index 00000000000..bd573d051d8
--- /dev/null
+++ b/assets/js/base/components/label/test/index.js
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import Label from '../';
+
+describe( 'Label', () => {
+	describe( 'without wrapperElement', () => {
+		test( 'should render both label and screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label label="Lorem" screenReaderLabel="Ipsum" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the label', () => {
+			const component = TestRenderer.create(
+				<Label label="Lorem" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label screenReaderLabel="Ipsum" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'with wrapperElement', () => {
+		test( 'should render both label and screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label
+					label="Lorem"
+					screenReaderLabel="Ipsum"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the label', () => {
+			const component = TestRenderer.create(
+				<Label
+					label="Lorem"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label
+					screenReaderLabel="Ipsum"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+} );
diff --git a/assets/js/base/components/load-more-button/index.js b/assets/js/base/components/load-more-button/index.js
index f1eb708228a..eb52bb4b4cf 100644
--- a/assets/js/base/components/load-more-button/index.js
+++ b/assets/js/base/components/load-more-button/index.js
@@ -2,33 +2,25 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
+import Label from '../label';
 import './style.scss';
 
 export const LoadMoreButton = ( { onClick, label, screenReaderLabel } ) => {
-	const labelNode = ( screenReaderLabel && label !== screenReaderLabel ) ? (
-		<Fragment>
-			<span aria-hidden>
-				{ label }
-			</span>
-			<span className="screen-reader-text">
-				{ screenReaderLabel }
-			</span>
-		</Fragment>
-	) : label;
-
 	return (
 		<div className="wp-block-button wc-block-load-more">
 			<button
 				className="wp-block-button__link"
 				onClick={ onClick }
 			>
-				{ labelNode }
+				<Label
+					label={ label }
+					screenReaderLabel={ screenReaderLabel }
+				/>
 			</button>
 		</div>
 	);
diff --git a/assets/js/base/components/order-select/index.js b/assets/js/base/components/order-select/index.js
new file mode 100644
index 00000000000..b7dbcc62c44
--- /dev/null
+++ b/assets/js/base/components/order-select/index.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import Label from '../label';
+import './style.scss';
+
+const OrderSelect = ( { componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
+	const selectId = `wc-block-order-select__select-${ componentId }`;
+
+	return (
+		<p className="wc-block-order-select">
+			<Label
+				label={ label }
+				screenReaderLabel={ screenReaderLabel }
+				wrapperElement="label"
+				wrapperProps={ {
+					className: 'wc-block-order-select__label',
+					htmlFor: selectId,
+				} }
+			/>
+			<select // eslint-disable-line jsx-a11y/no-onchange
+				id={ selectId }
+				className="wc-block-order-select__select"
+				defaultValue={ defaultValue }
+				onChange={ onChange }
+				readOnly={ readOnly }
+				value={ value }
+			>
+				{ options.map( ( option ) => (
+					<option key={ option.key } value={ option.key }>
+						{ option.label }
+					</option>
+				) ) }
+			</select>
+		</p>
+	);
+};
+
+OrderSelect.propTypes = {
+	componentId: PropTypes.number.isRequired,
+	defaultValue: PropTypes.string,
+	label: PropTypes.string,
+	onChange: PropTypes.func,
+	options: PropTypes.arrayOf( PropTypes.shape( {
+		key: PropTypes.string.isRequired,
+		label: PropTypes.string.isRequired,
+	} ) ),
+	readOnly: PropTypes.bool,
+	screenReaderLabel: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default OrderSelect;
diff --git a/assets/js/base/components/review-order-select/style.scss b/assets/js/base/components/order-select/style.scss
similarity index 63%
rename from assets/js/base/components/review-order-select/style.scss
rename to assets/js/base/components/order-select/style.scss
index be5e57584f3..c4c18c0a292 100644
--- a/assets/js/base/components/review-order-select/style.scss
+++ b/assets/js/base/components/order-select/style.scss
@@ -1,9 +1,9 @@
-.wc-block-review-order-select {
+.wc-block-order-select {
 	margin-bottom: $gap-small;
 	text-align: right;
 }
 
-.wc-block-review-order-select__label {
+.wc-block-order-select__label {
 	margin-right: $gap-small;
 	display: inline-block;
 	font-weight: normal;
diff --git a/assets/js/base/components/review-order-select/index.js b/assets/js/base/components/review-order-select/index.js
index edac7a1566d..5f9f8cc9c22 100644
--- a/assets/js/base/components/review-order-select/index.js
+++ b/assets/js/base/components/review-order-select/index.js
@@ -7,45 +7,30 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import './style.scss';
+import OrderSelect from '../order-select';
 
 const ReviewOrderSelect = ( { componentId, defaultValue, onChange, readOnly, value } ) => {
-	const selectId = `wc-block-review-order-select__select-${ componentId }`;
-
 	return (
-		<p className="wc-block-review-order-select">
-			<label className="wc-block-review-order-select__label" htmlFor={ selectId }>
-				<span aria-hidden>
-					{ __( 'Order by', 'woo-gutenberg-products-block' ) }
-				</span>
-				<span className="screen-reader-text">
-					{ __( 'Order reviews by', 'woo-gutenberg-products-block' ) }
-				</span>
-			</label>
-			<select // eslint-disable-line jsx-a11y/no-onchange
-				id={ selectId }
-				className="wc-block-review-order-select__select"
-				defaultValue={ defaultValue }
-				onChange={ onChange }
-				readOnly={ readOnly }
-				value={ value }
-			>
-				<option value="most-recent">
-					{ __( 'Most recent', 'woo-gutenberg-products-block' ) }
-				</option>
-				<option value="highest-rating">
-					{ __( 'Highest rating', 'woo-gutenberg-products-block' ) }
-				</option>
-				<option value="lowest-rating">
-					{ __( 'Lowest rating', 'woo-gutenberg-products-block' ) }
-				</option>
-			</select>
-		</p>
+		<OrderSelect
+			componentId={ componentId }
+			defaultValue={ defaultValue }
+			label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
+			onChange={ onChange }
+			options={ [
+				{ key: 'most-recent', label: __( 'Most recent', 'woo-gutenberg-products-block' ) },
+				{ key: 'highest-rating', label: __( 'Highest rating', 'woo-gutenberg-products-block' ) },
+				{ key: 'lowest-rating', label: __( 'Lowest rating', 'woo-gutenberg-products-block' ) },
+			] }
+			readOnly={ readOnly }
+			screenReaderLabel={ __( 'Order reviews by', 'woo-gutenberg-products-block' ) }
+			value={ value }
+		/>
 	);
 };
 
 ReviewOrderSelect.propTypes = {
 	componentId: PropTypes.number.isRequired,
+	defaultValue: PropTypes.oneOf( [ 'most-recent', 'highest-rating', 'lowest-rating' ] ),
 	onChange: PropTypes.func,
 	readOnly: PropTypes.bool,
 	value: PropTypes.oneOf( [ 'most-recent', 'highest-rating', 'lowest-rating' ] ),
diff --git a/package.json b/package.json
index 7a6d7ec611d..ae10118677c 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "postcss-loader": "3.0.0",
     "progress-bar-webpack-plugin": "1.12.1",
     "promptly": "3.0.3",
+    "prop-types-elementtype": "^1.0.0",
     "react-test-renderer": "16.8.6",
     "request-promise": "4.2.4",
     "rimraf": "2.7.1",

From e14f574a29b8ae0164fad80a8b9fecdd788459b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 15:20:33 +0200
Subject: [PATCH 2/9] Update review list item so it uses 'classnames'

---
 .../base/components/review-list-item/index.js   | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/assets/js/base/components/review-list-item/index.js b/assets/js/base/components/review-list-item/index.js
index c35f8c445b7..28ae57d2c79 100644
--- a/assets/js/base/components/review-list-item/index.js
+++ b/assets/js/base/components/review-list-item/index.js
@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -10,16 +11,6 @@ import PropTypes from 'prop-types';
 import ReadMore from '../read-more';
 import './style.scss';
 
-function getReviewClasses( isLoading ) {
-	const classArray = [ 'wc-block-review-list-item__item' ];
-
-	if ( isLoading ) {
-		classArray.push( 'is-loading' );
-	}
-
-	return classArray.join( ' ' );
-}
-
 function getReviewImage( review, imageType, isLoading ) {
 	if ( isLoading || ! review ) {
 		return (
@@ -108,10 +99,12 @@ const ReviewListItem = ( { attributes, review = {} } ) => {
 	const { rating } = review;
 	const isLoading = ! Object.keys( review ).length > 0;
 	const showReviewRating = Number.isFinite( rating ) && showReviewRatingAttr;
-	const classes = getReviewClasses( isLoading );
 
 	return (
-		<li className={ classes } aria-hidden={ isLoading }>
+		<li
+			className={ classNames( 'wc-block-review-list-item__item', { 'is-loading': isLoading } ) }
+			aria-hidden={ isLoading }
+		>
 			{ ( showProductName || showReviewDate || showReviewerName || showReviewImage || showReviewRating ) && (
 				<div className="wc-block-review-list-item__info">
 					{ showReviewImage && getReviewImage( review, imageType, isLoading ) }

From a457fa1477262624085daf7713d0f6adf6c55563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 15:20:55 +0200
Subject: [PATCH 3/9] Split review order select styles from generic component

---
 assets/js/base/components/order-select/index.js          | 5 +++--
 assets/js/base/components/order-select/style.scss        | 1 -
 assets/js/base/components/review-order-select/index.js   | 2 ++
 assets/js/base/components/review-order-select/style.scss | 3 +++
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/base/components/review-order-select/style.scss

diff --git a/assets/js/base/components/order-select/index.js b/assets/js/base/components/order-select/index.js
index b7dbcc62c44..211e71cc826 100644
--- a/assets/js/base/components/order-select/index.js
+++ b/assets/js/base/components/order-select/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -9,11 +10,11 @@ import PropTypes from 'prop-types';
 import Label from '../label';
 import './style.scss';
 
-const OrderSelect = ( { componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
+const OrderSelect = ( { className, componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
 	const selectId = `wc-block-order-select__select-${ componentId }`;
 
 	return (
-		<p className="wc-block-order-select">
+		<p className={ classNames( 'wc-block-order-select', className ) }>
 			<Label
 				label={ label }
 				screenReaderLabel={ screenReaderLabel }
diff --git a/assets/js/base/components/order-select/style.scss b/assets/js/base/components/order-select/style.scss
index c4c18c0a292..754eb573c66 100644
--- a/assets/js/base/components/order-select/style.scss
+++ b/assets/js/base/components/order-select/style.scss
@@ -1,6 +1,5 @@
 .wc-block-order-select {
 	margin-bottom: $gap-small;
-	text-align: right;
 }
 
 .wc-block-order-select__label {
diff --git a/assets/js/base/components/review-order-select/index.js b/assets/js/base/components/review-order-select/index.js
index 5f9f8cc9c22..f55cca8f67b 100644
--- a/assets/js/base/components/review-order-select/index.js
+++ b/assets/js/base/components/review-order-select/index.js
@@ -8,10 +8,12 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import OrderSelect from '../order-select';
+import './style.scss';
 
 const ReviewOrderSelect = ( { componentId, defaultValue, onChange, readOnly, value } ) => {
 	return (
 		<OrderSelect
+			className="wc-block-review-order-select"
 			componentId={ componentId }
 			defaultValue={ defaultValue }
 			label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/base/components/review-order-select/style.scss b/assets/js/base/components/review-order-select/style.scss
new file mode 100644
index 00000000000..821a78bfb5e
--- /dev/null
+++ b/assets/js/base/components/review-order-select/style.scss
@@ -0,0 +1,3 @@
+.wc-block-review-order-select {
+	text-align: right;
+}

From 0751dbf63df9d99c55f223e5781bf2c8cc7d189c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 16:59:19 +0200
Subject: [PATCH 4/9] Update snapshots

---
 .../js/base/components/label/test/__snapshots__/index.js.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/label/test/__snapshots__/index.js.snap b/assets/js/base/components/label/test/__snapshots__/index.js.snap
index 30bdb1fe5da..980093315ad 100644
--- a/assets/js/base/components/label/test/__snapshots__/index.js.snap
+++ b/assets/js/base/components/label/test/__snapshots__/index.js.snap
@@ -27,7 +27,7 @@ exports[`Label with wrapperElement should render only the label 1`] = `
 </label>
 `;
 
-exports[`Label with wrapperElement should render only the scree reader label 1`] = `
+exports[`Label with wrapperElement should render only the screen reader label 1`] = `
 <label
   className="foo-bar screen-reader-text"
   data-foo="bar"
@@ -53,7 +53,7 @@ Array [
 
 exports[`Label without wrapperElement should render only the label 1`] = `"Lorem"`;
 
-exports[`Label without wrapperElement should render only the scree reader label 1`] = `
+exports[`Label without wrapperElement should render only the screen reader label 1`] = `
 <span
   className="screen-reader-text"
 >

From d398806a803712c6a5d8eb591649c910158b4583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 17:11:45 +0200
Subject: [PATCH 5/9] Refactor Label so we don't need to check Symbol

---
 assets/js/base/components/label/index.js | 35 ++++++++++++------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js
index dcf6ad69d68..a0a2037fed0 100644
--- a/assets/js/base/components/label/index.js
+++ b/assets/js/base/components/label/index.js
@@ -6,24 +6,11 @@ import elementType from 'prop-types-elementtype';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 
-const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProps } ) => {
-	if ( label && screenReaderLabel && label !== screenReaderLabel ) {
-		return (
-			<Wrapper { ...wrapperProps }>
-				<span aria-hidden>
-					{ label }
-				</span>
-				<span className="screen-reader-text">
-					{ screenReaderLabel }
-				</span>
-			</Wrapper>
-		);
-	}
+const Label = ( { label, screenReaderLabel, wrapperElement, wrapperProps } ) => {
+	let Wrapper;
 
 	if ( ! label && screenReaderLabel ) {
-		if ( typeof Wrapper === 'symbol' && Symbol.keyFor( Wrapper ) === 'react.fragment' ) {
-			Wrapper = 'span';
-		}
+		Wrapper = wrapperElement || 'span';
 		wrapperProps = {
 			...wrapperProps,
 			className: classNames( wrapperProps.className, 'screen-reader-text' ),
@@ -36,6 +23,21 @@ const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProp
 		);
 	}
 
+	Wrapper = wrapperElement || Fragment;
+
+	if ( label && screenReaderLabel && label !== screenReaderLabel ) {
+		return (
+			<Wrapper { ...wrapperProps }>
+				<span aria-hidden>
+					{ label }
+				</span>
+				<span className="screen-reader-text">
+					{ screenReaderLabel }
+				</span>
+			</Wrapper>
+		);
+	}
+
 	return (
 		<Wrapper { ...wrapperProps }>
 			{ label }
@@ -54,7 +56,6 @@ Label.propTypes = {
 };
 
 Label.defaultProps = {
-	wrapperElement: Fragment,
 	wrapperProps: {},
 };
 

From b7ed466dc46cd15c91d4a1984d6d76dfc803c297 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 17:13:42 +0200
Subject: [PATCH 6/9] Add description to Label and OrderSelect components

---
 assets/js/base/components/label/index.js        | 5 +++++
 assets/js/base/components/order-select/index.js | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js
index a0a2037fed0..e88125bce9b 100644
--- a/assets/js/base/components/label/index.js
+++ b/assets/js/base/components/label/index.js
@@ -6,6 +6,11 @@ import elementType from 'prop-types-elementtype';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 
+/**
+ * Component used to render an accessible text given a label and/or a
+ * screenReaderLabel. The wrapper element and wrapper props can also be
+ * specified via props.
+ */
 const Label = ( { label, screenReaderLabel, wrapperElement, wrapperProps } ) => {
 	let Wrapper;
 
diff --git a/assets/js/base/components/order-select/index.js b/assets/js/base/components/order-select/index.js
index 211e71cc826..051a7107727 100644
--- a/assets/js/base/components/order-select/index.js
+++ b/assets/js/base/components/order-select/index.js
@@ -10,6 +10,10 @@ import classNames from 'classnames';
 import Label from '../label';
 import './style.scss';
 
+/**
+ * Component used for 'Order by' selectors, which renders a label
+ * and a <select> with the options provided in the props.
+ */
 const OrderSelect = ( { className, componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
 	const selectId = `wc-block-order-select__select-${ componentId }`;
 

From 850dc6280e06a00a1e8ef65ac10b169ccdf504cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 17:17:49 +0200
Subject: [PATCH 7/9] Use prop-types instead of prop-types-elementtype

---
 assets/js/base/components/label/index.js | 3 +--
 package.json                             | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js
index e88125bce9b..6ee52d611f7 100644
--- a/assets/js/base/components/label/index.js
+++ b/assets/js/base/components/label/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import elementType from 'prop-types-elementtype';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 
@@ -55,7 +54,7 @@ Label.propTypes = {
 	screenReaderLabel: PropTypes.string,
 	wrapperElement: PropTypes.oneOfType( [
 		PropTypes.string,
-		elementType,
+		PropTypes.elementType,
 	] ),
 	wrapperProps: PropTypes.object,
 };
diff --git a/package.json b/package.json
index ae10118677c..7a6d7ec611d 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,6 @@
     "postcss-loader": "3.0.0",
     "progress-bar-webpack-plugin": "1.12.1",
     "promptly": "3.0.3",
-    "prop-types-elementtype": "^1.0.0",
     "react-test-renderer": "16.8.6",
     "request-promise": "4.2.4",
     "rimraf": "2.7.1",

From 1fcd28aa27f99e7cfbc6795cd8c065517aac2eb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 18:08:13 +0200
Subject: [PATCH 8/9] Simplify Label propTypes

---
 assets/js/base/components/label/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/assets/js/base/components/label/index.js b/assets/js/base/components/label/index.js
index 6ee52d611f7..9079b225a91 100644
--- a/assets/js/base/components/label/index.js
+++ b/assets/js/base/components/label/index.js
@@ -52,10 +52,7 @@ const Label = ( { label, screenReaderLabel, wrapperElement, wrapperProps } ) =>
 Label.propTypes = {
 	label: PropTypes.string,
 	screenReaderLabel: PropTypes.string,
-	wrapperElement: PropTypes.oneOfType( [
-		PropTypes.string,
-		PropTypes.elementType,
-	] ),
+	wrapperElement: PropTypes.elementType,
 	wrapperProps: PropTypes.object,
 };
 

From 672a99c468401c87398e6756260d2729862172df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Fri, 23 Aug 2019 18:32:09 +0200
Subject: [PATCH 9/9] Update package-lock

---
 package-lock.json | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index af26f4062f4..d6c41e60027 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18323,12 +18323,13 @@
       }
     },
     "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
       }
     },
     "prop-types-exact": {