feat: add TextArea component

packages/react-forms/src/InputText/index.js

@@ -40,13 +40,13 @@ const HEIGHT = {
   regular: 32,
 };
 
-const PADDING = {
+export const PADDING = {
   large: 15,
   small: 5,
   regular: 10,
 };
 
-const Input = styled.input`
+export const Input = styled.input`
   all: unset;
   min-width: 0;
   align-self: stretch;
@@ -118,14 +118,15 @@ const Container = styled.div`
 
 const InputText: React.StatelessFunctionalComponent<Props> = styled(
   React.forwardRef(
-    ({ onChange, validationErrorMessage, ...props }: Props, ref) => {
+    ({ onChange, validationErrorMessage, as, ...props }: Props, ref) => {
       const input = React.createRef();
       return (
         <InvalidHandler errorMessage={validationErrorMessage}>
           {(getInputProps, isInvalid) => (
             <Container {...omit(props)(INPUT_ATTRIBUTES)} isInvalid={isInvalid}>
               <Input
                 ref={mergeRefs(input, ref)}
+                as={as}
                 {...include(props)([...INPUT_ATTRIBUTES, 'disabled'])}
                 {...getInputProps({ onChange })}
               />

packages/react-forms/src/TextArea/TextArea.md

@@ -0,0 +1,20 @@
+The `TextArea` component acts exactly like a `textarea` HTML element,
+and shares all the features provided by the `InputText` component.
+
+```js
+<TextArea
+  placeholder="This is a textarea, multiline text is supported"
+  style={{ height: 100 }}
+/>
+```
+
+Along with all the `InputText` features, there's the HTML form validation:
+
+```js
+<form onSubmit={e => e.preventDefault()}>
+  <TextArea style={{ height: 100 }} required placeholder="This is required" />
+  <br />
+  <br />
+  <Button type="submit">Submit</Button>
+</form>
+```

packages/react-forms/src/TextArea/index.js

@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react';
+import styled from '@emotion/styled/macro';
+import InputText, { Input, PADDING } from '../InputText';
+
+const TextArea = styled(props => <InputText as="textarea" {...props} />)`
+  ${Input} {
+    padding: ${props => PADDING[props.size || 'regular'] / 2.5}px
+      ${props => PADDING[props.size || 'regular']}px;
+  }
+`;
+
+export default TextArea;

packages/react-forms/src/TextArea/index.test.js

@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+import { mount } from 'enzyme';
+import TextArea from '.';
+
+it('renders a TextArea with all the supported sizes', () => {
+  expect(mount(<TextArea />)).toHaveStyleRule('padding', '4px 10px');
+  expect(mount(<TextArea size="small" />)).toHaveStyleRule(
+    'padding',
+    '2px 5px'
+  );
+  expect(mount(<TextArea size="large" />)).toHaveStyleRule(
+    'padding',
+    '6px 15px'
+  );
+});