From e7577927df8bf6197720123f4caad508851ff108 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Fri, 1 Apr 2022 14:03:54 +0300
Subject: [PATCH] feat/create initial form control component (#45578)

* feat: form control initial structure

* feat: add form control feedback default styles.

* feat: add initial form control static styles

* feat: add initial form-control styles

* feat: add initial stories

* feat: readjust styles
---
 tools/ui-components/src/colors.css            |  1 +
 .../form-control/form-control-feedback.tsx    | 20 +++++++
 .../src/form-control/form-control-static.tsx  | 19 +++++++
 .../src/form-control/form-control.stories.tsx | 53 +++++++++++++++++++
 .../src/form-control/form-control.test.tsx    | 25 +++++++++
 .../src/form-control/form-control.tsx         | 22 ++++++++
 tools/ui-components/src/form-control/index.ts |  2 +
 tools/ui-components/src/form-control/types.ts | 12 +++++
 tools/ui-components/tailwind.config.js        |  9 ++++
 9 files changed, 163 insertions(+)
 create mode 100644 tools/ui-components/src/form-control/form-control-feedback.tsx
 create mode 100644 tools/ui-components/src/form-control/form-control-static.tsx
 create mode 100644 tools/ui-components/src/form-control/form-control.stories.tsx
 create mode 100644 tools/ui-components/src/form-control/form-control.test.tsx
 create mode 100644 tools/ui-components/src/form-control/form-control.tsx
 create mode 100644 tools/ui-components/src/form-control/index.ts
 create mode 100644 tools/ui-components/src/form-control/types.ts

diff --git a/tools/ui-components/src/colors.css b/tools/ui-components/src/colors.css
index b23123ef2a..5b2108a423 100644
--- a/tools/ui-components/src/colors.css
+++ b/tools/ui-components/src/colors.css
@@ -118,6 +118,7 @@ html.dark,
 div.dark {
   --default-foreground-primary: var(--gray00);
   --default-foreground-secondary: var(--gray05);
+  --default-foreground-tertiary: var(--gray10);
   --default-foreground-quaternary: var(--gray15);
   --default-foreground-danger: var(--red90);
   --default-foreground-info: var(--blue90);
diff --git a/tools/ui-components/src/form-control/form-control-feedback.tsx b/tools/ui-components/src/form-control/form-control-feedback.tsx
new file mode 100644
index 0000000000..707a79c9e3
--- /dev/null
+++ b/tools/ui-components/src/form-control/form-control-feedback.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { FormControlVariationProps } from './types';
+
+export const FormControlFeedback = ({
+  children,
+  className,
+  testId
+}: FormControlVariationProps) => {
+  const defaultClasses =
+    'absolute top-0 right-0 z-2 block w-8 h-8 leading-8 ' +
+    'text-center pointer-events-none text-green-700';
+
+  const classes = [defaultClasses, className].join(' ');
+  return (
+    <span className={classes} data-testid={testId}>
+      {children}
+    </span>
+  );
+};
diff --git a/tools/ui-components/src/form-control/form-control-static.tsx b/tools/ui-components/src/form-control/form-control-static.tsx
new file mode 100644
index 0000000000..c8d2a1f1ea
--- /dev/null
+++ b/tools/ui-components/src/form-control/form-control-static.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { FormControlVariationProps } from './types';
+
+export const FormControlStatic = ({
+  className,
+  children,
+  testId
+}: FormControlVariationProps) => {
+  const defaultClasses =
+    'py-1.5 mb-0 min-h-43-px text-default-foreground-secondary';
+
+  const classes = [defaultClasses, className].join(' ');
+  return (
+    <p className={classes} data-testid={testId}>
+      {children}
+    </p>
+  );
+};
diff --git a/tools/ui-components/src/form-control/form-control.stories.tsx b/tools/ui-components/src/form-control/form-control.stories.tsx
new file mode 100644
index 0000000000..76e8eec250
--- /dev/null
+++ b/tools/ui-components/src/form-control/form-control.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { FormControl, FormControlProps, FormControlVariationProps } from '.';
+
+const story = {
+  title: 'Example/FormControl',
+  component: FormControl
+};
+
+const DefaultTemplate: Story<FormControlProps> = args => {
+  return <FormControl {...args} />;
+};
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  // default props go here
+};
+
+const StaticTemplate: Story<FormControlVariationProps> = args => {
+  return <FormControl.Static {...args} />;
+};
+
+export const Static = StaticTemplate.bind({});
+Static.args = {
+  children: 'foo@bar.com'
+};
+
+const FeedBackTemplate: Story<FormControlVariationProps> = args => {
+  return <FormControl.Feedback {...args} />;
+};
+
+const checkMark = (
+  <svg
+    aria-hidden='true'
+    focusable='false'
+    data-prefix='fas'
+    data-icon='check'
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 448 512'
+  >
+    <path
+      fill='currentColor'
+      d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'
+    ></path>
+  </svg>
+);
+
+export const Feedback = FeedBackTemplate.bind({});
+Feedback.args = {
+  children: checkMark
+};
+
+export default story;
diff --git a/tools/ui-components/src/form-control/form-control.test.tsx b/tools/ui-components/src/form-control/form-control.test.tsx
new file mode 100644
index 0000000000..c1666143f8
--- /dev/null
+++ b/tools/ui-components/src/form-control/form-control.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { FormControl } from '.';
+
+describe('<FormControl />', () => {
+  it('should render correctly', () => {
+    render(<FormControl testId='test' />);
+    expect(screen.getByTestId('test')).toBeInTheDocument();
+  });
+});
+
+describe('<FormControl.Static />', () => {
+  it('should render correctly', () => {
+    render(<FormControl.Static testId='test' />);
+    expect(screen.getByTestId('test')).toBeInTheDocument();
+  });
+});
+
+describe('<FormControl.Feedback />', () => {
+  it('should render correctly', () => {
+    render(<FormControl.Feedback testId='test' />);
+    expect(screen.getByTestId('test')).toBeInTheDocument();
+  });
+});
diff --git a/tools/ui-components/src/form-control/form-control.tsx b/tools/ui-components/src/form-control/form-control.tsx
new file mode 100644
index 0000000000..7a8fcbc8a8
--- /dev/null
+++ b/tools/ui-components/src/form-control/form-control.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { FormControlFeedback as Feedback } from './form-control-feedback';
+import { FormControlStatic as Static } from './form-control-static';
+import { FormControlProps } from './types';
+
+const FormControl = React.forwardRef<HTMLInputElement, FormControlProps>(
+  ({ className, id, testId }, ref): JSX.Element => {
+    const defaultClasses =
+      'outline-0 block w-full h-8 py-1.5 px-2.5 text-md text-default-foreground-primary ' +
+      'bg-default-background-primary bg-none rounded-none border-1 border-solid ' +
+      'border-default-background-quaternary shadow-none ' +
+      'transition ease-in-out duration-150 focus:border-default-foreground-tertiary';
+
+    const classes = [defaultClasses, className].join(' ');
+    return <input ref={ref} id={id} data-testid={testId} className={classes} />;
+  }
+);
+const MainFormControl = Object.assign(FormControl, { Feedback, Static });
+
+FormControl.displayName = 'FormControl';
+export { MainFormControl as FormControl };
diff --git a/tools/ui-components/src/form-control/index.ts b/tools/ui-components/src/form-control/index.ts
new file mode 100644
index 0000000000..9a39cc761e
--- /dev/null
+++ b/tools/ui-components/src/form-control/index.ts
@@ -0,0 +1,2 @@
+export { FormControl } from './form-control';
+export type { FormControlProps, FormControlVariationProps } from './types';
diff --git a/tools/ui-components/src/form-control/types.ts b/tools/ui-components/src/form-control/types.ts
new file mode 100644
index 0000000000..78256b78eb
--- /dev/null
+++ b/tools/ui-components/src/form-control/types.ts
@@ -0,0 +1,12 @@
+export interface FormControlProps {
+  className?: string;
+  id?: string;
+  testId?: string;
+}
+
+export interface FormControlVariationProps {
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+  testId?: string;
+}
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index ffdf785e23..eb6d544b51 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -72,6 +72,7 @@ module.exports = {
       }
     },
     borderWidth: {
+      1: '1px',
       3: '3px'
     },
     fontSize: {
@@ -80,6 +81,14 @@ module.exports = {
       sm: ['16px', '1.5'],
       md: ['18px', '1.42857143'],
       lg: ['24px', '1.3333333']
+    },
+    minHeight: {
+      '43-px': '43px'
+    },
+    extend: {
+      zIndex: {
+        2: '2'
+      }
     }
   },
   plugins: []