feat(contact): input error styling

cfpb · May 22, 2024 · 8e60e78 · 8e60e78
1 parent a0aaf37
commit 8e60e78
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/index.css b/src/index.css
@@ -12,6 +12,10 @@ https://v1.tailwindcss.com/docs/adding-base-styles#using-css */
   }
 }
 
+select.error {
+  @apply outline border-[1px] border-solid border-errorColor outline-[1px] outline-errorColor;
+}
+
 .auth-action .a-btn {
   font-weight: 600;
   color: #43484e;

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
@@ -18,6 +18,7 @@ import submitPointOfContact from 'api/requests/submitPointOfContact';
 import useSblAuth from 'api/useSblAuth';
 import FormErrorHeader from 'components/FormErrorHeader';
 import FormMain from 'components/FormMain';
+import InputErrorMessage from 'components/InputErrorMessage';
 import { LoadingContent } from 'components/Loading';
 import FilingNavButtons from 'pages/Filing/FilingApp/FilingNavButtons';
 import FilingSteps from 'pages/Filing/FilingApp/FilingSteps';
@@ -218,13 +219,23 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
               label='First name'
               id='firstName'
               {...register('firstName')}
+              errorMessage={formErrors.firstName?.message}
+              showError
             />
             <InputEntry
               label='Last name'
               id='lastName'
               {...register('lastName')}
+              errorMessage={formErrors.lastName?.message}
+              showError
             />
-            <InputEntry label='Phone number' id='phone' {...register('phone')}>
+            <InputEntry
+              label='Phone number'
+              id='phone'
+              {...register('phone')}
+              errorMessage={formErrors.phone?.message}
+              showError
+            >
               <Paragraph className='text-labelHelper'>
                 Phone number must be in 555-555-5555 format.
               </Paragraph>
@@ -233,11 +244,15 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
               label='Email address'
               id='email'
               {...register('email')}
+              errorMessage={formErrors.email?.message}
+              showError
             />
             <InputEntry
               label='Street address line 1'
               id='hq_address_street_1'
               {...register('hq_address_street_1')}
+              errorMessage={formErrors.hq_address_street_1?.message}
+              showError
             />
             <InputEntry
               label='Street address line 2'
@@ -261,23 +276,35 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
               label='City'
               id='hq_address_city'
               {...register('hq_address_city')}
+              errorMessage={formErrors.hq_address_city?.message}
+              showError
             />
             <div className='mb-[1.875rem]'>
               <Select
+                className={formErrors.hq_address_state?.message ? 'error' : ''}
                 id='state'
                 label='State or territory'
                 // @ts-expect-error Select TypeScript error -- needs to be fixed in DSR
                 onChange={onSelectState}
                 options={statesObject.states} // https://en.wikipedia.org/wiki/ISO_3166-2#Subdivisions_included_in_ISO_3166-1:~:text=US-,United%20States,-US%2DAS%20American
                 value={watch('hq_address_state')}
               />
+              <div>
+                {formErrors.hq_address_state?.message ? (
+                  <InputErrorMessage>
+                    {formErrors.hq_address_state.message}
+                  </InputErrorMessage>
+                ) : null}
+              </div>
             </div>
             <InputEntry
               className='flex-1'
               label='ZIP code'
               id='zip'
               isLast
               {...register('hq_address_zip')}
+              errorMessage={formErrors.hq_address_zip?.message}
+              showError
             >
               <Paragraph className='text-labelHelper'>
                 ZIP code must be in 55555 or 55555-5555 format.