[Feature] Text component

[narin]

Description of Change

Implementation of a new Text component that displays text based on our typography tokens

• Supports the following variants: body, heading, display, and navigation
• Allows for different size props for body and heading: xs, sm, md, lg
• Defaults to body medium if no variant or size is provided
• Has bottomSpacing prop that accepts different spacing tokens when something other than the default paragraph spacing is desired
• Includes a11y override and color override

Testing Packages

• components 0.27.1-alpha.0

Screenshots/Video

Web

Screen.Recording.2024-11-12.at.10.00.50.AM.mov

iOS

ScreenRecording_11-12-2024.10-17-18_1.MP4

Android

screen-20241112-103102.mp4

iOS Voiceover

ScreenRecording_11-12-2024.10-32-02_1.MP4

Android Talkback

screen-20241112-103427.mp4

In-app test

Testing

• Tested on iOS
• Tested on Android
• Tested on Web

PR Checklist

Code reviewer validation:

• General
  • PR is linked to ticket(s)
  • PR has changelog label applied if it's to be included in the changelog
  • Acceptance criteria:
    • All satisfied or
    • Documented reason for not being performed or
    • Split to separate ticket and ticket is linked by relevant AC(s)
  • Above PR sections adequately filled out
  • If any breaking changes, in accordance with the pre-1.0.0 versioning guidelines: a CU ticket has been created for the VA Mobile App detailing necessary adjustments with the package version that will be published by this ticket
• Code
  • Tests are included if appropriate (or split to separate ticket)
  • New functions have proper TSDoc annotations

Publish

If changes warrant a new version per the versioning guidelines and the PR is approved and ready to merge:

• Merge main into branch
• Merge branch to main
• Verify that Check Component Integrations workflow ran successfully
• Publish new version after merging

[TimRoe]

Dropping a preemptive request changes to fix the 5 linting issues in the PR that are causing linting checks to fail.

[TimRoe]

Don't feel strongly that anything be changed, but raising the question of if this should be in utils somewhere instead of the component.

[narin]

Created a new utils/tokens.ts file and added to the utils index export. Moved this function there.

[TimRoe]

Could this be simplified typing typographyKey at instantiation?

[narin]

Moving it to the instantiation causes some TS complaints with the template literals. I was able to remove it for the sizeMap key though.

[TimRoe]

Mostly good to go, requesting changes primarily to clean up the doc around navigation which no longer exists in the component.

Also had some other comments/suggestions, but none that explicitly need changing.

Edit: Also watching the rest of the PR videos, not sure if the iOS one was just in progress, but if it's reading the "body" blocks as "heading" it doesn't seem like it should be and should be updated--code-wise, it looks like it should be fine though.