feat: update error state and message for phone pattern tckt-363

GSA-TTS · Nov 13, 2024 · 468ba0d · 468ba0d
1 parent 04d452a
commit 468ba0d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/packages/design/src/Form/components/PhoneNumber/PhoneNumber.stories.tsx b/packages/design/src/Form/components/PhoneNumber/PhoneNumber.stories.tsx
@@ -10,11 +10,7 @@ const meta: Meta<typeof PhoneNumberPattern> = {
   decorators: [
     (Story, args) => {
       const FormDecorator = () => {
-        const formMethods = useForm({
-          defaultValues: {
-            phoneId: '',
-          },
-        });
+        const formMethods = useForm();
         return (
           <FormProvider {...formMethods}>
             <Story {...args} />
@@ -33,15 +29,15 @@ export const Default: StoryObj<typeof PhoneNumberPattern> = {
   args: {
     phoneId: 'phone',
     label: 'Phone number',
-    required: true,
+    required: false,
   },
 };
 
-export const WithoutRequired: StoryObj<typeof PhoneNumberPattern> = {
+export const WithRequired: StoryObj<typeof PhoneNumberPattern> = {
   args: {
     phoneId: 'phone',
     label: 'Phone number',
-    required: false,
+    required: true,
   },
 };
 
@@ -65,3 +61,16 @@ export const WithHint: StoryObj<typeof PhoneNumberPattern> = {
     required: true,
   },
 };
+
+export const WithHintAndError: StoryObj<typeof PhoneNumberPattern> = {
+  args: {
+    phoneId: 'phone',
+    label: 'Phone number',
+    hint: '10-digit, U.S. only, for example 999-999-9999',
+    required: true,
+    error: {
+      type: 'custom',
+      message: 'This field has an error',
+    },
+  },
+};
diff --git a/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx b/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useFormContext } from 'react-hook-form';
 import { type PhoneNumberProps } from '@atj/forms';
 import { type PatternComponent } from '../../index.js';
@@ -15,8 +16,14 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
 
   return (
     <fieldset className="usa-fieldset">
-      <div className="usa-form-group">
-        <label className="usa-label" htmlFor={phoneId}>
+      <div className={classNames('usa-form-group margin-top-2')}>
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': error,
+          })}
+          id={`input-message-${phoneId}`}
+          htmlFor={phoneId}
+        >
           {label}
           {required && <span className="required-indicator">*</span>}
         </label>
@@ -25,21 +32,25 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
             {hint}
           </div>
         )}
+        {error && (
+          <div
+            className="usa-error-message"
+            id={`input-error-message-${phoneId}`}
+            role="alert"
+          >
+            {error.message}
+          </div>
+        )}
         <input
-          className="usa-input margin-bottom-1"
+          className={classNames('usa-input', {
+            'usa-input--error': error,
+          })}
           id={phoneId}
           type="tel"
-          {...register(phoneId, { required })}
           defaultValue={value}
+          {...register(phoneId, { required })}
           aria-describedby="primaryPnHint"
-          // pattern="[0-9]*"
-          // inputMode="numeric"
         />
-        {error && (
-          <div className="error-message" style={{ color: 'red' }}>
-            {error.message}
-          </div>
-        )}
       </div>
     </fieldset>
   );

diff --git a/packages/forms/src/services/submit-form.test.ts b/packages/forms/src/services/submit-form.test.ts
@@ -261,7 +261,6 @@ describe('multi-page form', () => {
         session: {
           ...session,
           data: {
-            attachments: undefined,
             errors: {},
             values: {
               'element-1': 'test',