From b2de9fef112b54d2168bff0d384890f38a59c841 Mon Sep 17 00:00:00 2001
From: Robin Wijnant <robin@wijnant.me>
Date: Sat, 27 Feb 2021 20:00:34 +0100
Subject: [PATCH 1/4] feat(textarea): add isDisabled prop

---
 src/components/TextArea/TextArea.mdx        | 6 ++++++
 src/components/TextArea/TextArea.module.css | 5 +++++
 src/components/TextArea/TextArea.test.tsx   | 9 +++++++++
 src/components/TextArea/TextArea.tsx        | 3 +++
 4 files changed, 23 insertions(+)

diff --git a/src/components/TextArea/TextArea.mdx b/src/components/TextArea/TextArea.mdx
index 2c0a7126..9322b3c3 100644
--- a/src/components/TextArea/TextArea.mdx
+++ b/src/components/TextArea/TextArea.mdx
@@ -35,6 +35,12 @@ A Input can be used to let the user insert text using key strokes. A crucial for
   <TextArea name="invalidTextArea" isInvalid />
 </Playground>
 
+### Disabled input
+
+<Playground>
+  <TextArea name="disabledTextArea" isDisabled value="This field is disabled" />
+</Playground>
+
 ## API
 
 <Props of={TextArea} />
diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
index 963b301b..a3996752 100644
--- a/src/components/TextArea/TextArea.module.css
+++ b/src/components/TextArea/TextArea.module.css
@@ -17,6 +17,11 @@
   box-shadow: 0 0 0 3px var(--color-focus);
 }
 
+.textarea:disabled {
+  color: var(--color-neutral-4);
+  border-color: var(--color-neutral-4);
+}
+
 .containsError {
   border-color: var(--color-error);
 }
diff --git a/src/components/TextArea/TextArea.test.tsx b/src/components/TextArea/TextArea.test.tsx
index 27de8f37..2610e8ab 100644
--- a/src/components/TextArea/TextArea.test.tsx
+++ b/src/components/TextArea/TextArea.test.tsx
@@ -79,6 +79,15 @@ describe('TextArea', () => {
     expect(textAreaElement.getAttribute('autocomplete')).toBe('on');
   });
 
+  test('disabled prop', () => {
+    const component = <TextArea {...defaultButtonProps} isDisabled />;
+    const { getByTestId } = render(component);
+    const textAreaElement = getByTestId('textarea-comment');
+
+    expect(textAreaElement.hasAttribute('spellcheck')).toBe(true);
+    expect(textAreaElement.getAttribute('spellcheck')).not.toBe(false);
+  });
+
   test('maxLength prop', () => {
     const maxLength = 3;
     const component = <TextArea {...defaultButtonProps} maxLength={3} />;
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index ba11e1b6..fcfd3d1a 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -12,6 +12,7 @@ interface Props {
   placeholder?: string;
   spellCheck?: boolean;
   autoComplete?: boolean;
+  isDisabled?: boolean;
   maxLength?: number;
   className?: string;
   isInvalid?: boolean;
@@ -28,6 +29,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(
       isInvalid = false,
       spellCheck = false,
       autoComplete = false,
+      isDisabled = false,
       maxLength,
       className,
     }: Props,
@@ -55,6 +57,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(
         className={textareaClassNames}
         data-testid={name && `textarea-${name}`}
         onBlur={onBlur}
+        disabled={isDisabled}
       />
     );
   },

From 838d36aad4d6de5fcabbdf75cf1dac3ac908eaf7 Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Sat, 27 Feb 2021 20:29:28 +0100
Subject: [PATCH 2/4] fix(Button): theme

---
 src/theme.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme.css b/src/theme.css
index 860b1890..ad3b77d8 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -49,10 +49,10 @@
 
   /* Font */
   --font-family: Lato, sans-serif;
-  --font-size: 16px;
+  --font-size: 14px;
   --font-color: var(--color-neutral-8);
   --font-color-sub: var(--color-neutral-7);
-  --line-height: 28px;
+  --line-height: 16px;
 
   /* Border */
   --border-radius-small: 3px;

From 34729fb6d01bf40bf38d8a28e1e505450426db92 Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Sat, 27 Feb 2021 20:45:21 +0100
Subject: [PATCH 3/4] fix(Input): remove shadow of safari

---
 src/components/Input/Input.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
index d715fc46..8323ae4a 100644
--- a/src/components/Input/Input.module.css
+++ b/src/components/Input/Input.module.css
@@ -5,6 +5,7 @@
   padding: 8px 14px;
   width: 100%;
   color: var(--color-neutral-9);
+  -webkit-appearance: none;
 }
 
 .input::placeholder {

From 610ba39a6a580927a72b9d9420a7fc3918afea8a Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Sat, 27 Feb 2021 20:46:42 +0100
Subject: [PATCH 4/4] move build step

---
 .github/workflows/pipeline.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml
index 645e720b..f3e64be0 100644
--- a/.github/workflows/pipeline.yml
+++ b/.github/workflows/pipeline.yml
@@ -25,16 +25,16 @@ jobs:
       - name: Run ESLint
         run: yarn lint --quiet --color
 
+      - name: Run tests
+        id: tests
+        run: yarn run test --watchAll=false --colors --ci --coverage
+
       - name: Compile src
         run: yarn build
 
       - name: Build the docs
         run: yarn document
 
-      - name: Run tests
-        id: tests
-        run: yarn run test --watchAll=false --colors --ci --coverage
-
       - name: Upload coverage report to codecov
         uses: codecov/codecov-action@v1