From f88aac8327c05b94af66e6d870ccddda9b32cc34 Mon Sep 17 00:00:00 2001
From: Patrick DeVries <pcdevri@gmail.com>
Date: Mon, 25 Oct 2021 15:13:06 -0500
Subject: [PATCH] feat(textinput): add variant support to TextInput

Added easy styling options to TextInput with a variant prop supporting outline, fill, and text
options.

re #256
---
 .../TextInput/__tests__/TextInput.test.tsx    |  22 +++
 .../__snapshots__/TextInput.test.tsx.snap     | 148 ++++++++++++++++++
 2 files changed, 170 insertions(+)
 create mode 100644 src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap

diff --git a/src/components/TextInput/__tests__/TextInput.test.tsx b/src/components/TextInput/__tests__/TextInput.test.tsx
index ce97137b5..23679afc0 100644
--- a/src/components/TextInput/__tests__/TextInput.test.tsx
+++ b/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { render, configure, waitFor } from '@testing-library/react';
 import TextInput from '../TextInput';
 import { axe, toHaveNoViolations } from 'jest-axe';
+import variants from '../../../enums/variants';
 
 expect.extend(toHaveNoViolations);
 configure({ testIdAttribute: 'data-test-id' });
@@ -11,6 +12,27 @@ const testId = 'foundry-text-input';
 const containerProps = { 'data-test-id': testId };
 
 describe('TextInput', () => {
+  describe('Rendering tests', () => {
+    it('Shows TextInput with default props', async () => {
+      const { container, getByTestId } = render(<TextInput containerProps={containerProps} />);
+      await waitFor(() => getByTestId(testId));
+      expect(container).toMatchSnapshot();
+    });
+    it('Shows TextInput with fill variant', async () => {
+      const { container, getByTestId } = render(
+        <TextInput variant={variants.fill} containerProps={containerProps} />,
+      );
+      await waitFor(() => getByTestId(testId));
+      expect(container).toMatchSnapshot();
+    });
+    it('Shows TextInput with text variant', async () => {
+      const { container, getByTestId } = render(
+        <TextInput variant={variants.text} containerProps={containerProps} />,
+      );
+      await waitFor(() => getByTestId(testId));
+      expect(container).toMatchSnapshot();
+    });
+  });
   describe('Accessibility Tests', () => {
     it('Should pass accessibility test with default props', async () => {
       const component = <TextInput aria-label="text-input"></TextInput>;
diff --git a/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
new file mode 100644
index 000000000..190e62076
--- /dev/null
+++ b/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInput Rendering tests Shows TextInput with default props 1`] = `
+.c0 {
+  min-width: 10rem;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row;
+  -ms-flex-flow: row;
+  flex-flow: row;
+  border-radius: 0.25em;
+  border: 1px solid #51575D;
+  background-color: #fff;
+}
+
+.c1 {
+  border: 0 none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  outline: 0 none;
+  font-size: 1em;
+  padding: 0.5rem;
+  background-color: transparent;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 5px 0.150rem #64ACC5;
+}
+
+<div>
+  <div
+    class=" c0"
+    data-test-id="foundry-text-input"
+  >
+    <input
+      class=" c1"
+      cols="10"
+      rows="10"
+      type="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Rendering tests Shows TextInput with fill variant 1`] = `
+.c0 {
+  min-width: 10rem;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row;
+  -ms-flex-flow: row;
+  flex-flow: row;
+  border-radius: 0.25em;
+  border: 1px solid transparent;
+  border-bottom: 1px solid #51575D;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #e6e6e6;
+}
+
+.c1 {
+  border: 0 none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  outline: 0 none;
+  font-size: 1em;
+  padding: 0.5rem;
+  background-color: transparent;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 5px 0.150rem #64ACC5;
+}
+
+<div>
+  <div
+    class=" c0"
+    data-test-id="foundry-text-input"
+  >
+    <input
+      class=" c1"
+      cols="10"
+      rows="10"
+      type="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Rendering tests Shows TextInput with text variant 1`] = `
+.c0 {
+  min-width: 10rem;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row;
+  -ms-flex-flow: row;
+  flex-flow: row;
+  border-radius: 0.25em;
+  border: 1px solid transparent;
+  background-color: #fff;
+}
+
+.c1 {
+  border: 0 none;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  outline: 0 none;
+  font-size: 1em;
+  padding: 0.5rem;
+  background-color: transparent;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 5px 0.150rem #64ACC5;
+}
+
+<div>
+  <div
+    class=" c0"
+    data-test-id="foundry-text-input"
+  >
+    <input
+      class=" c1"
+      cols="10"
+      rows="10"
+      type="text"
+    />
+  </div>
+</div>
+`;