Merge remote-tracking branch 'origin/main' into logic-1

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

@@ -31,7 +31,7 @@ export const en = {
       fieldLabel: 'Page title',
     },
     paragraph: {
-      fieldLabel: 'Paragraph Text',
+      fieldLabel: 'Paragraph text',
       displayName: 'Paragraph',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
@@ -48,17 +48,31 @@ export const en = {
     },
     selectDropdown: {
       ...defaults,
-      displayName: 'Select Dropdown label',
-      fieldLabel: 'Select Dropdown label',
+      displayName: 'Select dropdown label',
+      fieldLabel: 'Select dropdown label',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
     dateOfBirth: {
       ...defaults,
-      displayName: 'Date of Birth label',
-      fieldLabel: 'Date Of Birth label',
+      displayName: 'Date of birth label',
+      fieldLabel: 'Date of birth label',
       hintLabel: 'Date of Birth Hint label',
       hint: 'For example: January 19 2000',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
+    emailInput: {
+      ...defaults,
+      displayName: 'Email Input label',
+      fieldLabel: 'Email Input label',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
+    phoneNumber: {
+      ...defaults,
+      displayName: 'Phone number label',
+      fieldLabel: 'Phone number label',
+      hintLabel: 'Phone number hint label',
+      hint: '10-digit, U.S. only, for example 999-999-9999',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
   },
 };

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { EmailInputPattern } from './EmailInput.js';
+
+const meta: Meta<typeof EmailInputPattern> = {
+  title: 'patterns/EmailInputPattern',
+  component: EmailInputPattern,
+  decorators: [
+    (Story, args) => {
+      const FormDecorator = () => {
+        const formMethods = useForm({
+          defaultValues: {
+            email: '',
+          },
+        });
+        return (
+          <FormProvider {...formMethods}>
+            <Story {...args} />
+          </FormProvider>
+        );
+      };
+      return <FormDecorator />;
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof EmailInputPattern> = {
+  args: {
+    emailId: 'email',
+    label: 'Email address',
+    required: true,
+  },
+};
+
+export const WithoutRequired: StoryObj<typeof EmailInputPattern> = {
+  args: {
+    emailId: 'email',
+    label: 'Email address',
+    required: false,
+  },
+};
+
+export const WithError: StoryObj<typeof EmailInputPattern> = {
+  args: {
+    emailId: 'email',
+    label: 'Email address with error',
+    required: true,
+    error: {
+      type: 'custom',
+      message: 'This field has an error',
+    },
+  },
+};

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

@@ -0,0 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describeStories } from '../../../test-helper.js';
+import meta, * as stories from './EmailInput.stories.js';
+
+describeStories(meta, stories);

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { type EmailInputProps } from '@atj/forms';
+import { type PatternComponent } from '../../index.js';
+
+export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
+  emailId,
+  label,
+  required,
+  error,
+}) => {
+  const { register } = useFormContext();
+
+  return (
+    <fieldset className="usa-fieldset">
+      <div className="usa-form-group">
+        <label className="usa-label" htmlFor={emailId}>
+          {label}
+          {required && <span className="required-indicator">*</span>}
+        </label>
+        <input
+          className="usa-input margin-bottom-1"
+          id={emailId}
+          type="email"
+          autoCapitalize="off"
+          autoCorrect="off"
+          {...register(emailId, { required })}
+        />
+      </div>
+      {error && (
+        <span className="error-message" style={{ color: 'red' }}>
+          {error.message}
+        </span>
+      )}
+    </fieldset>
+  );
+};

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

@@ -0,0 +1,3 @@
+import { EmailInputPattern } from './EmailInput.js';
+
+export default EmailInputPattern;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { PhoneNumberPattern } from './PhoneNumber.js';
+
+const meta: Meta<typeof PhoneNumberPattern> = {
+  title: 'patterns/PhoneNumberPattern',
+  component: PhoneNumberPattern,
+  decorators: [
+    (Story, args) => {
+      const FormDecorator = () => {
+        const formMethods = useForm();
+        return (
+          <FormProvider {...formMethods}>
+            <Story {...args} />
+          </FormProvider>
+        );
+      };
+      return <FormDecorator />;
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof PhoneNumberPattern> = {
+  args: {
+    phoneId: 'phone',
+    label: 'Phone number',
+    required: false,
+  },
+};
+
+export const WithRequired: StoryObj<typeof PhoneNumberPattern> = {
+  args: {
+    phoneId: 'phone',
+    label: 'Phone number',
+    required: true,
+  },
+};
+
+export const WithError: StoryObj<typeof PhoneNumberPattern> = {
+  args: {
+    phoneId: 'phone',
+    label: 'Phone number with error',
+    required: true,
+    error: {
+      type: 'custom',
+      message: 'This field has an error',
+    },
+  },
+};
+
+export const WithHint: StoryObj<typeof PhoneNumberPattern> = {
+  args: {
+    phoneId: 'phone',
+    label: 'Phone number',
+    hint: '10-digit, U.S. only, for example 999-999-9999',
+    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',
+    },
+  },
+};

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

@@ -0,0 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describeStories } from '../../../test-helper.js';
+import meta, * as stories from './PhoneNumber.stories.js';
+
+describeStories(meta, stories);

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

@@ -0,0 +1,57 @@
+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';
+
+export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
+  phoneId,
+  hint,
+  label,
+  required,
+  error,
+  value,
+}) => {
+  const { register } = useFormContext();
+
+  return (
+    <fieldset className="usa-fieldset">
+      <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>
+        {hint && (
+          <div className="usa-hint" id="primaryPnHint">
+            {hint}
+          </div>
+        )}
+        {error && (
+          <div
+            className="usa-error-message"
+            id={`input-error-message-${phoneId}`}
+            role="alert"
+          >
+            {error.message}
+          </div>
+        )}
+        <input
+          className={classNames('usa-input', {
+            'usa-input--error': error,
+          })}
+          id={phoneId}
+          type="tel"
+          defaultValue={value}
+          {...register(phoneId, { required })}
+          aria-describedby="primaryPnHint"
+        />
+      </div>
+    </fieldset>
+  );
+};

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

@@ -0,0 +1,3 @@
+import { PhoneNumberPattern } from './PhoneNumber.js';
+
+export default PhoneNumberPattern;

packages/design/src/Form/components/SelectDropdown/SelectDropdown.stories.tsx

@@ -5,7 +5,7 @@ import { type Meta, type StoryObj } from '@storybook/react';
 import { SelectDropdownPattern } from './SelectDropdown.js';
 
 const meta: Meta<typeof SelectDropdownPattern> = {
-  title: 'patterns/SelectPattern',
+  title: 'patterns/SelectDropdownPattern',
   component: SelectDropdownPattern,
   decorators: [
     (Story, args) => {

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

@@ -2,34 +2,38 @@ import { PatternComponent, type ComponentForPattern } from '../index.js';
 
 import Address from './Address/index.js';
 import Checkbox from './Checkbox/index.js';
+import DateOfBirth from './DateOfBirth/index.js';
+import EmailInput from './EmailInput/index.js';
 import Fieldset from './Fieldset/index.js';
 import FormSummary from './FormSummary/index.js';
 import PackageDownload from './PackageDownload/index.js';
 import Page from './Page/index.js';
 import PageSet from './PageSet/index.js';
 import Paragraph from './Paragraph/index.js';
+import PhoneNumber from './PhoneNumber/index.js';
 import RadioGroup from './RadioGroup/index.js';
 import RichText from './RichText/index.js';
 import Sequence from './Sequence/index.js';
 import SelectDropdown from './SelectDropdown/index.js';
-import DateOfBirth from './DateOfBirth/index.js';
 import SubmissionConfirmation from './SubmissionConfirmation/index.js';
 import TextInput from './TextInput/index.js';
 
 export const defaultPatternComponents: ComponentForPattern = {
   address: Address as PatternComponent,
   checkbox: Checkbox as PatternComponent,
+  'date-of-birth': DateOfBirth as PatternComponent,
+  'email-input': EmailInput as PatternComponent,
   fieldset: Fieldset as PatternComponent,
   'form-summary': FormSummary as PatternComponent,
   input: TextInput as PatternComponent,
   'package-download': PackageDownload as PatternComponent,
   page: Page as PatternComponent,
   'page-set': PageSet as PatternComponent,
   paragraph: Paragraph as PatternComponent,
+  'phone-number': PhoneNumber as PatternComponent,
   'radio-group': RadioGroup as PatternComponent,
   'rich-text': RichText as PatternComponent,
   'select-dropdown': SelectDropdown as PatternComponent,
-  'date-of-birth': DateOfBirth as PatternComponent,
   sequence: Sequence as PatternComponent,
   'submission-confirmation': SubmissionConfirmation as PatternComponent,
 };