fix(TextArea): added textarea component

stories/Grid.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from './Button';
 
 import { Grid, GridProps } from './Grid';
 import { Layout } from './constants';
-import { Icon } from './Icon';
+import { Icon, IconType } from './Icon';
 
 export default {
   title: 'Components/Grid',
@@ -24,10 +24,10 @@ Vertical.args = {
   children: (
     <>
       <Button>
-        <Icon icon={IconType.delete} />
+        <Icon icon={IconType.Delete} />
       </Button>
       <Button>
-        <Icon icon={IconType.share} />
+        <Icon icon={IconType.Share} />
       </Button>
     </>
   ),
@@ -39,10 +39,10 @@ Horizontal.args = {
   children: (
     <>
       <Button>
-        <Icon icon={IconType.share}/>
+        <Icon icon={IconType.Share}/>
       </Button>
       <Button>
-        <Icon icon={IconType.delete}/>
+        <Icon icon={IconType.Delete}/>
       </Button>
     </>
   ),

stories/TextArea.scss

@@ -0,0 +1,36 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.textArea {
+  @include hover();
+
+  position: relative;
+  min-width: 150px;
+  overflow: hidden;
+
+  border-radius: $border-radius;
+  height: 70px;
+  background-color: $secondary-accent;
+  color: $primary-accent;
+
+  textarea {
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+    margin: 0;
+    background: transparent;
+    height: $min-component-size;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    font-size: $font-size;
+    resize: none;
+
+    padding: $padding $border-radius;
+    line-height: 1;
+
+    &::placeholder {
+      color: $disabled;
+    }
+  }
+}

stories/TextArea.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { Keys, UpdateOn } from './constants';
+import { noop } from './utils/noop';
+import styles from './TextArea.scss';
+
+export interface TextAreaProps {
+  className?: string,
+  value?: string;
+  placeholder?: string;
+  rows?: number;
+
+  /**
+   * Invoked when the checkbox checked value is modified internally.
+   */
+  onChange?: (value: string) => void;
+  submitKeys?: Keys[];
+
+  updateOn?: UpdateOn;
+}
+
+export function TextArea({
+  className,
+  value,
+  placeholder,
+  onChange = noop,
+  updateOn = UpdateOn.Blur,
+}: TextAreaProps): JSX.Element {
+  const [internalValue, setInternalValue] = useState<string>();
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  return (
+    <div
+      className={classNames(
+        styles.textArea,
+        className,
+      )}
+    >
+      <textarea
+        placeholder={placeholder}
+        value={internalValue || ''}
+        onBlur={updateOn === UpdateOn.Blur ? () => onChange(internalValue) : null}
+        onChange={(event) => {
+          const updatedValue = event.target.value;
+          setInternalValue(updatedValue);
+
+          if (updateOn === UpdateOn.Input) {
+            onChange(updatedValue);
+          }
+        }}
+      />
+    </div>
+  );
+}