Percy examples combination - Jinja vertical spacing option

[jmuzina]

Some combined examples (such as search & filter, context menu, navigation) have overlay/non-contained contents that can overlap other combined examples if we're not careful.

In my PRs so far I have been handling this case manually by creating multple divs with u-sv3 after examples that need extra space below them. However, this came to be tedious so I have come up with a (hopefully) more streamlined approach for this.

This does the following:

• Creates a new combined.scss that the examples template can import to load vertical spacing utility styling. This prevents having to create separate -combined.scss style files for combined examples that need to include the vertical spacing utility.
• Allows passing spacing_below into an example template. If spacing_below is defined and the example is a combined example, then a div with margin-bottom: <spacing_below>rem will be added below the block content to make space for whatever content is needed.

Example

Example usage, with Search & Filter

Markup

{% extends "_layouts/examples.html" %}
{% block title %}Search and filter / Combined{% endblock %}

{% block standalone_css %}patterns_search-and-filter{% endblock %}

{% block content %}
{% with is_combined = true %}
<section>{% include 'docs/examples/patterns/search-and-filter/chip-overflow.html' %}</section>
<section>{% include 'docs/examples/patterns/search-and-filter/default.html' %}</section>
<section>{% include 'docs/examples/patterns/search-and-filter/expanded.html' %}</section>
<section>
  {% with spacing_below = 17 %}
    {% include 'docs/examples/patterns/search-and-filter/with-chips.html' %}
  {% endwith %}
</section>
<section>{% include 'docs/examples/patterns/search-and-filter/with-search-prompt.html' %}</section>
{% endwith %}
{% endblock %}

Screenshot

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

Each individual example in the combined examples is wrapped in it's own <section> - would it be enough to set some min-height on this section wrapper (when we know it's needed)? Seems a bit less involved then generating dozens of spacer divs.

Or, if we really want to automate this, it would be better for the individual example itself to define how tall it needs to be, rather than combined example to define how much space to put.

[jmuzina]

@bartaz Revised to use rems for spacing, as discussed in our 1:1

[jmuzina]

Rolling this into #5174 for review simplicity.