Add Textarea To Components

packages/components/.storybook/config.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
@@ -32,18 +32,24 @@ const viewports = {
 // using sidebar as the styles for body for now 🤷
 const GlobalStyle = createGlobalStyle`
   ${global};
-  body {
+  html body {
     font-family: 'Inter', sans-serif;
     background-color: ${theme.colors.sideBar.background};
     color: ${theme.colors.sideBar.foreground};
+    margin: 0;
+    padding: 20px;
+
+    * {
+      box-sizing: border-box;
+    }
   }
 `;
 
 export const withGlobal = cb => (
-  <Fragment>
+  <>
     <GlobalStyle />
     {cb()}
-  </Fragment>
+  </>
 );
 
 addDecorator(withA11y);

packages/components/src/components/Input/index.stories.tsx

@@ -8,7 +8,6 @@ export default {
 
 // replace the text inside with Text variants when available
 export const Basic = () => <Input />;
-export const InvisibleLabel = () => <Input invisibleLabel="Fill your name" />;
 export const Placeholder = () => <Input placeholder="Your name" />;
 export const Label = () => (
   <Input label="Your full name" placeholder="John Doe" />

packages/components/src/components/Input/index.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
 import { uniqueId } from 'lodash-es';
+import { Text } from '../Text';
 
 const placeholderStyles = {
   color: 'input.placeholderForeground',
@@ -25,11 +26,9 @@ export const InputComponent = styled.input(
   })
 );
 
-const Label = styled.label(
+const Label = styled(Text)(
   css({
-    fontSize: 2,
-    paddingBottom: 2,
-    color: 'sidebar.foreground',
+    marginBottom: 2,
     display: 'block',
   })
 );
@@ -52,7 +51,9 @@ export const Input: React.FC<IInputProps> = ({
           <label htmlFor={id}>{props.placeholder}</label>
         </VisuallyHidden>
       ) : null}
-      {label ? <Label htmlFor={id}>{label}</Label> : null}
+      <Label size={2} as="label" htmlFor={id}>
+        {label}
+      </Label>
       <InputComponent id={id} {...props} />
     </>
   );

packages/components/src/components/Textarea/index.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Textarea } from '.';
+
+export default {
+  title: 'components/Textarea',
+  component: Textarea,
+};
+
+const Wrapper = ({ children }) => <div style={{ width: 400 }}>{children}</div>;
+
+// replace the text inside with Text variants when available
+export const Basic = () => (
+  <Wrapper>
+    <Textarea />
+  </Wrapper>
+);
+export const Placeholder = () => (
+  <Wrapper>
+    <Textarea placeholder="Your name" />
+  </Wrapper>
+);
+export const Label = () => (
+  <Wrapper>
+    <Textarea label="Your full name" placeholder="John Doe" />
+  </Wrapper>
+);
+
+export const MaxLength = () => (
+  <Wrapper>
+    <Textarea maxLength={10} label="Your full name" placeholder="John Doe" />
+  </Wrapper>
+);

packages/components/src/components/Textarea/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useCallback } from 'react';
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import { VisuallyHidden } from 'reakit/VisuallyHidden';
+import { uniqueId } from 'lodash-es';
+import { Text } from '../Text';
+import { Stack } from '../Stack';
+
+const placeholderStyles = {
+  color: 'input.placeholderForeground',
+  fontSize: 13,
+};
+
+export const TextareaComponent = styled.textarea(
+  css({
+    height: 64,
+    width: '100%',
+    padding: 2,
+    fontSize: 3,
+    resize: 'none',
+    backgroundColor: 'input.background',
+    borderBottom: '1px solid',
+    borderColor: 'input.border',
+    color: 'input.foreground',
+    borderRadius: 'small',
+    '::-webkit-input-placeholder': placeholderStyles,
+    '::-ms-input-placeholder': placeholderStyles,
+    '::placeholder': placeholderStyles,
+  })
+);
+
+const Label = styled(Text)(
+  css({
+    marginBottom: 2,
+    display: 'block',
+  })
+);
+
+const Count = styled.div<{ limit: boolean }>(({ limit }) =>
+  css({
+    fontSize: 11,
+    paddingTop: 1,
+    color: limit ? 'errorForeground' : 'input.placeholderForeground',
+    alignSelf: 'flex-end',
+  })
+);
+
+interface ITextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  maxLength?: number;
+}
+
+export const Textarea: React.FC<ITextareaProps> = ({
+  label,
+  maxLength,
+  ...props
+}) => {
+  const id = props.id || uniqueId('form_');
+  const [wordCount, setWordCount] = useState(0);
+  const [value, setValue] = useState('');
+
+  const Wrapper = useCallback(
+    ({ children }) =>
+      maxLength ? <Stack direction="vertical">{children}</Stack> : children,
+    [maxLength]
+  );
+
+  // eslint-disable-next-line consistent-return
+  const update = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onChange) props.onChange(e);
+    if (maxLength) {
+      const trimmedText = e.target.value.substring(0, maxLength);
+      setValue(trimmedText);
+      setWordCount(trimmedText.length);
+    } else {
+      setValue(e.target.value);
+    }
+  };
+
+  const keyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (props.onKeyPress) props.onKeyPress(e);
+    if (maxLength) {
+      if (maxLength <= wordCount) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  return (
+    <>
+      {props.placeholder && !label ? (
+        <VisuallyHidden>
+          <label htmlFor={id}>{props.placeholder}</label>
+        </VisuallyHidden>
+      ) : null}
+      {label ? (
+        <Label size={2} as="label" htmlFor={id}>
+          {label}
+        </Label>
+      ) : null}
+      <Wrapper>
+        <TextareaComponent
+          value={value}
+          onChange={update}
+          onKeyPress={keyPress}
+          id={id}
+          {...props}
+        />
+        {maxLength ? (
+          <Count limit={maxLength <= wordCount}>
+            {wordCount}/{maxLength}
+          </Count>
+        ) : null}
+      </Wrapper>
+    </>
+  );
+};