Remove Newspack Dependency (https://github.com/woocommerce/woocommerce-admin/pull/3302)

* Switch to @wordpress/component's Button

* Finish button conversion

* Move to @wp/component's CheckboxControl

* Add  ImageUpload component

* Remove Newspack package

* CSS Cleanup

* Handle PR feedback: Fix tests, add ImageUploader basic test, fix FireFox/Safari Display issues, and  currency input bug

plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss

@@ -49,6 +49,12 @@
 	}
 }
 
+.woocommerce-setting__options-group {
+	input[type='checkbox']:checked::before {
+		content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
+	}
+}
+
 .woocommerce-settings-historical-data__progress-label {
 	display: inline-block;
 	font-weight: bold;

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js

@@ -5,8 +5,7 @@
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { FormToggle } from '@wordpress/components';
+import { Button, FormToggle } from '@wordpress/components';
-import { Button } from 'newspack-components';
 import { withDispatch } from '@wordpress/data';
 import { keys, get, pickBy } from 'lodash';
 

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
-import { Button, CheckboxControl } from 'newspack-components';
+import { Button, CheckboxControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { filter, get, includes } from 'lodash';
 import { withDispatch } from '@wordpress/data';
@@ -106,6 +106,7 @@ class Industry extends Component {
 									label={ industries[ slug ] }
 									onChange={ () => this.onChange( slug ) }
 									checked={ selected.includes( slug ) }
+									className="woocommerce-profile-wizard__checkbox"
 								/>
 							);
 						} ) }

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { difference } from 'lodash';

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js

@@ -5,7 +5,7 @@
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { Button, CheckboxControl } from 'newspack-components';
+import { Button, CheckboxControl } from '@wordpress/components';
 import { includes, filter, get } from 'lodash';
 import interpolateComponents from 'interpolate-components';
 import { withDispatch } from '@wordpress/data';
@@ -129,6 +129,7 @@ class ProductTypes extends Component {
 									help={ helpText }
 									onChange={ () => this.onChange( slug ) }
 									checked={ selected.includes( slug ) }
+									className="woocommerce-profile-wizard__checkbox"
 								/>
 							);
 						} ) }

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import interpolateComponents from 'interpolate-components';

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Button, CheckboxControl } from 'newspack-components';
+import { Button, CheckboxControl } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
@@ -162,10 +162,13 @@ class StoreDetails extends Component {
 									/>
 								) }
 								<StoreAddress getInputProps={ getInputProps } setValue={ setValue } />
-								<CheckboxControl
+
-									label={ __( "I'm setting up a store for a client", 'woocommerce-admin' ) }
+								<div className="woocommerce-profile-wizard__client">
-									{ ...getInputProps( 'isClient' ) }
+									<CheckboxControl
-								/>
+										label={ __( "I'm setting up a store for a client", 'woocommerce-admin' ) }
+										{ ...getInputProps( 'isClient' ) }
+									/>
+								</div>
 
 								<Button isPrimary onClick={ handleSubmit } disabled={ ! isValidForm }>
 									{ __( 'Continue', 'woocommerce-admin' ) }

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/index.js

@@ -4,13 +4,12 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { Button } from 'newspack-components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { get } from 'lodash';
 import Gridicon from 'gridicons';
-import { TabPanel, Tooltip } from '@wordpress/components';
+import { Button, TabPanel, Tooltip } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
 /**

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/preview.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';
 import interpolateComponents from 'interpolate-components';

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/style.scss

@@ -202,7 +202,7 @@
 		padding-right: $gap;
 		align-items: center;
 
-		.muriel-button.is-button.is-primary {
+		.is-button.is-primary {
 			height: 40px;
 			margin: 0;
 
@@ -230,7 +230,7 @@
 		margin-left: auto;
 		margin-right: $gap;
 
-		.muriel-button {
+		.woocommerce-theme-preview__device {
 			padding: $gap-small;
 			color: $studio-gray-50;
 			margin: 0;

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/usage-modal.js

@@ -3,13 +3,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, CheckboxControl } from 'newspack-components';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
 import { get } from 'lodash';
 import interpolateComponents from 'interpolate-components';
-import { FormToggle, Modal } from '@wordpress/components';
+import { Button, CheckboxControl, FormToggle, Modal } from '@wordpress/components';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss

@@ -27,7 +27,7 @@
 		color: $studio-gray-60;
 		text-align: left;
 
-		.muriel-button {
+		button.is-button {
 			display: flex;
 			margin: $gap-smaller auto 0;
 			width: 310px;
@@ -190,6 +190,14 @@
 	}
 
 	.woocommerce-profile-wizard__tracking {
+		.woocommerce-profile-wizard__tracking-checkbox {
+			margin-top: $gap;
+			.components-checkbox-control__input[type='checkbox']:checked {
+				background-color: $studio-woocommerce-purple-60;
+				border-color: $studio-woocommerce-purple-60;
+			}
+		}
+
 		.components-form-toggle {
 			display: none;
 		}
@@ -206,29 +214,23 @@
 			flex-direction: row-reverse;
 			align-items: center;
 			justify-content: flex-end;
-
-			.muriel-checkbox label.components-checkbox-control__label {
-				display: inline-block;
-				margin-left: $gap-small;
-			}
 		}
 	}
 
+	.woocommerce-profile-wizard__client {
+		margin-bottom: $gap-large;
+	}
+
 	.woocommerce-profile-wizard__checkbox-group {
 		margin: #{-$gap} #{-$gap} 0 -#{$gap};
 
-		.muriel-checkbox {
+		.woocommerce-profile-wizard__checkbox {
 			margin-top: 0;
 			margin-bottom: 0;
 			position: relative;
 			padding: $gap-small $gap;
 			min-height: 56px;
 
-			input[type='checkbox']:checked::before {
-				left: -1px;
-				top: 0;
-			}
-
 			&::after {
 				content: '';
 				position: absolute;
@@ -249,7 +251,7 @@
 
 			.components-checkbox-control__input {
 				position: absolute;
-				top: 7px;
+				top: 0;
 				left: 3px;
 			}
 
@@ -258,9 +260,13 @@
 				margin-top: $gap-smallest;
 			}
 
-			label.components-checkbox-control__label,
+			label.components-checkbox-control__label {
+				margin-left: $gap-large - $gap-smallest;
+			}
+
 			.components-base-control__help {
-				margin-left: $gap-large * 2;
+				margin-left: $gap-largest + $gap-smaller;
+				font-style: normal;
 			}
 
 			.components-base-control__help {
@@ -277,6 +283,20 @@
 				}
 			}
 		}
+
+		svg.dashicon.components-checkbox-control__checked {
+			left: 1px;
+			top: -1px;
+		}
+	}
+
+	@include breakpoint( '<600px' ) {
+		svg.dashicon.components-checkbox-control__checked {
+			left: -2px;
+			top: -1px;
+			width: 21px;
+			height: 21px;
+		}
 	}
 
 	.woocommerce-select-control__control {
@@ -331,7 +351,7 @@
 		margin-left: 44px;
 		min-height: 28px;
 
-		button.muriel-button {
+		button.is-button {
 			margin: 0;
 			height: 40px;
 			min-width: auto;
@@ -384,17 +404,7 @@
 		}
 
 		button.is-primary {
-			min-width: 160px;
 			align-self: flex-end;
-			margin-bottom: 0;
-		}
-
-		.muriel-checkbox input[type='checkbox']:checked {
-			content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
-		}
-
-		.muriel-checkbox label.components-checkbox-control__label {
-			font-size: 13px;
 		}
 	}
 }

plugins/woocommerce-admin/client/dashboard/style.scss

@@ -123,37 +123,6 @@
 		}
 	}
 
-	.muriel-checkbox label.components-checkbox-control__label {
-		margin-left: $gap-smaller;
-	}
-
-	.muriel-checkbox input[type='checkbox'] {
-		width: 18px;
-		height: 18px;
-	}
-
-	.muriel-button.is-button {
-		height: 48px;
-
-		&.is-busy {
-			cursor: progress;
-			/* stylelint-disable function-parentheses-space-inside, function-comma-space-after */
-			background-image: linear-gradient(
-				-45deg,
-				$studio-pink-50 28%,
-				color($studio-pink-50 shade(30%)) 28%,
-				color($studio-pink-50 shade(30%)) 72%,
-				$studio-pink-50 72%
-			) !important; // Gutenberg & PostCSS Add the gradient late in output, based on the 'primary' color, which in our case is purple. Our busy state should be pink.
-			/* stylelint-enable */
-		}
-	}
-
-	.muriel-checkbox input[type='checkbox']:checked {
-		background-color: $studio-woocommerce-purple-60;
-		border-color: $studio-woocommerce-purple-60;
-	}
-
 	.components-form-toggle {
 		display: inline-block;
 
@@ -176,10 +145,6 @@
 			margin-bottom: 0;
 		}
 
-		.muriel-checkbox label.components-checkbox-control__label {
-			margin-left: $gap-large;
-		}
-
 		&.is-checked {
 			.components-form-toggle__track {
 				background-color: $studio-woocommerce-purple-60;
@@ -188,3 +153,29 @@
 		}
 	}
 }
+
+.woocommerce-task-dashboard__container .components-button.is-button,
+.woocommerce-profile-wizard__body .components-button.is-button,
+.woocommerce-page .components-modal__frame .components-button.is-button {
+	height: 48px;
+	padding-left: 25px;
+	padding-right: 25px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 36px;
+	font-weight: 500;
+
+	&.is-primary.is-busy,
+	&.is-primary.is-busy:active:enabled {
+		cursor: progress;
+		/* stylelint-disable function-parentheses-space-inside, function-comma-space-after */
+		background-image: linear-gradient(
+			-45deg,
+			$studio-pink-50 28%,
+			color($studio-pink-50 shade(30%)) 28%,
+			color($studio-pink-50 shade(30%)) 72%,
+			$studio-pink-50 72%
+		) !important; // Gutenberg & PostCSS Add the gradient late in output, based on the 'primary' color, which in our case is purple. Our busy state should be pink.
+		/* stylelint-enable */
+	}
+}

plugins/woocommerce-admin/client/dashboard/task-list/style.scss

@@ -16,12 +16,14 @@
 		margin-right: auto;
 	}
 
-	.muriel-button.components-button,
+	.woocommerce-task-dashboard__container .components-button:not(.components-icon-button),
 	.components-modal__frame .components-button.is-button {
 		height: 40px;
 		min-width: 106px;
 		margin: $gap $gap-smaller 0 0;
 		justify-content: center;
+		font-size: 14px;
+		font-weight: 500;
 
 		&:not(.is-primary) {
 			color: $studio-pink-50;
@@ -182,7 +184,8 @@
 		position: relative;
 
 		.muriel-input-text input {
-			left: $gap * 2;
+			left: $gap;
+			max-width: 90%;
 		}
 
 		.components-base-control {
@@ -194,7 +197,7 @@
 			display: none;
 			position: absolute;
 			left: $gap;
-			top: 28px;
+			top: 25px;
 			z-index: 1;
 			font-size: 16px;
 			line-height: 24px;
@@ -302,9 +305,10 @@
 		margin-left: $gap-larger;
 		padding-top: $gap;
 
-		.components-base-control__field {
+		svg.dashicon.components-checkbox-control__checked {
-			align-items: center;
+			display: block;
-			display: flex;
+			left: -38px;
+			top: -1px;
 		}
 
 		.components-checkbox-control__input {
@@ -367,7 +371,7 @@
 }
 
 .woocommerce-task-appearance {
-	.muriel-image-upload {
+	.woocommerce-image-upload {
 		margin-bottom: $gap-smallest;
 	}
 }

plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Button, ImageUpload } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { difference, filter, isEmpty } from 'lodash';
@@ -13,7 +13,7 @@ import { withDispatch } from '@wordpress/data';
 /**
  * WooCommerce dependencies
  */
-import { Card, Stepper, TextControl } from '@woocommerce/components';
+import { Card, Stepper, TextControl, ImageUpload } from '@woocommerce/components';
 import { getHistory, getNewPath } from '@woocommerce/navigation';
 import { getSetting, setSetting } from '@woocommerce/wc-admin-settings';
 

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js

@@ -7,8 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { Fragment, Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { get, filter, noop, keys, pickBy, difference } from 'lodash';
-import { FormToggle, CheckboxControl } from '@wordpress/components';
+import { Button, FormToggle, CheckboxControl } from '@wordpress/components';
-import { Button } from 'newspack-components';
 import { withDispatch } from '@wordpress/data';
 
 /**

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/klarna.js

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import interpolateComponents from 'interpolate-components';
 
 /**

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js

@@ -5,8 +5,7 @@
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
-import { getQuery } from '@woocommerce/navigation';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import interpolateComponents from 'interpolate-components';
@@ -15,6 +14,7 @@ import interpolateComponents from 'interpolate-components';
  * WooCommerce dependencies
  */
 import { WC_ADMIN_NAMESPACE } from 'wc-api/constants';
+import { getQuery } from '@woocommerce/navigation';
 import { Form, Link, TextControl } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
 import { recordEvent } from 'lib/tracks';

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js

@@ -5,7 +5,7 @@
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { getQuery } from '@woocommerce/navigation';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js

@@ -8,8 +8,7 @@ import { compose } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
 import { withDispatch } from '@wordpress/data';
 import interpolateComponents from 'interpolate-components';
-import { Modal } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
-import { Button } from 'newspack-components';
 import { getQuery } from '@woocommerce/navigation';
 import { get } from 'lodash';
 

plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js

@@ -4,10 +4,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Button } from 'newspack-components';
 import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
-import { FormToggle } from '@wordpress/components';
+import { Button, FormToggle } from '@wordpress/components';
 import PropTypes from 'prop-types';
 
 /**

plugins/woocommerce-admin/client/dashboard/task-list/tasks/steps/connect.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';

plugins/woocommerce-admin/client/dashboard/task-list/tasks/steps/location.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 
 /**

plugins/woocommerce-admin/client/dashboard/task-list/tasks/steps/plugins.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { difference, noop } from 'lodash';

plugins/woocommerce-admin/client/dashboard/task-list/tasks/tax.js

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from 'newspack-components';
+import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { difference, filter, get } from 'lodash';

plugins/woocommerce-admin/client/devdocs/examples.json

@@ -16,6 +16,7 @@
   { "component": "Form" },
   { "component": "Gravatar" },
   { "component": "ImageAsset" },
+  { "component": "ImageUpload" },
   { "component": "Link" },
   { "component": "List" },
   { "component": "OrderStatus" },

plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss

@@ -47,24 +47,6 @@ $alert-red: $error-red;
 $alert-yellow: $notice-yellow;
 $alert-green: $valid-green;
 
-// Newspack variables. These are temporary until we move away from Newspack components.
-$muriel-white: $studio-white;
-$muriel-hot-pink-400: $studio-pink-40;
-$muriel-hot-pink-500: $studio-pink-50;
-$muriel-hot-pink-700: $studio-pink-70;
-$muriel-hot-purple-600: $studio-woocommerce-purple-60;
-$muriel-gray-0: $studio-gray-0;
-$muriel-gray-50: $studio-gray-5;
-$muriel-gray-100: $studio-gray-10;
-$muriel-gray-200: $studio-gray-20;
-$muriel-gray-300: $studio-gray-30;
-$muriel-gray-500: $studio-gray-50;
-$muriel-gray-600: $studio-gray-60;
-$muriel-gray-700: $studio-gray-70;
-$muriel-gray-800: $studio-gray-80;
-$muriel-green-400: $studio-green-40;
-$muriel-red-500: $studio-red-50;
-
 // WordPress defaults
 $adminbar-height: 32px;
 $adminbar-height-mobile: 46px;

plugins/woocommerce-admin/client/stylesheets/shared/_global.scss

@@ -139,38 +139,6 @@
 		margin-top: 4px;
 		background-color: $studio-white;
 	}
-
-	input[type='checkbox']:checked::before,
-	.muriel-checkbox input[type='checkbox']:checked::before {
-		font-size: 16px;
-		color: $studio-white;
-		content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E');
-		margin-left: -2px;
-		margin-top: 0;
-		height: 18px;
-		width: 16px;
-	}
-
-	.muriel-checkbox input[type='checkbox']:checked::before {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		left: 1px;
-		top: 4px;
-	}
-
-	.muriel-input-text input {
-		min-height: auto;
-	}
-
-	.muriel-input-text.with-value input {
-		top: 24px;
-	}
-
-	.muriel-checkbox .components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 
 body.woocommerce-page {

plugins/woocommerce-admin/docs/components/_sidebar.md

@@ -25,6 +25,7 @@
     * [Flag](components/packages/flag/README.md)
     * [Form](components/packages/form/README.md)
     * [Gravatar](components/packages/gravatar/README.md)
+    * [ImageUpload](components/packages/image-upload/README.md)
     * [Link](components/packages/link/README.md)
     * [List](components/packages/list/README.md)
     * [OrderStatus](components/packages/order-status/README.md)

plugins/woocommerce-admin/package-lock.json

@@ -3706,9 +3706,9 @@
       }
     },
     "@wordpress/dom": {
-      "version": "2.5.2",
+      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.6.0.tgz",
-      "integrity": "sha512-b/5MAKN24yKuXMUPP7A6Ha898bm0cSsOdrq5w9kjGZpO/ceP4DxeV/GNoE22uXX+KbV4px9KRXO5H9OcFJyroA==",
+      "integrity": "sha512-ERti77Y7Y0Oix7jfvIvBRX6Jx7hTvg6k6ke6LmeuMo+V7g5abmNEHLU4tL/dGSLNw9/SShStTIPu9Vg2IL44WA==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "lodash": "^4.17.15"
@@ -3914,69 +3914,6 @@
         "rungen": "^0.3.2"
       }
     },
-    "@wordpress/rich-text": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.7.2.tgz",
-      "integrity": "sha512-Mmq+qGBJiLwoEnFN/MqM+o7M2LF1EUYO7FgYwWhlM3m9G+HVBIX3nQeEFADsk3agVYojNbXXowO7Lv8qlZVFDg==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@wordpress/compose": "^3.7.2",
-        "@wordpress/data": "^4.9.2",
-        "@wordpress/deprecated": "^2.6.1",
-        "@wordpress/element": "^2.8.2",
-        "@wordpress/escape-html": "^1.5.1",
-        "@wordpress/hooks": "^2.6.0",
-        "@wordpress/is-shallow-equal": "^1.6.1",
-        "@wordpress/keycodes": "^2.6.2",
-        "classnames": "^2.2.5",
-        "lodash": "^4.17.15",
-        "memize": "^1.0.5",
-        "rememo": "^3.0.0"
-      },
-      "dependencies": {
-        "@wordpress/data": {
-          "version": "4.9.2",
-          "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.9.2.tgz",
-          "integrity": "sha512-wdFkR4yvkoRje7PBWpBOcI2AE6VM36yfZc1aSgX8XEFDWUXVovrIKPmhVEcW3b/E0ZxeR5BaIEnCYQbJKvDF+g==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@wordpress/compose": "^3.7.2",
-            "@wordpress/deprecated": "^2.6.1",
-            "@wordpress/element": "^2.8.2",
-            "@wordpress/is-shallow-equal": "^1.6.1",
-            "@wordpress/priority-queue": "^1.3.1",
-            "@wordpress/redux-routine": "^3.6.2",
-            "equivalent-key-map": "^0.2.2",
-            "is-promise": "^2.1.0",
-            "lodash": "^4.17.15",
-            "redux": "^4.0.0",
-            "turbo-combine-reducers": "^1.0.2"
-          }
-        },
-        "@wordpress/element": {
-          "version": "2.8.2",
-          "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.8.2.tgz",
-          "integrity": "sha512-pwy2qvbkNIoB+XTwtvsAKP/pmCoqFq3vyH9uakNIVHJF/DzOwwLS3y5I5hHTuNYmmgFuGALQVZlUVVkujRpWfg==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@wordpress/escape-html": "^1.5.1",
-            "lodash": "^4.17.15",
-            "react": "^16.9.0",
-            "react-dom": "^16.9.0"
-          }
-        },
-        "@wordpress/keycodes": {
-          "version": "2.6.2",
-          "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.6.2.tgz",
-          "integrity": "sha512-xWwyTYdyesZFc6V3RDn2Gjkx5bfa5fGDGrX0WcxT+vA2oEMFqLA2JzUqEzylR7aX3uFfsdDEp0GbPl8ipcLChw==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@wordpress/i18n": "^3.6.1",
-            "lodash": "^4.17.15"
-          }
-        }
-      }
-    },
     "@wordpress/scripts": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-3.4.0.tgz",
@@ -7890,9 +7827,10 @@
       }
     },
     "diff": {
-      "version": "3.5.0",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
+      "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
+      "dev": true
     },
     "diff-sequences": {
       "version": "24.9.0",
@@ -9548,9 +9486,9 @@
       "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg=="
     },
     "flatten": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
-      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
       "dev": true
     },
     "flow-parser": {
@@ -9687,22 +9625,25 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "optional": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
             "delegates": "^1.0.0",
@@ -9711,13 +9652,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-          "optional": true
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-          "optional": true,
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9725,32 +9666,35 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-          "optional": true
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "optional": true
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "optional": true
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "optional": true,
           "requires": {
             "ms": "^2.1.1"
@@ -9758,22 +9702,26 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -9781,12 +9729,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
             "aproba": "^1.0.3",
@@ -9801,7 +9751,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
@@ -9814,12 +9765,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3"
@@ -9827,7 +9780,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
             "minimatch": "^3.0.4"
@@ -9835,7 +9789,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
             "once": "^1.3.0",
@@ -9844,44 +9799,46 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "optional": true
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "optional": true,
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
           }
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "optional": true,
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "optional": true
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
-          "optional": true,
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9889,7 +9846,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "optional": true,
           "requires": {
             "minipass": "^2.2.1"
@@ -9897,20 +9855,22 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "optional": true,
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "requires": {
             "minimist": "0.0.8"
           }
         },
         "ms": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "optional": true
         },
         "needle": {
           "version": "2.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
+          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "optional": true,
           "requires": {
             "debug": "^4.1.0",
@@ -9920,7 +9880,8 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "optional": true,
           "requires": {
             "detect-libc": "^1.0.2",
@@ -9937,7 +9898,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
             "abbrev": "1",
@@ -9946,12 +9908,14 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "optional": true,
           "requires": {
             "ignore-walk": "^3.0.1",
@@ -9960,7 +9924,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
             "are-we-there-yet": "~1.1.2",
@@ -9971,35 +9936,39 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-          "optional": true
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-          "optional": true,
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "requires": {
             "wrappy": "1"
           }
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
             "os-homedir": "^1.0.0",
@@ -10008,17 +9977,20 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
             "deep-extend": "^0.6.0",
@@ -10029,14 +10001,16 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
           }
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
@@ -10050,7 +10024,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "optional": true,
           "requires": {
             "glob": "^7.1.3"
@@ -10058,38 +10033,43 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "optional": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "optional": true,
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10098,7 +10078,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
@@ -10106,20 +10087,22 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "optional": true,
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "optional": true,
           "requires": {
             "chownr": "^1.1.1",
@@ -10133,12 +10116,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
             "string-width": "^1.0.2 || 2"
@@ -10146,13 +10131,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-          "optional": true
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "optional": true
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
         }
       }
     },
@@ -14116,76 +14101,6 @@
       "integrity": "sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==",
       "dev": true
     },
-    "newspack-components": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/newspack-components/-/newspack-components-0.1.5.tgz",
-      "integrity": "sha512-4Zjv6+9j4abH3tcQtGaQgtziadiRRmQkCdLTwSsq0YMgy2iu5NDMMAQ/uOZ+WbTdS6cG5az2OLd4YM1tBVdViQ==",
-      "requires": {
-        "@wordpress/components": "^7.3.1",
-        "@wordpress/element": "^2.3.0"
-      },
-      "dependencies": {
-        "@wordpress/api-fetch": {
-          "version": "3.6.3",
-          "resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-3.6.3.tgz",
-          "integrity": "sha512-k3mfIcOC0kmRq3hlidD2OL8q8vgU8bVlJlMDQRBBq2LjwcPVpUB91FI9Pp7tOgRpG6V54st0fDdtsjCdFnjdug==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@wordpress/i18n": "^3.6.1",
-            "@wordpress/url": "^2.8.2"
-          },
-          "dependencies": {
-            "@wordpress/url": {
-              "version": "2.8.2",
-              "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-2.8.2.tgz",
-              "integrity": "sha512-adTOs94K5G1riTQveIH/pJoDmFGegzBWFSDe/YzhP6mg64AGOWLQLwi0xzfIyoFC4d+kchx4fCyFTqYfcCbRVg==",
-              "requires": {
-                "@babel/runtime": "^7.4.4",
-                "qs": "^6.5.2"
-              }
-            }
-          }
-        },
-        "@wordpress/components": {
-          "version": "7.4.0",
-          "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-7.4.0.tgz",
-          "integrity": "sha512-riVey0Z5835YdPZLWFSAs/4Hzo0nr7WA/393mRXwGuUtkqdk7ia++5emKfhyaCLYbinVBd6366xFFfiFxxcsCA==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@wordpress/a11y": "^2.3.0",
-            "@wordpress/api-fetch": "^3.2.0",
-            "@wordpress/compose": "^3.3.0",
-            "@wordpress/dom": "^2.3.0",
-            "@wordpress/element": "^2.4.0",
-            "@wordpress/hooks": "^2.3.0",
-            "@wordpress/i18n": "^3.4.0",
-            "@wordpress/is-shallow-equal": "^1.3.0",
-            "@wordpress/keycodes": "^2.3.0",
-            "@wordpress/rich-text": "^3.3.0",
-            "@wordpress/url": "^2.6.0",
-            "classnames": "^2.2.5",
-            "clipboard": "^2.0.1",
-            "diff": "^3.5.0",
-            "dom-scroll-into-view": "^1.2.1",
-            "lodash": "^4.17.11",
-            "memize": "^1.0.5",
-            "moment": "^2.22.1",
-            "mousetrap": "^1.6.2",
-            "re-resizable": "^4.7.1",
-            "react-click-outside": "^3.0.0",
-            "react-dates": "^17.1.1",
-            "rememo": "^3.0.0",
-            "tinycolor2": "^1.4.1",
-            "uuid": "^3.3.2"
-          }
-        },
-        "re-resizable": {
-          "version": "4.11.0",
-          "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-4.11.0.tgz",
-          "integrity": "sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q=="
-        }
-      }
-    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -16289,12 +16204,6 @@
             "require-from-string": "^2.0.1"
           }
         },
-        "diff": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
-          "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
-          "dev": true
-        },
         "emoji-regex": {
           "version": "6.5.1",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",

plugins/woocommerce-admin/package.json

@@ -70,6 +70,7 @@
     "@wordpress/components": "8.4.0",
     "@wordpress/data": "4.9.1",
     "@wordpress/date": "3.5.0",
+    "@wordpress/dom": "2.6.0",
     "@wordpress/element": "2.8.1",
     "@wordpress/hooks": "2.6.0",
     "@wordpress/html-entities": "2.5.0",
@@ -97,7 +98,6 @@
     "interpolate-components": "1.1.1",
     "marked": "0.7.0",
     "memoize-one": "5.1.1",
-    "newspack-components": "0.1.5",
     "prismjs": "1.17.1",
     "qs": "6.9.1",
     "react-click-outside": "3.0.1",

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,3 +1,6 @@
+# 4.1.0 (Unreleased)
+- Added `<ImageUpload />` component.
+
 # 4.0.0
 
 ## Breaking Changes

plugins/woocommerce-admin/packages/components/package.json

@@ -29,6 +29,7 @@
     "@wordpress/components": "8.4.0",
     "@wordpress/compose": "3.7.1",
     "@wordpress/date": "3.5.0",
+    "@wordpress/dom": "2.6.0",
     "@wordpress/element": "2.8.1",
     "@wordpress/html-entities": "2.5.0",
     "@wordpress/i18n": "3.6.1",

plugins/woocommerce-admin/packages/components/src/image-upload/README.md

@@ -0,0 +1,18 @@
+ImageUpload
+===
+
+ImageUpload - Adds an upload area for selecting or uploading an image from the WordPress media gallery.
+
+## Usage
+
+```jsx
+	<ImageUpload image={ image } onChange={ newImage => setState( { url: newImage } ) } />
+```
+
+### Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`image` | Object | `null` | Image information containing media gallery `id` and image `url`
+`onChange` | Function | `null` | Function to trigger when the selected image changes
+`className` | String | `null` | Additional class name to style the component

plugins/woocommerce-admin/packages/components/src/image-upload/docs/example.js

@@ -0,0 +1,18 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import {
+	ImageUpload,
+} from '@woocommerce/components';
+
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
+	image: null,
+} )( ( { setState, logo } ) => (
+	<ImageUpload image={ logo } onChange={ image => setState( { logo: image } ) } />
+) );

plugins/woocommerce-admin/packages/components/src/image-upload/index.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+
+class ImageUpload extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			frame: false,
+		};
+		this.openModal = this.openModal.bind( this );
+		this.handleImageSelect = this.handleImageSelect.bind( this );
+		this.removeImage = this.removeImage.bind( this );
+	}
+
+	openModal() {
+		if ( this.state.frame ) {
+			this.state.frame.open();
+			return;
+		}
+
+		this.state.frame = wp.media( {
+			title: __( 'Select or upload image' ),
+			button: {
+				text: __( 'Select' ),
+			},
+			library: {
+				type: 'image',
+			},
+			multiple: false,
+		} );
+
+		this.state.frame.on( 'select', this.handleImageSelect );
+		this.state.frame.open();
+	}
+
+	handleImageSelect() {
+		const { onChange } = this.props;
+		const attachment = this.state.frame.state().get( 'selection' ).first().toJSON();
+		onChange( attachment );
+	}
+
+	removeImage() {
+		const { onChange } = this.props;
+		onChange( null );
+	}
+
+	render() {
+		const { className, image } = this.props;
+		return (
+			<Fragment>
+				{ !! image && (
+				<div className={ classNames( 'woocommerce-image-upload', 'has-image', className ) }>
+					<div className="woocommerce-image-upload__image-preview">
+						<img src={ image.url } alt="" />
+					</div>
+					<Button className="woocommerce-image-upload__remove-image" onClick={ this.removeImage }>
+						{ __( 'Remove image', 'woocommerce-admin' ) }
+					</Button>
+				</div>
+				) }
+				{ ! image && (
+					<div className={ classNames( 'woocommerce-image-upload', 'no-image', className ) }>
+						<Button className="woocommerce-image-upload__add-image" onClick={ this.openModal }>
+							{ __( 'Add an image', 'woocommerce-admin' ) }
+						</Button>
+					</div>
+				) }
+			</Fragment>
+		);
+	}
+}
+
+export default ImageUpload;

plugins/woocommerce-admin/packages/components/src/image-upload/style.scss

@@ -0,0 +1,38 @@
+.woocommerce-image-upload {
+	button {
+		color: $studio-pink;
+		font-size: 16px;
+		line-height: 24px;
+		padding: 0;
+		vertical-align: middle;
+	}
+
+	.woocommerce-image-upload__image-preview {
+		font-size: 16px;
+		margin-right: 2em;
+
+		img {
+			max-width: 240px;
+			height: auto;
+		}
+	}
+
+	&.no-image {
+		.woocommerce-image-upload__add-image {
+			&::before {
+				content: '';
+				/* stylelint-disable function-url-quotes */
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23636d75' d='M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z'/%3E%3C/svg%3E");
+				/* stylelint-enable */
+				width: 24px;
+				height: 24px;
+				margin-right: 12px;
+			}
+		}
+	}
+
+	&.has-image {
+		display: flex;
+		align-items: center;
+	}
+}

plugins/woocommerce-admin/packages/components/src/image-upload/test/index.js

@@ -0,0 +1,30 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import ImageUpload from '../index';
+
+describe( 'ImageUpload', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render an image uploader ready for upload', () => {
+			const uploader = shallow( <ImageUpload /> );
+			expect( uploader.children().hasClass( 'woocommerce-image-upload' ) ).toBe( true );
+			expect( uploader.children().hasClass( 'no-image' ) ).toBe( true );
+		} );
+
+		it( 'should render an image uploader prepopulated with an upload', () => {
+			const image = {
+				id: 1234,
+				url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg',
+			};
+			const uploader = shallow( <ImageUpload image={ image } /> );
+			expect( uploader.children().hasClass( 'woocommerce-image-upload' ) ).toBe( true );
+			expect( uploader.children().hasClass( 'has-image' ) ).toBe( true );
+		} );
+	} );
+} );

plugins/woocommerce-admin/packages/components/src/index.js

@@ -24,6 +24,7 @@ export { default as Form } from './form';
 export { default as FilterPicker } from './filter-picker';
 export { default as Gravatar } from './gravatar';
 export { H, Section } from './section';
+export { default as ImageUpload } from './image-upload';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as MenuItem } from './ellipsis-menu/menu-item';

plugins/woocommerce-admin/packages/components/src/style.scss

@@ -17,6 +17,7 @@
 @import 'filters/style.scss';
 @import 'flag/style.scss';
 @import 'gravatar/style.scss';
+@import 'image-upload/style.scss';
 @import 'list/style.scss';
 @import 'order-status/style.scss';
 @import 'pagination/style.scss';

plugins/woocommerce-admin/packages/components/src/text-control/style.scss

@@ -3,7 +3,8 @@
 .muriel-input-text {
 	background: $studio-white;
 	border: 1px solid $studio-gray-20;
-	border-radius: 0;
+	border-radius: 3px;
+	height: 56px;
 	box-shadow: none;
 	padding: 12px 12px 4px;
 	position: relative;
@@ -47,10 +48,16 @@
 	&.with-value {
 		.components-base-control__label {
 			display: block;
+			position: relative;
+			top: -8px;
+			width: 100%;
+			font-size: 12px;
 		}
 
 		input {
 			color: $studio-gray-80;
+			position: relative;
+			top: -12px;
 		}
 	}
 

plugins/woocommerce-admin/tests/js/jest.config.json

@@ -23,8 +23,5 @@
     "<rootDir>/.*/build/",
     "<rootDir>/.*/build-module/"
   ],
-  "transformIgnorePatterns": [
-    "node_modules/(?!(newspack-components)/)"
-  ],
   "verbose": true
 }

plugins/woocommerce-admin/webpack.config.js

@@ -114,7 +114,6 @@ const webpackConfig = {
 					'|acorn-jsx' +
 					'|d3-array' +
 					'|debug' +
-					'|newspack-components' +
 					'|regexpu-core' +
 					'|unicode-match-property-ecmascript' +
 					'|unicode-match-property-value-ecmascript)/'