Improve Cloud Cover with Subscribe Combo (#1855)

This PR modifies the Subscribe and Cloud Cover components to play nicer together.

It updates the Subscribe component to make the headings optional, and tweaks the
layout to switch to horizontal once there's enough space for two buttons, rather
than at a fixed breakpoint.

It updates the Cloud Cover component to switch layout at a custom breakpoint
(45em) rather than m, and adjusts the proportion of space between the content
and extra cells to give the extra content a bit more room to breathe at
mid-size viewports.

Fixes #1769

Author: spaceninja

.changeset/fuzzy-beds-breathe.md

@@ -0,0 +1,7 @@
+---
+"@cloudfour/patterns": major
+---
+
+This change improves the Cloud Cover component's layout when used with the Subscribe component. It makes the Subscribe headings optional, and improved the layout to switch to horizontal when there's enough room for two buttons, rather than a fixed breakpoint.
+
+This is a breaking change because it removes the default values of the Subscribe component's headings.

src/components/cloud-cover/cloud-cover.scss

@@ -5,6 +5,14 @@
 @use '../../mixins/ms';
 @use '../../mixins/fluid';
 
+/// Setting the breakpoint to `m` (40em) results in an awkward layout
+/// when using the Subscribe form in the `extra` slot. However, setting
+/// the breakpoint to `l` (60em) results in the transition happening too
+/// late. As a result, we're using a custom breakpoint optimized for the
+/// Cloud Cover component.
+
+$_cloud-cover-breakpoint: 45em;
+
 /// We can't use `grid-gap` exclusively due to some containers only being present
 /// some of the time, so we re-use this value for `grid-gap` and for `margin`
 /// later on.
@@ -71,7 +79,7 @@ $_gap: ms.step(1);
   pointer-events: none;
   position: absolute;
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     inline-size: 50%;
   }
 }
@@ -159,7 +167,7 @@ $_gap: ms.step(1);
    *    overlap.
    */
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     grid-template-areas:
       '. .'
       '. scene'
@@ -172,6 +180,18 @@ $_gap: ms.step(1);
       auto
       repeat(2, _cloud-space(0.5)); /* 1 */
   }
+
+  /**
+   * Modified styles for Cloud Cover with Extra content
+   *
+   * 1. Give the `extra` content a bit more space relative to the content
+   *    until the viewport is wide enough for the default evenly split layout.
+   */
+  .c-cloud-cover--with-extra & {
+    @media (width >= $_cloud-cover-breakpoint) and (width < breakpoint.$xl) {
+      grid-template-columns: 3fr 4fr; /* 1 */
+    }
+  }
 }
 
 /**
@@ -181,7 +201,7 @@ $_gap: ms.step(1);
  */
 
 .c-cloud-cover--horizon-scene .c-cloud-cover__inner {
-  @media (width < breakpoint.$m) {
+  @media (width < $_cloud-cover-breakpoint) {
     grid-template-areas:
       '.'
       'content'
@@ -221,7 +241,7 @@ $_gap: ms.step(1);
    * use margin to avoid this running up against adjacent content.
    */
 
-  @media (width < breakpoint.$m) {
+  @media (width < $_cloud-cover-breakpoint) {
     margin-block-start: $_gap;
   }
 }
@@ -245,7 +265,7 @@ $_gap: ms.step(1);
    * large as the clouds.
    */
 
-  @media (width < breakpoint.$m) {
+  @media (width < $_cloud-cover-breakpoint) {
     block-size: _cloud-space(2);
     margin-block-end: $_gap;
   }
@@ -255,7 +275,7 @@ $_gap: ms.step(1);
    * and size based on available space.
    */
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     block-size: 100%;
     grid-row-end: span 3;
   }
@@ -273,7 +293,7 @@ $_gap: ms.step(1);
    * the reverse of the default).
    */
 
-  @media (width < breakpoint.$m) {
+  @media (width < $_cloud-cover-breakpoint) {
     block-size: _cloud-space(3);
     margin-block: $_gap 0;
   }
@@ -283,7 +303,7 @@ $_gap: ms.step(1);
    * on areas alone to do this since the `scene` and `extra` areas overlap.
    */
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     grid-row-end: span 4;
   }
 }
@@ -309,7 +329,7 @@ $_gap: ms.step(1);
    * to the right rather than on both sides.
    */
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     object-position: left center;
   }
 }
@@ -322,7 +342,7 @@ $_gap: ms.step(1);
 .c-cloud-cover--horizon-scene .c-cloud-cover__scene-object {
   object-position: center bottom;
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $_cloud-cover-breakpoint) {
     object-position: left bottom;
   }
 }

src/components/cloud-cover/cloud-cover.twig

@@ -3,7 +3,7 @@
 {% set _extra_block %}{% block extra %}{% endblock %}{% endset %}
 {% set _scene_block %}{% block scene %}{% endblock %}{% endset %}
 
-<div class="c-cloud-cover t-dark{% if class %} {{ class }}{% endif %}">
+<div class="c-cloud-cover t-dark{% if class %} {{ class }}{% endif %}{% if _extra_block is not empty %} c-cloud-cover--with-extra{% endif %}">
   <div class="o-container o-container--pad-inline">
     <div class="o-container__content c-cloud-cover__inner">
       <div class="c-cloud-cover__content">

src/components/cloud-cover/demo/extra.twig

@@ -17,6 +17,8 @@
     </p>
   {% endblock %}
   {% block extra %}
-    <p>(Imagine a nifty newsletter signup form here 👀)</p>
+    {% embed '@cloudfour/components/subscribe/subscribe.twig' with {
+      form_id: 'cloud-cover-test'
+    } only %}{% endembed %}
   {% endblock %}
 {% endembed %}

src/components/subscribe/demo/demo.twig

@@ -1,5 +1,7 @@
 {% embed '@cloudfour/components/subscribe/subscribe.twig' with {
-  form_id: 'test'
+  form_id: 'test',
+  weekly_digests_heading: 'Get Weekly Digests',
+  subscribe_heading: 'Never miss an article!',
 } only %}{% endembed %}
 
 <p>This is only for demo purposes. <a href="#">I am a link</a></p>

src/components/subscribe/subscribe.scss

@@ -12,14 +12,20 @@
   position: relative;
 }
 
+.c-subscribe__heading {
+  margin-block-end: size.$rhythm-default-rem;
+}
+
+///
+/// 1. `12em` is a magic number based on the default button text values.
+///    It may need to be tweaked if the text values change in the future.
+///    Ideally we'd use `min-content`, but you can't pair that with `1fr`,
+///    plus it doesn't seem to work since we're setting `inline-size:100%`.
+///
 .c-subscribe__controls {
   display: grid;
   gap: 1em;
-  margin: size.$rhythm-default 0;
-
-  @media (min-width: breakpoint.$s) {
-    grid-template-columns: 1fr 1fr;
-  }
+  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); // 1
 }
 
 .c-subscribe__control {
@@ -50,7 +56,3 @@
     @include a11y.sr-only;
   }
 }
-
-.c-subscribe__form-input-group {
-  margin: size.$rhythm-default 0;
-}

src/components/subscribe/subscribe.stories.mdx

@@ -48,19 +48,19 @@ const templateStory = (args) => {
     },
     heading_tag: {
       type: 'string',
-      description: 'Sets the heading value',
+      description: 'Sets the heading tag',
       table: {
         defaultValue: { summary: 'h2' },
       },
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
       control: 'select',
     },
-    never_miss_article_heading: {
+    subscribe_heading: {
       type: 'string',
-      description: "The heading seen in the component's default state",
+      description: 'The overall subscribe component heading',
       table: {
         defaultValue: {
-          summary: 'Never miss an article!',
+          summary: '',
         },
       },
     },
@@ -130,9 +130,9 @@ const templateStory = (args) => {
     },
     weekly_digests_heading: {
       type: 'string',
-      description: 'The subscription form heading',
+      description: 'The weekly digests subscription form heading',
       table: {
-        defaultValue: { summary: 'Get Weekly Digests' },
+        defaultValue: { summary: '' },
       },
     },
     email_input_label: {
@@ -177,6 +177,8 @@ This component embeds the [Button Swap component](/?path=/docs/components-button
     name="Default"
     args={{
       form_id: 'example-demo',
+      subscribe_heading: 'Never miss an article!',
+      weekly_digests_heading: 'Get Weekly Digests',
     }}
     parameters={{
       docs: {
@@ -185,6 +187,8 @@ This component embeds the [Button Swap component](/?path=/docs/components-button
             '@cloudfour/components/subscribe/subscribe.twig',
             {
               form_id: 'example-demo',
+              subscribe_heading: 'Never miss an article!',
+              weekly_digests_heading: 'Get Weekly Digests',
             }
           ),
         },

src/components/subscribe/subscribe.test.ts

@@ -60,7 +60,12 @@ describe('Subscription', () => {
     withBrowser(async ({ utils, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscribe.scss');
-      await utils.injectHTML(await componentMarkup());
+      await utils.injectHTML(
+        await componentMarkup({
+          weekly_digests_heading: 'Get Weekly Digests',
+          subscribe_heading: 'Never miss an article!',
+        })
+      );
       await initJS(utils);
 
       expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
@@ -196,15 +201,9 @@ describe('Subscription', () => {
       // No customization
       await utils.injectHTML(await componentMarkup({ form_id: 'test' }));
 
-      // Confirm default heading tag
-      await screen.getByRole('heading', {
-        name: 'Never miss an article!',
-        level: 2,
-      });
-      await screen.getByRole('heading', {
-        name: 'Get Weekly Digests',
-        level: 2,
-      });
+      // Confirm default heading tags are not set
+      const anyHeading = await screen.queryByRole('heading');
+      expect(anyHeading).not.toBeInTheDocument();
 
       // Confirm default form values
       let emailInput = await screen.getByRole('textbox', { name: 'Email' });
@@ -217,7 +216,7 @@ describe('Subscription', () => {
           form_action: 'test-action.com',
           heading_tag: 'h3',
           weekly_digests_heading: 'Weekly digests available',
-          never_miss_article_heading: "Don't miss out!",
+          subscribe_heading: "Don't miss out!",
           notifications_btn_class: 'hello',
           notifications_btn_initial_visual_label: 'Yes to notifications',
           weekly_digests_btn_class: 'world',

src/components/subscribe/subscribe.twig

@@ -1,9 +1,11 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
 <div class="c-subscribe js-subscribe {{class}}">
-  <{{_heading_tag}}>
-    {{never_miss_article_heading|default('Never miss an article!')}}
-  </{{_heading_tag}}>
+  {% if subscribe_heading %}
+    <{{_heading_tag}} class="c-subscribe__heading">
+      {{subscribe_heading}}
+    </{{_heading_tag}}>
+  {% endif %}
 
   <div class="c-subscribe__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
@@ -41,11 +43,18 @@
     method="post"
     target="_blank"
     class="c-subscribe__form"
-    aria-labelledby="get-weekly-digests-{{form_id}}"
+    {% if weekly_digests_heading %}
+      aria-labelledby="get-weekly-digests-{{form_id}}"
+    {% endif %}
   >
-    <{{_heading_tag}} id="get-weekly-digests-{{form_id}}">
-      {{weekly_digests_heading|default('Get Weekly Digests')}}
-    </{{_heading_tag}}>
+    {% if weekly_digests_heading %}
+      <{{_heading_tag}}
+        id="get-weekly-digests-{{form_id}}"
+        class="c-subscribe__heading"
+      >
+        {{weekly_digests_heading}}
+      </{{_heading_tag}}>
+    {% endif %}
 
     <label
       class="c-subscribe__form-input-label"

src/tokens/size/rhythm.js

@@ -1,11 +1,12 @@
-const { modularEm } = require('../../scripts/modular-scale');
+const { modularEm, modularRem } = require('../../scripts/modular-scale');
 
 module.exports = {
   size: {
     rhythm: {
       compact: { value: modularEm(-6) },
       condensed: { value: modularEm(-1) },
       default: { value: modularEm(1) },
+      default_rem: { value: modularRem(1) },
       generous: { value: modularEm(3) },
     },
   },