Split can now be nested with class

Author: stephaniehobson

CHANGELOG.md

@@ -16,6 +16,7 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 ## Split Component
 
+* **component:** Split can now be nested inside content containers with the `mzp-l-split-nested` class
 * **component:** (breaking) Removed `mzp-l-split-pop-top`, `mzp-l-split-pop-bottom`, and `mzp-l-split-pop` layout classes from Split component
 * **component:** (breaking) Removed `mzp-l-split-media-overflow` and `mzp-l-split-media-constrain-height` layout classes from Split component
 

assets/sass/protocol/components/_split.scss

@@ -37,6 +37,13 @@
     .mzp-t-content-xl & {
         max-width: $content-xl;
     }
+
+    // Allow split to be nested inside another container (e.g. mzp-l-content)
+    .mzp-l-split-nested & {
+        max-width: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
 }
 
 .mzp-c-split-body {

components/split/readme.md

@@ -49,10 +49,13 @@ variations.
   - `mzp-l-split-center-on-sm-md` - content is centered on small to medium screens.
   - `mzp-l-split-hide-media-on-sm-md` - media is hidden on small to medium screens.
 
-### No-nos:
+### Nesting inside a container
 
-**Note:** This component is intended to be a full-width section of a page, with
-an outer container that spans the width of the viewport and generous spacing
-above and below. Split has an inner container to define its content width, so
-don't place Split inside another `mzp-l-content` [container](content-container).
-The nested spacing will get weird.
+By default, Split is intended to be a full-width section of a page, with an
+outer container that spans the width of the viewport. Split has its own inner
+container to define its content width.
+
+If you need to nest Split inside another container (e.g. `mzp-l-content`), add
+the `mzp-l-split-nested` class to the outermost element (`mzp-c-split`). This
+removes the inner container's max-width and padding so it fills the parent
+container without doubling up on spacing.

components/split/split--nested.html

@@ -0,0 +1,33 @@
+{# @split--nested
+#
+# parameters:
+# block_class         - string
+# background_class    - string
+# body_class          - string
+# content             - string, markup
+# image               - path
+#}
+<div class="mzp-l-content">
+  <section class="mzp-c-split mzp-l-split-nested {{ block_class }}">
+    {%- if background_class -%}<div class="mzp-c-split-bg {{ background_class }}">{%- endif -%}
+    <div class="mzp-c-split-container">
+      <div class="mzp-c-split-body {{ body_class }}">
+      {% if content %}
+        {{ content | safe }}
+      {% else %}
+        <h1 class="mzp-u-heading-md">Lorem ipsum dolor sit amet</h1>
+        <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
+        <p>{% render '@button', { link: '#', label: 'Call to action' } %}</p>
+      {% endif %}
+      </div>
+      <div class="mzp-c-split-media {{ media_class }}">
+      {% if image -%}
+        <img class="mzp-c-split-media-asset" src="{{ image | path }}" alt="">
+      {% else -%}
+        <img class="mzp-c-split-media-asset" src="{{ '/img/image-16-9.jpg' | path }}" alt="" srcset="{{ '/img/image-16-9-high-res.jpg' | path }} 2x">
+      {%- endif -%}
+      </div>
+    </div>
+    {%- if background_class -%}</div>{%- endif -%}
+  </section>
+</div>

components/split/split.config.yml

@@ -73,7 +73,7 @@ variants:
       image: '/img/image-portrait.jpg'
   - name: Media Alignment
     notes: |
-      Align the media in different positions, horizontally and vertically (it’s
+      Align the media in different positions, horizontally and vertically (it's
       aligned left by default in LTR languages, and vertically centered).
 
       Apply these classes to the media container (`mzp-c-split-media`):
@@ -89,3 +89,17 @@ variants:
     context:
       media_class: mzp-l-split-h-end mzp-l-split-v-end
       image: '/img/image-1-1-sm.jpg'
+  - name: Nested
+    notes: |
+      If you need to nest Split inside another container (e.g. `mzp-l-content`),
+      add the `mzp-l-split-nested` class to the outermost element (`mzp-c-split`).
+      This removes the inner container's max-width and horizontal padding so it
+      fills the parent container without doubling up on spacing.
+  - name: No Space
+    notes: |
+      Add the class `mzp-t-split-nospace` to the outer container (`mzp-c-split`)
+      to remove the vertical spacing above and below. This is useful when stacking
+      multiple Splits together or when placing a Split at the very top of a page
+      as a hero section.
+    context:
+      block_class: mzp-t-split-nospace