Lavish rhythm modifier (#1850)

Author: tylersticka

.changeset/large-hornets-fly.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add the "lavish" Rhythm object modifier for separating entire sections with the same fluid whitespace as padded containers

src/mixins/_spacing.scss

@@ -75,3 +75,7 @@ $fluid-spacing-inline-negative: fluid.fluid-clamp(
     }
   }
 }
+
+@mixin fluid-vertical-rhythm() {
+  --rhythm: #{$fluid-spacing-block};
+}

src/objects/rhythm/demo/paragraphs.twig

@@ -0,0 +1,15 @@
+{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+  class: 'o-rhythm--generous'
+} only %}
+  {% block content %}
+    {% for i in 1..3 %}
+      {% embed '@cloudfour/objects/container/container.twig' with {
+        class: 'o-container--prose'
+      } only %}
+        {% block content %}
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tellus, auctor non faucibus consequat, dictum et dui. Praesent vitae magna sit amet odio egestas semper. Duis nec tellus ligula. Pellentesque mollis varius pulvinar. Suspendisse eu ultrices quam. In dignissim felis efficitur lorem porttitor porttitor. Aliquam maximus tempus erat ut sagittis.</p>
+        {% endblock %}
+      {% endembed %}
+    {% endfor %}
+  {% endblock %}
+{% endembed %}

src/objects/rhythm/demo/sections.twig

@@ -1,15 +1,36 @@
-{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
-  class: 'o-rhythm--generous'
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--pad'
+} only %}
+  {% block content %}
+    {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+      class: 'o-rhythm--lavish'
+    } only %}
+      {% block content %}
+        {% for i in 1..3 %}
+          <div>
+            <h3>Section {{i}}</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tellus, auctor non faucibus consequat, dictum et dui. Praesent vitae magna sit amet odio egestas semper. Duis nec tellus ligula. Pellentesque mollis varius pulvinar. Suspendisse eu ultrices quam. In dignissim felis efficitur lorem porttitor porttitor. Aliquam maximus tempus erat ut sagittis.</p>
+          </div>
+        {% endfor %}
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}
+
+{# {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+  class: 'o-rhythm--lavish'
 } only %}
   {% block content %}
     {% for i in 1..3 %}
       {% embed '@cloudfour/objects/container/container.twig' with {
-        class: 'o-container--prose'
+        class: 'o-container--prose',
+        i: i
       } only %}
         {% block content %}
+          <h3>Section {{i}}</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam tellus, auctor non faucibus consequat, dictum et dui. Praesent vitae magna sit amet odio egestas semper. Duis nec tellus ligula. Pellentesque mollis varius pulvinar. Suspendisse eu ultrices quam. In dignissim felis efficitur lorem porttitor porttitor. Aliquam maximus tempus erat ut sagittis.</p>
         {% endblock %}
       {% endembed %}
     {% endfor %}
   {% endblock %}
-{% endembed %}
+{% endembed %} #}

src/objects/rhythm/rhythm.scss

@@ -24,6 +24,10 @@
   --rhythm: #{size.$rhythm-generous};
 }
 
+.o-rhythm--lavish {
+  @include spacing.fluid-vertical-rhythm;
+}
+
 .o-rhythm--default {
   --rhythm: #{size.$rhythm-default};
 }

src/objects/rhythm/rhythm.stories.mdx

@@ -17,6 +17,9 @@ import listDemo from './demo/list.twig';
 import introDemoSource from '!!raw-loader!./demo/intro.twig';
 import introDemo from './demo/intro.twig';
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import paragraphsDemoSource from '!!raw-loader!./demo/paragraphs.twig';
+import paragraphsDemo from './demo/paragraphs.twig';
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import sectionsDemoSource from '!!raw-loader!./demo/sections.twig';
 import sectionsDemo from './demo/sections.twig';
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
@@ -69,7 +72,21 @@ While `o-rhythm--generous` is intended for separating distinct content chunks wi
 <Canvas>
   <Story
     name="Generous"
-    parameters={{ docs: { source: { code: sectionsDemoSource } } }}
+    parameters={{ docs: { source: { code: paragraphsDemoSource } } }}
+  >
+    {paragraphsDemo}
+  </Story>
+</Canvas>
+
+And finally, `o-rhythm--lavish` can separate entire sections from each other. It uses the same fluid padding values as [the container object](/?path=/docs/objects-container--basic):
+
+<Canvas>
+  <Story
+    name="Lavish"
+    parameters={{
+      layout: 'fullscreen',
+      docs: { source: { code: sectionsDemoSource } },
+    }}
   >
     {sectionsDemo}
   </Story>