[Feature] Standalone Spacer component

[TimRoe]

Description of Change

• Moved the Spacer component from utils to own folder/file.
• Created unit tests validating default/custom sizing for both vertical and horizontal spacing
• Created stories to demo the spacer functionality in Horizontal/Vertical capacity
  • Horizontal demoed similar to Link
  • Vertical demoed similar to Alert

Screenshots/Video

Horizontal (default size):

Vertical (default size):

Testing

Validated Spacer stories in iOS/Android/Web. The stories are a little janky on iOS/Android (Horizontal can go off the screen if you expand it, Vertical the Buttons have different widths due to not being in a container to span), but it functionally demonstrates the Spacer behavior given it being tricky to show a non-visible element. Validated unit tests fail as expected when changing the expect values.

• 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

[narin]

Looks good. Regarding the weirdness in iOS/Android Storybook, do you think this could be resolved by adding some sort of wrapper with padding around our stories? I think we discussed this as well during the QA call with Adam and Tom.

[TimRoe]

Regarding the weirdness in iOS/Android Storybook, do you think this could be resolved by adding some sort of wrapper with padding around our stories? I think we discussed this as well during the QA call with Adam and Tom.

I think the weirdness with the Vertical story probably could, I assume it's fitting to the text length due to whatever I had wrapping it instead of spanning the full screen width like the Button otherwise does.

The Horizontal story is weird because I'm not sure RN does horizontal screen scrolling--it definitely wouldn't make sense to wrap though given the entire point of the spacer is to provide space within what's visible. The weirdness there is making it large makes the visual elements go off the screen, which is exactly what one would expect so it's not really broken at all per se, but just a little goofy.