feat(components): add Box primitive to components library

[mcous]

overview

Palate cleanser PR for myself after the U2E project is officially dev complete. This PR follows up on #5637 by:

• Adding a <Box> primitive to the library
  • Just a <div> with styling props to reduce CSS repetition
• Adding spacing props to the primitive components
  • They allow you to set margin and padding
  • They inlcude very handy marginX, marginY, paddingX, and paddingY props to set left/right or top/bottom simultaneously
  • Also added a simple set of power-of-two space scale constants - the props don't require using the constants, though; they'll take whatever string or number you give them
  • They also make it very easy to ensure that only parent components deal with margins, which makes child components easier to deal with
    • styled-system has a good take on this

These components and props are, like #5637, pretty heavily inspired by theme-ui, styled-system, and rebass.

changelog

• feat(components): add Box primitive to components library
  • Took the opportunity to address some TODO comments and consolidate some style prop logic into shareable chunks in components/src/primitives/style-props.js

review requests

How does this look / feel? I replaced some inline styled-component styling logic with the new Box primitive and spacing props to demonstrate.

A really nice benefit of these primitives and styling props is that the more we can lean on them, the less reliant we are on any one particular styling solution. These primitives / props could be implemented in vanilla CSS, CSS Modules, styled-components, emotion, or whatever other thing without changing their APIs

risk assessment

Low. Mostly internal components DX work, and logic is unit-tested all the way down to the CSS

[codecov]

Codecov Report

Merging #5665 into edge will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             edge    #5665   +/-   ##
=======================================
  Coverage   65.11%   65.12%           
=======================================
  Files        1112     1114    +2     
  Lines       30802    30809    +7     
=======================================
+ Hits        20056    20063    +7     
  Misses      10746    10746           

Impacted Files	Coverage Δ
...pp/src/components/SystemInfoCard/U2EAdapterInfo.js	100.00% <ø> (ø)
components/src/primitives/Flex.js	100.00% <ø> (ø)
components/src/primitives/Link.js	100.00% <ø> (ø)
components/src/primitives/Text.js	100.00% <ø> (ø)
components/src/structure/Card.js	100.00% <ø> (ø)
.../src/components/SystemInfoCard/U2EDeviceDetails.js	100.00% <100.00%> (ø)
components/src/primitives/Box.js	100.00% <100.00%> (ø)
components/src/primitives/style-props.js	100.00% <100.00%> (ø)
components/src/styles/spacing.js	100.00% <100.00%> (ø)
components/src/styles/typography.js	100.00% <100.00%> (ø)
... and 2 more

---

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 02cd054...b0a97b6. Read the comment docs.

[b-cooper]

Everything looks good. The only one I'm a little skeptical of is the SPACING_FOO constants. I think that it's wishful thinking to imagine that the spacing in a given design won't fall somewhere between say SPACING_4 and SPACING_5. In which case, we have to hard code a rem value, and there's no good way, aside from rote memorization to remember whether 10rem is more or less than SPACING_5.