Vertical Rhythm Spike

[joe-bell]

Description

Our existing vertical rhythm implementation (taken from Harry) has caused more headaches than what it's worth. Instead I've implemented a solution that applies to margin-top but not the first-child. This is a lot less aggressive and less likely in need of margin: 0 overrides for the odd use-case.

Further reading: https://matthewjamestaylor.com/css-margin-top-vs-bottom

Note: This does unfortunately have a side effect of raising Emotion console errors of:

"The pseudo class ":first-child" is potentially unsafe when doing server-side rendering.

As we roll-up our own SSR in the cashier we won't need to worry about this so much, so we can safely add the ignore label. This is currently an open issue with Emotion: emotion-js/emotion#1178.

Motivation and Context

Vertical Rhythm's important and worth setting globally (see the updated docs)

How Has This Been Tested?

All tests have been updated to reflect the new changes

Screenshots

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I have read the contributing guidelines.
• My code follows the code style of this project.
• My code meets the A11Y Web Accessibility Checklist. If not, please add justification documentation.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.