feat: update DOB Pattern to Date Pattern and add Date Picker Configuration (TCKT-572) (#623)

kalasgarov · web-flow · commit d7caad3b44dd · 2025-04-18T07:03:20.000-07:00
* refactor: update DOB pattern to Date pattern TCKT-572

* refactor: update config files for DOB pattern TCKT-572

* feat: add config file for Date picker pattern TCKT-572

* test: add config tests for Date picker pattern TCKT-572

* feat: update types and add Date picker pattern to dropdown menu TCKT-572

* chore: update imports to reflect component name change from DOB to Date TCKT-572
diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts
@@ -94,9 +94,9 @@ export const en = {
       hint: '',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
-    dateOfBirth: {
+    date: {
       ...defaults,
-      displayName: 'Date of birth',
+      displayName: 'Date',
       fieldLabel: 'Question text',
       hintLabel: 'Hint text (optional)',
       hint: 'For example: January 19 2000',
diff --git a/packages/design/src/Form/components/Date/Date.stories.tsx b/packages/design/src/Form/components/Date/Date.stories.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { type Meta, type StoryObj } from '@storybook/react';
 
-import { DateOfBirthPattern } from './DateOfBirth.js';
+import { DatePattern } from './Date.js';
 
-const meta: Meta<typeof DateOfBirthPattern> = {
+const meta: Meta<typeof DatePattern> = {
   title: 'patterns/DateOfBirthPattern',
-  component: DateOfBirthPattern,
+  component: DatePattern,
   decorators: [
     (Story, args) => {
       const FormDecorator = () => {
@@ -33,7 +33,7 @@ const meta: Meta<typeof DateOfBirthPattern> = {
 
 export default meta;
 
-export const Default: StoryObj<typeof DateOfBirthPattern> = {
+export const Default: StoryObj<typeof DatePattern> = {
   args: {
     _patternId: '',
     type: 'date-of-birth',
@@ -46,7 +46,7 @@ export const Default: StoryObj<typeof DateOfBirthPattern> = {
   },
 };
 
-export const WithoutHint: StoryObj<typeof DateOfBirthPattern> = {
+export const WithoutHint: StoryObj<typeof DatePattern> = {
   args: {
     _patternId: '',
     type: 'date-of-birth',
@@ -59,7 +59,7 @@ export const WithoutHint: StoryObj<typeof DateOfBirthPattern> = {
   },
 };
 
-export const WithError: StoryObj<typeof DateOfBirthPattern> = {
+export const WithError: StoryObj<typeof DatePattern> = {
   args: {
     _patternId: '',
     type: 'date-of-birth',
@@ -76,7 +76,7 @@ export const WithError: StoryObj<typeof DateOfBirthPattern> = {
   },
 };
 
-export const Required: StoryObj<typeof DateOfBirthPattern> = {
+export const Required: StoryObj<typeof DatePattern> = {
   args: {
     _patternId: '',
     type: 'date-of-birth',
diff --git a/packages/design/src/Form/components/Date/Date.tsx b/packages/design/src/Form/components/Date/Date.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { useFormContext } from 'react-hook-form';
-import { type DateOfBirthProps } from '@gsa-tts/forms-core';
+import { type DateProps } from '@gsa-tts/forms-core';
 import { type PatternComponent } from '../../index.js';
 
 const months = [
@@ -27,7 +27,7 @@ const getAriaDescribedBy = (
   return ids || undefined;
 };
 
-export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
+export const DatePattern: PatternComponent<DateProps> = ({
   monthId,
   dayId,
   yearId,
diff --git a/packages/design/src/Form/components/Date/index.tsx b/packages/design/src/Form/components/Date/index.tsx
@@ -0,0 +1,3 @@
+import { DatePattern } from './Date.js';
+
+export default DatePattern;
diff --git a/packages/design/src/Form/components/DateOfBirth/index.tsx b/packages/design/src/Form/components/DateOfBirth/index.tsx
diff --git a/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
@@ -5,7 +5,7 @@ import Fieldset from './index.js';
 import { FormProvider, useForm } from 'react-hook-form';
 import { defaultPatternComponents } from '../index.js';
 import type {
-  DateOfBirthProps,
+  DateProps,
   EmailInputProps,
   FieldsetProps,
 } from '@gsa-tts/forms-core';
@@ -35,7 +35,7 @@ const mockChildComponents = (index: number, hasError: boolean) => [
             message: 'Invalid date of birth',
           }
         : undefined,
-    } as DateOfBirthProps,
+    } as DateProps,
     children: [],
   },
   {
diff --git a/packages/design/src/Form/components/Repeater/Repeater.stories.tsx b/packages/design/src/Form/components/Repeater/Repeater.stories.tsx
@@ -4,7 +4,7 @@ import Repeater from './index.js';
 import { FormProvider, useForm } from 'react-hook-form';
 import { defaultPatternComponents } from '../index.js';
 import type {
-  DateOfBirthProps,
+  DateProps,
   EmailInputProps,
   RepeaterProps,
 } from '@gsa-tts/forms-core';
@@ -28,7 +28,7 @@ const mockChildComponents = (index: number) => [
       monthId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.a6c217f0-fe84-44ef-b606-69142ecb3365.month`,
       yearId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.a6c217f0-fe84-44ef-b606-69142ecb3365.year`,
       required: false,
-    } as DateOfBirthProps,
+    } as DateProps,
     children: [],
   },
   {
diff --git a/packages/design/src/Form/components/index.tsx b/packages/design/src/Form/components/index.tsx
@@ -5,7 +5,7 @@ import Attachment from './Attachment/index.js';
 import Address from './Address/index.js';
 import Checkbox from './Checkbox/index.js';
 import CheckboxGroup from './CheckboxGroup/index.js';
-import DateOfBirth from './DateOfBirth/index.js';
+import Date from './Date/index.js';
 import EmailInput from './EmailInput/index.js';
 import Fieldset from './Fieldset/index.js';
 import FormSummary from './FormSummary/index.js';
@@ -33,7 +33,8 @@ export const defaultPatternComponents: ComponentForPattern = {
   address: Address as PatternComponent,
   checkbox: Checkbox as PatternComponent,
   'checkbox-group': CheckboxGroup as PatternComponent,
-  'date-of-birth': DateOfBirth as PatternComponent,
+  'date-of-birth': Date as PatternComponent,
+  'date-picker': Date as PatternComponent,
   'email-input': EmailInput as PatternComponent,
   fieldset: Fieldset as PatternComponent,
   'form-summary': FormSummary as PatternComponent,
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -135,6 +135,7 @@ const sidebarPatterns: DropdownPattern[] = [
   ['page', defaultFormConfig.patterns['page'], 'Form structure'],
   ['rich-text', defaultFormConfig.patterns['rich-text'], 'Other'],
   ['attachment', defaultFormConfig.patterns['attachment'], 'Other'],
+  ['date-picker', defaultFormConfig.patterns['date-picker'], 'Other'],
   ['package-download', defaultFormConfig.patterns['package-download'], 'Other'],
 ] as const;
 
diff --git a/packages/design/src/FormManager/FormEdit/components/DatePatternEdit/DatePatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/DatePatternEdit/DatePatternEdit.stories.tsx
@@ -11,7 +11,7 @@ const pattern: DateOfBirthPattern = {
   id: 'date-of-birth-1',
   type: 'date-of-birth',
   data: {
-    label: message.patterns.dateOfBirth.displayName,
+    label: message.patterns.date.displayName,
     required: false,
     hint: undefined,
   },
@@ -32,19 +32,13 @@ export const Basic: StoryObj<typeof FormEdit> = {
     const updatedLabel = 'Date of birth update';
     const updatedHint = 'Updated hint for Date of birth';
 
-    await userEvent.click(
-      canvas.getByText(message.patterns.dateOfBirth.displayName)
-    );
+    await userEvent.click(canvas.getByText(message.patterns.date.displayName));
 
-    const labelInput = canvas.getByLabelText(
-      message.patterns.dateOfBirth.fieldLabel
-    );
+    const labelInput = canvas.getByLabelText(message.patterns.date.fieldLabel);
     await userEvent.clear(labelInput);
     await userEvent.type(labelInput, updatedLabel);
 
-    const hintInput = canvas.getByLabelText(
-      message.patterns.dateOfBirth.hintLabel
-    );
+    const hintInput = canvas.getByLabelText(message.patterns.date.hintLabel);
     await userEvent.clear(hintInput);
     await userEvent.type(hintInput, updatedHint);
 
@@ -61,13 +55,9 @@ export const WithoutHint: StoryObj<typeof FormEdit> = {
     const canvas = within(canvasElement);
     const updatedLabel = 'Date of birth update';
 
-    await userEvent.click(
-      canvas.getByText(message.patterns.dateOfBirth.displayName)
-    );
+    await userEvent.click(canvas.getByText(message.patterns.date.displayName));
 
-    const labelInput = canvas.getByLabelText(
-      message.patterns.dateOfBirth.fieldLabel
-    );
+    const labelInput = canvas.getByLabelText(message.patterns.date.fieldLabel);
     await userEvent.clear(labelInput);
     await userEvent.type(labelInput, updatedLabel);
 
@@ -76,7 +66,7 @@ export const WithoutHint: StoryObj<typeof FormEdit> = {
 
     await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument();
     await expect(
-      await canvas.queryByLabelText(message.patterns.dateOfBirth.hintLabel)
+      await canvas.queryByLabelText(message.patterns.date.hintLabel)
     ).toBeNull();
   },
 };
@@ -85,20 +75,14 @@ export const Error: StoryObj<typeof FormEdit> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await userEvent.click(
-      canvas.getByText(message.patterns.dateOfBirth.displayName)
-    );
+    await userEvent.click(canvas.getByText(message.patterns.date.displayName));
 
-    const labelInput = canvas.getByLabelText(
-      message.patterns.dateOfBirth.fieldLabel
-    );
+    const labelInput = canvas.getByLabelText(message.patterns.date.fieldLabel);
     await userEvent.clear(labelInput);
     labelInput.blur();
 
     await expect(
-      await canvas.findByText(
-        message.patterns.dateOfBirth.errorTextMustContainChar
-      )
+      await canvas.findByText(message.patterns.date.errorTextMustContainChar)
     ).toBeInTheDocument();
   },
 };
diff --git a/packages/design/src/FormManager/FormEdit/components/DatePatternEdit/index.tsx b/packages/design/src/FormManager/FormEdit/components/DatePatternEdit/index.tsx
@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { type DateOfBirthProps } from '@gsa-tts/forms-core';
+import { type DateProps } from '@gsa-tts/forms-core';
 import { type DateOfBirthPattern } from '@gsa-tts/forms-core';
+import { type DatePickerPattern } from '@gsa-tts/forms-core';
 
-import DateOfBirth from '../../../../Form/components/DateOfBirth/index.js';
+import Date from '../../../../Form/components/Date/index.js';
 import { PatternEditComponent } from '../../types.js';
 
 import { PatternEditActions } from '../common/PatternEditActions.js';
@@ -13,7 +14,7 @@ import { usePatternEditFormContext } from '../common/hooks.js';
 import { enLocale as message } from '@gsa-tts/forms-common';
 import styles from '../../formEditStyles.module.css';
 
-const DateOfBirthPatternEdit: PatternEditComponent<DateOfBirthProps> = ({
+const DatePatternEdit: PatternEditComponent<DateProps> = ({
   context,
   focus,
   previewProps,
@@ -29,16 +30,21 @@ const DateOfBirthPatternEdit: PatternEditComponent<DateOfBirthProps> = ({
         <div
           className={`${styles.dateOfBirthPattern} padding-left-3 padding-bottom-3 padding-right-3`}
         >
-          <DateOfBirth context={context} {...previewProps} />
+          <Date context={context} {...previewProps} />
         </div>
       )}
     </>
   );
 };
 
-const EditComponent = ({ pattern }: { pattern: DateOfBirthPattern }) => {
-  const { fieldId, getFieldState, register } =
-    usePatternEditFormContext<DateOfBirthPattern>(pattern.id);
+const EditComponent = ({
+  pattern,
+}: {
+  pattern: DateOfBirthPattern | DatePickerPattern;
+}) => {
+  const { fieldId, getFieldState, register } = usePatternEditFormContext<
+    DateOfBirthPattern | DatePickerPattern
+  >(pattern.id);
   const label = getFieldState('label');
   const hint = getFieldState('hint');
 
@@ -54,7 +60,7 @@ const EditComponent = ({ pattern }: { pattern: DateOfBirthPattern }) => {
             `${styles.patternChoiceFieldWrapper}`
           )}
         >
-          {message.patterns.dateOfBirth.fieldLabel}
+          {message.patterns.date.fieldLabel}
           {label.error ? (
             <span className="usa-error-message" role="alert">
               {label.error.message}
@@ -84,7 +90,7 @@ const EditComponent = ({ pattern }: { pattern: DateOfBirthPattern }) => {
           )}
         >
           <span className={`${styles.secondaryColor}`}>
-            {message.patterns.dateOfBirth.hintLabel}
+            {message.patterns.date.hintLabel}
           </span>
           {hint.error ? (
             <span className="usa-error-message" role="alert">
@@ -128,4 +134,4 @@ const EditComponent = ({ pattern }: { pattern: DateOfBirthPattern }) => {
   );
 };
 
-export default DateOfBirthPatternEdit;
+export default DatePatternEdit;
diff --git a/packages/design/src/FormManager/FormEdit/components/EmailInputPatternEdit/index.tsx b/packages/design/src/FormManager/FormEdit/components/EmailInputPatternEdit/index.tsx
@@ -86,7 +86,7 @@ const EditComponent = ({ pattern }: { pattern: EmailInputPattern }) => {
           )}
         >
           <span className={`${styles.secondaryColor}`}>
-            {message.patterns.dateOfBirth.hintLabel}
+            {message.patterns.emailInput.hintLabel}
           </span>
           {hint.error ? (
             <span className="usa-error-message" role="alert">
diff --git a/packages/design/src/FormManager/FormEdit/components/index.ts b/packages/design/src/FormManager/FormEdit/components/index.ts
@@ -8,7 +8,7 @@ import AddressPatternEdit from './AddressPatternEdit/index.js';
 import AttachmentPatternEdit from './AttachmentPatternEdit/index.js';
 import CheckboxPatternEdit from './CheckboxPatternEdit/index.js';
 import CheckboxGroupPatternEdit from './CheckboxGroupPatternEdit/index.js';
-import DateOfBirthPatternEdit from './DateOfBirthPatternEdit/index.js';
+import DatePatternEdit from './DatePatternEdit/index.js';
 import EmailInputPatternEdit from './EmailInputPatternEdit/index.js';
 import FieldsetEdit from './FieldsetEdit/index.js';
 import FormSummaryEdit from './FormSummaryEdit.js';
@@ -35,7 +35,8 @@ export const defaultPatternEditComponents: EditComponentForPattern = {
   attachment: AttachmentPatternEdit as PatternEditComponent,
   checkbox: CheckboxPatternEdit as PatternEditComponent,
   'checkbox-group': CheckboxGroupPatternEdit as PatternEditComponent,
-  'date-of-birth': DateOfBirthPatternEdit as PatternEditComponent,
+  'date-of-birth': DatePatternEdit as PatternEditComponent,
+  'date-picker': DatePatternEdit as PatternEditComponent,
   'email-input': EmailInputPatternEdit as PatternEditComponent,
   fieldset: FieldsetEdit as PatternEditComponent,
   'form-summary': FormSummaryEdit as PatternEditComponent,
diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
@@ -182,8 +182,8 @@ export type SelectDropdownProps = PatternProps<{
   value?: string;
 }>;
 
-export type DateOfBirthProps = PatternProps<{
-  type: 'date-of-birth';
+export type DateProps = PatternProps<{
+  type: 'date-of-birth' | 'date-picker';
   dayId: string;
   monthId: string;
   yearId: string;
diff --git a/packages/forms/src/patterns/date-of-birth/date-of-birth.ts b/packages/forms/src/patterns/date-of-birth/date-of-birth.ts
@@ -1,6 +1,6 @@
 import * as z from 'zod';
 
-import { type DateOfBirthProps } from '../../components.js';
+import { type DateProps } from '../../components.js';
 import { type Pattern, type PatternConfig } from '../../pattern.js';
 import { getFormSessionError, getFormSessionValue } from '../../session.js';
 import {
@@ -106,7 +106,7 @@ export const dateOfBirthConfig: PatternConfig<
         required: pattern.data.required,
         value: sessionValue,
         error: sessionError,
-      } as DateOfBirthProps,
+      } as DateProps,
       children: [],
     };
   },
diff --git a/packages/forms/src/patterns/date-picker/date-picker.test.ts b/packages/forms/src/patterns/date-picker/date-picker.test.ts
diff --git a/packages/forms/src/patterns/date-picker/date-picker.ts b/packages/forms/src/patterns/date-picker/date-picker.ts
diff --git a/packages/forms/src/patterns/index.ts b/packages/forms/src/patterns/index.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { DatePattern } from './Date.js';`
	`2`	`+`
	`3`	`+export default DatePattern;`