Repeater pattern component

.gitignore

@@ -5,6 +5,7 @@
 _site
 .turbo/
 .vscode/
+.idea/
 coverage/
 html/
 node_modules/

packages/common/src/locales/en/app.ts

@@ -99,5 +99,10 @@ export const en = {
       preferNotToAnswerTextLabel:
         'Prefer not to share my gender identity checkbox label',
     },
+    repeater: {
+      ...defaults,
+      displayName: 'Repeatable Group',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
   },
 };

packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx

@@ -35,94 +35,104 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
   hint,
   required,
   error,
+  value,
 }) => {
   const { register } = useFormContext();
   const errorId = `input-error-message-${monthId}`;
   const hintId = `hint-${monthId}`;
 
   return (
     <fieldset className="usa-fieldset">
-      <legend className="usa-legend">
-        {label}
-        {required && <span className="required-indicator">*</span>}
-      </legend>
-      {hint && (
-        <span className="usa-hint" id={hintId}>
-          {hint}
-        </span>
-      )}
-      {error && (
-        <div className="usa-error-message" id={errorId} role="alert">
-          {error.message}
-        </div>
-      )}
-      <div className="usa-memorable-date">
-        <div className="usa-form-group usa-form-group--month usa-form-group--select">
-          <label className="usa-label" htmlFor={monthId}>
-            Month
-          </label>
-          <select
-            className={classNames('usa-input', {
-              'usa-input--error': !!error,
-            })}
-            id={monthId}
-            {...register(monthId)}
-            aria-describedby={
-              getAriaDescribedBy(
-                error ? errorId : null,
-                hint ? hintId : null
-              ) || undefined
-            }
-          >
-            <option key="default" value="">
-              - Select -
-            </option>
-            {months.map((option, index) => (
-              <option key={index} value={option.value}>
-                {option.label}
+      <div className={classNames('usa-form-group margin-top-2')}>
+        <legend
+          className={classNames('usa-legend', {
+            'usa-legend--error': error,
+          })}
+        >
+          {label}
+          {required && <span className="required-indicator">*</span>}
+        </legend>
+        {hint && (
+          <div className="usa-hint" id={hintId}>
+            {hint}
+          </div>
+        )}
+        {error && (
+          <div className="usa-error-message" id={errorId} role="alert">
+            {error.message}
+          </div>
+        )}
+        <div className="usa-memorable-date">
+          <div className="usa-form-group usa-form-group--month usa-form-group--select">
+            <label className="usa-label" htmlFor={monthId}>
+              Month
+            </label>
+            <select
+              className={classNames('usa-input', {
+                'usa-input--error': !!error,
+              })}
+              id={monthId}
+              {...register(monthId)}
+              defaultValue={value?.month}
+              aria-describedby={
+                getAriaDescribedBy(
+                  error ? errorId : null,
+                  hint ? hintId : null
+                ) || undefined
+              }
+            >
+              <option key="default" value="">
+                - Select -
               </option>
-            ))}
-          </select>
-        </div>
-        <div className="usa-form-group usa-form-group--day">
-          <label className="usa-label" htmlFor={dayId}>
-            Day
-          </label>
-          <input
-            className={classNames('usa-input', {
-              'usa-input--error': !!error,
-            })}
-            id={dayId}
-            {...register(dayId, { required })}
-            minLength={2}
-            maxLength={2}
-            pattern="[0-9]*"
-            inputMode="numeric"
-            aria-describedby={getAriaDescribedBy(
-              error ? `input-error-message-${dayId}` : null,
-              hint ? hintId : null
-            )}
-          />
-        </div>
-        <div className="usa-form-group usa-form-group--year">
-          <label className="usa-label" htmlFor={yearId}>
-            Year
-          </label>
-          <input
-            className={classNames('usa-input', {
-              'usa-input--error': !!error,
-            })}
-            id={yearId}
-            {...register(yearId, { required })}
-            minLength={4}
-            maxLength={4}
-            pattern="[0-9]*"
-            inputMode="numeric"
-            aria-describedby={getAriaDescribedBy(
-              error ? `input-error-message-${yearId}` : null,
-              hint ? hintId : null
-            )}
-          />
+              {months.map((option, index) => (
+                <option key={index} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="usa-form-group usa-form-group--day">
+            <label className="usa-label" htmlFor={dayId}>
+              Day
+            </label>
+            <input
+              className={classNames('usa-input', {
+                'usa-input--error': !!error,
+              })}
+              id={dayId}
+              {...register(dayId, { required })}
+              minLength={2}
+              maxLength={2}
+              pattern="[0-9]*"
+              inputMode="numeric"
+              aria-describedby={getAriaDescribedBy(
+                error ? `input-error-message-${dayId}` : null,
+                hint ? hintId : null
+              )}
+              defaultValue={value?.day}
+            />
+          </div>
+          <div className="usa-form-group usa-form-group--year">
+            <label className="usa-label" htmlFor={yearId}>
+              Year
+            </label>
+            <input
+              className={classNames('usa-input', {
+                'usa-input--error': !!error,
+              })}
+              id={yearId}
+              {...register(yearId, { required })}
+              minLength={4}
+              maxLength={4}
+              pattern="[0-9]*"
+              inputMode="numeric"
+              aria-describedby={getAriaDescribedBy(
+                error ? `input-error-message-${yearId}` : null,
+                hint ? hintId : null
+              )}
+              defaultValue={value?.year}
+            />
+          </div>
         </div>
       </div>
     </fieldset>

packages/design/src/Form/components/EmailInput/EmailInput.tsx

@@ -9,14 +9,20 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
   label,
   required,
   error,
+  value,
 }) => {
   const { register } = useFormContext();
   const errorId = `input-error-message-${emailId}`;
 
   return (
     <fieldset className="usa-fieldset">
-      <div className="usa-form-group">
-        <label className="usa-label" htmlFor={emailId}>
+      <div className={classNames('usa-form-group margin-top-2')}>
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': error,
+          })}
+          htmlFor={emailId}
+        >
           {label}
           {required && <span className="required-indicator">*</span>}
         </label>
@@ -26,14 +32,15 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
           </div>
         )}
         <input
-          className={classNames('usa-input margin-bottom-1', {
+          className={classNames('usa-input usa-input--xl', {
             'usa-input--error': error,
           })}
           id={emailId}
           type="email"
           autoCapitalize="off"
           autoCorrect="off"
           {...register(emailId, { required })}
+          defaultValue={value?.email || ''}
           aria-describedby={error ? errorId : undefined}
         />
       </div>

packages/design/src/Form/components/GenderId/index.tsx

@@ -10,7 +10,7 @@ const GenderIdPattern: PatternComponent<GenderIdProps> = ({
   label,
   required,
   error,
-  value = '',
+  value,
   preferNotToAnswerText,
   preferNotToAnswerChecked: initialPreferNotToAnswerChecked = false,
 }) => {
@@ -22,7 +22,7 @@ const GenderIdPattern: PatternComponent<GenderIdProps> = ({
   const errorId = `input-error-message-${genderId}`;
   const hintId = `hint-${genderId}`;
   const preferNotToAnswerId = `${genderId}.preferNotToAnswer`;
-  const inputId = `${genderId}.input`;
+  const inputId = `${genderId}.gender`;
 
   const watchedValue = useWatch({ name: inputId, defaultValue: value });
 

packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx

@@ -4,6 +4,15 @@ import { useFormContext } from 'react-hook-form';
 import { type PhoneNumberProps } from '@atj/forms';
 import { type PatternComponent } from '../../index.js';
 
+const formatPhoneNumber = (value: string) => {
+  const rawValue = value.replace(/[^\d]/g, ''); // Remove non-digit characters
+
+  if (rawValue.length <= 3) return rawValue;
+  if (rawValue.length <= 6)
+    return `${rawValue.slice(0, 3)}-${rawValue.slice(3)}`;
+  return `${rawValue.slice(0, 3)}-${rawValue.slice(3, 6)}-${rawValue.slice(6, 10)}`;
+};
+
 export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
   phoneId,
   hint,
@@ -12,10 +21,15 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
   error,
   value,
 }) => {
-  const { register } = useFormContext();
+  const { register, setValue } = useFormContext();
   const errorId = `input-error-message-${phoneId}`;
   const hintId = `hint-${phoneId}`;
 
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedPhone = formatPhoneNumber(e.target.value);
+    setValue(phoneId, formattedPhone, { shouldValidate: true });
+  };
+
   return (
     <fieldset className="usa-fieldset">
       <div className={classNames('usa-form-group margin-top-2')}>
@@ -39,13 +53,14 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           </div>
         )}
         <input
-          className={classNames('usa-input', {
+          className={classNames('usa-input usa-input--xl', {
             'usa-input--error': error,
           })}
           id={phoneId}
-          type="tel"
+          type="text"
           defaultValue={value}
           {...register(phoneId, { required })}
+          onChange={handlePhoneChange}
           aria-describedby={
             `${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
             undefined

packages/design/src/Form/components/RadioGroup/RadioGroup.tsx

@@ -13,17 +13,18 @@ export const RadioGroupPattern: PatternComponent<RadioGroupProps> = props => {
         {props.legend}
       </legend>
       {props.options.map((option, index) => {
+        const id = option.id;
         return (
           <div key={index} className="usa-radio">
             <input
               className="usa-radio__input"
               type="radio"
-              id={option.id}
-              {...register(props.groupId)}
+              id={`input-${id}`}
+              {...register(`${props.groupId}`)}
               value={option.id}
               defaultChecked={option.defaultChecked}
             />
-            <label htmlFor={option.id} className="usa-radio__label">
+            <label htmlFor={`input-${id}`} className="usa-radio__label">
               {option.label}
             </label>
           </div>