From 592fe49be7d45512a6095a832f305fb5b61c1e2d Mon Sep 17 00:00:00 2001
From: rohithbalaji123 <rohithbalaji123@gmail.com>
Date: Sun, 5 Jul 2020 20:21:47 +0530
Subject: [PATCH 1/3] Add textarea form component

---
 frontend/src/component/form/TextArea.scss     | 18 +++++++++++
 frontend/src/component/form/TextAreaField.tsx | 32 +++++++++++++++++++
 frontend/src/component/form/TextField.scss    |  2 +-
 frontend/src/component/styles/color.scss      |  3 ++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/form/TextArea.scss
 create mode 100644 frontend/src/component/form/TextAreaField.tsx

diff --git a/frontend/src/component/form/TextArea.scss b/frontend/src/component/form/TextArea.scss
new file mode 100644
index 000000000..55a8ce4f4
--- /dev/null
+++ b/frontend/src/component/form/TextArea.scss
@@ -0,0 +1,18 @@
+@import '../styles/color';
+@import '../styles/corner';
+@import '../styles/font';
+
+.text-area {
+  @include default-font();
+  border: 2px solid $color-text-field-border;
+  box-sizing: border-box;
+  font-size: 16px;
+  @include round-corner;
+  outline: none;
+  padding: 8px 20px;
+  width: 100%;
+
+  &:focus {
+    border-color: $color-primary;
+  }
+}
diff --git a/frontend/src/component/form/TextAreaField.tsx b/frontend/src/component/form/TextAreaField.tsx
new file mode 100644
index 000000000..bf5d799c7
--- /dev/null
+++ b/frontend/src/component/form/TextAreaField.tsx
@@ -0,0 +1,32 @@
+import React, { ChangeEvent, Component } from 'react';
+import './TextArea.scss';
+
+interface IProps {
+  rows?: number;
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+}
+
+export class TextAreaField extends Component<IProps, any> {
+  render() {
+    return (
+      <textarea
+        className={'text-area'}
+        rows={this.props.rows}
+        value={this.props.value}
+        placeholder={this.props.placeholder}
+        onChange={this.handleChange}
+        onBlur={this.props.onBlur}
+      />
+    );
+  }
+
+  private handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!this.props.onChange) {
+      return;
+    }
+    this.props.onChange(event.target.value);
+  };
+}
diff --git a/frontend/src/component/form/TextField.scss b/frontend/src/component/form/TextField.scss
index efebf0d73..93bb5e0bb 100644
--- a/frontend/src/component/form/TextField.scss
+++ b/frontend/src/component/form/TextField.scss
@@ -4,7 +4,7 @@
 
 .text-field {
   @include default-font();
-  border: 2px solid #9e9e9e;
+  border: 2px solid $color-text-field-border;
   box-sizing: border-box;
   font-size: 16px;
   @include round-corner;
diff --git a/frontend/src/component/styles/color.scss b/frontend/src/component/styles/color.scss
index cbf8eeae8..4d08c6e7d 100644
--- a/frontend/src/component/styles/color.scss
+++ b/frontend/src/component/styles/color.scss
@@ -7,6 +7,9 @@ $color-highlight: lightblue;
 $color-scrollbar-track: #ccc;
 $color-divider: #dbdbdb;
 $color-time: #9e9e9e;
+$color-text-field-border: #9e9e9e;
+
+// Toast
 $color-toast-background: $color-dark-gray;
 $color-toast-text: $color-light-gray;
 $color-table-header-background: $color-light-gray;

From 0f5c1a37e50e1b03f000145691f218b071c122f0 Mon Sep 17 00:00:00 2001
From: rohithbalaji123 <rohithbalaji123@gmail.com>
Date: Mon, 6 Jul 2020 11:43:04 +0530
Subject: [PATCH 2/3] Add tests for textarea

---
 .../{TextArea.scss => TextAreaField.scss}     |  1 +
 .../src/component/form/TextAreaField.spec.tsx | 48 +++++++++++++++++++
 frontend/src/component/form/TextAreaField.tsx |  4 +-
 3 files changed, 50 insertions(+), 3 deletions(-)
 rename frontend/src/component/form/{TextArea.scss => TextAreaField.scss} (95%)
 create mode 100644 frontend/src/component/form/TextAreaField.spec.tsx

diff --git a/frontend/src/component/form/TextArea.scss b/frontend/src/component/form/TextAreaField.scss
similarity index 95%
rename from frontend/src/component/form/TextArea.scss
rename to frontend/src/component/form/TextAreaField.scss
index 55a8ce4f4..2cc354d57 100644
--- a/frontend/src/component/form/TextArea.scss
+++ b/frontend/src/component/form/TextAreaField.scss
@@ -11,6 +11,7 @@
   outline: none;
   padding: 8px 20px;
   width: 100%;
+  height: 100%;
 
   &:focus {
     border-color: $color-primary;
diff --git a/frontend/src/component/form/TextAreaField.spec.tsx b/frontend/src/component/form/TextAreaField.spec.tsx
new file mode 100644
index 000000000..fcef35abc
--- /dev/null
+++ b/frontend/src/component/form/TextAreaField.spec.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { TextAreaField } from './TextAreaField';
+
+describe('TextAreaField component', () => {
+  test('should render without crash', () => {
+    render(<TextAreaField />);
+  });
+
+  test('should render with correct value', () => {
+    const { container } = render(<TextAreaField value={'text'} />);
+    const textarea = container.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    expect(textarea!.value).toMatch('text');
+  });
+
+  test('should render with correct placeholder', () => {
+    const { container } = render(<TextAreaField placeholder={'placeholder'} />);
+    const textarea = container.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    expect(textarea!.placeholder).toMatch('placeholder');
+  });
+
+  test('should fire onChange when input changes', () => {
+    const onChange = jest.fn();
+    const { container } = render(<TextAreaField onChange={onChange} />);
+    const textarea = container.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    fireEvent.change(textarea!, { target: { value: 'text' } });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith('text');
+  });
+
+  test('should fire onBlur when textarea blurs', () => {
+    const onBlur = jest.fn();
+    const { container } = render(<TextAreaField onBlur={onBlur} />);
+    const textarea = container.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    fireEvent.blur(textarea!);
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/component/form/TextAreaField.tsx b/frontend/src/component/form/TextAreaField.tsx
index bf5d799c7..9526d601b 100644
--- a/frontend/src/component/form/TextAreaField.tsx
+++ b/frontend/src/component/form/TextAreaField.tsx
@@ -1,8 +1,7 @@
 import React, { ChangeEvent, Component } from 'react';
-import './TextArea.scss';
+import './TextAreaField.scss';
 
 interface IProps {
-  rows?: number;
   value?: string;
   placeholder?: string;
   onChange?: (value: string) => void;
@@ -14,7 +13,6 @@ export class TextAreaField extends Component<IProps, any> {
     return (
       <textarea
         className={'text-area'}
-        rows={this.props.rows}
         value={this.props.value}
         placeholder={this.props.placeholder}
         onChange={this.handleChange}

From 778a3786b5b72727b9ade84f00278f99fd49f76a Mon Sep 17 00:00:00 2001
From: Rohith Balaji <rohithbalaji123@gmail.com>
Date: Mon, 6 Jul 2020 11:57:44 +0530
Subject: [PATCH 3/3] Apply suggestions from code review

---
 frontend/src/component/form/TextAreaField.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/form/TextAreaField.spec.tsx b/frontend/src/component/form/TextAreaField.spec.tsx
index fcef35abc..e46e20f3d 100644
--- a/frontend/src/component/form/TextAreaField.spec.tsx
+++ b/frontend/src/component/form/TextAreaField.spec.tsx
@@ -23,7 +23,7 @@ describe('TextAreaField component', () => {
     expect(textarea!.placeholder).toMatch('placeholder');
   });
 
-  test('should fire onChange when input changes', () => {
+  test('should trigger onChange when input changes', () => {
     const onChange = jest.fn();
     const { container } = render(<TextAreaField onChange={onChange} />);
     const textarea = container.querySelector('textarea');
@@ -35,7 +35,7 @@ describe('TextAreaField component', () => {
     expect(onChange).toHaveBeenLastCalledWith('text');
   });
 
-  test('should fire onBlur when textarea blurs', () => {
+  test('should trigger onBlur when textarea blurs', () => {
     const onBlur = jest.fn();
     const { container } = render(<TextAreaField onBlur={onBlur} />);
     const textarea = container.querySelector('textarea');