Add vertical and horizontal layout Stacks

[agubler]

Type: feature

The following has been addressed in the PR:

• [x] There is a related issue
• [x] All code matches the style guide
• [x] Unit tests are included in the PR
• [x] For new widgets, an entry has been added to the .dojorc
• [x] For new widgets, theme.variant() is added to the root domnode
• [ ] Any widget variant uses theme.compose like this
• [x] WidgetProperties are exported

Description:

Introduces a set of layout components that can be used to create vertical and horizontal stacks of elements or widgets. A special Spacer component can be used to customise spacing between nodes in the stack. As well as the Spacer widget a number of properties can be configured to tweak the layout of the nodes in the stack and the container node itself.

• align: Used to align the nodes in the stack for the opposite direction of the stack
• padding: Sets padding on the main container, small, medium, large
• spacing: Space between the stack nodes, small, medium, large
• stretch: Stretches the container across width and height

The CSS theme for spacing and padding can be controlled by setting the relevant themes' CSS variables.

Two specific widgets have been created for each of the supported directions, HStack and VStack but also the general Stack can be used with a direction property passed (either vertical or horiztonal)

<Stack direction="vertical">
    <TextInput />
    <Spacer />
    <TextInput />
</Stack>

<Stack direction="horizontal">
    <TextInput />
    <Spacer />
    <TextInput />
</Stack>

Resolves #1585

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

widget-test-docs – ./

🔍 Inspect: https://vercel.com/dojo/widget-test-docs/4CmHmkDt3sT7bZ235vvBMZry1nHm
✅ Preview: https://widget-test-docs-git-fork-agubler-stacks-dojo1.vercel.app

dojo.widgets – ./

🔍 Inspect: https://vercel.com/dojo/dojo.widgets/9zzscRb3gjX8RqEjKeP1GxWp3Ywk
✅ Preview: https://dojowidgets-git-fork-agubler-stacks-dojo1.vercel.app

[codecov[bot]]

Codecov Report

Merging #1708 (b25498e) into master (7c8e49e) will increase coverage by 0.10%. The diff coverage is 98.48%.

@@            Coverage Diff             @@
##           master    #1708      +/-   ##
==========================================
+ Coverage   90.46%   90.57%   +0.10%     
==========================================
  Files          94       96       +2     
  Lines        5152     5218      +66     
  Branches     1406     1418      +12     
==========================================
+ Hits         4661     4726      +65     
  Misses        241      241              
- Partials      250      251       +1     

Impacted Files	Coverage Δ
src/stack/Spacer.tsx	90.90% <90.90%> (ø)
src/stack/index.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 7c8e49e...b25498e. Read the comment docs.