Onboarding: Replace TextControl component (https://github.com/woocommerce/woocommerce-admin/pull/3020)

* Add TextControl component

* Replace instances of newspack TextControl

plugins/woocommerce-admin/client/dashboard/components/settings/general/store-address.js

@@ -4,14 +4,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { TextControl } from 'newspack-components';
 import { useMemo } from 'react';
 import { getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal depdencies
  */
-import { SelectControl } from '@woocommerce/components';
+import { SelectControl, TextControl } from '@woocommerce/components';
 
 const { countries } = getSetting( 'dataEndpoints', { countries: {} } );
 /**

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

@@ -269,6 +269,7 @@
 
 		&.is-active {
 			box-shadow: 0 0 0 1px $studio-woocommerce-purple-60;
+			border-color: $studio-woocommerce-purple-60;
 		}
 
 		&::after {

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

@@ -123,65 +123,6 @@
 		}
 	}
 
-	.muriel-input-text {
-		&.empty {
-			.components-base-control__label {
-				display: none;
-			}
-
-			input {
-				top: 14px;
-			}
-		}
-
-		input[type='text']:focus {
-			box-shadow: none;
-			border: 0;
-		}
-	}
-
-	.muriel-input-text label,
-	.muriel-select label {
-		display: initial;
-		width: auto;
-		right: auto;
-		left: $gap;
-	}
-
-	.muriel-select select {
-		left: 15px;
-	}
-
-	.muriel-select.empty label {
-		top: 15px;
-	}
-
-	.muriel-select::after {
-		margin-top: -$gap-smallest;
-	}
-
-	.muriel-input-text,
-	.muriel-select {
-		&.with-value,
-		&.active {
-			label {
-				display: block;
-				top: 8px;
-			}
-
-			input,
-			select {
-				top: 24px;
-			}
-		}
-	}
-
-	.muriel-input-text.active,
-	.muriel-select.active {
-		box-shadow: 0 0 0 2px $studio-woocommerce-purple-60;
-		border-color: transparent;
-	}
-
 	.muriel-checkbox label.components-checkbox-control__label {
 		margin-left: $gap-smaller;
 	}

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, TextControl } from 'newspack-components';
+import { Button, ImageUpload } from 'newspack-components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { difference, filter } from 'lodash';
@@ -13,7 +13,7 @@ import { withDispatch } from '@wordpress/data';
 /**
  * WooCommerce dependencies
  */
-import { Card, Stepper } from '@woocommerce/components';
+import { Card, Stepper, TextControl } 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

@@ -8,13 +8,13 @@ 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, TextControl } from 'newspack-components';
+import { Button } from 'newspack-components';
 import { withDispatch } from '@wordpress/data';
 
 /**
  * WooCommerce dependencies
  */
-import { Form, Card, Stepper, List } from '@woocommerce/components';
+import { Form, Card, Stepper, TextControl, List } from '@woocommerce/components';
 import { getAdminLink, getHistory, getNewPath } from '@woocommerce/navigation';
 import { WC_ASSET_URL as wcAssetUrl } from '@woocommerce/wc-admin-settings';
 

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

@@ -5,7 +5,7 @@
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { Button, TextControl } from 'newspack-components';
+import { Button } from 'newspack-components';
 import { getQuery } from '@woocommerce/navigation';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -15,7 +15,7 @@ import interpolateComponents from 'interpolate-components';
  * WooCommerce dependencies
  */
 import { WC_ADMIN_NAMESPACE } from 'wc-api/constants';
-import { Form, Link } from '@woocommerce/components';
+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/stripe.js

@@ -9,14 +9,14 @@ import apiFetch from '@wordpress/api-fetch';
 import { withDispatch } from '@wordpress/data';
 import interpolateComponents from 'interpolate-components';
 import { Modal } from '@wordpress/components';
-import { Button, TextControl } from 'newspack-components';
+import { Button } from 'newspack-components';
 import { getQuery } from '@woocommerce/navigation';
 import { get } from 'lodash';
 
 /**
  * WooCommerce dependencies
  */
-import { Form, Link } from '@woocommerce/components';
+import { Form, Link, TextControl } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
 import { WCS_NAMESPACE } from 'wc-api/constants';
 import { recordEvent } from 'lib/tracks';

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

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Button, TextControl } from 'newspack-components';
+import { Button } from 'newspack-components';
 import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
 import { FormToggle } from '@wordpress/components';
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 /**
  * WooCommerce dependencies
  */
-import { Flag, Form } from '@woocommerce/components';
+import { Flag, Form, TextControl } from '@woocommerce/components';
 import { getCurrencyFormatString } from '@woocommerce/currency';
 import { CURRENCY, getSetting, setSetting } from '@woocommerce/wc-admin-settings';
 

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

@@ -34,6 +34,7 @@
   { "component": "Summary" },
   { "component": "Table" },
   { "component": "Tag" },
+  { "component": "TextControl" },
   { "component": "TextControlWithAffixes" },
   { "component": "ViewMoreList" },
   { "component": "WebPreview" }

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

@@ -46,5 +46,6 @@
     * [Table](components/packages/table/README.md)
     * [Tag](components/packages/tag/README.md)
     * [TextControlWithAffixes](components/packages/text-control-with-affixes/README.md)
+    * [TextControl](components/packages/text-control/README.md)
     * [ViewMoreList](components/packages/view-more-list/README.md)
     * [WebPreview](components/packages/web-preview/README.md)

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

@@ -4,6 +4,7 @@
 - Removed the `<SimpleSelectControl />` component.
 - Removed WC-Admin specific actions from `<TableCard />` component.
 - Export the `<CompareButton />` component.
+- Add `<TextControl />` component.
 
 # 4.0.0
 - Added a new `<ScrollTo />` component.

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

@@ -55,6 +55,7 @@ export { default as EmptyTable } from './table/empty';
 export { default as TablePlaceholder } from './table/placeholder';
 export { default as TableSummary } from './table/summary';
 export { default as Tag } from './tag';
+export { default as TextControl } from './text-control';
 export { default as TextControlWithAffixes } from './text-control-with-affixes';
 export { default as useFilters } from './higher-order/use-filters';
 export { default as ViewMoreList } from './view-more-list';

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

@@ -33,6 +33,7 @@
 @import 'summary/style.scss';
 @import 'table/style.scss';
 @import 'tag/style.scss';
+@import 'text-control/style.scss';
 @import 'text-control-with-affixes/style.scss';
 @import 'view-more-list/style.scss';
 @import 'web-preview/style.scss';

plugins/woocommerce-admin/packages/components/src/text-control/README.md

@@ -0,0 +1,24 @@
+TextControl
+===
+
+An input field use for text inputs in forms.
+
+## Usage
+
+```jsx
+<TextControl
+	label="Input label"
+	value={ value }
+	onChange={ value => setState( { value } ) }
+/>;
+```
+
+### Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`className` | String | ``null`` | Additional CSS classes
+`disabled` | Boolean | ``null`` | Disables the field
+`label` | String | ``null`` | Input label used as a placeholder
+`onClick` | Function | ``null`` | On click handler called when the component is clicked, passed the click event
+`value` | String | ``null`` | The value of the input field

plugins/woocommerce-admin/packages/components/src/text-control/docs/example.js

@@ -0,0 +1,27 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { TextControl } from '@woocommerce/components';
+
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
+	value: '',
+} )( ( { setState, value } ) => {
+	return (
+		<div>
+			<TextControl
+				name="text-control"
+				label="Enter text here"
+				onChange={ newValue => setState( { value: newValue } ) }
+				value={ value }
+			/>
+			<br />
+			<TextControl label="Disabled field" disabled value="" />
+		</div>
+	);
+} );

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

@@ -0,0 +1,81 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { Component } from '@wordpress/element';
+import PropTypes from 'prop-types';
+import { TextControl as BaseComponent, withFocusOutside } from '@wordpress/components';
+
+/**
+ * An input field use for text inputs in forms.
+ */
+const TextControl = withFocusOutside(
+	class extends Component {
+		constructor( props ) {
+			super( props );
+			this.state = {
+				isFocused: false,
+			};
+		}
+
+		handleFocusOutside() {
+			this.setState( { isFocused: false } );
+		}
+
+		handleOnClick( event, onClick ) {
+			this.setState( { isFocused: true } );
+			if ( typeof onClick === 'function' ) {
+				onClick( event );
+			}
+		}
+
+		render() {
+			const { isFocused } = this.state;
+			const { className, onClick, ...otherProps } = this.props;
+			const { label, value, disabled } = otherProps;
+			const isEmpty = '' === value;
+			const isActive = isFocused && ! disabled;
+
+			return (
+				<BaseComponent
+					className={ classnames( 'muriel-component', 'muriel-input-text', className, {
+						disabled: disabled,
+						empty: isEmpty,
+						active: isActive,
+						'with-value': ! isEmpty,
+					} ) }
+					placeholder={ label }
+					onClick={ event => this.handleOnClick( event, onClick ) }
+					onFocus={ () => this.setState( { isFocused: true } ) }
+					{ ...otherProps }
+				/>
+			);
+		}
+	}
+);
+
+TextControl.propTypes = {
+	/**
+	 * Additional CSS classes.
+	 */
+	className: PropTypes.string,
+	/**
+	 * Disables the field.
+	 */
+	disabled: PropTypes.bool,
+	/**
+	 * Input label used as a placeholder.
+	 */
+	label: PropTypes.string,
+	/**
+	 * On click handler called when the component is clicked, passed the click event.
+	 */
+	onClick: PropTypes.func,
+	/**
+	 * The value of the input field.
+	 */
+	value: PropTypes.string,
+};
+
+export default TextControl;

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

@@ -0,0 +1,93 @@
+/** @format */
+
+.muriel-input-text {
+	background: $studio-white;
+	border: 1px solid $studio-gray-20;
+	border-radius: 0;
+	box-shadow: none;
+	padding: 12px 12px 4px;
+	position: relative;
+
+	&:hover {
+		border-color: $studio-gray-40;
+	}
+
+	label {
+		color: $studio-gray-50;
+		font-size: 14px;
+		line-height: 21px;
+
+		&.components-base-control__label {
+			margin: 0;
+		}
+	}
+
+	.components-text-control__input {
+		border: 0;
+		box-shadow: none;
+		font-size: 16px;
+		line-height: 21px;
+		margin: 0;
+		padding: 0;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	&.active {
+		box-shadow: 0 0 0 2px $studio-woocommerce-purple-60;
+		border-color: transparent;
+
+		input {
+			color: $studio-gray-80;
+		}
+	}
+
+	&.with-value {
+		.components-base-control__label {
+			display: block;
+		}
+
+		input {
+			color: $studio-gray-80;
+		}
+	}
+
+	&.empty {
+		label {
+			display: none;
+		}
+		input {
+			color: $studio-gray-50;
+		}
+	}
+
+	&.has-error {
+		box-shadow: none;
+	}
+
+	&.disabled {
+		label {
+			display: none;
+		}
+		input {
+			color: $studio-gray-20;
+
+			/* Placeholder styling: */
+			&::placeholder {
+				/* Chrome, Firefox, Opera, Safari 10.1+ */
+				color: $studio-gray-20;
+				opacity: 1; /* Firefox */
+			}
+			&:-ms-input-placeholder {
+				/* Internet Explorer 10-11 */
+				color: $studio-gray-20;
+			}
+			&::-ms-input-placeholder {
+				/* Microsoft Edge */
+				color: $studio-gray-20;
+			}
+		}
+	}
+}