initial commit

packages/woocommerce-blocks/assets/js/base/components/textarea/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Textarea = ( {
+	className = '',
+	disabled = false,
+	onTextChange,
+	placeholder,
+	value = '',
+} ) => {
+	return (
+		<textarea
+			className={ classnames(
+				'wc-block-components-textarea',
+				className
+			) }
+			disabled={ disabled }
+			onChange={ ( event ) => {
+				onTextChange( event.target.value );
+			} }
+			placeholder={ placeholder }
+			rows={ 2 }
+			value={ value }
+		/>
+	);
+};
+
+Textarea.propTypes = {
+	onTextChange: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	placeholder: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default Textarea;

packages/woocommerce-blocks/assets/js/base/components/textarea/style.scss

@@ -0,0 +1,29 @@
+.wc-block-components-textarea {
+	@include font-size(regular);
+	background-color: #fff;
+	border: 1px solid $input-border-gray;
+	border-radius: 4px;
+	color: $input-text-active;
+	font-family: inherit;
+	line-height: 1.375; // =22px when font-size is 16px.
+	margin: 0;
+	padding: em($gap-small) $gap;
+	width: 100%;
+
+	.has-dark-controls & {
+		background-color: $input-background-dark;
+		border-color: $input-border-dark;
+		color: $input-text-dark;
+
+		&::placeholder {
+			color: $input-placeholder-dark;
+		}
+	}
+}
+
+.theme-twentytwentyone {
+	.has-dark-controls .wc-block-components-textarea {
+		background-color: $input-background-dark;
+		color: $input-text-dark;
+	}
+}