[#779] Add some layout primitives (stack)

[planktonic]

Part of #779

Changes

• Stack component CSS
• Adds a Stack JS component, stories, and docs to go with it

📸 Looks like

How to QA

👀 Visual changes

• git fetch
• git checkout feature/779-add-some-layout-primitives
• yarn
• yarn storybook
• navigate to atoms/ component

Check:

• [ ] The documentation for this component is correct, understandable, and up-to-date.

👾 Code changes

Check:

• [ ] The documentation for this component is correct, understandable, and up-to-date.
• [ ] The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
• [ ] Everything that should be a variable, is.

Preflight checks

• [x] Storybook documentation has been updated
• [x] Fixtures in test/scss/ have been updated
• [x] Your changes have been added to the unreleased section of CHANGELOG.md

[ArinzeJeffrey-droid]

How is this different from a-content?

[planktonic]

How is this different from a-content?

@ArinzeJeffrey-droid the content atom is for restricting the width of the element, and applying padding at the sides. The stack atom doesn’t do that, it applies vertical space between each child element (it looks like it “applies space below each child element”, but technically it’s above). Both could be used together, and would probably be great for a main layout area! Perhaps we should add some docs for the layout primitives — I’ve added an issue for that: #791