feat/add props form control (#45706)

* feat: add textarea variation to formControl

* feat/add-storybook-argtypes

tools/ui-components/src/form-control/form-control.stories.tsx

@@ -4,7 +4,33 @@ import { FormControl, FormControlProps, FormControlVariationProps } from '.';
 
 const story = {
   title: 'Example/FormControl',
-  component: FormControl
+  component: FormControl,
+  parameters: {
+    controls: {
+      include: [
+        'className',
+        'id',
+        'onChange',
+        'value',
+        'componentClass',
+        'placeholder',
+        'required',
+        'type'
+      ]
+    }
+  },
+  argTypes: {
+    className: { control: { type: 'text' } },
+    id: { control: { type: 'text' } },
+    onChange: { action: 'changed' },
+    value: { control: { type: 'text' } },
+    componentClass: {
+      options: ['input', 'textarea']
+    },
+    placeholder: { control: { type: 'text' } },
+    required: { control: 'boolean' },
+    type: { options: ['text', 'email', 'url'] }
+  }
 };
 
 const DefaultTemplate: Story<FormControlProps> = args => {

tools/ui-components/src/form-control/form-control.tsx

@@ -2,18 +2,55 @@ import React from 'react';
 
 import { FormControlFeedback as Feedback } from './form-control-feedback';
 import { FormControlStatic as Static } from './form-control-static';
-import { FormControlProps } from './types';
+import { FormControlProps, FormControlElement } from './types';
 
-const FormControl = React.forwardRef<HTMLInputElement, FormControlProps>(
+// Uses controlId from <FormGroup> if not explicitly specified.
-  ({ className, id, testId }, ref): JSX.Element => {
+// type Only relevant if componentClass is 'input'.
-    const defaultClasses =
+
-      'outline-0 block w-full h-8 py-1.5 px-2.5 text-md text-default-foreground-primary ' +
+const FormControl = React.forwardRef<FormControlElement, FormControlProps>(
+  (
+    {
+      className,
+      id,
+      testId,
+      onChange,
+      value,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      componentClass: Component = 'input',
+      placeholder,
+      name,
+      required,
+      type
+    },
+    ref
+  ): JSX.Element => {
+    let defaultClasses =
+      'outline-0 block w-full 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(' ');
+    let variantClass;
-    return <input ref={ref} id={id} data-testid={testId} className={classes} />;
+    if (Component === 'textarea') variantClass = 'h-auto';
+    else defaultClasses += 'h-8';
+
+    //row and componentClass
+    const classes = [defaultClasses, variantClass, className].join(' ');
+
+    return (
+      <Component
+        ref={ref}
+        id={id}
+        data-testid={testId}
+        className={classes}
+        value={value}
+        required={required}
+        onChange={onChange}
+        name={name}
+        placeholder={placeholder}
+        type={type}
+      />
+    );
   }
 );
 const MainFormControl = Object.assign(FormControl, { Feedback, Static });

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

@@ -1,7 +1,20 @@
-export interface FormControlProps {
+import React from 'react';
+
+export type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
+
+export interface FormControlProps
+  extends React.HTMLAttributes<FormControlElement> {
   className?: string;
   id?: string;
   testId?: string;
+  onChange?: React.ChangeEventHandler<FormControlElement>;
+  value?: string;
+  componentClass?: typeof React.Component;
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+  rows?: number;
+  type?: 'text' | 'email' | 'url';
 }
 
 export interface FormControlVariationProps {