PROD-1024 textarea - PLAT-895_create-intake

src/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx

@@ -23,7 +23,7 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             <Link
                 className='large-tab'
                 tabIndex={-1}
-                to={route} 
+                to={route}
             >
                 {title}
             </Link>

src/lib/button/index.ts

@@ -1,6 +1,10 @@
 export { default as Button } from './Button'
-export type {
-    ButtonSize,
-    ButtonStyle,
-    ButtonType
-} from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonSize } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonStyle } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonType } from './Button'

src/lib/form/Form.tsx

@@ -12,9 +12,9 @@ import {
     formSubmitAsync,
     formValidateAndUpdate,
 } from './form-functions'
+import { InputText, InputTextarea } from './form-input'
 import { FormInputModel } from './form-input.model'
 import styles from './Form.module.scss'
-import { TextInput } from './text-input'
 
 interface FormProps<ValueType, RequestType> {
     readonly formDef: FormDefinition
@@ -71,15 +71,26 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
         const formInputs: Array<JSX.Element> = props.formDef.inputs
             .map(input => formGetInputModel(props.formDef.inputs, input.name))
             .map((inputModel, index) => {
-                return (
-                    <TextInput
-                        {...inputModel}
-                        key={inputModel.name}
-                        tabIndex={inputModel.notTabbable ? -1 : index + 1}
-                        type={inputModel.type || 'text'}
-                        value={inputModel.value}
-                    />
-                )
+                switch (inputModel.type) {
+                    case 'textarea':
+                        return <InputTextarea
+                            {...inputModel}
+                            key={inputModel.name}
+                            tabIndex={inputModel.notTabbable ? -1 : index + 1}
+                            value={inputModel.value}
+                        />
+                    default:
+                        return (
+                            <InputText
+                                {...inputModel}
+                                key={inputModel.name}
+                                tabIndex={inputModel.notTabbable ? -1 : index + 1}
+                                type={inputModel.type || 'text'}
+                                value={inputModel.value}
+                            />
+                        )
+                }
+
             })
 
         const buttons: Array<JSX.Element> = props.formDef.buttons

src/lib/form/form-input.model.ts

@@ -9,7 +9,7 @@ export interface FormInputModel {
     readonly notTabbable?: boolean
     readonly placeholder?: string
     readonly preventAutocomplete?: boolean
-    readonly type: 'password' | 'text'
+    readonly type: 'password' | 'text' | 'textarea'
     readonly validators: Array<(value: string | undefined, formValues?: HTMLFormControlsCollection, otherField?: string) => string | undefined>
     value?: string
 }

src/lib/form/form-field-wrapper/Form-Field-Wrapper.module.scss → src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss

@@ -1,21 +1,21 @@
-@import '../../styles';
+@import '../../../styles';
 
 $form-pad-top: calc($pad-md - $border);
 $border-xs: 1px;
 $error-line-height: 14px;
 
 .form-field-wrapper {
-    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding-bottom: $pad-md;
 
     .form-field {
+        flex: 1;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        padding: $pad-sm $form-pad-top;
+        padding: $pad-sm $form-pad-top $border-xs $form-pad-top;
         height: calc($pad-xxl * 2);
         background: $tc-white;
         border: $border-xs solid $black-40;
@@ -35,7 +35,7 @@ $error-line-height: 14px;
         &.focus,
         &.form-field-error {
             border-width: $border;
-            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs) 0 calc($form-pad-top - $border-xs);
         }
 
         &.disabled {
@@ -54,6 +54,8 @@ $error-line-height: 14px;
         }
 
         .label {
+            display: flex;
+            flex-direction: column;
             top: calc(50% - $form-pad-top/2);
             color: $turq-160;
             margin-bottom: $pad-xs;

src/lib/form/form-field-wrapper/Form-Field-Wrapper.tsx → src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.tsx

@@ -1,9 +1,11 @@
 import classNames from 'classnames'
 import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
 
-import { IconSolid } from '../../svgs'
+import { IconSolid } from '../../../svgs'
 
-import styles from './Form-Field-Wrapper.module.scss'
+import styles from './FormFieldWrapper.module.scss'
+
+export const optionalHint: string = '(optional)'
 
 interface FormFieldWrapperProps {
     readonly children: ReactNode

src/lib/form/form-input/form-field-wrapper/index.ts

@@ -0,0 +1,2 @@
+export { default as FormFieldWrapper } from './FormFieldWrapper'
+export { optionalHint as inputOptionalHint } from './FormFieldWrapper'

src/lib/form/form-input/index.ts

@@ -0,0 +1,3 @@
+export { inputOptionalHint } from './form-field-wrapper'
+export * from './input-text'
+export * from './input-textarea'

src/lib/form/text-input/Text-Input.module.scss → src/lib/form/form-input/input-text/InputText.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles';
+@import '../../../styles';
 
 .form-input-text {
     @extend .body-small;

src/lib/form/form-input/input-text/InputText.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<InputText /> ', () => {
+
+    test('it should display the InputText', () => { })
+})

src/lib/form/text-input/Text-Input.tsx → src/lib/form/form-input/input-text/InputText.tsx

@@ -2,11 +2,11 @@ import { FC } from 'react'
 
 import { FormFieldWrapper } from '../form-field-wrapper'
 
-import styles from './Text-Input.module.scss'
+import styles from './InputText.module.scss'
 
 export const optionalHint: string = '(optional)'
 
-interface TextInputProps {
+interface InputTextProps {
     readonly dirty?: boolean
     readonly disabled?: boolean
     readonly error?: string
@@ -20,7 +20,7 @@ interface TextInputProps {
     readonly value?: string | number
 }
 
-const TextInput: FC<TextInputProps> = (props: TextInputProps) => {
+const InputText: FC<InputTextProps> = (props: InputTextProps) => {
     return (
         <FormFieldWrapper
             dirty={!!props.dirty}
@@ -44,4 +44,4 @@ const TextInput: FC<TextInputProps> = (props: TextInputProps) => {
     )
 }
 
-export default TextInput
+export default InputText

src/lib/form/form-input/input-text/index.ts

@@ -0,0 +1,3 @@
+export {
+    default as InputText,
+} from './InputText'

src/lib/form/form-input/input-textarea/InputTextarea.module.scss

@@ -0,0 +1,12 @@
+@import '../../../styles';
+
+.form-input-textarea {
+    @include font-roboto;
+    @extend .body-small;
+    color: $black-60;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    resize: vertical;
+    margin-left: calc(-1 * $border)
+}

src/lib/form/form-input/input-textarea/InputTextarea.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<InputTextarea /> ', () => {
+
+    test('it should display the InputTextarea', () => { })
+})

src/lib/form/form-input/input-textarea/InputTextarea.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react'
+
+import { FormFieldWrapper } from '../form-field-wrapper'
+
+import styles from './InputTextarea.module.scss'
+
+interface InputTextareaProps {
+    readonly dirty?: boolean
+    readonly disabled?: boolean
+    readonly error?: string
+    readonly hint?: string
+    readonly label?: string
+    readonly name: string
+    readonly placeholder?: string
+    readonly preventAutocomplete?: boolean
+    readonly tabIndex: number
+    readonly value?: string | number
+}
+
+const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => {
+    return (
+        <FormFieldWrapper
+            dirty={!!props.dirty}
+            disabled={!!props.disabled}
+            error={props.error}
+            hint={props.hint}
+            label={props.label || props.name}
+            name={props.name}
+        >
+            <textarea
+                autoComplete={!!props.preventAutocomplete ? 'off' : undefined}
+                className={styles['form-input-textarea']}
+                defaultValue={props.value}
+                disabled={!!props.disabled}
+                name={props.name}
+                placeholder={props.placeholder}
+                tabIndex={props.tabIndex}
+            />
+        </FormFieldWrapper>
+    )
+}
+
+export default InputTextarea

src/lib/form/form-input/input-textarea/index.ts

@@ -0,0 +1,3 @@
+export {
+    default as InputTextarea,
+} from './InputTextarea'

src/lib/form/index.ts

@@ -6,5 +6,5 @@ export {
     formGetInputModel,
     formReset,
 } from './form-functions'
-export { textInputOptionalHint } from './text-input'
+export { inputOptionalHint } from './form-input'
 export * from './validator-functions'

src/lib/functions/user-functions/user-store/index.ts

@@ -1,2 +1,4 @@
 export { patchAsync as userPatchAsync } from './user-xhr.store'
-export type { UserPatchRequest } from './user-xhr.store'
+export
+// tslint:disable-next-line: no-unused-expression
+type { UserPatchRequest } from './user-xhr.store'

src/tools/work-intake/work-intake-form.config.ts

@@ -1,6 +1,6 @@
 import {
     FormDefinition,
-    textInputOptionalHint,
+    inputOptionalHint,
     validatorRequired,
 } from '../../lib'
 
@@ -26,7 +26,7 @@ export const workIntakeDef: FormDefinition = {
             ],
         },
         {
-            hint: textInputOptionalHint,
+            hint: inputOptionalHint,
             label: 'Share your data',
             name: 'data',
             placeholder: 'Paste a link',
@@ -36,7 +36,7 @@ export const workIntakeDef: FormDefinition = {
         {
             label: 'What would you like to learn?',
             name: 'description',
-            type: 'text',
+            type: 'textarea',
             validators: [
                 validatorRequired,
             ],