Add personal info page to forms-system components

[adamwhitlock1]

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

Did you change site-wide styles, platform utilities or other infrastructure?

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

• Previously my team had built out a Personal Information (often titled Veteran Information) page on out mock form application.
• Since this pattern is present on several forms (around 10+ from my current count) we would like to standardize this component into a reusable section of code within the platform forms-system
• This PR adds the code for the PersonalInformation page, and a factory function to integrate with the forms-system
• This pattern has NOT been adopted in production yet, and this is the foundational code to be used by forms to allow a uniform experience. There is no impact to production at this time by adding this code to platform

example usage:

// minimal usage
// the defaults will be used to pull in the user's information and display it
// no other config is technically required to have this page appear in a form, but additional config can be passed in
const personalInfo = personalInformationPage();

// maximum example
// here the various configuration options are explicitly set
// all are optional
const personalInfoMax = personalInformationPage({
  key: 'personalInfoPageMax ',
  title: 'Personal information - Max',
  path: 'personal-information-max',
  personalInfoConfig: {
    ssn: { show: true, required: true },
    vaFileNumber: { show: true, required: true },
    dateOfBirth: { show: true, required: true },
    gender: { show: true, required: true },
    name: { show: true, required: true },
  },
  dataAdapter: {
    ssnPath: 'veteran.SSNPathInFormData',
    vaFileNumberPath: 'veteran.fileNumberInFormData'
  },
  errorMessage: 'custom error message string OR react component here'
});

Related issue(s)

• PersonalInformation page - forms-system integration tmf-auth-exp-design-patterns#293

Testing done

• A full unit test suite has been provided

Screenshots

You can view the various possible versions of this forms-system page by viewing the new route that I added in Pattern 2, so that I could showcase the variations in isolation.

Locally the page is at http://localhost:3001/mock-form-ae-design-patterns/2/personal-information-demo

There is also a github codespace available at:
https://stunning-space-xylophone-v9p9rpvrj7cpjgx-3001.app.github.dev/mock-form-ae-design-patterns/2/personal-information-demo/introduction?loggedIn=true
If the codespace is not working please reach out to @adamwhitlock1

Each page shows a different version of how the page can be customized.

Default configuration

A minimal version

A maximal version

Default error alert when required data is missing

Custom error message can be substituted

What areas of the site does it impact?

No production impact at this time

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

[bellepx0]

LGTM. The in-depth tests are great.