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

@@ -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);

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>
+  );
+};

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>
+  );
+};

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;

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();
+  });
+});

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 };

tools/ui-components/src/form-control/index.ts

@@ -0,0 +1,2 @@
+export { FormControl } from './form-control';
+export type { FormControlProps, FormControlVariationProps } from './types';

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;
+}

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: []