poc: Add bottom margin to text components

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

• This implements vertical margins between text components.
• The amount of space has been designed between each combination of 22 components.
• I’ve implemented 6 of them (Heading, Image, Standalone Link, Ordered List, Paragraph and Unordered List) and added the News Page with which the spacing was designed.
• I decreased the space between Headings and following body text. I think this groups the sections better, making them easier to scan. The new line heights are active as well.
• I’ve removed manual space classes from the Home Page and Article Page and tweaked some tokens for Card and Lists.

Links to full-screen pages

• News Page
• Article Page
• Home Page
• Form Page not included, this one needs work.

Why

To make it easy for our users to apply space in prose consistently.

How

• I’ve created Sass placeholders for the various margin options.
• And used them in the 6 components mentioned above. I’m using the :has selector to let the bottom margin of a component depend on the component that follows it. This is as designed, logical, and prevents the use of :last-child which is error-prone for this context.
• I changed the value of xl space from 48 to 56 and added an xxl of 84, both according to the design. This could be the start of merging Component Space and Grid Space, although both currently shrink and grow quite differently.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• Marked this as a POC because of a few out-of-scope changes.
  This generates quite a few lines of CSS, but I see no way around it. We must use our classes and explicitly address all combinations. The built stylesheet increased from 99 to 103 kB, so I guess around 1 kB per component that uses this.
• We could consider making a medium bottom margin the default for our components, but we would need to add a way to negate that for our users, and the ‘last child’ problem may re-emerge.
• Components referencing other components’ class names (which is not new, but at a larger scale) will hinder our ability to package our components separately in the future.
• Sass placeholders seem helpful in making maintenance more efficient. We can even take a step further if we can group components by the amount of space they use, e.g.

.ams-fieldset__legend,
.ams-heading,
.ams-label {
  @extend %headings;
}

.ams-paragraph,
.ams-ordered-list,
.ams-unordered-list {
  @extend %body-text;
}

.ams-action-group,
.ams-button,
.ams-link--standalone {
  @extend %actions;
}

Then this would create all the selectors to add space between all kinds of headings and all kinds of body text:

%headings :has(+%body-text) {
  @extend %ams-mb--medium;
}