[PRP-253] Fixes from live UAT on 2023-03-22

[rocketnova]

Ticket

https://wicmtdp.atlassian.net/browse/PRP-253

Changes

What was added, updated, or removed in this PR.

• Generally:
  • Switch all cases of t() to <Trans> where possible to support basic html tags in i18n strings
  • Enable support of <em> tags in i18n strings
  • Swap <div> tags around paragraph content to <p> tags
  • Alphabetize sections in en/common.json
  • Remove hard line break in site name
  • Change font from Source Sans Pro to Public Sans
  • Update body line height to 1.5em
  • Create a .intro class for intro paragraphs on pages
  • Create a .legend-large and .label-large class for our large labels/legends
  • Adjust misc spacing
• Components:
  • AdjunctiveInput: Use new <List> component
  • DateInput: Support optionally setting the input as required fields
  • ParticipantCard: Support optionally setting the <AdjunctiveInput>, <DateInput>, and <RelationshipInput> components as required fields
  • RequiredQuestionStatement: Add new component for the help text that explains required fields have asterisks
  • TextField: Support optional className argument
• Pages:
  • Add <RequiredQuestionStatement> to all pages with required fields
  • Count: Use type=number, set max width on the input field, use the .label-large class
  • Details: Make all fields required except for preferred name, turn on date hint, turn on preferred name input, add missing i18n strings
  • Name: Remove extra content

Context for reviewers

Testing instructions, background context, more in-depth details of the implementation, and anything else you'd like to call out or ask reviewers. Explain how the changes were verified.

These changes came out of our Live UAT session on 2023-03-22.

Testing

Screenshots, GIF demos, code examples or output to help show the changes working as expected. ProTip: you can drag and drop or paste images into this textbox.

Review the chromatic storybook

[makaelastephens]

The spacing between the DOB field and "Are they enrolled in these other programs"? is very tight.

Can we overwrite the line length for "How many people..." so it's similar to measure-6?

[rocketnova]

@makaelastephens

The spacing between the DOB field and "Are they enrolled in these other programs"? is very tight.

🤔 I'll take a look at that.

Can we overwrite the line length for "How many people..." so it's similar to measure-6?

This is the USWDS standard form label max-width. Do you want to change it across the board?

[makaelastephens]

@rocketnova

This is the USWDS standard form label max-width. Do you want to change it across the board?

Yes, we want to change it across the board. Checking the galaxy brain notes, unfortunately we didn't write down what we wanted the override to be so let me know if you need more eyes later.

[rocketnova]

@makaelastephens

The spacing between the DOB field and "Are they enrolled in these other programs"? is very tight.

🤔 I'll take a look at that.

@makaelastephens Turns out this is a known USWDS bug when you use legends without labels in fieldsets 😞 I'll do some custom CSS'ing to fix. Also fun: this affects chrome but not firefox

[github-actions[bot]]

Chromatic_Build : Link to latest build in Chromatic 🌈 Link to storybook build in Chromatic

[danielladevera-nava]

The changes noted in the comments above now look as expected to me 👍.