From 6b148528aad0c5ddd5802248163a6f0fc6af7fb5 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 14 Mar 2022 17:33:58 -0700
Subject: [PATCH 01/94] WIP

---
 .../demo/disclosure-widget-demo.twig          | 10 +++++
 .../disclosure-widget.stories.mdx             | 40 +++++++++++++++++++
 .../disclosure-widget/disclosure-widget.twig  | 20 ++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 src/components/disclosure-widget/demo/disclosure-widget-demo.twig
 create mode 100644 src/components/disclosure-widget/disclosure-widget.stories.mdx
 create mode 100644 src/components/disclosure-widget/disclosure-widget.twig

diff --git a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
new file mode 100644
index 000000000..8da016cdf
--- /dev/null
+++ b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
@@ -0,0 +1,10 @@
+{% embed '@cloudfour/components/disclosure-widget/disclosure-widget.twig' only %}
+  {% block content %}
+    <form>
+      <label>
+        Test
+        <input type="text" />
+      </label>
+    </form>
+  {% endblock %}
+{% endembed %}
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/disclosure-widget/disclosure-widget.stories.mdx
new file mode 100644
index 000000000..18e1a3c54
--- /dev/null
+++ b/src/components/disclosure-widget/disclosure-widget.stories.mdx
@@ -0,0 +1,40 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import disclosureWidgetDemo from './demo/disclosure-widget-demo.twig';
+import template from './disclosure-widget.twig';
+
+<Meta title="Components/Disclosure Widget" />
+
+# Disclosure Widget
+
+@TODO Update this!
+
+Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta content.
+
+<Canvas>
+  <Story name="Basic usage">{(args) => template(args)}</Story>
+  <Story name="Another">{(args) => disclosureWidgetDemo(args)}</Story>
+</Canvas>
+
+## Template Properties
+
+`class` (string): CSS class(es) to append to the root element
+
+`Disclosure Widgets` (array): Array of [Disclosure Widget objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+
+```ts
+ {
+   name: string | () => string;
+   avatar: string | () => string;
+   link: string | () => string;
+ }
+```
+
+`Disclosure Widget_prefix` (optional, string, default "By"): Used to create a more
+accessible user experience by adding visually hidden text, prefixes the Disclosure Widget name (e.g. "By Arianna Chau")
+
+`meta` (optional, string): Extra information to be rendered below the Disclosure Widget name(s)
+
+`date` (optional, date object): Represents a publication date
+
+`date_prefix` (optional, string, default "Published on"): Used to create a more
+accessible user experience by adding visually hidden text, prefixes the date value (e.g. "Published on March 31st, 2021")
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
new file mode 100644
index 000000000..57237f393
--- /dev/null
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -0,0 +1,20 @@
+<div class="c-disclosure-widget js-disclosure-widget{% if class %} {{ class }}{% endif %}">
+  {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+    "initial_label": "Notifications have been turned off.",
+    "initial_visual_label": "Get notifications",
+    "swapped_label": "Notifications have been turned on.",
+    "swapped_visual_label": "Turn off notifications"
+  } only %}
+
+  {% include '@cloudfour/components/button/button.twig' with {
+    class: 'js-disclosure-widget__button',
+    label: initial_visual_label|default('Get Weekly Digests'),
+    content_start_icon: 'envelope'
+  } only %}
+
+  <div class="c-disclosure-widget__content">
+    {% block content %}
+      <p>This is the default Weekly Digest content</div>
+    {% endblock %}
+  </div>
+</div>

From 3cdb7f4fe3086f778a1f2868a0f6e37b3a0f1575 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 15 Mar 2022 12:21:39 -0700
Subject: [PATCH 02/94] Update button to receive aria_controls value

---
 src/components/button/button.twig | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/button/button.twig b/src/components/button/button.twig
index 920c7aaef..dc8331b96 100644
--- a/src/components/button/button.twig
+++ b/src/components/button/button.twig
@@ -18,6 +18,9 @@
   {% if aria_expanded %}
     aria-expanded="{{ aria_expanded }}"
   {% endif %}
+  {% if aria_controls %}
+    aria-controls="{{ aria_controls }}"
+  {% endif %}
   {% if tag_name == 'a' %}
     href="{{ href|default('#') }}"
   {% elseif tag_name == 'button' %}

From 60720f8598f5077515ef6e954a19a63f892dba1b Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 15 Mar 2022 12:22:39 -0700
Subject: [PATCH 03/94] More WIP

---
 .../demo/disclosure-widget-demo.twig          |  6 ++-
 .../disclosure-widget/disclosure-widget.scss  | 37 +++++++++++++++++++
 .../disclosure-widget.stories.mdx             | 16 +++++++-
 .../disclosure-widget/disclosure-widget.ts    | 34 +++++++++++++++++
 .../disclosure-widget/disclosure-widget.twig  | 29 +++++++++------
 5 files changed, 108 insertions(+), 14 deletions(-)
 create mode 100644 src/components/disclosure-widget/disclosure-widget.scss
 create mode 100644 src/components/disclosure-widget/disclosure-widget.ts

diff --git a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
index 8da016cdf..567bdf3fa 100644
--- a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
+++ b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
@@ -1,5 +1,7 @@
-{% embed '@cloudfour/components/disclosure-widget/disclosure-widget.twig' only %}
-  {% block content %}
+{% embed '@cloudfour/components/disclosure-widget/disclosure-widget.twig' with{
+  body_content_id: 'example-demo'
+} only %}
+  {% block body_content %}
     <form>
       <label>
         Test
diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/disclosure-widget/disclosure-widget.scss
new file mode 100644
index 000000000..db00497ca
--- /dev/null
+++ b/src/components/disclosure-widget/disclosure-widget.scss
@@ -0,0 +1,37 @@
+@use '../../compiled/tokens/scss/breakpoint';
+
+button[aria-expanded='false'] + .c-disclosure-widget__content {
+  display: none;
+}
+
+.c-disclosure-widget {
+  display: grid;
+  gap: 1rem;
+  grid-template-areas:
+    'extra-content'
+    'control'
+    'control-content';
+
+  @media (min-width: breakpoint.$m) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas:
+      'extra-content control'
+      'control-content control-content';
+  }
+}
+
+.c-disclosure-widget .c-button {
+  width: 100%;
+}
+
+.c-disclosure-widget__extra-content {
+  grid-area: extra-content;
+}
+
+.c-disclosure-widget__button {
+  grid-area: control;
+}
+
+.c-disclosure-widget__content {
+  grid-area: control-content;
+}
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/disclosure-widget/disclosure-widget.stories.mdx
index 18e1a3c54..219b8b462 100644
--- a/src/components/disclosure-widget/disclosure-widget.stories.mdx
+++ b/src/components/disclosure-widget/disclosure-widget.stories.mdx
@@ -1,6 +1,20 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { useEffect } from '@storybook/client-api';
 import disclosureWidgetDemo from './demo/disclosure-widget-demo.twig';
 import template from './disclosure-widget.twig';
+import { initDisclosureWidget } from './disclosure-widget.ts';
+// Helper function to initialize toggling button JS
+const templateStory = (args) => {
+  useEffect(() => {
+    const templateEls = [
+      ...document.querySelectorAll('.js-disclosure-widget'),
+    ].map((templateEl) => initDisclosureWidget(templateEl));
+    return () => {
+      for (const templateEl of templateEls) templateEl.destroy();
+    };
+  });
+  return template(args);
+};
 
 <Meta title="Components/Disclosure Widget" />
 
@@ -11,7 +25,7 @@ import template from './disclosure-widget.twig';
 Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta content.
 
 <Canvas>
-  <Story name="Basic usage">{(args) => template(args)}</Story>
+  <Story name="Basic usage">{(args) => templateStory(args)}</Story>
   <Story name="Another">{(args) => disclosureWidgetDemo(args)}</Story>
 </Canvas>
 
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
new file mode 100644
index 000000000..237e5d5c2
--- /dev/null
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -0,0 +1,34 @@
+/**
+ * Button swap
+ *
+ * Swaps two buttons by toggling the `hidden` attribute on the wrapper for each
+ * button + visually hidden message group; only one button + visually hidden
+ * message is displayed at a time.
+ */
+export const initDisclosureWidget = (disclosureWidgetEl: HTMLElement) => {
+  let isExpanded: boolean;
+
+  const disclosureWidgetBtn = disclosureWidgetEl.querySelector(
+    '.js-disclosure-widget__button'
+  ) as HTMLButtonElement;
+
+  // Click handler
+  const onClick = () => {
+    // Toggle state
+    isExpanded = !isExpanded;
+    // Update DOM with new value
+    disclosureWidgetBtn.setAttribute('aria-expanded', String(isExpanded));
+  };
+
+  const destroy = () => {
+    // Clean up event listeners
+    disclosureWidgetBtn.removeEventListener('click', onClick);
+  };
+
+  // Intialize
+  disclosureWidgetBtn.addEventListener('click', onClick);
+  isExpanded = disclosureWidgetBtn.getAttribute('aria-expanded') === 'true';
+
+  // Return a public API for consumers of this component
+  return { destroy };
+};
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index 57237f393..bcd494a13 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -1,19 +1,26 @@
 <div class="c-disclosure-widget js-disclosure-widget{% if class %} {{ class }}{% endif %}">
-  {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-    "initial_label": "Notifications have been turned off.",
-    "initial_visual_label": "Get notifications",
-    "swapped_label": "Notifications have been turned on.",
-    "swapped_visual_label": "Turn off notifications"
-  } only %}
+
+  <div class="c-disclosure-widget__extra-content">
+    {% block header_content %}
+      {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+        initial_label: 'Notifications have been turned off.',
+        initial_visual_label: 'Get notifications',
+        swapped_label: 'Notifications have been turned on.',
+        swapped_visual_label: 'Turn off notifications'
+      } only %}
+    {% endblock %}
+  </div>
 
   {% include '@cloudfour/components/button/button.twig' with {
-    class: 'js-disclosure-widget__button',
-    label: initial_visual_label|default('Get Weekly Digests'),
-    content_start_icon: 'envelope'
+    class: 'c-disclosure-widget__button js-disclosure-widget__button',
+    label: button_label|default('Get Weekly Digests'),
+    content_start_icon: button_icon|default('envelope'),
+    aria_expanded: aria_expanded|default('false'),
+    aria_controls: body_content_id
   } only %}
 
-  <div class="c-disclosure-widget__content">
-    {% block content %}
+  <div id="{{ body_content_id }}" class="c-disclosure-widget__content">
+    {% block body_content %}
       <p>This is the default Weekly Digest content</div>
     {% endblock %}
   </div>

From f7bf49480ef056bda2f3d3161bb0f650554def68 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 16 Mar 2022 17:35:35 -0700
Subject: [PATCH 04/94] Work in some of Tyler's suggestions

---
 .../disclosure-widget/disclosure-widget.scss  | 39 ++++++-------
 .../disclosure-widget.stories.mdx             |  9 ++-
 .../disclosure-widget/disclosure-widget.ts    | 56 ++++++++++++++++---
 .../disclosure-widget/disclosure-widget.twig  | 49 ++++++++--------
 4 files changed, 98 insertions(+), 55 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/disclosure-widget/disclosure-widget.scss
index db00497ca..da187a935 100644
--- a/src/components/disclosure-widget/disclosure-widget.scss
+++ b/src/components/disclosure-widget/disclosure-widget.scss
@@ -1,37 +1,30 @@
 @use '../../compiled/tokens/scss/breakpoint';
+@use '../../compiled/tokens/scss/color';
+@use '../../mixins/a11y';
 
-button[aria-expanded='false'] + .c-disclosure-widget__content {
-  display: none;
-}
+// button[aria-expanded='false'] + .c-disclosure-widget__form {
+//   // display: none;
+// }
 
 .c-disclosure-widget {
   display: grid;
   gap: 1rem;
-  grid-template-areas:
-    'extra-content'
-    'control'
-    'control-content';
-
-  @media (min-width: breakpoint.$m) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-areas:
-      'extra-content control'
-      'control-content control-content';
-  }
+  position: relative;
 }
 
 .c-disclosure-widget .c-button {
   width: 100%;
 }
 
-.c-disclosure-widget__extra-content {
-  grid-area: extra-content;
-}
-
-.c-disclosure-widget__button {
-  grid-area: control;
-}
+.c-disclosure-widget__form {
+  background-color: var(--form-bg-color, color.$base-white);
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
 
-.c-disclosure-widget__content {
-  grid-area: control-content;
+  .c-disclosure-widget:not(.show-form) &:not(:target):not(:focus-within) {
+    @include a11y.sr-only;
+  }
 }
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/disclosure-widget/disclosure-widget.stories.mdx
index 219b8b462..91b5ce74e 100644
--- a/src/components/disclosure-widget/disclosure-widget.stories.mdx
+++ b/src/components/disclosure-widget/disclosure-widget.stories.mdx
@@ -25,7 +25,14 @@ const templateStory = (args) => {
 Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta content.
 
 <Canvas>
-  <Story name="Basic usage">{(args) => templateStory(args)}</Story>
+  <Story
+    name="Basic usage"
+    args={{
+      body_content_id: 'example-demo',
+    }}
+  >
+    {(args) => templateStory(args)}
+  </Story>
   <Story name="Another">{(args) => disclosureWidgetDemo(args)}</Story>
 </Canvas>
 
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index 237e5d5c2..c58a4dcb6 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -6,28 +6,66 @@
  * message is displayed at a time.
  */
 export const initDisclosureWidget = (disclosureWidgetEl: HTMLElement) => {
+  const HIDDEN_VISUALLY_CSS_CLASS = 'u-hidden-visually';
   let isExpanded: boolean;
 
-  const disclosureWidgetBtn = disclosureWidgetEl.querySelector(
-    '.js-disclosure-widget__button'
-  ) as HTMLButtonElement;
+  let getDigestsLink: HTMLButtonElement;
+  let controlsEl: HTMLElement;
+  let formTargetEl: HTMLElement;
+  let formEl: HTMLFormElement;
+  // let disclosureWidgetTargetId: string;
 
   // Click handler
-  const onClick = () => {
+  const onClick = (event: Event) => {
+    event.preventDefault();
     // Toggle state
     isExpanded = !isExpanded;
     // Update DOM with new value
-    disclosureWidgetBtn.setAttribute('aria-expanded', String(isExpanded));
+    // getDigestsLink.setAttribute('aria-expanded', String(isExpanded));
+    controlsEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    formTargetEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
+    const inputEl = formTargetEl.querySelector('input');
+    console.log('inputEl', inputEl);
+    inputEl?.focus();
+  };
+
+  const onFormBlur = () => {
+    console.log('The FOrm BLURRED');
+    setTimeout(() => {
+      controlsEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
+      formTargetEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    }, 1000);
   };
 
   const destroy = () => {
     // Clean up event listeners
-    disclosureWidgetBtn.removeEventListener('click', onClick);
+    getDigestsLink.removeEventListener('click', onClick);
+  };
+
+  const init = () => {
+    getDigestsLink = disclosureWidgetEl.querySelector(
+      '.js-disclosure-widget__button'
+    ) as HTMLButtonElement;
+
+    controlsEl = disclosureWidgetEl.querySelector(
+      '.js-disclosure-widget__controls'
+    ) as HTMLElement;
+
+    const targetId = getDigestsLink.getAttribute('href') as string;
+    formTargetEl = document.querySelector(targetId) as HTMLElement;
+
+    const inputs = formTargetEl.querySelectorAll('form') as HTMLFormElement;
+
+    // getDigestsLink.setAttribute('aria-expanded', 'false');
+    // formTargetEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    // formTargetEl.setAttribute('tabindex', '-1');
+
+    // isExpanded = getDigestsLink.getAttribute('aria-expanded') === 'true';
+    getDigestsLink.addEventListener('click', onClick);
+    // formEl.addEventListener('blur', onFormBlur);
   };
 
-  // Intialize
-  disclosureWidgetBtn.addEventListener('click', onClick);
-  isExpanded = disclosureWidgetBtn.getAttribute('aria-expanded') === 'true';
+  init();
 
   // Return a public API for consumers of this component
   return { destroy };
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index bcd494a13..495ba6584 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -1,27 +1,32 @@
-<div class="c-disclosure-widget js-disclosure-widget{% if class %} {{ class }}{% endif %}">
+<div
+  class="c-disclosure-widget js-disclosure-widget{% if class %} {{ class }}{% endif %}"
+  {% if form_bg_color %}
+    style="--form-bg-color: {{form_bg_color}};"
+  {% endif %}
+>
 
-  <div class="c-disclosure-widget__extra-content">
-    {% block header_content %}
-      {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        initial_label: 'Notifications have been turned off.',
-        initial_visual_label: 'Get notifications',
-        swapped_label: 'Notifications have been turned on.',
-        swapped_visual_label: 'Turn off notifications'
-      } only %}
-    {% endblock %}
+  <div class="c-disclosure-widget__controls js-disclosure-widget__controls">
+    {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+      class: 'c-disclosure-widget__extra-content',
+      initial_label: 'Notifications have been turned off.',
+      initial_visual_label: 'Get notifications',
+      swapped_label: 'Notifications have been turned on.',
+      swapped_visual_label: 'Turn off notifications'
+    } only %}
+
+    {% include '@cloudfour/components/button/button.twig' with {
+      href: "##{ body_content_id }",
+      class: 'c-disclosure-widget__button js-disclosure-widget__button',
+      label: button_label|default('Get Weekly Digests'),
+      content_start_icon: button_icon|default('envelope')
+    } only %}
   </div>
 
-  {% include '@cloudfour/components/button/button.twig' with {
-    class: 'c-disclosure-widget__button js-disclosure-widget__button',
-    label: button_label|default('Get Weekly Digests'),
-    content_start_icon: button_icon|default('envelope'),
-    aria_expanded: aria_expanded|default('false'),
-    aria_controls: body_content_id
-  } only %}
 
-  <div id="{{ body_content_id }}" class="c-disclosure-widget__content">
-    {% block body_content %}
-      <p>This is the default Weekly Digest content</div>
-    {% endblock %}
-  </div>
+  <form id="{{ body_content_id }}" class="c-disclosure-widget__form">
+    <label for="subscription-email">Email</label>
+    <input id="subscription-email" type="text" />
+    <button>Submit</button>
+  </form>
+
 </div>

From 082b5a56512e379b8a147bb97b7b4d0cc4e7407c Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 16 Mar 2022 17:43:41 -0700
Subject: [PATCH 05/94] More changes

---
 .../disclosure-widget/disclosure-widget.ts    | 54 ++++++++-----------
 .../disclosure-widget/disclosure-widget.twig  |  2 +-
 2 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index c58a4dcb6..24b833e38 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -6,62 +6,52 @@
  * message is displayed at a time.
  */
 export const initDisclosureWidget = (disclosureWidgetEl: HTMLElement) => {
-  const HIDDEN_VISUALLY_CSS_CLASS = 'u-hidden-visually';
   let isExpanded: boolean;
 
-  let getDigestsLink: HTMLButtonElement;
-  let controlsEl: HTMLElement;
-  let formTargetEl: HTMLElement;
-  let formEl: HTMLFormElement;
-  // let disclosureWidgetTargetId: string;
+  const getWeeklyDigestsBtn = disclosureWidgetEl.querySelector(
+    '.js-disclosure-widget__button'
+  ) as HTMLButtonElement;
+
+  const formEl = disclosureWidgetEl.querySelector('form') as HTMLFormElement;
 
   // Click handler
   const onClick = (event: Event) => {
     event.preventDefault();
     // Toggle state
-    isExpanded = !isExpanded;
+    // isExpanded = !isExpanded;
     // Update DOM with new value
-    // getDigestsLink.setAttribute('aria-expanded', String(isExpanded));
-    controlsEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
-    formTargetEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
-    const inputEl = formTargetEl.querySelector('input');
-    console.log('inputEl', inputEl);
-    inputEl?.focus();
+    // getWeeklyDigestsBtn.setAttribute('aria-expanded', String(isExpanded));
+    // controlsEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    // formEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
+    formEl.querySelector('input')?.focus();
   };
 
   const onFormBlur = () => {
     console.log('The FOrm BLURRED');
     setTimeout(() => {
-      controlsEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
-      formTargetEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+      // controlsEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
+      // formEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
     }, 1000);
   };
 
   const destroy = () => {
     // Clean up event listeners
-    getDigestsLink.removeEventListener('click', onClick);
+    getWeeklyDigestsBtn.removeEventListener('click', onClick);
   };
 
   const init = () => {
-    getDigestsLink = disclosureWidgetEl.querySelector(
-      '.js-disclosure-widget__button'
-    ) as HTMLButtonElement;
-
-    controlsEl = disclosureWidgetEl.querySelector(
-      '.js-disclosure-widget__controls'
-    ) as HTMLElement;
-
-    const targetId = getDigestsLink.getAttribute('href') as string;
-    formTargetEl = document.querySelector(targetId) as HTMLElement;
+    // controlsEl = disclosureWidgetEl.querySelector(
+    //   '.js-disclosure-widget__controls'
+    // ) as HTMLElement;
 
-    const inputs = formTargetEl.querySelectorAll('form') as HTMLFormElement;
+    // const inputs = formEl.querySelectorAll('input') as HTMLFormElement;
 
-    // getDigestsLink.setAttribute('aria-expanded', 'false');
-    // formTargetEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
-    // formTargetEl.setAttribute('tabindex', '-1');
+    // getWeeklyDigestsBtn.setAttribute('aria-expanded', 'false');
+    // formEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    // formEl.setAttribute('tabindex', '-1');
 
-    // isExpanded = getDigestsLink.getAttribute('aria-expanded') === 'true';
-    getDigestsLink.addEventListener('click', onClick);
+    // isExpanded = getWeeklyDigestsBtn.getAttribute('aria-expanded') === 'true';
+    getWeeklyDigestsBtn.addEventListener('click', onClick);
     // formEl.addEventListener('blur', onFormBlur);
   };
 
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index 495ba6584..c3967a25a 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -5,7 +5,7 @@
   {% endif %}
 >
 
-  <div class="c-disclosure-widget__controls js-disclosure-widget__controls">
+  <div class="c-disclosure-widget__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       class: 'c-disclosure-widget__extra-content',
       initial_label: 'Notifications have been turned off.',

From a0797407659d8915adb6aebf502dede744cfb8f1 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 08:27:57 -0700
Subject: [PATCH 06/94] More progress

---
 .../disclosure-widget/disclosure-widget.scss  |  7 ++
 .../disclosure-widget/disclosure-widget.ts    | 65 ++++++++++---------
 .../disclosure-widget/disclosure-widget.twig  |  4 +-
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/disclosure-widget/disclosure-widget.scss
index da187a935..dcbe5b5dc 100644
--- a/src/components/disclosure-widget/disclosure-widget.scss
+++ b/src/components/disclosure-widget/disclosure-widget.scss
@@ -2,6 +2,13 @@
 @use '../../compiled/tokens/scss/color';
 @use '../../mixins/a11y';
 
+body {
+  @media (prefers-color-scheme: dark) {
+    // Don't wake up baby
+    background-color: black !important;
+  }
+}
+
 // button[aria-expanded='false'] + .c-disclosure-widget__form {
 //   // display: none;
 // }
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index 24b833e38..7c5defc27 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -5,54 +5,61 @@
  * button + visually hidden message group; only one button + visually hidden
  * message is displayed at a time.
  */
-export const initDisclosureWidget = (disclosureWidgetEl: HTMLElement) => {
-  let isExpanded: boolean;
+export const initDisclosureWidget = (containerEl: HTMLElement) => {
+  let blurTimeoutId: number;
 
-  const getWeeklyDigestsBtn = disclosureWidgetEl.querySelector(
-    '.js-disclosure-widget__button'
+  const getWeeklyDigestsBtn = containerEl.querySelector(
+    '.js-disclosure-widget__get-weekly-digests-btn'
   ) as HTMLButtonElement;
-
-  const formEl = disclosureWidgetEl.querySelector('form') as HTMLFormElement;
+  const formEl = containerEl.querySelector('form') as HTMLFormElement;
+  const formChildEls = containerEl.querySelectorAll('form > *');
 
   // Click handler
   const onClick = (event: Event) => {
     event.preventDefault();
-    // Toggle state
-    // isExpanded = !isExpanded;
-    // Update DOM with new value
-    // getWeeklyDigestsBtn.setAttribute('aria-expanded', String(isExpanded));
-    // controlsEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
-    // formEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
+
+    containerEl.classList.add('show-form');
     formEl.querySelector('input')?.focus();
   };
 
+  const onFormFocus = () => {
+    clearBlurTimeout();
+    containerEl.classList.add('show-form');
+  };
+
   const onFormBlur = () => {
-    console.log('The FOrm BLURRED');
-    setTimeout(() => {
-      // controlsEl.classList.remove(HIDDEN_VISUALLY_CSS_CLASS);
-      // formEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
+    startBlurTimeout();
+  };
+
+  const clearBlurTimeout = () => {
+    if (blurTimeoutId) {
+      clearTimeout(blurTimeoutId);
+    }
+  };
+
+  const startBlurTimeout = () => {
+    clearBlurTimeout();
+
+    blurTimeoutId = window.setTimeout(() => {
+      containerEl.classList.remove('show-form');
     }, 1000);
   };
 
+  // Clean up event listeners
   const destroy = () => {
-    // Clean up event listeners
     getWeeklyDigestsBtn.removeEventListener('click', onClick);
+    for (const formChildEl of formChildEls) {
+      formChildEl.removeEventListener('blur', onFormBlur);
+      formChildEl.removeEventListener('focus', onFormFocus);
+    }
   };
 
   const init = () => {
-    // controlsEl = disclosureWidgetEl.querySelector(
-    //   '.js-disclosure-widget__controls'
-    // ) as HTMLElement;
-
-    // const inputs = formEl.querySelectorAll('input') as HTMLFormElement;
-
-    // getWeeklyDigestsBtn.setAttribute('aria-expanded', 'false');
-    // formEl.classList.add(HIDDEN_VISUALLY_CSS_CLASS);
-    // formEl.setAttribute('tabindex', '-1');
-
-    // isExpanded = getWeeklyDigestsBtn.getAttribute('aria-expanded') === 'true';
     getWeeklyDigestsBtn.addEventListener('click', onClick);
-    // formEl.addEventListener('blur', onFormBlur);
+    for (const formChildEl of formChildEls) {
+      formChildEl.addEventListener('blur', onFormBlur);
+      formChildEl.addEventListener('focus', onFormFocus);
+    }
   };
 
   init();
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index c3967a25a..8ddd8db15 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -7,7 +7,7 @@
 
   <div class="c-disclosure-widget__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-      class: 'c-disclosure-widget__extra-content',
+      class: 'c-disclosure-widget__button',
       initial_label: 'Notifications have been turned off.',
       initial_visual_label: 'Get notifications',
       swapped_label: 'Notifications have been turned on.',
@@ -16,7 +16,7 @@
 
     {% include '@cloudfour/components/button/button.twig' with {
       href: "##{ body_content_id }",
-      class: 'c-disclosure-widget__button js-disclosure-widget__button',
+      class: 'c-disclosure-widget__button js-disclosure-widget__get-weekly-digests-btn',
       label: button_label|default('Get Weekly Digests'),
       content_start_icon: button_icon|default('envelope')
     } only %}

From d6f47b4b3d22bc43e4748bfd44db210d7c1d8bc2 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 08:47:56 -0700
Subject: [PATCH 07/94] Pretty solid state

---
 src/components/disclosure-widget/disclosure-widget.ts | 11 +++++++++++
 .../disclosure-widget/disclosure-widget.twig          | 11 +++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index 7c5defc27..05d238ea5 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -13,6 +13,9 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
   ) as HTMLButtonElement;
   const formEl = containerEl.querySelector('form') as HTMLFormElement;
   const formChildEls = containerEl.querySelectorAll('form > *');
+  const controlEls = containerEl.querySelectorAll(
+    '.js-disclosure-widget__control'
+  );
 
   // Click handler
   const onClick = (event: Event) => {
@@ -22,6 +25,11 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
     formEl.querySelector('input')?.focus();
   };
 
+  const onControlFocus = () => {
+    clearBlurTimeout();
+    containerEl.classList.remove('show-form');
+  };
+
   const onFormFocus = () => {
     clearBlurTimeout();
     containerEl.classList.add('show-form');
@@ -60,6 +68,9 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
       formChildEl.addEventListener('blur', onFormBlur);
       formChildEl.addEventListener('focus', onFormFocus);
     }
+    for (const controlEl of controlEls) {
+      controlEl.addEventListener('focus', onControlFocus);
+    }
   };
 
   init();
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index 8ddd8db15..50ed5eb63 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -7,7 +7,10 @@
 
   <div class="c-disclosure-widget__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-      class: 'c-disclosure-widget__button',
+      class: '
+        c-disclosure-widget__control
+        js-disclosure-widget__control
+      ',
       initial_label: 'Notifications have been turned off.',
       initial_visual_label: 'Get notifications',
       swapped_label: 'Notifications have been turned on.',
@@ -16,7 +19,11 @@
 
     {% include '@cloudfour/components/button/button.twig' with {
       href: "##{ body_content_id }",
-      class: 'c-disclosure-widget__button js-disclosure-widget__get-weekly-digests-btn',
+      class: '
+        c-disclosure-widget__control
+        js-disclosure-widget__control
+        js-disclosure-widget__get-weekly-digests-btn
+      ',
       label: button_label|default('Get Weekly Digests'),
       content_start_icon: button_icon|default('envelope')
     } only %}

From 4f6147d5f7259073358fe19f47d980ff0963c49b Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 10:18:36 -0700
Subject: [PATCH 08/94] Some cleanup

---
 .../disclosure-widget/disclosure-widget.scss  |  2 +-
 .../disclosure-widget/disclosure-widget.ts    | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/disclosure-widget/disclosure-widget.scss
index dcbe5b5dc..9c40849a6 100644
--- a/src/components/disclosure-widget/disclosure-widget.scss
+++ b/src/components/disclosure-widget/disclosure-widget.scss
@@ -31,7 +31,7 @@ body {
   top: 0;
   width: 100%;
 
-  .c-disclosure-widget:not(.show-form) &:not(:target):not(:focus-within) {
+  .c-disclosure-widget:not(.activate-form) &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }
 }
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index 05d238ea5..fbb577d51 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -6,6 +6,10 @@
  * message is displayed at a time.
  */
 export const initDisclosureWidget = (containerEl: HTMLElement) => {
+  const SHOW_FORM_CLASS = 'activate-form';
+  const BLUR_TIMEOUT = 1000; // Milliseconds
+
+  // Keeps track of active setTimeouts
   let blurTimeoutId: number;
 
   const getWeeklyDigestsBtn = containerEl.querySelector(
@@ -17,22 +21,20 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
     '.js-disclosure-widget__control'
   );
 
-  // Click handler
   const onClick = (event: Event) => {
     event.preventDefault();
-
-    containerEl.classList.add('show-form');
+    containerEl.classList.add(SHOW_FORM_CLASS);
     formEl.querySelector('input')?.focus();
   };
 
   const onControlFocus = () => {
     clearBlurTimeout();
-    containerEl.classList.remove('show-form');
+    containerEl.classList.remove(SHOW_FORM_CLASS);
   };
 
   const onFormFocus = () => {
     clearBlurTimeout();
-    containerEl.classList.add('show-form');
+    containerEl.classList.add(SHOW_FORM_CLASS);
   };
 
   const onFormBlur = () => {
@@ -47,10 +49,9 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
 
   const startBlurTimeout = () => {
     clearBlurTimeout();
-
     blurTimeoutId = window.setTimeout(() => {
-      containerEl.classList.remove('show-form');
-    }, 1000);
+      containerEl.classList.remove(SHOW_FORM_CLASS);
+    }, BLUR_TIMEOUT);
   };
 
   // Clean up event listeners
@@ -60,6 +61,9 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
       formChildEl.removeEventListener('blur', onFormBlur);
       formChildEl.removeEventListener('focus', onFormFocus);
     }
+    for (const controlEl of controlEls) {
+      controlEl.removeEventListener('focus', onControlFocus);
+    }
   };
 
   const init = () => {

From afd807288d5a479d961978276c76e4388abf24eb Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 11:44:43 -0700
Subject: [PATCH 09/94] Add button_class support to Buttton Swap

---
 src/components/button-swap/button-swap.stories.mdx | 1 +
 src/components/button-swap/button-swap.twig        | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/button-swap/button-swap.stories.mdx b/src/components/button-swap/button-swap.stories.mdx
index fdca9eb46..de5f2e713 100644
--- a/src/components/button-swap/button-swap.stories.mdx
+++ b/src/components/button-swap/button-swap.stories.mdx
@@ -74,6 +74,7 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
 ## Template Properties
 
 - `class` (string): Appends a CSS class(es) to the root element.
+- `button_class` (string): Appends a CSS class(es) to the button element.
 - `content_start_icon` (string, default `'bell'`): The button [icon](/docs/design-icons--page) (the same icon is applied to both buttons).
 - `initial_label` (string, default `'Unsubscribed from notifications'`): The first button visually hidden text.
 - `initial_visual_label` (string, default `'Get notifications'`): The first button label.
diff --git a/src/components/button-swap/button-swap.twig b/src/components/button-swap/button-swap.twig
index 5518bc747..a236594db 100644
--- a/src/components/button-swap/button-swap.twig
+++ b/src/components/button-swap/button-swap.twig
@@ -9,7 +9,7 @@
     </span>
 
     {% include '@cloudfour/components/button/button.twig' with {
-      class: 'js-button-swap__button',
+      class: ['js-button-swap__button', button_class]|join(' '),
       content_start_icon: content_start_icon|default('bell'),
       label: initial_visual_label|default('Get notifications')
     } only %}
@@ -20,7 +20,12 @@
     </span>
 
     {% include '@cloudfour/components/button/button.twig' with {
-      class: 'c-button--secondary is-slashed js-button-swap__button',
+      class: [
+        'c-button--secondary',
+        'is-slashed',
+        'js-button-swap__button',
+        button_class
+      ]|join(' '),
       content_start_icon: content_start_icon|default('bell'),
       label: swapped_visual_label|default('Turn off notifications')
     } only %}

From a98c1c27752f5dc040f2c08e25de66dcd8867065 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 11:45:08 -0700
Subject: [PATCH 10/94] Use button_class + cleanup

---
 src/components/disclosure-widget/disclosure-widget.scss    | 7 +------
 .../disclosure-widget/disclosure-widget.stories.mdx        | 2 --
 src/components/disclosure-widget/disclosure-widget.twig    | 2 +-
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/disclosure-widget/disclosure-widget.scss
index 9c40849a6..e83047132 100644
--- a/src/components/disclosure-widget/disclosure-widget.scss
+++ b/src/components/disclosure-widget/disclosure-widget.scss
@@ -1,4 +1,3 @@
-@use '../../compiled/tokens/scss/breakpoint';
 @use '../../compiled/tokens/scss/color';
 @use '../../mixins/a11y';
 
@@ -9,17 +8,13 @@ body {
   }
 }
 
-// button[aria-expanded='false'] + .c-disclosure-widget__form {
-//   // display: none;
-// }
-
 .c-disclosure-widget {
   display: grid;
   gap: 1rem;
   position: relative;
 }
 
-.c-disclosure-widget .c-button {
+.c-disclosure-widget__control {
   width: 100%;
 }
 
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/disclosure-widget/disclosure-widget.stories.mdx
index 91b5ce74e..433eb318f 100644
--- a/src/components/disclosure-widget/disclosure-widget.stories.mdx
+++ b/src/components/disclosure-widget/disclosure-widget.stories.mdx
@@ -1,6 +1,5 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
-import disclosureWidgetDemo from './demo/disclosure-widget-demo.twig';
 import template from './disclosure-widget.twig';
 import { initDisclosureWidget } from './disclosure-widget.ts';
 // Helper function to initialize toggling button JS
@@ -33,7 +32,6 @@ Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta c
   >
     {(args) => templateStory(args)}
   </Story>
-  <Story name="Another">{(args) => disclosureWidgetDemo(args)}</Story>
 </Canvas>
 
 ## Template Properties
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index 50ed5eb63..32c9bb119 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -7,7 +7,7 @@
 
   <div class="c-disclosure-widget__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-      class: '
+      button_class: '
         c-disclosure-widget__control
         js-disclosure-widget__control
       ',

From b45bf8c1baf1cb7ff15819da153515ba1b1e6955 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 12:17:02 -0700
Subject: [PATCH 11/94] More changes

---
 .../demo/disclosure-widget-demo.twig          |  2 +-
 .../disclosure-widget.stories.mdx             |  2 +-
 .../disclosure-widget/disclosure-widget.ts    | 34 ++++++++++---------
 .../disclosure-widget/disclosure-widget.twig  |  8 ++---
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
index 567bdf3fa..e7410c1cb 100644
--- a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
+++ b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
@@ -1,5 +1,5 @@
 {% embed '@cloudfour/components/disclosure-widget/disclosure-widget.twig' with{
-  body_content_id: 'example-demo'
+  form_id: 'example-demo'
 } only %}
   {% block body_content %}
     <form>
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/disclosure-widget/disclosure-widget.stories.mdx
index 433eb318f..4da917435 100644
--- a/src/components/disclosure-widget/disclosure-widget.stories.mdx
+++ b/src/components/disclosure-widget/disclosure-widget.stories.mdx
@@ -27,7 +27,7 @@ Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta c
   <Story
     name="Basic usage"
     args={{
-      body_content_id: 'example-demo',
+      form_id: 'example-demo',
     }}
   >
     {(args) => templateStory(args)}
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/disclosure-widget/disclosure-widget.ts
index fbb577d51..0c2435a2e 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/disclosure-widget/disclosure-widget.ts
@@ -21,42 +21,43 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
     '.js-disclosure-widget__control'
   );
 
-  const onClick = (event: Event) => {
-    event.preventDefault();
-    containerEl.classList.add(SHOW_FORM_CLASS);
-    formEl.querySelector('input')?.focus();
+  const clearBlurTimeout = () => {
+    if (blurTimeoutId) {
+      clearTimeout(blurTimeoutId);
+    }
   };
 
+  // Remove the form anytime a control gets focus
   const onControlFocus = () => {
     clearBlurTimeout();
     containerEl.classList.remove(SHOW_FORM_CLASS);
   };
 
+  // Show the form anytime any form element gets focus
+  // The form is always accessible by keyboard, it's only visually hidden
   const onFormFocus = () => {
     clearBlurTimeout();
     containerEl.classList.add(SHOW_FORM_CLASS);
   };
 
+  // Hide the form after a delay anytime focus is removed from a form element
   const onFormBlur = () => {
-    startBlurTimeout();
-  };
-
-  const clearBlurTimeout = () => {
-    if (blurTimeoutId) {
-      clearTimeout(blurTimeoutId);
-    }
-  };
-
-  const startBlurTimeout = () => {
     clearBlurTimeout();
     blurTimeoutId = window.setTimeout(() => {
       containerEl.classList.remove(SHOW_FORM_CLASS);
     }, BLUR_TIMEOUT);
   };
 
+  // Handler for the button click
+  const onGetWeeklyDigestsClick = (event: Event) => {
+    event.preventDefault();
+    containerEl.classList.add(SHOW_FORM_CLASS);
+    formEl.querySelector('input')?.focus();
+  };
+
   // Clean up event listeners
   const destroy = () => {
-    getWeeklyDigestsBtn.removeEventListener('click', onClick);
+    getWeeklyDigestsBtn.removeEventListener('click', onGetWeeklyDigestsClick);
     for (const formChildEl of formChildEls) {
       formChildEl.removeEventListener('blur', onFormBlur);
       formChildEl.removeEventListener('focus', onFormFocus);
@@ -66,8 +67,9 @@ export const initDisclosureWidget = (containerEl: HTMLElement) => {
     }
   };
 
+  // Set up all event listeners
   const init = () => {
-    getWeeklyDigestsBtn.addEventListener('click', onClick);
+    getWeeklyDigestsBtn.addEventListener('click', onGetWeeklyDigestsClick);
     for (const formChildEl of formChildEls) {
       formChildEl.addEventListener('blur', onFormBlur);
       formChildEl.addEventListener('focus', onFormFocus);
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/disclosure-widget/disclosure-widget.twig
index 32c9bb119..04c909d9f 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/disclosure-widget/disclosure-widget.twig
@@ -18,7 +18,7 @@
     } only %}
 
     {% include '@cloudfour/components/button/button.twig' with {
-      href: "##{ body_content_id }",
+      href: "##{ form_id }",
       class: '
         c-disclosure-widget__control
         js-disclosure-widget__control
@@ -30,9 +30,9 @@
   </div>
 
 
-  <form id="{{ body_content_id }}" class="c-disclosure-widget__form">
-    <label for="subscription-email">Email</label>
-    <input id="subscription-email" type="text" />
+  <form id="{{ form_id }}" class="c-disclosure-widget__form">
+    <label for="{{form_id}}-subscription-email">Email</label>
+    <input id="{{form_id}}-subscription-email" type="text" />
     <button>Submit</button>
   </form>
 

From 26bdc4b92a664896e3f5bac49a72b87eb4b44f6d Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 14:53:03 -0700
Subject: [PATCH 12/94] Refactor names

---
 .../demo/disclosure-widget-demo.twig          |  12 --
 .../subscription-choices.scss}                |   9 +-
 .../subscription-choices.stories.mdx}         |  24 +--
 .../subscription-choices.test.ts              | 140 ++++++++++++++++++
 .../subscription-choices.ts}                  |  28 ++--
 .../subscription-choices.twig}                |  16 +-
 6 files changed, 181 insertions(+), 48 deletions(-)
 delete mode 100644 src/components/disclosure-widget/demo/disclosure-widget-demo.twig
 rename src/components/{disclosure-widget/disclosure-widget.scss => subscription-choices/subscription-choices.scss} (70%)
 rename src/components/{disclosure-widget/disclosure-widget.stories.mdx => subscription-choices/subscription-choices.stories.mdx} (58%)
 create mode 100644 src/components/subscription-choices/subscription-choices.test.ts
 rename src/components/{disclosure-widget/disclosure-widget.ts => subscription-choices/subscription-choices.ts} (81%)
 rename src/components/{disclosure-widget/disclosure-widget.twig => subscription-choices/subscription-choices.twig} (67%)

diff --git a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig b/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
deleted file mode 100644
index e7410c1cb..000000000
--- a/src/components/disclosure-widget/demo/disclosure-widget-demo.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-{% embed '@cloudfour/components/disclosure-widget/disclosure-widget.twig' with{
-  form_id: 'example-demo'
-} only %}
-  {% block body_content %}
-    <form>
-      <label>
-        Test
-        <input type="text" />
-      </label>
-    </form>
-  {% endblock %}
-{% endembed %}
diff --git a/src/components/disclosure-widget/disclosure-widget.scss b/src/components/subscription-choices/subscription-choices.scss
similarity index 70%
rename from src/components/disclosure-widget/disclosure-widget.scss
rename to src/components/subscription-choices/subscription-choices.scss
index e83047132..c10281e98 100644
--- a/src/components/disclosure-widget/disclosure-widget.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -8,17 +8,17 @@ body {
   }
 }
 
-.c-disclosure-widget {
+.c-subscription-choices {
   display: grid;
   gap: 1rem;
   position: relative;
 }
 
-.c-disclosure-widget__control {
+.c-subscription-choices__control {
   width: 100%;
 }
 
-.c-disclosure-widget__form {
+.c-subscription-choices__form {
   background-color: var(--form-bg-color, color.$base-white);
   position: absolute;
   height: 100%;
@@ -26,7 +26,8 @@ body {
   top: 0;
   width: 100%;
 
-  .c-disclosure-widget:not(.activate-form) &:not(:target):not(:focus-within) {
+  .c-subscription-choices:not(.activate-form)
+    &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }
 }
diff --git a/src/components/disclosure-widget/disclosure-widget.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
similarity index 58%
rename from src/components/disclosure-widget/disclosure-widget.stories.mdx
rename to src/components/subscription-choices/subscription-choices.stories.mdx
index 4da917435..5319b4357 100644
--- a/src/components/disclosure-widget/disclosure-widget.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -1,13 +1,14 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
-import template from './disclosure-widget.twig';
-import { initDisclosureWidget } from './disclosure-widget.ts';
+import template from './subscription-choices.twig';
+import { initSubscriptionChoices } from './subscription-choices.ts';
 // Helper function to initialize toggling button JS
 const templateStory = (args) => {
+  console.log('templateStory');
   useEffect(() => {
     const templateEls = [
-      ...document.querySelectorAll('.js-disclosure-widget'),
-    ].map((templateEl) => initDisclosureWidget(templateEl));
+      ...document.querySelectorAll('.js-subscription-choices'),
+    ].map((templateEl) => initSubscriptionChoices(templateEl));
     return () => {
       for (const templateEl of templateEls) templateEl.destroy();
     };
@@ -15,16 +16,17 @@ const templateStory = (args) => {
   return template(args);
 };
 
-<Meta title="Components/Disclosure Widget" />
+<Meta title="Components/Subscription Choices" />
 
-# Disclosure Widget
+# Subscription Choices
 
 @TODO Update this!
 
-Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta content.
+Displays a Subscription Choices, or set of Subscription Choicess, with optional meta content.
 
 <Canvas>
   <Story
+    inline={false}
     name="Basic usage"
     args={{
       form_id: 'example-demo',
@@ -38,7 +40,7 @@ Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta c
 
 `class` (string): CSS class(es) to append to the root element
 
-`Disclosure Widgets` (array): Array of [Disclosure Widget objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+`Subscription Choicess` (array): Array of [Subscription Choices objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
 
 ```ts
  {
@@ -48,10 +50,10 @@ Displays a Disclosure Widget, or set of Disclosure Widgets, with optional meta c
  }
 ```
 
-`Disclosure Widget_prefix` (optional, string, default "By"): Used to create a more
-accessible user experience by adding visually hidden text, prefixes the Disclosure Widget name (e.g. "By Arianna Chau")
+`Subscription Choices_prefix` (optional, string, default "By"): Used to create a more
+accessible user experience by adding visually hidden text, prefixes the Subscription Choices name (e.g. "By Arianna Chau")
 
-`meta` (optional, string): Extra information to be rendered below the Disclosure Widget name(s)
+`meta` (optional, string): Extra information to be rendered below the Subscription Choices name(s)
 
 `date` (optional, date object): Represents a publication date
 
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
new file mode 100644
index 000000000..81e95af71
--- /dev/null
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -0,0 +1,140 @@
+import path from 'path';
+import type { ElementHandle, PleasantestUtils } from 'pleasantest';
+import { withBrowser, getAccessibilityTree } from 'pleasantest';
+import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
+
+// Helper to load the Twig template file
+const componentMarkup = loadTwigTemplate(
+  path.join(__dirname, './subscription-choices.twig')
+);
+
+// Helper to initialize the component JS
+const initJS = (utils: PleasantestUtils) =>
+  utils.runJS(`
+    import { initSubscriptionChoices } from './subscription-choices'
+    export default () => initSubscriptionChoices(
+      document.querySelector('.js-subscription-choices')
+    )
+  `);
+
+test(
+  'Swap UI state when clicked',
+  withBrowser(async ({ utils, screen, user, page }) => {
+    await utils.injectHTML(await componentMarkup());
+    await loadGlobalCSS(utils);
+
+    // Before JS initializes
+    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      status
+        text "Currently unsubscribed from notifications"
+      button "Get notifications"
+    `);
+
+    let firstBtn = await screen.getByRole('button');
+    await expect(firstBtn).toBeVisible();
+    await expect(firstBtn).not.toHaveClass('is-slashed');
+
+    await initJS(utils);
+
+    // After JS initializes it should be the same
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      status
+        text "Currently unsubscribed from notifications"
+      button "Get notifications"
+    `);
+
+    firstBtn = await screen.queryByRole('button');
+    await expect(firstBtn).toBeVisible();
+    await expect(firstBtn).not.toHaveClass('is-slashed');
+
+    // Button swap action
+    await user.click(firstBtn);
+
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      alert (focused)
+        text "Currently subscribed to notifications"
+      button "Turn off notifications"
+    `);
+
+    const secondBtn = await screen.queryByRole('button', {
+      name: /^turn off notifications$/i,
+    });
+    await expect(secondBtn).toBeVisible();
+    await expect(secondBtn).toHaveClass('is-slashed');
+
+    // Button swap action
+    await user.click(secondBtn);
+
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      alert (focused)
+        text "Currently unsubscribed from notifications"
+      button "Get notifications"
+    `);
+
+    // Query for first button again in its new state
+    firstBtn = await screen.queryByRole('button');
+    await expect(firstBtn).toBeVisible();
+    await expect(firstBtn).not.toHaveClass('is-slashed');
+  })
+);
+
+test.skip(
+  'Set custom messages and labels',
+  withBrowser(async ({ utils, screen, user, page }) => {
+    await utils.injectHTML(
+      await componentMarkup({
+        initial_visual_label: 'Hello world',
+        swapped_visual_label: 'Have a great day',
+        initial_label: 'Unsubscribed',
+        swapped_label: 'Subscribed',
+      })
+    );
+    await loadGlobalCSS(utils);
+    await initJS(utils);
+
+    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      status
+        text "Unsubscribed"
+      button "Hello world"
+    `);
+
+    // Button swap action
+    await user.click(await screen.getByRole('button'));
+
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      alert (focused)
+        text "Subscribed"
+      button "Have a great day"
+    `);
+  })
+);
+
+test.skip(
+  'Callback functions are called',
+  withBrowser(async ({ utils, screen, user }) => {
+    await utils.injectHTML(await componentMarkup());
+
+    const mockInitialCallback = jest.fn();
+    const mockSwappedCallback = jest.fn();
+
+    await initJS(utils, mockInitialCallback, mockSwappedCallback);
+
+    const firstBtn = await screen.queryByRole('button', {
+      name: /^get notifications$/i,
+    });
+
+    await user.click(firstBtn);
+
+    expect(mockInitialCallback).toBeCalledTimes(1);
+
+    const secondBtn = await screen.queryByRole('button', {
+      name: /^turn off notifications$/i,
+    });
+
+    await user.click(secondBtn);
+
+    expect(mockSwappedCallback).toBeCalledTimes(1);
+  })
+);
diff --git a/src/components/disclosure-widget/disclosure-widget.ts b/src/components/subscription-choices/subscription-choices.ts
similarity index 81%
rename from src/components/disclosure-widget/disclosure-widget.ts
rename to src/components/subscription-choices/subscription-choices.ts
index 0c2435a2e..6f3bca8af 100644
--- a/src/components/disclosure-widget/disclosure-widget.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -5,44 +5,46 @@
  * button + visually hidden message group; only one button + visually hidden
  * message is displayed at a time.
  */
-export const initDisclosureWidget = (containerEl: HTMLElement) => {
+export const initSubscriptionChoices = (containerEl: HTMLElement) => {
+  console.log('INIT initSubscriptionChoices');
+
   const SHOW_FORM_CLASS = 'activate-form';
   const BLUR_TIMEOUT = 1000; // Milliseconds
 
   // Keeps track of active setTimeouts
   let blurTimeoutId: number;
 
+  // Query all the required elements
   const getWeeklyDigestsBtn = containerEl.querySelector(
-    '.js-disclosure-widget__get-weekly-digests-btn'
-  ) as HTMLButtonElement;
-  const formEl = containerEl.querySelector('form') as HTMLFormElement;
+    '.js-subscription-choices__get-weekly-digests-btn'
+  );
+  const formEl = containerEl.querySelector('form');
   const formChildEls = containerEl.querySelectorAll('form > *');
   const controlEls = containerEl.querySelectorAll(
-    '.js-disclosure-widget__control'
+    '.js-subscription-choices__control'
   );
 
-  const clearBlurTimeout = () => {
-    if (blurTimeoutId) {
-      clearTimeout(blurTimeoutId);
-    }
-  };
+  // Confirm we have what we need to proceed
+  if (!getWeeklyDigestsBtn || !formEl) {
+    return;
+  }
 
   // Remove the form anytime a control gets focus
   const onControlFocus = () => {
-    clearBlurTimeout();
+    clearTimeout(blurTimeoutId);
     containerEl.classList.remove(SHOW_FORM_CLASS);
   };
 
   // Show the form anytime any form element gets focus
   // The form is always accessible by keyboard, it's only visually hidden
   const onFormFocus = () => {
-    clearBlurTimeout();
+    clearTimeout(blurTimeoutId);
     containerEl.classList.add(SHOW_FORM_CLASS);
   };
 
   // Hide the form after a delay anytime focus is removed from a form element
   const onFormBlur = () => {
-    clearBlurTimeout();
+    clearTimeout(blurTimeoutId);
     blurTimeoutId = window.setTimeout(() => {
       containerEl.classList.remove(SHOW_FORM_CLASS);
     }, BLUR_TIMEOUT);
diff --git a/src/components/disclosure-widget/disclosure-widget.twig b/src/components/subscription-choices/subscription-choices.twig
similarity index 67%
rename from src/components/disclosure-widget/disclosure-widget.twig
rename to src/components/subscription-choices/subscription-choices.twig
index 04c909d9f..ba0412bf4 100644
--- a/src/components/disclosure-widget/disclosure-widget.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -1,15 +1,15 @@
 <div
-  class="c-disclosure-widget js-disclosure-widget{% if class %} {{ class }}{% endif %}"
+  class="c-subscription-choices js-subscription-choices{% if class %} {{ class }}{% endif %}"
   {% if form_bg_color %}
     style="--form-bg-color: {{form_bg_color}};"
   {% endif %}
 >
 
-  <div class="c-disclosure-widget__controls">
+  <div class="c-subscription-choices__controls">
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       button_class: '
-        c-disclosure-widget__control
-        js-disclosure-widget__control
+        c-subscription-choices__control
+        js-subscription-choices__control
       ',
       initial_label: 'Notifications have been turned off.',
       initial_visual_label: 'Get notifications',
@@ -20,9 +20,9 @@
     {% include '@cloudfour/components/button/button.twig' with {
       href: "##{ form_id }",
       class: '
-        c-disclosure-widget__control
-        js-disclosure-widget__control
-        js-disclosure-widget__get-weekly-digests-btn
+        c-subscription-choices__control
+        js-subscription-choices__control
+        js-subscription-choices__get-weekly-digests-btn
       ',
       label: button_label|default('Get Weekly Digests'),
       content_start_icon: button_icon|default('envelope')
@@ -30,7 +30,7 @@
   </div>
 
 
-  <form id="{{ form_id }}" class="c-disclosure-widget__form">
+  <form id="{{ form_id }}" class="c-subscription-choices__form">
     <label for="{{form_id}}-subscription-email">Email</label>
     <input id="{{form_id}}-subscription-email" type="text" />
     <button>Submit</button>

From ad210d98d5c60acb05a18b9d61ef91888d0a00de Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 17 Mar 2022 17:20:04 -0700
Subject: [PATCH 13/94] WIP, adding tests

---
 .../subscription-choices.test.ts              | 110 +++++++++++-------
 .../subscription-choices.ts                   |   2 +
 .../subscription-choices.twig                 |  12 +-
 3 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 81e95af71..45363a3ad 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -19,63 +19,83 @@ const initJS = (utils: PleasantestUtils) =>
 
 test(
   'Swap UI state when clicked',
-  withBrowser(async ({ utils, screen, user, page }) => {
-    await utils.injectHTML(await componentMarkup());
+  withBrowser.headed(async ({ utils, screen, user, page }) => {
     await loadGlobalCSS(utils);
-
-    // Before JS initializes
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      status
-        text "Currently unsubscribed from notifications"
-      button "Get notifications"
-    `);
-
-    let firstBtn = await screen.getByRole('button');
-    await expect(firstBtn).toBeVisible();
-    await expect(firstBtn).not.toHaveClass('is-slashed');
-
+    await utils.injectHTML(await componentMarkup());
+    await utils.loadCSS('./subscription-choices.scss');
     await initJS(utils);
 
-    // After JS initializes it should be the same
+    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
-        text "Currently unsubscribed from notifications"
+        text "Notifications have been turned off."
       button "Get notifications"
+      link "Get Weekly Digests"
+        text "Get Weekly Digests"
+      form
+        text "Email"
+        textbox "Email"
+        button "Submit"
     `);
 
-    firstBtn = await screen.queryByRole('button');
-    await expect(firstBtn).toBeVisible();
-    await expect(firstBtn).not.toHaveClass('is-slashed');
-
-    // Button swap action
-    await user.click(firstBtn);
-
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Currently subscribed to notifications"
-      button "Turn off notifications"
-    `);
-
-    const secondBtn = await screen.queryByRole('button', {
-      name: /^turn off notifications$/i,
+    // Confirm the form is visually hidden by default
+    let form = await screen.getByRole('form');
+    let formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+    let formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+    expect(formHeight).toBeLessThanOrEqual(1);
+    expect(formWidth).toBeLessThanOrEqual(1);
+
+    // Tab all the way to the form email input
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Confirm the form is now "active" (not visually hidden)
+    form = await screen.getByRole('form');
+    formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+    formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+    expect(formHeight).toBeGreaterThan(1);
+    expect(formWidth).toBeGreaterThan(1);
+
+    // Confirm the email input is focused
+    const emailInput = await screen.getByRole('textbox', { name: 'Email' });
+    await expect(emailInput).toHaveFocus();
+
+    // Tab again to get to the Submit button, the form should still be visible
+    await page.keyboard.press('Tab');
+
+    // Confirm the form is still "active" (not visually hidden)
+    form = await screen.getByRole('form');
+    formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+    formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+    expect(formHeight).toBeGreaterThan(1);
+    expect(formWidth).toBeGreaterThan(1);
+
+    const getWeeklyDigestsBtn = await screen.getByRole('link', {
+      name: 'Get Weekly Digests',
     });
-    await expect(secondBtn).toBeVisible();
-    await expect(secondBtn).toHaveClass('is-slashed');
-
     // Button swap action
-    await user.click(secondBtn);
+    // await user.click(firstBtn);
 
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Currently unsubscribed from notifications"
-      button "Get notifications"
-    `);
+    // const secondBtn = await screen.queryByRole('button', {
+    //   name: /^turn off notifications$/i,
+    // });
+    // await expect(secondBtn).toBeVisible();
+    // await expect(secondBtn).toHaveClass('is-slashed');
 
-    // Query for first button again in its new state
-    firstBtn = await screen.queryByRole('button');
-    await expect(firstBtn).toBeVisible();
-    await expect(firstBtn).not.toHaveClass('is-slashed');
+    // Button swap action
+    // await user.click(secondBtn);
+
+    // expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+    //   alert (focused)
+    //     text "Currently unsubscribed from notifications"
+    //   button "Get notifications"
+    // `);
+
+    // // Query for first button again in its new state
+    // firstBtn = await screen.queryByRole('button');
+    // await expect(firstBtn).toBeVisible();
+    // await expect(firstBtn).not.toHaveClass('is-slashed');
   })
 );
 
diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index 6f3bca8af..6cac4e6c4 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -29,6 +29,8 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     return;
   }
 
+  console.log('We got it');
+
   // Remove the form anytime a control gets focus
   const onControlFocus = () => {
     clearTimeout(blurTimeoutId);
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index ba0412bf4..7ab0ada89 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -18,7 +18,7 @@
     } only %}
 
     {% include '@cloudfour/components/button/button.twig' with {
-      href: "##{ form_id }",
+      href: "#subscription-choices-#{ form_id }",
       class: '
         c-subscription-choices__control
         js-subscription-choices__control
@@ -30,9 +30,13 @@
   </div>
 
 
-  <form id="{{ form_id }}" class="c-subscription-choices__form">
-    <label for="{{form_id}}-subscription-email">Email</label>
-    <input id="{{form_id}}-subscription-email" type="text" />
+  <form
+    id="subscription-choices-{{ form_id }}"
+    name="subscription-choices-{{ form_id }}-form"
+    class="c-subscription-choices__form"
+  >
+    <label for="subscription-email-{{form_id}}">Email</label>
+    <input id="subscription-email-{{form_id}}" type="text" />
     <button>Submit</button>
   </form>
 

From 888cb8ab9f199e472b6ad1d5efa2f6de5c34b4b4 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 04:01:28 -0700
Subject: [PATCH 14/94] Use page directly for accessibility tree snapshot

---
 .../subscription-choices.test.ts              | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 45363a3ad..e3b550686 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -21,21 +21,21 @@ test(
   'Swap UI state when clicked',
   withBrowser.headed(async ({ utils, screen, user, page }) => {
     await loadGlobalCSS(utils);
-    await utils.injectHTML(await componentMarkup());
     await utils.loadCSS('./subscription-choices.scss');
+    await utils.injectHTML(await componentMarkup());
     await initJS(utils);
 
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      status
-        text "Notifications have been turned off."
-      button "Get notifications"
-      link "Get Weekly Digests"
-        text "Get Weekly Digests"
-      form
-        text "Email"
-        textbox "Email"
-        button "Submit"
+    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+      document
+        status
+          text "Notifications have been turned off."
+        button "Get notifications"
+        link "Get Weekly Digests"
+          text "Get Weekly Digests"
+        form
+          text "Email"
+          textbox "Email"
+          button "Submit"
     `);
 
     // Confirm the form is visually hidden by default

From 7f8d45059d05415af11ec7da82f5d1d1935e4fbf Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 04:46:57 -0700
Subject: [PATCH 15/94] Add describe block, rename test using "should"

---
 .../subscription-choices.test.ts              | 230 +++++++++---------
 1 file changed, 120 insertions(+), 110 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index e3b550686..2a6da76a1 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -17,15 +17,18 @@ const initJS = (utils: PleasantestUtils) =>
     )
   `);
 
-test(
-  'Swap UI state when clicked',
-  withBrowser.headed(async ({ utils, screen, user, page }) => {
-    await loadGlobalCSS(utils);
-    await utils.loadCSS('./subscription-choices.scss');
-    await utils.injectHTML(await componentMarkup());
-    await initJS(utils);
-
-    expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
+describe('Subscription Choices', () => {
+  test(
+    'Should be keyboard accessible',
+    // withBrowser.headed(async ({ utils, screen, user, page }) => {
+    withBrowser(async ({ utils, screen, user, page }) => {
+      await loadGlobalCSS(utils);
+      await utils.loadCSS('./subscription-choices.scss');
+      await utils.injectHTML(await componentMarkup());
+      await initJS(utils);
+
+      // Get baseline accessibility tree snapshot
+      expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
       document
         status
           text "Notifications have been turned off."
@@ -38,123 +41,130 @@ test(
           button "Submit"
     `);
 
-    // Confirm the form is visually hidden by default
-    let form = await screen.getByRole('form');
-    let formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-    let formWidth = await form.evaluate((formEl) => formEl.clientWidth);
-    expect(formHeight).toBeLessThanOrEqual(1);
-    expect(formWidth).toBeLessThanOrEqual(1);
-
-    // Tab all the way to the form email input
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-
-    // Confirm the form is now "active" (not visually hidden)
-    form = await screen.getByRole('form');
-    formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-    formWidth = await form.evaluate((formEl) => formEl.clientWidth);
-    expect(formHeight).toBeGreaterThan(1);
-    expect(formWidth).toBeGreaterThan(1);
-
-    // Confirm the email input is focused
-    const emailInput = await screen.getByRole('textbox', { name: 'Email' });
-    await expect(emailInput).toHaveFocus();
-
-    // Tab again to get to the Submit button, the form should still be visible
-    await page.keyboard.press('Tab');
-
-    // Confirm the form is still "active" (not visually hidden)
-    form = await screen.getByRole('form');
-    formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-    formWidth = await form.evaluate((formEl) => formEl.clientWidth);
-    expect(formHeight).toBeGreaterThan(1);
-    expect(formWidth).toBeGreaterThan(1);
-
-    const getWeeklyDigestsBtn = await screen.getByRole('link', {
-      name: 'Get Weekly Digests',
-    });
-    // Button swap action
-    // await user.click(firstBtn);
-
-    // const secondBtn = await screen.queryByRole('button', {
-    //   name: /^turn off notifications$/i,
-    // });
-    // await expect(secondBtn).toBeVisible();
-    // await expect(secondBtn).toHaveClass('is-slashed');
-
-    // Button swap action
-    // await user.click(secondBtn);
-
-    // expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-    //   alert (focused)
-    //     text "Currently unsubscribed from notifications"
-    //   button "Get notifications"
-    // `);
-
-    // // Query for first button again in its new state
-    // firstBtn = await screen.queryByRole('button');
-    // await expect(firstBtn).toBeVisible();
-    // await expect(firstBtn).not.toHaveClass('is-slashed');
-  })
-);
-
-test.skip(
-  'Set custom messages and labels',
-  withBrowser(async ({ utils, screen, user, page }) => {
-    await utils.injectHTML(
-      await componentMarkup({
-        initial_visual_label: 'Hello world',
-        swapped_visual_label: 'Have a great day',
-        initial_label: 'Unsubscribed',
-        swapped_label: 'Subscribed',
-      })
-    );
-    await loadGlobalCSS(utils);
-    await initJS(utils);
-
-    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      // Confirm the form is visually hidden by default
+      const form = await screen.getByRole('form');
+      let formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+      let formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      expect(formHeight).toBeLessThanOrEqual(1);
+      expect(formWidth).toBeLessThanOrEqual(1);
+
+      // Tab all the way to the form email input
+      await page.keyboard.press('Tab'); // Notifications button
+      await page.keyboard.press('Tab'); // Weekly Digests button
+      await page.keyboard.press('Tab'); // Email input
+
+      // Confirm the form is now "active" (not visually hidden)
+      formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+      formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
+      // Email input should be in focus
+      const emailInput = await screen.getByRole('textbox', { name: 'Email' });
+      await expect(emailInput).toHaveFocus();
+
+      // Tab again to get to the Submit button, the form should still be visible
+      await page.keyboard.press('Tab');
+
+      // Submit button should be in focus
+      const submitButton = await screen.getByRole('button', { name: 'Submit' });
+      await expect(submitButton).toHaveFocus();
+
+      // Confirm the form is still "active" (not visually hidden)
+      formHeight = await form.evaluate((formEl) => formEl.clientHeight);
+      formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
+      await page.keyboard.press('Shift');
+
+      const getWeeklyDigestsBtn = await screen.getByRole('link', {
+        name: 'Get Weekly Digests',
+      });
+      // Button swap action
+      // await user.click(firstBtn);
+
+      // const secondBtn = await screen.queryByRole('button', {
+      //   name: /^turn off notifications$/i,
+      // });
+      // await expect(secondBtn).toBeVisible();
+      // await expect(secondBtn).toHaveClass('is-slashed');
+
+      // Button swap action
+      // await user.click(secondBtn);
+
+      // expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      //   alert (focused)
+      //     text "Currently unsubscribed from notifications"
+      //   button "Get notifications"
+      // `);
+
+      // // Query for first button again in its new state
+      // firstBtn = await screen.queryByRole('button');
+      // await expect(firstBtn).toBeVisible();
+      // await expect(firstBtn).not.toHaveClass('is-slashed');
+    })
+  );
+
+  test.skip(
+    'Set custom messages and labels',
+    withBrowser(async ({ utils, screen, user, page }) => {
+      await utils.injectHTML(
+        await componentMarkup({
+          initial_visual_label: 'Hello world',
+          swapped_visual_label: 'Have a great day',
+          initial_label: 'Unsubscribed',
+          swapped_label: 'Subscribed',
+        })
+      );
+      await loadGlobalCSS(utils);
+      await initJS(utils);
+
+      const body = await page.evaluateHandle<ElementHandle>(
+        () => document.body
+      );
+      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
         text "Unsubscribed"
       button "Hello world"
     `);
 
-    // Button swap action
-    await user.click(await screen.getByRole('button'));
+      // Button swap action
+      await user.click(await screen.getByRole('button'));
 
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       alert (focused)
         text "Subscribed"
       button "Have a great day"
     `);
-  })
-);
+    })
+  );
 
-test.skip(
-  'Callback functions are called',
-  withBrowser(async ({ utils, screen, user }) => {
-    await utils.injectHTML(await componentMarkup());
+  test.skip(
+    'Callback functions are called',
+    withBrowser(async ({ utils, screen, user }) => {
+      await utils.injectHTML(await componentMarkup());
 
-    const mockInitialCallback = jest.fn();
-    const mockSwappedCallback = jest.fn();
+      const mockInitialCallback = jest.fn();
+      const mockSwappedCallback = jest.fn();
 
-    await initJS(utils, mockInitialCallback, mockSwappedCallback);
+      await initJS(utils, mockInitialCallback, mockSwappedCallback);
 
-    const firstBtn = await screen.queryByRole('button', {
-      name: /^get notifications$/i,
-    });
+      const firstBtn = await screen.queryByRole('button', {
+        name: /^get notifications$/i,
+      });
 
-    await user.click(firstBtn);
+      await user.click(firstBtn);
 
-    expect(mockInitialCallback).toBeCalledTimes(1);
+      expect(mockInitialCallback).toBeCalledTimes(1);
 
-    const secondBtn = await screen.queryByRole('button', {
-      name: /^turn off notifications$/i,
-    });
+      const secondBtn = await screen.queryByRole('button', {
+        name: /^turn off notifications$/i,
+      });
 
-    await user.click(secondBtn);
+      await user.click(secondBtn);
 
-    expect(mockSwappedCallback).toBeCalledTimes(1);
-  })
-);
+      expect(mockSwappedCallback).toBeCalledTimes(1);
+    })
+  );
+});

From 64edec046c61bdf0b0153176f7dffbf7dcc9c202 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 05:19:59 -0700
Subject: [PATCH 16/94] Make things better

---
 .../subscription-choices.scss                 |  6 +-
 .../subscription-choices.test.ts              | 55 ++++++++++++-------
 .../subscription-choices.twig                 |  5 +-
 3 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index c10281e98..2fdb0b308 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -1,10 +1,14 @@
 @use '../../compiled/tokens/scss/color';
 @use '../../mixins/a11y';
 
+:root {
+  color-scheme: dark light;
+}
+
 body {
   @media (prefers-color-scheme: dark) {
     // Don't wake up baby
-    background-color: black !important;
+    // background-color: black !important;
   }
 }
 
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 2a6da76a1..be4739ad0 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -19,7 +19,7 @@ const initJS = (utils: PleasantestUtils) =>
 
 describe('Subscription Choices', () => {
   test(
-    'Should be keyboard accessible',
+    'Should use semantic markup',
     // withBrowser.headed(async ({ utils, screen, user, page }) => {
     withBrowser(async ({ utils, screen, user, page }) => {
       await loadGlobalCSS(utils);
@@ -29,17 +29,32 @@ describe('Subscription Choices', () => {
 
       // Get baseline accessibility tree snapshot
       expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
-      document
-        status
-          text "Notifications have been turned off."
-        button "Get notifications"
-        link "Get Weekly Digests"
-          text "Get Weekly Digests"
-        form
-          text "Email"
-          textbox "Email"
-          button "Submit"
-    `);
+        document
+          heading "Never miss an article!"
+            text "Never miss an article!"
+          status
+            text "Notifications have been turned off."
+          button "Get notifications"
+          link "Get Weekly Digests"
+            text "Get Weekly Digests"
+          form "Get Weekly Digests"
+            heading "Get Weekly Digests"
+              text "Get Weekly Digests"
+            text "Email"
+            textbox "Email"
+            button "Submit"
+      `);
+    })
+  );
+
+  test(
+    'Should be keyboard accessible',
+    // withBrowser.headed(async ({ utils, screen, user, page }) => {
+    withBrowser(async ({ utils, screen, user, page }) => {
+      await loadGlobalCSS(utils);
+      await utils.loadCSS('./subscription-choices.scss');
+      await utils.injectHTML(await componentMarkup());
+      await initJS(utils);
 
       // Confirm the form is visually hidden by default
       const form = await screen.getByRole('form');
@@ -124,19 +139,19 @@ describe('Subscription Choices', () => {
         () => document.body
       );
       expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      status
-        text "Unsubscribed"
-      button "Hello world"
-    `);
+              status
+                text "Unsubscribed"
+              button "Hello world"
+          `);
 
       // Button swap action
       await user.click(await screen.getByRole('button'));
 
       expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Subscribed"
-      button "Have a great day"
-    `);
+              alert (focused)
+                text "Subscribed"
+              button "Have a great day"
+          `);
     })
   );
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 7ab0ada89..1a5fa317f 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -6,6 +6,8 @@
 >
 
   <div class="c-subscription-choices__controls">
+    {# @todo Allow for a specific heading tag #}
+    <h2>Never miss an article!</h2>
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       button_class: '
         c-subscription-choices__control
@@ -32,9 +34,10 @@
 
   <form
     id="subscription-choices-{{ form_id }}"
-    name="subscription-choices-{{ form_id }}-form"
     class="c-subscription-choices__form"
+    aria-labelledby="weekly-digests-heading"
   >
+    <h2 id="weekly-digests-heading">Get Weekly Digests</h2>
     <label for="subscription-email-{{form_id}}">Email</label>
     <input id="subscription-email-{{form_id}}" type="text" />
     <button>Submit</button>

From 831c2015b255c4d0edec3f553cf54879581e9d28 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 07:00:27 -0700
Subject: [PATCH 17/94] More work

---
 .../subscription-choices/subscription-choices.test.ts     | 8 ++++----
 .../subscription-choices/subscription-choices.twig        | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index be4739ad0..10fa960b3 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -20,8 +20,7 @@ const initJS = (utils: PleasantestUtils) =>
 describe('Subscription Choices', () => {
   test(
     'Should use semantic markup',
-    // withBrowser.headed(async ({ utils, screen, user, page }) => {
-    withBrowser(async ({ utils, screen, user, page }) => {
+    withBrowser(async ({ utils, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');
       await utils.injectHTML(await componentMarkup());
@@ -49,7 +48,6 @@ describe('Subscription Choices', () => {
 
   test(
     'Should be keyboard accessible',
-    // withBrowser.headed(async ({ utils, screen, user, page }) => {
     withBrowser(async ({ utils, screen, user, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');
@@ -57,7 +55,9 @@ describe('Subscription Choices', () => {
       await initJS(utils);
 
       // Confirm the form is visually hidden by default
-      const form = await screen.getByRole('form');
+      const form = await screen.getByRole('form', {
+        name: 'Get Weekly Digests',
+      });
       let formHeight = await form.evaluate((formEl) => formEl.clientHeight);
       let formWidth = await form.evaluate((formEl) => formEl.clientWidth);
       expect(formHeight).toBeLessThanOrEqual(1);
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 1a5fa317f..3189ce6b4 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -1,3 +1,5 @@
+{% set _heading_tag = heading_tag|default('h2') %}
+
 <div
   class="c-subscription-choices js-subscription-choices{% if class %} {{ class }}{% endif %}"
   {% if form_bg_color %}
@@ -7,7 +9,7 @@
 
   <div class="c-subscription-choices__controls">
     {# @todo Allow for a specific heading tag #}
-    <h2>Never miss an article!</h2>
+   <h2>Never miss an article!</h2>
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       button_class: '
         c-subscription-choices__control

From 12aa61105592f9dd2f1e8b1be7a25fabf0139fea Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 07:23:11 -0700
Subject: [PATCH 18/94] More progress

---
 .../subscription-choices.test.ts              | 123 ++++++++++--------
 .../subscription-choices.twig                 |   8 +-
 2 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 10fa960b3..2c1c882d8 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -121,65 +121,82 @@ describe('Subscription Choices', () => {
     })
   );
 
-  test.skip(
-    'Set custom messages and labels',
+  test(
+    'Should be customizable',
     withBrowser(async ({ utils, screen, user, page }) => {
+      // Confirm default options
+      await utils.injectHTML(await componentMarkup());
+      await screen.getAllByRole('heading', { level: 2 });
+
+      // Should allow customization
       await utils.injectHTML(
         await componentMarkup({
-          initial_visual_label: 'Hello world',
-          swapped_visual_label: 'Have a great day',
-          initial_label: 'Unsubscribed',
-          swapped_label: 'Subscribed',
+          heading_tag: 'h3',
         })
       );
-      await loadGlobalCSS(utils);
-      await initJS(utils);
-
-      const body = await page.evaluateHandle<ElementHandle>(
-        () => document.body
-      );
-      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-              status
-                text "Unsubscribed"
-              button "Hello world"
-          `);
-
-      // Button swap action
-      await user.click(await screen.getByRole('button'));
-
-      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-              alert (focused)
-                text "Subscribed"
-              button "Have a great day"
-          `);
+      await screen.getAllByRole('heading', { level: 3 });
     })
   );
 
-  test.skip(
-    'Callback functions are called',
-    withBrowser(async ({ utils, screen, user }) => {
-      await utils.injectHTML(await componentMarkup());
-
-      const mockInitialCallback = jest.fn();
-      const mockSwappedCallback = jest.fn();
-
-      await initJS(utils, mockInitialCallback, mockSwappedCallback);
-
-      const firstBtn = await screen.queryByRole('button', {
-        name: /^get notifications$/i,
-      });
-
-      await user.click(firstBtn);
-
-      expect(mockInitialCallback).toBeCalledTimes(1);
-
-      const secondBtn = await screen.queryByRole('button', {
-        name: /^turn off notifications$/i,
-      });
-
-      await user.click(secondBtn);
-
-      expect(mockSwappedCallback).toBeCalledTimes(1);
-    })
-  );
+  // test.skip(
+  //   'Set custom messages and labels',
+  //   withBrowser(async ({ utils, screen, user, page }) => {
+  //     await utils.injectHTML(
+  //       await componentMarkup({
+  //         initial_visual_label: 'Hello world',
+  //         swapped_visual_label: 'Have a great day',
+  //         initial_label: 'Unsubscribed',
+  //         swapped_label: 'Subscribed',
+  //       })
+  //     );
+  //     await loadGlobalCSS(utils);
+  //     await initJS(utils);
+
+  //     const body = await page.evaluateHandle<ElementHandle>(
+  //       () => document.body
+  //     );
+  //     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+  //             status
+  //               text "Unsubscribed"
+  //             button "Hello world"
+  //         `);
+
+  //     // Button swap action
+  //     await user.click(await screen.getByRole('button'));
+
+  //     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+  //             alert (focused)
+  //               text "Subscribed"
+  //             button "Have a great day"
+  //         `);
+  //   })
+  // );
+
+  // test.skip(
+  //   'Callback functions are called',
+  //   withBrowser(async ({ utils, screen, user }) => {
+  //     await utils.injectHTML(await componentMarkup());
+
+  //     const mockInitialCallback = jest.fn();
+  //     const mockSwappedCallback = jest.fn();
+
+  //     await initJS(utils, mockInitialCallback, mockSwappedCallback);
+
+  //     const firstBtn = await screen.queryByRole('button', {
+  //       name: /^get notifications$/i,
+  //     });
+
+  //     await user.click(firstBtn);
+
+  //     expect(mockInitialCallback).toBeCalledTimes(1);
+
+  //     const secondBtn = await screen.queryByRole('button', {
+  //       name: /^turn off notifications$/i,
+  //     });
+
+  //     await user.click(secondBtn);
+
+  //     expect(mockSwappedCallback).toBeCalledTimes(1);
+  //   })
+  // );
 });
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 3189ce6b4..ccfdfdc0c 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -9,7 +9,7 @@
 
   <div class="c-subscription-choices__controls">
     {# @todo Allow for a specific heading tag #}
-   <h2>Never miss an article!</h2>
+   <{{_heading_tag}}>Never miss an article!</{{_heading_tag}}>
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       button_class: '
         c-subscription-choices__control
@@ -37,9 +37,11 @@
   <form
     id="subscription-choices-{{ form_id }}"
     class="c-subscription-choices__form"
-    aria-labelledby="weekly-digests-heading"
+    aria-labelledby="get-weekly-digests"
   >
-    <h2 id="weekly-digests-heading">Get Weekly Digests</h2>
+    <{{_heading_tag}} id="get-weekly-digests">
+      Get Weekly Digests
+    </{{_heading_tag}}>
     <label for="subscription-email-{{form_id}}">Email</label>
     <input id="subscription-email-{{form_id}}" type="text" />
     <button>Submit</button>

From ccdd4788cb6284e81f8e627df69939a97439bec7 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 09:43:51 -0700
Subject: [PATCH 19/94] Simplify template a bit

---
 .../subscription-choices.scss                 |  2 +-
 .../subscription-choices.test.ts              | 60 +++++++++++++++++--
 .../subscription-choices.twig                 | 37 ++++++------
 3 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 2fdb0b308..922712395 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -2,7 +2,7 @@
 @use '../../mixins/a11y';
 
 :root {
-  color-scheme: dark light;
+  // color-scheme: dark light;
 }
 
 body {
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 2c1c882d8..8239f2017 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -82,8 +82,8 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab');
 
       // Submit button should be in focus
-      const submitButton = await screen.getByRole('button', { name: 'Submit' });
-      await expect(submitButton).toHaveFocus();
+      const submitBtn = await screen.getByRole('button', { name: 'Submit' });
+      await expect(submitBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)
       formHeight = await form.evaluate((formEl) => formEl.clientHeight);
@@ -124,17 +124,65 @@ describe('Subscription Choices', () => {
   test(
     'Should be customizable',
     withBrowser(async ({ utils, screen, user, page }) => {
-      // Confirm default options
+      // Set up CSS
+      await loadGlobalCSS(utils);
+      await utils.loadCSS('./subscription-choices.scss');
+
+      // No customization
       await utils.injectHTML(await componentMarkup());
-      await screen.getAllByRole('heading', { level: 2 });
 
-      // Should allow customization
+      // 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 background color
+      let form = await screen.getByRole('form');
+      let formBgColor = await form.evaluate(
+        (formEl) => window.getComputedStyle(formEl).backgroundColor
+      );
+      expect(formBgColor).toBe('rgb(255, 255, 255)');
+
+      // Customize the component
       await utils.injectHTML(
         await componentMarkup({
           heading_tag: 'h3',
+          weekly_digests_heading: 'Weekly digests available',
+          never_miss_article_heading: "Don't miss out!",
+          form_bg_color: 'green',
+          notifications_btn_class: 'hello',
+          notifications_btn_initial_visual_label: 'Yes to notifications',
+          get_weekly_digests_btn_class: 'world',
         })
       );
-      await screen.getAllByRole('heading', { level: 3 });
+
+      // Confirm custom headings
+      await screen.getByRole('heading', {
+        name: 'Weekly digests available',
+        level: 3,
+      });
+      await screen.getByRole('heading', {
+        name: "Don't miss out!",
+        level: 3,
+      });
+
+      // Confirm custom form background color
+      form = await screen.getByRole('form');
+      formBgColor = await form.evaluate(
+        (formEl) => window.getComputedStyle(formEl).backgroundColor
+      );
+      expect(formBgColor).toBe('rgb(0, 128, 0)');
+
+      // Confirm custom notifications button
+      const notificationsBtn = await screen.getByRole('button', {
+        name: 'Yes to notifications',
+      });
+      await expect(notificationsBtn).toHaveClass('hello');
     })
   );
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index ccfdfdc0c..51e583449 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -8,26 +8,25 @@
 >
 
   <div class="c-subscription-choices__controls">
-    {# @todo Allow for a specific heading tag #}
-   <{{_heading_tag}}>Never miss an article!</{{_heading_tag}}>
+   <{{_heading_tag}}>
+    {{never_miss_article_heading|default('Never miss an article!')}}
+   </{{_heading_tag}}>
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-      button_class: '
-        c-subscription-choices__control
-        js-subscription-choices__control
-      ',
-      initial_label: 'Notifications have been turned off.',
-      initial_visual_label: 'Get notifications',
-      swapped_label: 'Notifications have been turned on.',
-      swapped_visual_label: 'Turn off notifications'
+      button_class: "c-subscription-choices__control
+js-subscription-choices__control
+#{notifications_btn_class|default('')}",
+      initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
+      initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
+      swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
+      swapped_visual_label: notifications_btn_swapped_visual_label|default('Turn off notifications'),
     } only %}
 
     {% include '@cloudfour/components/button/button.twig' with {
       href: "#subscription-choices-#{ form_id }",
-      class: '
-        c-subscription-choices__control
-        js-subscription-choices__control
-        js-subscription-choices__get-weekly-digests-btn
-      ',
+      class: "c-subscription-choices__control
+js-subscription-choices__control
+js-subscription-choices__get-weekly-digests-btn
+#{get_weekly_digests_btn_class|default('')}",
       label: button_label|default('Get Weekly Digests'),
       content_start_icon: button_icon|default('envelope')
     } only %}
@@ -35,12 +34,12 @@
 
 
   <form
-    id="subscription-choices-{{ form_id }}"
+    id="subscription-choices-{{form_id}}"
     class="c-subscription-choices__form"
-    aria-labelledby="get-weekly-digests"
+    aria-labelledby="get-weekly-digests-{{form_id}}"
   >
-    <{{_heading_tag}} id="get-weekly-digests">
-      Get Weekly Digests
+    <{{_heading_tag}} id="get-weekly-digests-{{form_id}}">
+      {{weekly_digests_heading|default('Get Weekly Digests')}}
     </{{_heading_tag}}>
     <label for="subscription-email-{{form_id}}">Email</label>
     <input id="subscription-email-{{form_id}}" type="text" />

From 9d7f43a90a4a884c96d0b630afe924b43e6ad315 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 10:11:53 -0700
Subject: [PATCH 20/94] More updates

---
 .../subscription-choices.test.ts                  | 15 ++++++++++++++-
 .../subscription-choices.twig                     | 11 +++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 8239f2017..e4c9eefc8 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -157,7 +157,9 @@ describe('Subscription Choices', () => {
           form_bg_color: 'green',
           notifications_btn_class: 'hello',
           notifications_btn_initial_visual_label: 'Yes to notifications',
-          get_weekly_digests_btn_class: 'world',
+          weekly_digests_btn_class: 'world',
+          weekly_digests_btn_label: 'I want weekly digests',
+          weekly_digests_submit_btn_label: 'Sign up',
         })
       );
 
@@ -183,6 +185,17 @@ describe('Subscription Choices', () => {
         name: 'Yes to notifications',
       });
       await expect(notificationsBtn).toHaveClass('hello');
+
+      // Confirm custom weekly digests link
+      const weeklyDigestsLink = await screen.getByRole('link', {
+        name: 'I want weekly digests',
+      });
+      await expect(weeklyDigestsLink).toHaveClass('world');
+
+      // Confirm custom weekly digests submit button
+      await screen.getByRole('button', {
+        name: 'Sign up',
+      });
     })
   );
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 51e583449..d51ffa9ea 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -22,13 +22,13 @@ js-subscription-choices__control
     } only %}
 
     {% include '@cloudfour/components/button/button.twig' with {
-      href: "#subscription-choices-#{ form_id }",
+      href: "#subscription-choices-#{form_id}",
       class: "c-subscription-choices__control
 js-subscription-choices__control
 js-subscription-choices__get-weekly-digests-btn
-#{get_weekly_digests_btn_class|default('')}",
-      label: button_label|default('Get Weekly Digests'),
-      content_start_icon: button_icon|default('envelope')
+#{weekly_digests_btn_class|default('')}",
+      label: weekly_digests_btn_label|default('Get Weekly Digests'),
+      content_start_icon: weekly_digests_btn_icon|default('envelope')
     } only %}
   </div>
 
@@ -43,7 +43,6 @@ js-subscription-choices__get-weekly-digests-btn
     </{{_heading_tag}}>
     <label for="subscription-email-{{form_id}}">Email</label>
     <input id="subscription-email-{{form_id}}" type="text" />
-    <button>Submit</button>
+    <button>{{weekly_digests_submit_btn_label|default('Submit')}}</button>
   </form>
-
 </div>

From af6a7ced93ab7954f71ec35225d6213c7d88f2b8 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Fri, 18 Mar 2022 14:58:22 -0700
Subject: [PATCH 21/94] Progress

---
 .../subscription-choices.test.ts              | 62 +++++++++++++++----
 .../subscription-choices.ts                   |  4 --
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index e4c9eefc8..9cb0d919e 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import type { ElementHandle, PleasantestUtils } from 'pleasantest';
+import type { PleasantestUtils } from 'pleasantest';
 import { withBrowser, getAccessibilityTree } from 'pleasantest';
 import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
 
@@ -51,26 +51,30 @@ describe('Subscription Choices', () => {
     withBrowser(async ({ utils, screen, user, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');
-      await utils.injectHTML(await componentMarkup());
+      await utils.injectHTML(await componentMarkup({ form_id: 'test' }));
       await initJS(utils);
 
       // Confirm the form is visually hidden by default
       const form = await screen.getByRole('form', {
         name: 'Get Weekly Digests',
       });
-      let formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-      let formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      let { formHeight, formWidth } = await form.evaluate((formEl) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      }));
       expect(formHeight).toBeLessThanOrEqual(1);
       expect(formWidth).toBeLessThanOrEqual(1);
 
       // Tab all the way to the form email input
       await page.keyboard.press('Tab'); // Notifications button
-      await page.keyboard.press('Tab'); // Weekly Digests button
+      await page.keyboard.press('Tab'); // Weekly Digests link
       await page.keyboard.press('Tab'); // Email input
 
       // Confirm the form is now "active" (not visually hidden)
-      formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-      formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      })));
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
@@ -78,7 +82,7 @@ describe('Subscription Choices', () => {
       const emailInput = await screen.getByRole('textbox', { name: 'Email' });
       await expect(emailInput).toHaveFocus();
 
-      // Tab again to get to the Submit button, the form should still be visible
+      // Tab again to get to the Submit button
       await page.keyboard.press('Tab');
 
       // Submit button should be in focus
@@ -86,16 +90,46 @@ describe('Subscription Choices', () => {
       await expect(submitBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)
-      formHeight = await form.evaluate((formEl) => formEl.clientHeight);
-      formWidth = await form.evaluate((formEl) => formEl.clientWidth);
+      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      })));
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
-      await page.keyboard.press('Shift');
+      // Navigate back up to the Weekly Digests link
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab'); // Email input
+      await page.keyboard.down('Shift');
+      await page.keyboard.press('Tab'); // Weekly Digests link
 
-      const getWeeklyDigestsBtn = await screen.getByRole('link', {
+      // Confirm the focus has moved to the Weekly Digests link
+      const weeklyDigestsBtn = await screen.getByRole('link', {
         name: 'Get Weekly Digests',
       });
+      await expect(weeklyDigestsBtn).toHaveFocus();
+
+      // The form should now be visually hidden again
+      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      })));
+      expect(formHeight).toBeLessThanOrEqual(1);
+      expect(formWidth).toBeLessThanOrEqual(1);
+
+      // Navigate forward past the Submit to activate the form hide timeout
+      await page.keyboard.press('Tab'); // Email input
+      await page.keyboard.press('Tab'); // Submit button
+      await page.keyboard.press('Tab'); // Out of the form
+
+      // Confirm the form is still "active" (not visually hidden)
+      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      })));
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
       // Button swap action
       // await user.click(firstBtn);
 
@@ -129,7 +163,7 @@ describe('Subscription Choices', () => {
       await utils.loadCSS('./subscription-choices.scss');
 
       // No customization
-      await utils.injectHTML(await componentMarkup());
+      await utils.injectHTML(await componentMarkup({ form_id: 'test' }));
 
       // Confirm default heading tag
       await screen.getByRole('heading', {
@@ -151,6 +185,7 @@ describe('Subscription Choices', () => {
       // Customize the component
       await utils.injectHTML(
         await componentMarkup({
+          form_id: 'test',
           heading_tag: 'h3',
           weekly_digests_heading: 'Weekly digests available',
           never_miss_article_heading: "Don't miss out!",
@@ -178,6 +213,7 @@ describe('Subscription Choices', () => {
       formBgColor = await form.evaluate(
         (formEl) => window.getComputedStyle(formEl).backgroundColor
       );
+      // `backgroundColor` returns an RGB value
       expect(formBgColor).toBe('rgb(0, 128, 0)');
 
       // Confirm custom notifications button
diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index 6cac4e6c4..ce929c7b0 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -6,8 +6,6 @@
  * message is displayed at a time.
  */
 export const initSubscriptionChoices = (containerEl: HTMLElement) => {
-  console.log('INIT initSubscriptionChoices');
-
   const SHOW_FORM_CLASS = 'activate-form';
   const BLUR_TIMEOUT = 1000; // Milliseconds
 
@@ -29,8 +27,6 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     return;
   }
 
-  console.log('We got it');
-
   // Remove the form anytime a control gets focus
   const onControlFocus = () => {
     clearTimeout(blurTimeoutId);

From 84850e58d5efab160e6ba8b984f370879c9c5911 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Sun, 20 Mar 2022 01:52:27 -0700
Subject: [PATCH 22/94] Fine-tune test

---
 .../subscription-choices/demo/demo.twig       |  5 ++
 .../subscription-choices.test.ts              | 60 +++++++++----------
 2 files changed, 35 insertions(+), 30 deletions(-)
 create mode 100644 src/components/subscription-choices/demo/demo.twig

diff --git a/src/components/subscription-choices/demo/demo.twig b/src/components/subscription-choices/demo/demo.twig
new file mode 100644
index 000000000..3d91036c3
--- /dev/null
+++ b/src/components/subscription-choices/demo/demo.twig
@@ -0,0 +1,5 @@
+{% embed '@cloudfour/components/subscription-choices/subscription-choices.twig' with {
+  form_id: 'test'
+} only %}{% endembed %}
+
+<p>This is only for demo purposes. <a href="#">I am a link</a></p>
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 9cb0d919e..54dfaa8c0 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -7,6 +7,7 @@ import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
 const componentMarkup = loadTwigTemplate(
   path.join(__dirname, './subscription-choices.twig')
 );
+const demoMarkup = loadTwigTemplate(path.join(__dirname, './demo/demo.twig'));
 
 // Helper to initialize the component JS
 const initJS = (utils: PleasantestUtils) =>
@@ -19,7 +20,7 @@ const initJS = (utils: PleasantestUtils) =>
 
 describe('Subscription Choices', () => {
   test(
-    'Should use semantic markup',
+    'should use semantic markup',
     withBrowser(async ({ utils, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');
@@ -47,11 +48,11 @@ describe('Subscription Choices', () => {
   );
 
   test(
-    'Should be keyboard accessible',
-    withBrowser(async ({ utils, screen, user, page }) => {
+    'should be keyboard accessible',
+    withBrowser(async ({ utils, screen, waitFor, page }) => {
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');
-      await utils.injectHTML(await componentMarkup({ form_id: 'test' }));
+      await utils.injectHTML(await demoMarkup());
       await initJS(utils);
 
       // Confirm the form is visually hidden by default
@@ -98,10 +99,10 @@ describe('Subscription Choices', () => {
       expect(formWidth).toBeGreaterThan(1);
 
       // Navigate back up to the Weekly Digests link
-      await page.keyboard.down('Shift');
+      await page.keyboard.down('Shift'); // Navigate backwards
       await page.keyboard.press('Tab'); // Email input
-      await page.keyboard.down('Shift');
       await page.keyboard.press('Tab'); // Weekly Digests link
+      await page.keyboard.up('Shift'); // Release Shift key
 
       // Confirm the focus has moved to the Weekly Digests link
       const weeklyDigestsBtn = await screen.getByRole('link', {
@@ -119,8 +120,14 @@ describe('Subscription Choices', () => {
 
       // Navigate forward past the Submit to activate the form hide timeout
       await page.keyboard.press('Tab'); // Email input
+      await page.evaluate(() => {
+        console.log('active 5', document.activeElement);
+      });
       await page.keyboard.press('Tab'); // Submit button
       await page.keyboard.press('Tab'); // Out of the form
+      await page.evaluate(() => {
+        console.log('active 5', document.activeElement);
+      });
 
       // Confirm the form is still "active" (not visually hidden)
       ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
@@ -130,34 +137,27 @@ describe('Subscription Choices', () => {
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
-      // Button swap action
-      // await user.click(firstBtn);
-
-      // const secondBtn = await screen.queryByRole('button', {
-      //   name: /^turn off notifications$/i,
-      // });
-      // await expect(secondBtn).toBeVisible();
-      // await expect(secondBtn).toHaveClass('is-slashed');
-
-      // Button swap action
-      // await user.click(secondBtn);
-
-      // expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      //   alert (focused)
-      //     text "Currently unsubscribed from notifications"
-      //   button "Get notifications"
-      // `);
-
-      // // Query for first button again in its new state
-      // firstBtn = await screen.queryByRole('button');
-      // await expect(firstBtn).toBeVisible();
-      // await expect(firstBtn).not.toHaveClass('is-slashed');
+      // After a timeout, the form eventually visually hides
+      await waitFor(
+        async () => {
+          ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
+            formHeight: formEl.clientHeight,
+            formWidth: formEl.clientWidth,
+          })));
+          expect(formHeight).toBeLessThanOrEqual(1);
+          expect(formWidth).toBeLessThanOrEqual(1);
+        },
+        {
+          timeout: 2000,
+          interval: 1000,
+        }
+      );
     })
   );
 
   test(
-    'Should be customizable',
-    withBrowser(async ({ utils, screen, user, page }) => {
+    'should be customizable',
+    withBrowser(async ({ utils, screen }) => {
       // Set up CSS
       await loadGlobalCSS(utils);
       await utils.loadCSS('./subscription-choices.scss');

From 0da57a0274199e4a2e34fc28f371424833cf657e Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Sun, 20 Mar 2022 01:55:35 -0700
Subject: [PATCH 23/94] Fix broken code

---
 .../subscription-choices.test.ts              | 62 -------------------
 1 file changed, 62 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 54dfaa8c0..a308e237c 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -234,66 +234,4 @@ describe('Subscription Choices', () => {
       });
     })
   );
-
-  // test.skip(
-  //   'Set custom messages and labels',
-  //   withBrowser(async ({ utils, screen, user, page }) => {
-  //     await utils.injectHTML(
-  //       await componentMarkup({
-  //         initial_visual_label: 'Hello world',
-  //         swapped_visual_label: 'Have a great day',
-  //         initial_label: 'Unsubscribed',
-  //         swapped_label: 'Subscribed',
-  //       })
-  //     );
-  //     await loadGlobalCSS(utils);
-  //     await initJS(utils);
-
-  //     const body = await page.evaluateHandle<ElementHandle>(
-  //       () => document.body
-  //     );
-  //     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-  //             status
-  //               text "Unsubscribed"
-  //             button "Hello world"
-  //         `);
-
-  //     // Button swap action
-  //     await user.click(await screen.getByRole('button'));
-
-  //     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-  //             alert (focused)
-  //               text "Subscribed"
-  //             button "Have a great day"
-  //         `);
-  //   })
-  // );
-
-  // test.skip(
-  //   'Callback functions are called',
-  //   withBrowser(async ({ utils, screen, user }) => {
-  //     await utils.injectHTML(await componentMarkup());
-
-  //     const mockInitialCallback = jest.fn();
-  //     const mockSwappedCallback = jest.fn();
-
-  //     await initJS(utils, mockInitialCallback, mockSwappedCallback);
-
-  //     const firstBtn = await screen.queryByRole('button', {
-  //       name: /^get notifications$/i,
-  //     });
-
-  //     await user.click(firstBtn);
-
-  //     expect(mockInitialCallback).toBeCalledTimes(1);
-
-  //     const secondBtn = await screen.queryByRole('button', {
-  //       name: /^turn off notifications$/i,
-  //     });
-
-  //     await user.click(secondBtn);
-
-  //     expect(mockSwappedCallback).toBeCalledTimes(1);
-  //   })
-  // );
 });

From 8fa62b32f6220f914e5a060bf759651ae5d657f2 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:20:18 -0700
Subject: [PATCH 24/94] Adjust layout

---
 .../subscription-choices.scss                 | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 922712395..8ae6c738b 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -1,21 +1,20 @@
+@use '../../compiled/tokens/scss/breakpoint';
 @use '../../compiled/tokens/scss/color';
+@use '../../compiled/tokens/scss/size';
 @use '../../mixins/a11y';
 
-:root {
-  // color-scheme: dark light;
-}
-
-body {
-  @media (prefers-color-scheme: dark) {
-    // Don't wake up baby
-    // background-color: black !important;
-  }
+.c-subscription-choices {
+  position: relative;
 }
 
-.c-subscription-choices {
+.c-subscription-choices__controls-wrapper {
   display: grid;
-  gap: 1rem;
-  position: relative;
+  gap: 1em;
+  margin: size.$rhythm-default 0;
+
+  @media (min-width: breakpoint.$s) {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .c-subscription-choices__control {
@@ -30,8 +29,19 @@ body {
   top: 0;
   width: 100%;
 
+  label,
   .c-subscription-choices:not(.activate-form)
     &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }
 }
+
+.c-subscription-choices__input-group {
+  display: grid;
+  gap: 1em;
+  margin: size.$rhythm-default 0;
+
+  @media (min-width: breakpoint.$s) {
+    grid-template-columns: 1fr 1fr;
+  }
+}

From 752c6fcafc4a42d9d3d9acf623c52e15253d6842 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:20:54 -0700
Subject: [PATCH 25/94] Update tests

---
 .../subscription-choices/subscription-choices.test.ts         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index a308e237c..32712e4c1 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -42,7 +42,7 @@ describe('Subscription Choices', () => {
               text "Get Weekly Digests"
             text "Email"
             textbox "Email"
-            button "Submit"
+            button "Subscribe"
       `);
     })
   );
@@ -87,7 +87,7 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab');
 
       // Submit button should be in focus
-      const submitBtn = await screen.getByRole('button', { name: 'Submit' });
+      const submitBtn = await screen.getByRole('button', { name: 'Subscribe' });
       await expect(submitBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)

From 24a999277b516c49c44b269f7085288614683420 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:21:37 -0700
Subject: [PATCH 26/94] Fix tab indentation

---
 .../subscription-choices/subscription-choices.twig          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index d51ffa9ea..2edc427c4 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -8,9 +8,9 @@
 >
 
   <div class="c-subscription-choices__controls">
-   <{{_heading_tag}}>
-    {{never_miss_article_heading|default('Never miss an article!')}}
-   </{{_heading_tag}}>
+    <{{_heading_tag}}>
+      {{never_miss_article_heading|default('Never miss an article!')}}
+    </{{_heading_tag}}>
     {% include '@cloudfour/components/button-swap/button-swap.twig' with {
       button_class: "c-subscription-choices__control
 js-subscription-choices__control

From 10fddc37e73d1ff94e0812a49952198caddadf38 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:25:06 -0700
Subject: [PATCH 27/94] Delete logs

---
 .../subscription-choices/subscription-choices.test.ts       | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 32712e4c1..79e8aa905 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -120,14 +120,8 @@ describe('Subscription Choices', () => {
 
       // Navigate forward past the Submit to activate the form hide timeout
       await page.keyboard.press('Tab'); // Email input
-      await page.evaluate(() => {
-        console.log('active 5', document.activeElement);
-      });
       await page.keyboard.press('Tab'); // Submit button
       await page.keyboard.press('Tab'); // Out of the form
-      await page.evaluate(() => {
-        console.log('active 5', document.activeElement);
-      });
 
       // Confirm the form is still "active" (not visually hidden)
       ({ formHeight, formWidth } = await form.evaluate((formEl) => ({

From bcd22cfabfcd1431274755ec5d08233cf44b9c54 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:25:16 -0700
Subject: [PATCH 28/94] Fix layout

---
 .../subscription-choices.twig                 | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 2edc427c4..7f0125fd8 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -11,25 +11,28 @@
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}
     </{{_heading_tag}}>
-    {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-      button_class: "c-subscription-choices__control
+
+    <div class="c-subscription-choices__controls-wrapper">
+      {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+        button_class: "c-subscription-choices__control
 js-subscription-choices__control
 #{notifications_btn_class|default('')}",
-      initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
-      initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
-      swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
-      swapped_visual_label: notifications_btn_swapped_visual_label|default('Turn off notifications'),
-    } only %}
+        initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
+        initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
+        swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
+        swapped_visual_label: notifications_btn_swapped_visual_label|default('Turn off notifications'),
+      } only %}
 
-    {% include '@cloudfour/components/button/button.twig' with {
-      href: "#subscription-choices-#{form_id}",
-      class: "c-subscription-choices__control
+      {% include '@cloudfour/components/button/button.twig' with {
+        href: "#subscription-choices-#{form_id}",
+        class: "c-subscription-choices__control
 js-subscription-choices__control
 js-subscription-choices__get-weekly-digests-btn
 #{weekly_digests_btn_class|default('')}",
-      label: weekly_digests_btn_label|default('Get Weekly Digests'),
-      content_start_icon: weekly_digests_btn_icon|default('envelope')
-    } only %}
+        label: weekly_digests_btn_label|default('Get Weekly Digests'),
+        content_start_icon: weekly_digests_btn_icon|default('envelope')
+      } only %}
+    </div>
   </div>
 
 
@@ -41,8 +44,20 @@ js-subscription-choices__get-weekly-digests-btn
     <{{_heading_tag}} id="get-weekly-digests-{{form_id}}">
       {{weekly_digests_heading|default('Get Weekly Digests')}}
     </{{_heading_tag}}>
-    <label for="subscription-email-{{form_id}}">Email</label>
-    <input id="subscription-email-{{form_id}}" type="text" />
-    <button>{{weekly_digests_submit_btn_label|default('Submit')}}</button>
+
+    <div class="c-subscription-choices__input-group">
+      <label for="subscription-email-{{form_id}}">
+        {{weekly_digests_email_input_label|default('Email')}}
+      </label>
+      <input
+        id="subscription-email-{{form_id}}"
+        class="c-input"
+        type="text"
+        placeholder="{{weekly_digests_submit_btn_placeholder|default('Your Email Address')}}"
+      />
+      <button class="c-button">
+        {{weekly_digests_submit_btn_label|default('Subscribe')}}
+      </button>
+    </div>
   </form>
 </div>

From e4f2f7d66ec33b8fb0219fc8af516cbb06d7fed3 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 04:28:54 -0700
Subject: [PATCH 29/94] Fix broken UI logic (thank you tests!)

---
 .../subscription-choices/subscription-choices.ts   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index ce929c7b0..d3be6185e 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -17,7 +17,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     '.js-subscription-choices__get-weekly-digests-btn'
   );
   const formEl = containerEl.querySelector('form');
-  const formChildEls = containerEl.querySelectorAll('form > *');
+  const formFocusableEls = containerEl.querySelectorAll('label, input, button');
   const controlEls = containerEl.querySelectorAll(
     '.js-subscription-choices__control'
   );
@@ -58,9 +58,9 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   // Clean up event listeners
   const destroy = () => {
     getWeeklyDigestsBtn.removeEventListener('click', onGetWeeklyDigestsClick);
-    for (const formChildEl of formChildEls) {
-      formChildEl.removeEventListener('blur', onFormBlur);
-      formChildEl.removeEventListener('focus', onFormFocus);
+    for (const formFocusableEl of formFocusableEls) {
+      formFocusableEl.removeEventListener('blur', onFormBlur);
+      formFocusableEl.removeEventListener('focus', onFormFocus);
     }
     for (const controlEl of controlEls) {
       controlEl.removeEventListener('focus', onControlFocus);
@@ -70,9 +70,9 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   // Set up all event listeners
   const init = () => {
     getWeeklyDigestsBtn.addEventListener('click', onGetWeeklyDigestsClick);
-    for (const formChildEl of formChildEls) {
-      formChildEl.addEventListener('blur', onFormBlur);
-      formChildEl.addEventListener('focus', onFormFocus);
+    for (const formFocusableEl of formFocusableEls) {
+      formFocusableEl.addEventListener('blur', onFormBlur);
+      formFocusableEl.addEventListener('focus', onFormFocus);
     }
     for (const controlEl of controlEls) {
       controlEl.addEventListener('focus', onControlFocus);

From a2c38e4ce9bdd82f28a6c7c18b83b9426b244ade Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:02:56 -0700
Subject: [PATCH 30/94] Make layout better

---
 .../subscription-choices/subscription-choices.scss           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 8ae6c738b..85de6735e 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -37,11 +37,12 @@
 }
 
 .c-subscription-choices__input-group {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 1em;
   margin: size.$rhythm-default 0;
 
   @media (min-width: breakpoint.$s) {
-    grid-template-columns: 1fr 1fr;
+    flex-direction: row;
   }
 }

From 1ab9aa68871d139f32bd8853fb0ad39df962049c Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:03:12 -0700
Subject: [PATCH 31/94] Add missing attributes

---
 .../subscription-choices/subscription-choices.twig           | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 7f0125fd8..f2135ab39 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -38,6 +38,9 @@ js-subscription-choices__get-weekly-digests-btn
 
   <form
     id="subscription-choices-{{form_id}}"
+    action="{{form_action|default('https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67')}}"
+    method="post"
+    target="_blank"
     class="c-subscription-choices__form"
     aria-labelledby="get-weekly-digests-{{form_id}}"
   >
@@ -54,6 +57,8 @@ js-subscription-choices__get-weekly-digests-btn
         class="c-input"
         type="text"
         placeholder="{{weekly_digests_submit_btn_placeholder|default('Your Email Address')}}"
+        autocomplete="home email",
+        required
       />
       <button class="c-button">
         {{weekly_digests_submit_btn_label|default('Subscribe')}}

From 5b510a6b0fc892307b91c314309e055956fbff65 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:06:13 -0700
Subject: [PATCH 32/94] Remove unused code

---
 src/components/button/button.twig | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/button/button.twig b/src/components/button/button.twig
index dc8331b96..920c7aaef 100644
--- a/src/components/button/button.twig
+++ b/src/components/button/button.twig
@@ -18,9 +18,6 @@
   {% if aria_expanded %}
     aria-expanded="{{ aria_expanded }}"
   {% endif %}
-  {% if aria_controls %}
-    aria-controls="{{ aria_controls }}"
-  {% endif %}
   {% if tag_name == 'a' %}
     href="{{ href|default('#') }}"
   {% elseif tag_name == 'button' %}

From ca4d80ae27194cc5b09d3586855cfd3c338833a3 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:17:38 -0700
Subject: [PATCH 33/94] Update comments

---
 src/components/subscription-choices/subscription-choices.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index d3be6185e..614c7fe8a 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -27,7 +27,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     return;
   }
 
-  // Remove the form anytime a control gets focus
+  // Hide the form anytime a `js-subscription-choices__control` gets focus
   const onControlFocus = () => {
     clearTimeout(blurTimeoutId);
     containerEl.classList.remove(SHOW_FORM_CLASS);
@@ -52,6 +52,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   const onGetWeeklyDigestsClick = (event: Event) => {
     event.preventDefault();
     containerEl.classList.add(SHOW_FORM_CLASS);
+    // Jump the focus to the first input element
     formEl.querySelector('input')?.focus();
   };
 

From 80ef17e52dfa6122441c7b2ca2df490f317032da Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:39:31 -0700
Subject: [PATCH 34/94] Fix typo and update tests

---
 .../subscription-choices.test.ts              | 32 ++++++++++++++-----
 .../subscription-choices.twig                 |  2 +-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 79e8aa905..1587d05cd 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -169,17 +169,26 @@ describe('Subscription Choices', () => {
         level: 2,
       });
 
-      // Confirm default background color
+      // Confirm default form values
       let form = await screen.getByRole('form');
-      let formBgColor = await form.evaluate(
-        (formEl) => window.getComputedStyle(formEl).backgroundColor
-      );
+      let { formBgColor, formAction, emailInputPlaceHolder } =
+        await form.evaluate((formEl) => ({
+          formBgColor: window.getComputedStyle(formEl).backgroundColor,
+          formAction: formEl.getAttribute('action'),
+          emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
+        }));
+      // `backgroundColor` returns an RGB value
       expect(formBgColor).toBe('rgb(255, 255, 255)');
+      expect(formAction).toBe(
+        'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67'
+      );
+      expect(emailInputPlaceHolder).toBe('Your Email Address');
 
       // Customize the component
       await utils.injectHTML(
         await componentMarkup({
           form_id: 'test',
+          form_action: 'test-action.com',
           heading_tag: 'h3',
           weekly_digests_heading: 'Weekly digests available',
           never_miss_article_heading: "Don't miss out!",
@@ -188,6 +197,7 @@ describe('Subscription Choices', () => {
           notifications_btn_initial_visual_label: 'Yes to notifications',
           weekly_digests_btn_class: 'world',
           weekly_digests_btn_label: 'I want weekly digests',
+          weekly_digests_email_input_placeholder: 'Gimme email',
           weekly_digests_submit_btn_label: 'Sign up',
         })
       );
@@ -202,13 +212,19 @@ describe('Subscription Choices', () => {
         level: 3,
       });
 
-      // Confirm custom form background color
+      // Confirm custom form values
       form = await screen.getByRole('form');
-      formBgColor = await form.evaluate(
-        (formEl) => window.getComputedStyle(formEl).backgroundColor
-      );
+      ({ formBgColor, formAction, emailInputPlaceHolder } = await form.evaluate(
+        (formEl) => ({
+          formBgColor: window.getComputedStyle(formEl).backgroundColor,
+          formAction: formEl.getAttribute('action'),
+          emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
+        })
+      ));
       // `backgroundColor` returns an RGB value
       expect(formBgColor).toBe('rgb(0, 128, 0)');
+      expect(formAction).toBe('test-action.com');
+      expect(emailInputPlaceHolder).toBe('Gimme email');
 
       // Confirm custom notifications button
       const notificationsBtn = await screen.getByRole('button', {
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index f2135ab39..4f890584c 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -56,7 +56,7 @@ js-subscription-choices__get-weekly-digests-btn
         id="subscription-email-{{form_id}}"
         class="c-input"
         type="text"
-        placeholder="{{weekly_digests_submit_btn_placeholder|default('Your Email Address')}}"
+        placeholder="{{weekly_digests_email_input_placeholder|default('Your Email Address')}}"
         autocomplete="home email",
         required
       />

From 4b02c697bc2ce636de9ce9d661a6077da5a194ad Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 05:41:16 -0700
Subject: [PATCH 35/94] Add comment

---
 src/components/subscription-choices/subscription-choices.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 1587d05cd..c69dd83bd 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -7,6 +7,7 @@ import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
 const componentMarkup = loadTwigTemplate(
   path.join(__dirname, './subscription-choices.twig')
 );
+// Helper to load the demo Twig template file
 const demoMarkup = loadTwigTemplate(path.join(__dirname, './demo/demo.twig'));
 
 // Helper to initialize the component JS

From 75b4d4bbdd030a92d13e5150ff63fe017e319726 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 07:24:20 -0700
Subject: [PATCH 36/94] Slight refactor

---
 .../subscription-choices.test.ts              | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index c69dd83bd..e6cf1e011 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -28,7 +28,6 @@ describe('Subscription Choices', () => {
       await utils.injectHTML(await componentMarkup());
       await initJS(utils);
 
-      // Get baseline accessibility tree snapshot
       expect(await getAccessibilityTree(page)).toMatchInlineSnapshot(`
         document
           heading "Never miss an article!"
@@ -56,14 +55,18 @@ describe('Subscription Choices', () => {
       await utils.injectHTML(await demoMarkup());
       await initJS(utils);
 
+      // Helper function used throughout this test
+      // eslint-disable-next-line @cloudfour/unicorn/consistent-function-scoping
+      const getFormDimensions = (formEl: HTMLElement) => ({
+        formHeight: formEl.clientHeight,
+        formWidth: formEl.clientWidth,
+      });
+
       // Confirm the form is visually hidden by default
       const form = await screen.getByRole('form', {
         name: 'Get Weekly Digests',
       });
-      let { formHeight, formWidth } = await form.evaluate((formEl) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      }));
+      let { formHeight, formWidth } = await form.evaluate(getFormDimensions);
       expect(formHeight).toBeLessThanOrEqual(1);
       expect(formWidth).toBeLessThanOrEqual(1);
 
@@ -73,10 +76,7 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab'); // Email input
 
       // Confirm the form is now "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      })));
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
@@ -112,10 +112,7 @@ describe('Subscription Choices', () => {
       await expect(weeklyDigestsBtn).toHaveFocus();
 
       // The form should now be visually hidden again
-      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      })));
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
       expect(formHeight).toBeLessThanOrEqual(1);
       expect(formWidth).toBeLessThanOrEqual(1);
 
@@ -125,20 +122,14 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab'); // Out of the form
 
       // Confirm the form is still "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      })));
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
       // After a timeout, the form eventually visually hides
       await waitFor(
         async () => {
-          ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
-            formHeight: formEl.clientHeight,
-            formWidth: formEl.clientWidth,
-          })));
+          ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
           expect(formHeight).toBeLessThanOrEqual(1);
           expect(formWidth).toBeLessThanOrEqual(1);
         },

From 118f2a6cadb17277dd9cd1846beed759ad996334 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 07:59:46 -0700
Subject: [PATCH 37/94] Add comment

---
 .../subscription-choices/subscription-choices.test.ts        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index e6cf1e011..21f3ec92d 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -56,6 +56,11 @@ describe('Subscription Choices', () => {
       await initJS(utils);
 
       // Helper function used throughout this test
+      //
+      // I eslint-disabled because it was wanted me to pull this function
+      // outside of the scope of this test, but, I feel collocating the function
+      // within the only test that uses the function makes more sense.
+      //
       // eslint-disable-next-line @cloudfour/unicorn/consistent-function-scoping
       const getFormDimensions = (formEl: HTMLElement) => ({
         formHeight: formEl.clientHeight,

From e0883d43c45cc99e36ad391ee83b6aaf6142725e Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 16:20:50 -0700
Subject: [PATCH 38/94] Add content to Storybook story

---
 .../subscription-choices.stories.mdx          | 161 +++++++++++++++---
 1 file changed, 142 insertions(+), 19 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 5319b4357..f8bcb0509 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -4,7 +4,6 @@ import template from './subscription-choices.twig';
 import { initSubscriptionChoices } from './subscription-choices.ts';
 // Helper function to initialize toggling button JS
 const templateStory = (args) => {
-  console.log('templateStory');
   useEffect(() => {
     const templateEls = [
       ...document.querySelectorAll('.js-subscription-choices'),
@@ -16,13 +15,56 @@ const templateStory = (args) => {
   return template(args);
 };
 
-<Meta title="Components/Subscription Choices" />
+<Meta
+  title="Components/Subscription Choices"
+  argTypes={{
+    form_id: {
+      type: { name: 'string', required: true },
+      description: 'The ID used for the email subscription form',
+    },
+    class: {
+      type: 'string',
+      description: 'CSS class(es) to add to the root element',
+    },
+    heading_tag: {
+      type: 'string',
+      defaultValue: 'h2',
+      description: 'The heading value for the headings',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: 'select',
+    },
+    never_miss_article_heading: {
+      type: 'string',
+      defaultValue: 'Never miss an article!',
+    },
+    form_bg_color: {
+      defaultValue: '#fff',
+      description:
+        'The background color of the form; allows the component to work in different contexts.',
+      control: 'color',
+    },
+    weekly_digests_btn_label: {
+      type: 'string',
+      defaultValue: 'Get Weekly Digests',
+    },
+    weekly_digests_heading: {
+      type: 'string',
+      defaultValue: 'Get Weekly Digests',
+    },
+    weekly_digests_email_input_placeholder: {
+      type: 'string',
+      defaultValue: 'Your Email Address',
+    },
+    weekly_digests_submit_btn_label: {
+      type: 'string',
+      defaultValue: 'Subscribe',
+    },
+  }}
+/>
 
 # Subscription Choices
 
-@TODO Update this!
-
-Displays a Subscription Choices, or set of Subscription Choicess, with optional meta content.
+The Subscription Choices component provides the UI to subscribe to notifications and/or email weekly digests.
 
 <Canvas>
   <Story
@@ -38,24 +80,105 @@ Displays a Subscription Choices, or set of Subscription Choicess, with optional
 
 ## Template Properties
 
-`class` (string): CSS class(es) to append to the root element
+### Required
+
+| property  | type   | default | description                                                          |
+| --------- | ------ | ------- | -------------------------------------------------------------------- |
+| `form_id` | string | `''`    | Appends this value to the weekly digest form `id`, should be unique. |
+
+### Optional
+
+| property                                 | type   | default                                 | description                                                                                                                   |
+| ---------------------------------------- | ------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root element.                                                                                  |
+| `form_bg_color`                          | string | `#ffffff`                               | Sets the background color of the subscription form. The `--form-bg-color` CSS custom property can alternatively be used also. |
+| `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                                          |
+| `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                                 |
+| `never_miss_article_heading`             | string | `'Never miss an article!'`              | The default heading                                                                                                           |
+| `notifications_btn_class`                | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                                     |
+| `notifications_btn_initial_label`        | string | `'Notifications have been turned off.'` | See [Button Swap `initial_label`](?path=/docs/components-button-swap--default-story#template-properties)                      |
+| `notifications_btn_initial_visual_label` | string | `'Get notifications'`                   | See [Button Swap `initial_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
+| `notifications_btn_swapped_label`        | string | `'Notifications have been turned on.'`  | See [Button Swap `swapped_label`](?path=/docs/components-button-swap--default-story#template-properties)                      |
+| `notifications_btn_swapped_visual_label` | string | `'Turn off notifications'`              | See [Button Swap `swapped_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
+| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                                     |
+| `weekly_digests_btn_label`               | string | `'Get Weekly Digests'`                  | The "Weekly Digests" button label                                                                                             |
+| `weekly_digests_btn_icon`                | string | `'envelope' `                           | The "Weekly Digests" button [icon](?path=/docs/design-icons--page)                                                            |
+| `weekly_digests_heading`                 | string | `'Get Weekly Digests'`                  | The subscription form heading                                                                                                 |
+| `weekly_digests_email_input_label`       | string | `'Email'`                               | The email input label                                                                                                         |
+| `weekly_digests_email_input_placeholder` | string | `'Your Email Address'`                  | The email input placeholder text                                                                                              |
+| `weekly_digests_submit_btn_label`        | string | `'Subscribe'`                           | The subscription form submit button label                                                                                     |
+
+## JavaScript
+
+You'll need to use JavaScript to select the Button Swap component via the `js-button-swap` CSS class and initialize it using the `initButtonSwap` function.
+
+### Syntax
+
+```js
+initButtonSwap(buttonSwapEl, options);
+```
+
+### Parameters
+
+#### `buttonSwapEl`
+
+The `.js-button-swap` Button Swap wrapper element.
+
+#### `options` (optional)
 
-`Subscription Choicess` (array): Array of [Subscription Choices objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+An object which allows you to optionally pass `initialCallback` and `swappedCallback` functions to be called when each button is clicked.
 
-```ts
- {
-   name: string | () => string;
-   avatar: string | () => string;
-   link: string | () => string;
- }
+```js
+options?: {
+  initialCallback?: (event: Event) => void;
+  swappedCallback?: (event: Event) => void;
+}
 ```
 
-`Subscription Choices_prefix` (optional, string, default "By"): Used to create a more
-accessible user experience by adding visually hidden text, prefixes the Subscription Choices name (e.g. "By Arianna Chau")
+### Return value
+
+An object with a `destroy` function that removes event listeners.
+
+```js
+{ destroy: () => void }
+```
+
+### Examples
+
+#### Single Button Swap component on the page
+
+```js
+// Initialize
+const buttonSwapEl = initButtonSwap(document.querySelector('.js-button-swap'), {
+  initialCallback: () => console.log('Subscribed!'),
+  swappedCallback: () => console.log('Unsubscribed!'),
+});
+
+// Remove all event listeners
+buttonSwapEl.destroy();
+```
+
+#### Multiple Button Swap components on the page
+
+```js
+// Initialize
+const buttonSwapEls = [...document.querySelectorAll('.js-button-swap')].map(
+  (buttonSwapEl) =>
+    initButtonSwap(buttonSwapEl, {
+      initialCallback: () => console.log('Subscribed!'),
+      swappedCallback: () => console.log('Unsubscribed!'),
+    })
+);
+
+// Remove all event listeners
+buttonSwapEls.forEach((buttonSwapEl) => {
+  buttonSwapEl.destroy();
+});
+```
 
-`meta` (optional, string): Extra information to be rendered below the Subscription Choices name(s)
+## Unsupported features
 
-`date` (optional, date object): Represents a publication date
+The following features are not supported but can be in the future if the need arises. The decision was made to forego these features for now since a use case did not exist when developing this component.
 
-`date_prefix` (optional, string, default "Published on"): Used to create a more
-accessible user experience by adding visually hidden text, prefixes the date value (e.g. "Published on March 31st, 2021")
+- No `content_end_icon` template property support
+- No `content_start`, `content`, or `content_end` block support

From e7c1ba435d5ea4c732c217db04fcf4de358f5dc3 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Mon, 21 Mar 2022 16:42:39 -0700
Subject: [PATCH 39/94] Update code examples

---
 .../subscription-choices.stories.mdx          | 61 +++++++------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index f8bcb0509..036790eeb 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -66,10 +66,12 @@ const templateStory = (args) => {
 
 The Subscription Choices component provides the UI to subscribe to notifications and/or email weekly digests.
 
+This component embeds the [Button Swap component](?path=/docs/components-button-swap--default-story) for the "Get Notifications" button.
+
 <Canvas>
   <Story
     inline={false}
-    name="Basic usage"
+    name="Default"
     args={{
       form_id: 'example-demo',
     }}
@@ -90,7 +92,7 @@ The Subscription Choices component provides the UI to subscribe to notifications
 
 | property                                 | type   | default                                 | description                                                                                                                   |
 | ---------------------------------------- | ------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root element.                                                                                  |
+| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscription-choices` element.                                                        |
 | `form_bg_color`                          | string | `#ffffff`                               | Sets the background color of the subscription form. The `--form-bg-color` CSS custom property can alternatively be used also. |
 | `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                                          |
 | `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                                 |
@@ -110,30 +112,19 @@ The Subscription Choices component provides the UI to subscribe to notifications
 
 ## JavaScript
 
-You'll need to use JavaScript to select the Button Swap component via the `js-button-swap` CSS class and initialize it using the `initButtonSwap` function.
+JavaScript is required for the Subscription Choices component to work.
 
 ### Syntax
 
 ```js
-initButtonSwap(buttonSwapEl, options);
+initSubscriptionChoices(subscriptionChoicesEl);
 ```
 
 ### Parameters
 
-#### `buttonSwapEl`
-
-The `.js-button-swap` Button Swap wrapper element.
-
-#### `options` (optional)
+#### `subscriptionChoicesEl`
 
-An object which allows you to optionally pass `initialCallback` and `swappedCallback` functions to be called when each button is clicked.
-
-```js
-options?: {
-  initialCallback?: (event: Event) => void;
-  swappedCallback?: (event: Event) => void;
-}
-```
+The `.js-subscription-choices` Subscription Choices wrapper element.
 
 ### Return value
 
@@ -145,40 +136,32 @@ An object with a `destroy` function that removes event listeners.
 
 ### Examples
 
-#### Single Button Swap component on the page
+#### Single Subscription Choices component on the page
 
 ```js
 // Initialize
-const buttonSwapEl = initButtonSwap(document.querySelector('.js-button-swap'), {
-  initialCallback: () => console.log('Subscribed!'),
-  swappedCallback: () => console.log('Unsubscribed!'),
-});
+const subscriptionChoicesEl = initSubscriptionChoices(
+  document.querySelector('.js-subscription-choices')
+);
 
 // Remove all event listeners
-buttonSwapEl.destroy();
+subscriptionChoicesEl.destroy();
 ```
 
-#### Multiple Button Swap components on the page
+#### Multiple Subscription Choices components on the page
 
 ```js
 // Initialize
-const buttonSwapEls = [...document.querySelectorAll('.js-button-swap')].map(
-  (buttonSwapEl) =>
-    initButtonSwap(buttonSwapEl, {
-      initialCallback: () => console.log('Subscribed!'),
-      swappedCallback: () => console.log('Unsubscribed!'),
-    })
-);
+const subscriptionChoiceEls = [
+  ...document.querySelectorAll('.js-subscription-choices'),
+].map((subscriptionChoiceEl) => initSubscriptionChoices(subscriptionChoiceEl));
 
 // Remove all event listeners
-buttonSwapEls.forEach((buttonSwapEl) => {
-  buttonSwapEl.destroy();
-});
+for (const subscriptionChoiceEl of subscriptionChoiceEls) {
+  subscriptionChoiceEl.destroy();
+}
 ```
 
-## Unsupported features
-
-The following features are not supported but can be in the future if the need arises. The decision was made to forego these features for now since a use case did not exist when developing this component.
+### Note
 
-- No `content_end_icon` template property support
-- No `content_start`, `content`, or `content_end` block support
+You will also need to initialize the "Get Notifications" [Button Swap component](?path=/docs/components-button-swap--default-story#javascript).

From 49054e39018b14bc109e87aa8b0c6f9c4a903949 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 05:59:49 -0700
Subject: [PATCH 40/94] Update CI to use Node 16

---
 .github/workflows/ci.yml | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cfeb5243f..87ac0e83c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,10 +12,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
       - name: Cache node modules
         uses: actions/cache@v2
         with:
@@ -35,10 +35,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
       - name: Cache node modules
         uses: actions/cache@v2
         with:
@@ -58,10 +58,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
       - name: Cache node modules
         uses: actions/cache@v2
         with:
@@ -80,10 +80,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Use Node.js 12
+      - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
       - name: Cache node modules
         uses: actions/cache@v2
         with:

From dfcc609d7643c0595ce345d049de124c5b75cf05 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 06:05:30 -0700
Subject: [PATCH 41/94] Fix typo

---
 .../subscription-choices/subscription-choices.stories.mdx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 036790eeb..70435a23c 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -102,7 +102,7 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 | `notifications_btn_initial_visual_label` | string | `'Get notifications'`                   | See [Button Swap `initial_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
 | `notifications_btn_swapped_label`        | string | `'Notifications have been turned on.'`  | See [Button Swap `swapped_label`](?path=/docs/components-button-swap--default-story#template-properties)                      |
 | `notifications_btn_swapped_visual_label` | string | `'Turn off notifications'`              | See [Button Swap `swapped_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
-| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                                     |
+| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Weekly Digests" button                                                                        |
 | `weekly_digests_btn_label`               | string | `'Get Weekly Digests'`                  | The "Weekly Digests" button label                                                                                             |
 | `weekly_digests_btn_icon`                | string | `'envelope' `                           | The "Weekly Digests" button [icon](?path=/docs/design-icons--page)                                                            |
 | `weekly_digests_heading`                 | string | `'Get Weekly Digests'`                  | The subscription form heading                                                                                                 |

From f2e6cf0ddadfddb4d53660eac05232aa0cc9c9a9 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 06:12:34 -0700
Subject: [PATCH 42/94] Lint files

---
 .../subscription-choices/subscription-choices.scss     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 85de6735e..7d5a1b86c 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -18,16 +18,16 @@
 }
 
 .c-subscription-choices__control {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .c-subscription-choices__form {
   background-color: var(--form-bg-color, color.$base-white);
+  block-size: 100%;
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   position: absolute;
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
 
   label,
   .c-subscription-choices:not(.activate-form)

From 60e217319f59b634ddd0a513700940fee86b0a2f Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 06:47:54 -0700
Subject: [PATCH 43/94] Refactor to remove bg color, rename vars

---
 .../subscription-choices.scss                 | 17 +++++++-
 .../subscription-choices.stories.mdx          | 42 +++++++++----------
 .../subscription-choices.test.ts              |  4 +-
 .../subscription-choices.twig                 |  6 +--
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 7d5a1b86c..83364d55e 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -3,10 +3,26 @@
 @use '../../compiled/tokens/scss/size';
 @use '../../mixins/a11y';
 
+///
+/// Subscription Choices
+///
+
 .c-subscription-choices {
   position: relative;
 }
 
+///
+/// 1. When the form is active, "hide" the choice controls buttons and heading.
+///    Opacity is used over display:none so that you can still tab back
+///    to the button from the form.
+///
+
+.c-subscription-choices__controls {
+  .activate-form & {
+    opacity: 0; // 1
+  }
+}
+
 .c-subscription-choices__controls-wrapper {
   display: grid;
   gap: 1em;
@@ -22,7 +38,6 @@
 }
 
 .c-subscription-choices__form {
-  background-color: var(--form-bg-color, color.$base-white);
   block-size: 100%;
   inline-size: 100%;
   inset-block-start: 0;
diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 70435a23c..c44666a72 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -51,11 +51,11 @@ const templateStory = (args) => {
       type: 'string',
       defaultValue: 'Get Weekly Digests',
     },
-    weekly_digests_email_input_placeholder: {
+    email_input_placeholder: {
       type: 'string',
       defaultValue: 'Your Email Address',
     },
-    weekly_digests_submit_btn_label: {
+    submit_btn_label: {
       type: 'string',
       defaultValue: 'Subscribe',
     },
@@ -70,7 +70,6 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 <Canvas>
   <Story
-    inline={false}
     name="Default"
     args={{
       form_id: 'example-demo',
@@ -90,25 +89,24 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 ### Optional
 
-| property                                 | type   | default                                 | description                                                                                                                   |
-| ---------------------------------------- | ------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscription-choices` element.                                                        |
-| `form_bg_color`                          | string | `#ffffff`                               | Sets the background color of the subscription form. The `--form-bg-color` CSS custom property can alternatively be used also. |
-| `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                                          |
-| `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                                 |
-| `never_miss_article_heading`             | string | `'Never miss an article!'`              | The default heading                                                                                                           |
-| `notifications_btn_class`                | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                                     |
-| `notifications_btn_initial_label`        | string | `'Notifications have been turned off.'` | See [Button Swap `initial_label`](?path=/docs/components-button-swap--default-story#template-properties)                      |
-| `notifications_btn_initial_visual_label` | string | `'Get notifications'`                   | See [Button Swap `initial_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
-| `notifications_btn_swapped_label`        | string | `'Notifications have been turned on.'`  | See [Button Swap `swapped_label`](?path=/docs/components-button-swap--default-story#template-properties)                      |
-| `notifications_btn_swapped_visual_label` | string | `'Turn off notifications'`              | See [Button Swap `swapped_visual_label`](?path=/docs/components-button-swap--default-story#template-properties)               |
-| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Weekly Digests" button                                                                        |
-| `weekly_digests_btn_label`               | string | `'Get Weekly Digests'`                  | The "Weekly Digests" button label                                                                                             |
-| `weekly_digests_btn_icon`                | string | `'envelope' `                           | The "Weekly Digests" button [icon](?path=/docs/design-icons--page)                                                            |
-| `weekly_digests_heading`                 | string | `'Get Weekly Digests'`                  | The subscription form heading                                                                                                 |
-| `weekly_digests_email_input_label`       | string | `'Email'`                               | The email input label                                                                                                         |
-| `weekly_digests_email_input_placeholder` | string | `'Your Email Address'`                  | The email input placeholder text                                                                                              |
-| `weekly_digests_submit_btn_label`        | string | `'Subscribe'`                           | The subscription form submit button label                                                                                     |
+| property                                 | type   | default                                 | description                                                                                                     |
+| ---------------------------------------- | ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscription-choices` element.                                          |
+| `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                            |
+| `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                   |
+| `never_miss_article_heading`             | string | `'Never miss an article!'`              | The default heading                                                                                             |
+| `notifications_btn_class`                | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                       |
+| `notifications_btn_initial_label`        | string | `'Notifications have been turned off.'` | See [Button Swap `initial_label`](?path=/docs/components-button-swap--default-story#template-properties)        |
+| `notifications_btn_initial_visual_label` | string | `'Get notifications'`                   | See [Button Swap `initial_visual_label`](?path=/docs/components-button-swap--default-story#template-properties) |
+| `notifications_btn_swapped_label`        | string | `'Notifications have been turned on.'`  | See [Button Swap `swapped_label`](?path=/docs/components-button-swap--default-story#template-properties)        |
+| `notifications_btn_swapped_visual_label` | string | `'Turn off notifications'`              | See [Button Swap `swapped_visual_label`](?path=/docs/components-button-swap--default-story#template-properties) |
+| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Weekly Digests" button                                                          |
+| `weekly_digests_btn_label`               | string | `'Get Weekly Digests'`                  | The "Weekly Digests" button label                                                                               |
+| `weekly_digests_btn_icon`                | string | `'envelope' `                           | The "Weekly Digests" button [icon](?path=/docs/design-icons--page)                                              |
+| `weekly_digests_heading`                 | string | `'Get Weekly Digests'`                  | The subscription form heading                                                                                   |
+| `email_input_label`                      | string | `'Email'`                               | The email input label                                                                                           |
+| `email_input_placeholder`                | string | `'Your Email Address'`                  | The email input placeholder text                                                                                |
+| `submit_btn_label`                       | string | `'Subscribe'`                           | The subscription form submit button label                                                                       |
 
 ## JavaScript
 
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 21f3ec92d..72f470c83 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -194,8 +194,8 @@ describe('Subscription Choices', () => {
           notifications_btn_initial_visual_label: 'Yes to notifications',
           weekly_digests_btn_class: 'world',
           weekly_digests_btn_label: 'I want weekly digests',
-          weekly_digests_email_input_placeholder: 'Gimme email',
-          weekly_digests_submit_btn_label: 'Sign up',
+          email_input_placeholder: 'Gimme email',
+          submit_btn_label: 'Sign up',
         })
       );
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 4f890584c..ce727ebdc 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -50,18 +50,18 @@ js-subscription-choices__get-weekly-digests-btn
 
     <div class="c-subscription-choices__input-group">
       <label for="subscription-email-{{form_id}}">
-        {{weekly_digests_email_input_label|default('Email')}}
+        {{email_input_label|default('Email')}}
       </label>
       <input
         id="subscription-email-{{form_id}}"
         class="c-input"
         type="text"
-        placeholder="{{weekly_digests_email_input_placeholder|default('Your Email Address')}}"
+        placeholder="{{email_input_placeholder|default('Your Email Address')}}"
         autocomplete="home email",
         required
       />
       <button class="c-button">
-        {{weekly_digests_submit_btn_label|default('Subscribe')}}
+        {{submit_btn_label|default('Subscribe')}}
       </button>
     </div>
   </form>

From 81bab30729e016808788bcf21b9d32f32ccd4a4c Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 06:52:21 -0700
Subject: [PATCH 44/94] Remove bgColor from tests

---
 .../subscription-choices.test.ts                 | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 72f470c83..540babeb7 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -168,14 +168,12 @@ describe('Subscription Choices', () => {
 
       // Confirm default form values
       let form = await screen.getByRole('form');
-      let { formBgColor, formAction, emailInputPlaceHolder } =
-        await form.evaluate((formEl) => ({
-          formBgColor: window.getComputedStyle(formEl).backgroundColor,
+      let { formAction, emailInputPlaceHolder } = await form.evaluate(
+        (formEl) => ({
           formAction: formEl.getAttribute('action'),
           emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
-        }));
-      // `backgroundColor` returns an RGB value
-      expect(formBgColor).toBe('rgb(255, 255, 255)');
+        })
+      );
       expect(formAction).toBe(
         'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67'
       );
@@ -189,7 +187,6 @@ describe('Subscription Choices', () => {
           heading_tag: 'h3',
           weekly_digests_heading: 'Weekly digests available',
           never_miss_article_heading: "Don't miss out!",
-          form_bg_color: 'green',
           notifications_btn_class: 'hello',
           notifications_btn_initial_visual_label: 'Yes to notifications',
           weekly_digests_btn_class: 'world',
@@ -211,15 +208,12 @@ describe('Subscription Choices', () => {
 
       // Confirm custom form values
       form = await screen.getByRole('form');
-      ({ formBgColor, formAction, emailInputPlaceHolder } = await form.evaluate(
+      ({ formAction, emailInputPlaceHolder } = await form.evaluate(
         (formEl) => ({
-          formBgColor: window.getComputedStyle(formEl).backgroundColor,
           formAction: formEl.getAttribute('action'),
           emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
         })
       ));
-      // `backgroundColor` returns an RGB value
-      expect(formBgColor).toBe('rgb(0, 128, 0)');
       expect(formAction).toBe('test-action.com');
       expect(emailInputPlaceHolder).toBe('Gimme email');
 

From 5705d9df129c48f6177c875478ce594e32c37a34 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 07:14:14 -0700
Subject: [PATCH 45/94] Touch-ups

---
 .../subscription-choices.stories.mdx             | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index c44666a72..18ffc1185 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -110,7 +110,9 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 ## JavaScript
 
-JavaScript is required for the Subscription Choices component to work.
+JavaScript can be used to enhance the UX for the Subscription Choices component
+by adding a form hide delay when `:focus` is moved away from the
+Subscription Choices component elements.
 
 ### Syntax
 
@@ -122,14 +124,16 @@ initSubscriptionChoices(subscriptionChoicesEl);
 
 #### `subscriptionChoicesEl`
 
-The `.js-subscription-choices` Subscription Choices wrapper element.
+The Subscription Choices component `.js-subscription-choices` root element.
 
 ### Return value
 
-An object with a `destroy` function that removes event listeners.
+An object with a `destroy` function that removes all event listeners added by this component.
 
 ```js
-{ destroy: () => void }
+{
+  destroy: () => void
+}
 ```
 
 ### Examples
@@ -162,4 +166,6 @@ for (const subscriptionChoiceEl of subscriptionChoiceEls) {
 
 ### Note
 
-You will also need to initialize the "Get Notifications" [Button Swap component](?path=/docs/components-button-swap--default-story#javascript).
+You will need to initialize the "Get Notifications" button as well, see the
+[Button Swap component](?path=/docs/components-button-swap--default-story#javascript)
+for initialization docs.

From ec0ee5a54aa388b51b0d04cc0060b577bfb29c38 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 07:15:54 -0700
Subject: [PATCH 46/94] Add a changeset

---
 .changeset/little-colts-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/little-colts-happen.md

diff --git a/.changeset/little-colts-happen.md b/.changeset/little-colts-happen.md
new file mode 100644
index 000000000..8b8207b56
--- /dev/null
+++ b/.changeset/little-colts-happen.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Subscription Choices component

From f0ce6ba92bc036b8df9441a46b3121bfbd553c0d Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 07:19:38 -0700
Subject: [PATCH 47/94] Remove more form bg color code

---
 .../subscription-choices.stories.mdx                     | 6 ------
 .../subscription-choices/subscription-choices.twig       | 9 +--------
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 18ffc1185..1c5da7090 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -37,12 +37,6 @@ const templateStory = (args) => {
       type: 'string',
       defaultValue: 'Never miss an article!',
     },
-    form_bg_color: {
-      defaultValue: '#fff',
-      description:
-        'The background color of the form; allows the component to work in different contexts.',
-      control: 'color',
-    },
     weekly_digests_btn_label: {
       type: 'string',
       defaultValue: 'Get Weekly Digests',
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index ce727ebdc..3dbcf43e1 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -1,12 +1,6 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
-<div
-  class="c-subscription-choices js-subscription-choices{% if class %} {{ class }}{% endif %}"
-  {% if form_bg_color %}
-    style="--form-bg-color: {{form_bg_color}};"
-  {% endif %}
->
-
+<div class="c-subscription-choices js-subscription-choices{% if class %} {{ class }}{% endif %}">
   <div class="c-subscription-choices__controls">
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}
@@ -35,7 +29,6 @@ js-subscription-choices__get-weekly-digests-btn
     </div>
   </div>
 
-
   <form
     id="subscription-choices-{{form_id}}"
     action="{{form_action|default('https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67')}}"

From cbffc8eaf2ceda3a813fd167e71e02e12f040a2e Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 07:34:47 -0700
Subject: [PATCH 48/94] Add bg color back, theme-specific

---
 .../subscription-choices.scss                 | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 83364d55e..f2ccb2552 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -2,6 +2,26 @@
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/size';
 @use '../../mixins/a11y';
+@use '../../mixins/theme';
+
+///
+/// Theme properties
+///
+
+// Light theme
+@include theme.props {
+  --theme-color-background-subscription-form: #{color.$base-white};
+}
+
+// Dark theme
+@include theme.props(dark) {
+  --theme-color-background-subscription-form: #{color.$brand-primary};
+}
+
+// Alternate theme
+@include theme.props(alternate) {
+  --theme-color-background-subscription-form: #{color.$base-gray-light};
+}
 
 ///
 /// Subscription Choices
@@ -38,6 +58,7 @@
 }
 
 .c-subscription-choices__form {
+  background-color: var(--theme-color-background-subscription-form);
   block-size: 100%;
   inline-size: 100%;
   inset-block-start: 0;

From 8cbf7e7477e9a880b153c8f6b6810f30d75267de Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 08:07:29 -0700
Subject: [PATCH 49/94] Choose correct gray

---
 src/components/subscription-choices/subscription-choices.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index f2ccb2552..29133dec6 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -20,7 +20,7 @@
 
 // Alternate theme
 @include theme.props(alternate) {
-  --theme-color-background-subscription-form: #{color.$base-gray-light};
+  --theme-color-background-subscription-form: #{color.$base-gray-lighter};
 }
 
 ///

From 802b90a18d4213fff23ad7fe22e2056c7b15d207 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 08:10:35 -0700
Subject: [PATCH 50/94] Edit description

---
 .../subscription-choices/subscription-choices.stories.mdx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 1c5da7090..23544141f 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -104,9 +104,9 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 ## JavaScript
 
-JavaScript can be used to enhance the UX for the Subscription Choices component
-by adding a form hide delay when `:focus` is moved away from the
-Subscription Choices component elements.
+The Subscription Choices component UX can be progressively enhanced by adding
+a 1 second form hide delay when `:focus` is moved away from the Subscription
+Choices component elements.
 
 ### Syntax
 

From 42d87785bd9bb9d7ce425c0dbb0c68329be613e6 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 08:34:07 -0700
Subject: [PATCH 51/94] Add makeTwigInclude source

---
 .../subscription-choices.stories.mdx               | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index 23544141f..d8395c1be 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
+import { makeTwigInclude } from '../../make-twig-include';
 import template from './subscription-choices.twig';
 import { initSubscriptionChoices } from './subscription-choices.ts';
 // Helper function to initialize toggling button JS
@@ -64,10 +65,23 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 <Canvas>
   <Story
+    inline={false}
     name="Default"
     args={{
       form_id: 'example-demo',
     }}
+    parameters={{
+      docs: {
+        source: {
+          code: makeTwigInclude(
+            '@cloudfour/components/subscription-choices/subscription-choices.twig',
+            {
+              form_id: 'example-demo',
+            }
+          ),
+        },
+      },
+    }}
   >
     {(args) => templateStory(args)}
   </Story>

From 3aa54c23d06b59851a7cc5e42b26a271a0c80feb Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:13:03 -0700
Subject: [PATCH 52/94] Remove opacity change, not needed

---
 .../subscription-choices/subscription-choices.scss   | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 29133dec6..8a12ca797 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -31,18 +31,6 @@
   position: relative;
 }
 
-///
-/// 1. When the form is active, "hide" the choice controls buttons and heading.
-///    Opacity is used over display:none so that you can still tab back
-///    to the button from the form.
-///
-
-.c-subscription-choices__controls {
-  .activate-form & {
-    opacity: 0; // 1
-  }
-}
-
 .c-subscription-choices__controls-wrapper {
   display: grid;
   gap: 1em;

From 975e09a519bea456fba87a65488739160e16e779 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:31:27 -0700
Subject: [PATCH 53/94] Use flexbox instead of grid

---
 .../subscription-choices.scss                    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 8a12ca797..d8667b00a 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -32,17 +32,27 @@
 }
 
 .c-subscription-choices__controls-wrapper {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 1em;
   margin: size.$rhythm-default 0;
 
+  .c-button-swap {
+    flex-grow: 1;
+  }
+
+  .c-button-swap__subscribe {
+    display: flex;
+  }
+
   @media (min-width: breakpoint.$s) {
-    grid-template-columns: 1fr 1fr;
+    flex-direction: row;
   }
 }
 
 .c-subscription-choices__control {
-  inline-size: 100%;
+  // inline-size: 100%;
+  flex-grow: 1;
 }
 
 .c-subscription-choices__form {

From dfb3e6df58dcd0d8314651b48cf1eec94fd35b9a Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:33:25 -0700
Subject: [PATCH 54/94] Delete unnused code

---
 src/components/subscription-choices/subscription-choices.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index d8667b00a..2e39c41f9 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -51,7 +51,6 @@
 }
 
 .c-subscription-choices__control {
-  // inline-size: 100%;
   flex-grow: 1;
 }
 

From bf2ce348e2cba695becd7d7aff3777a097742c9c Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:37:27 -0700
Subject: [PATCH 55/94] Add more comments

---
 .../subscription-choices/subscription-choices.scss  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 2e39c41f9..dfaeb4fac 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -54,16 +54,25 @@
   flex-grow: 1;
 }
 
+///
+/// 1. Ensures the form background color matches the current theme
+///
+
 .c-subscription-choices__form {
-  background-color: var(--theme-color-background-subscription-form);
+  background-color: var(--theme-color-background-subscription-form); // 1
   block-size: 100%;
   inline-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
   position: absolute;
 
+  ///
+  /// 1. Allows for the visually hidden form to be keyboard accessible, will be
+  ///    visually hidden when elements within the form are not in focus.
+  ///
+
   label,
-  .c-subscription-choices:not(.activate-form)
+  .c-subscription-choices:not(.activate-form) // 1
     &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }

From 189764ec11046ad1cfcd776c9b8e5bd7b3d2f2be Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:46:42 -0700
Subject: [PATCH 56/94] Add extra check

---
 .../subscription-choices.test.ts                | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 540babeb7..f3956f150 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -131,6 +131,23 @@ describe('Subscription Choices', () => {
       expect(formHeight).toBeGreaterThan(1);
       expect(formWidth).toBeGreaterThan(1);
 
+      // Navigate back quickly to confirm timeout getting cancelled
+      await page.keyboard.down('Shift'); // Navigate backwards
+      await page.keyboard.press('Tab'); // Submit button
+      await page.keyboard.up('Shift'); // Release Shift key
+
+      // Confirm the form is still "active" (not visually hidden)
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
+      await page.keyboard.press('Tab'); // Out of the form
+
+      // Confirm the form is still "active" (not visually hidden)
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
       // After a timeout, the form eventually visually hides
       await waitFor(
         async () => {

From e083296a4924aa5c832cd24c5209547c509bb228 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 10:52:30 -0700
Subject: [PATCH 57/94] Update comment

---
 .../subscription-choices/subscription-choices.ts          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index 614c7fe8a..ea1f765a5 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -1,9 +1,9 @@
 /**
- * Button swap
+ * Subscription Choices
  *
- * Swaps two buttons by toggling the `hidden` attribute on the wrapper for each
- * button + visually hidden message group; only one button + visually hidden
- * message is displayed at a time.
+ * Progressively enhances the UX for the Subscription Choices component. Adds a
+ * form hide delay when the focus exits the Subscriptoin Choices component if
+ * the form is open.
  */
 export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   const SHOW_FORM_CLASS = 'activate-form';

From 2399838202e97b9782b146c7517d5989d436b827 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Tue, 22 Mar 2022 13:36:15 -0700
Subject: [PATCH 58/94] Update
 src/components/subscription-choices/subscription-choices.scss

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>
---
 src/components/subscription-choices/subscription-choices.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index dfaeb4fac..39435ecf7 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -59,7 +59,7 @@
 ///
 
 .c-subscription-choices__form {
-  background-color: var(--theme-color-background-subscription-form); // 1
+  background-color: var(--theme-color-background-base); // 1
   block-size: 100%;
   inline-size: 100%;
   inset-block-start: 0;

From 1362e84a6c29b9dc1c0bdaf05670702503bcf8f8 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 13:37:12 -0700
Subject: [PATCH 59/94] Use existing theme css prop, don't need these

---
 .../subscription-choices.scss                 | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 39435ecf7..ce4f7dd0d 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -4,25 +4,6 @@
 @use '../../mixins/a11y';
 @use '../../mixins/theme';
 
-///
-/// Theme properties
-///
-
-// Light theme
-@include theme.props {
-  --theme-color-background-subscription-form: #{color.$base-white};
-}
-
-// Dark theme
-@include theme.props(dark) {
-  --theme-color-background-subscription-form: #{color.$brand-primary};
-}
-
-// Alternate theme
-@include theme.props(alternate) {
-  --theme-color-background-subscription-form: #{color.$base-gray-lighter};
-}
-
 ///
 /// Subscription Choices
 ///

From d808584988c8c3e56bdaaea2fbc56c4b951bc3ed Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 13:41:11 -0700
Subject: [PATCH 60/94] Add CSS class to label

---
 src/components/subscription-choices/subscription-choices.scss | 2 +-
 src/components/subscription-choices/subscription-choices.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index ce4f7dd0d..61b0187ad 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -52,7 +52,7 @@
   ///    visually hidden when elements within the form are not in focus.
   ///
 
-  label,
+  .c-subscription-choices__input-label,
   .c-subscription-choices:not(.activate-form) // 1
     &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 3dbcf43e1..63e990c05 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -42,7 +42,7 @@ js-subscription-choices__get-weekly-digests-btn
     </{{_heading_tag}}>
 
     <div class="c-subscription-choices__input-group">
-      <label for="subscription-email-{{form_id}}">
+      <label class="c-subscription-choices__input-label" for="subscription-email-{{form_id}}">
         {{email_input_label|default('Email')}}
       </label>
       <input

From 9d9b917ad2c5bcf6860d998bb8d75207bd7b5c32 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 13:43:22 -0700
Subject: [PATCH 61/94] Use flex shorthand

---
 src/components/subscription-choices/subscription-choices.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 61b0187ad..375668be5 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -19,7 +19,7 @@
   margin: size.$rhythm-default 0;
 
   .c-button-swap {
-    flex-grow: 1;
+    flex: 1;
   }
 
   .c-button-swap__subscribe {
@@ -32,7 +32,7 @@
 }
 
 .c-subscription-choices__control {
-  flex-grow: 1;
+  flex: 1;
 }
 
 ///

From fa3619d19e1869a11dcd8e189a6e3d2fe025c8d5 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 13:45:59 -0700
Subject: [PATCH 62/94] c-subscription-choices -> c-subscribe

---
 .../subscription-choices.scss                    | 14 +++++++-------
 .../subscription-choices.stories.mdx             |  2 +-
 .../subscription-choices.twig                    | 16 ++++++++--------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 375668be5..5eb2836e8 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -8,11 +8,11 @@
 /// Subscription Choices
 ///
 
-.c-subscription-choices {
+.c-subscribe {
   position: relative;
 }
 
-.c-subscription-choices__controls-wrapper {
+.c-subscribe__controls-wrapper {
   display: flex;
   flex-direction: column;
   gap: 1em;
@@ -31,7 +31,7 @@
   }
 }
 
-.c-subscription-choices__control {
+.c-subscribe__control {
   flex: 1;
 }
 
@@ -39,7 +39,7 @@
 /// 1. Ensures the form background color matches the current theme
 ///
 
-.c-subscription-choices__form {
+.c-subscribe__form {
   background-color: var(--theme-color-background-base); // 1
   block-size: 100%;
   inline-size: 100%;
@@ -52,14 +52,14 @@
   ///    visually hidden when elements within the form are not in focus.
   ///
 
-  .c-subscription-choices__input-label,
-  .c-subscription-choices:not(.activate-form) // 1
+  .c-subscribe__input-label,
+  .c-subscribe:not(.activate-form) // 1
     &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }
 }
 
-.c-subscription-choices__input-group {
+.c-subscribe__input-group {
   display: flex;
   flex-direction: column;
   gap: 1em;
diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscription-choices/subscription-choices.stories.mdx
index d8395c1be..b9be72f43 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscription-choices/subscription-choices.stories.mdx
@@ -99,7 +99,7 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 | property                                 | type   | default                                 | description                                                                                                     |
 | ---------------------------------------- | ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscription-choices` element.                                          |
+| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscribe` element.                                                     |
 | `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                            |
 | `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                   |
 | `never_miss_article_heading`             | string | `'Never miss an article!'`              | The default heading                                                                                             |
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 63e990c05..1f8c68f7a 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -1,14 +1,14 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
-<div class="c-subscription-choices js-subscription-choices{% if class %} {{ class }}{% endif %}">
-  <div class="c-subscription-choices__controls">
+<div class="c-subscribe js-subscription-choices{% if class %} {{ class }}{% endif %}">
+  <div class="c-subscribe__controls">
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscription-choices__controls-wrapper">
+    <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        button_class: "c-subscription-choices__control
+        button_class: "c-subscribe__control
 js-subscription-choices__control
 #{notifications_btn_class|default('')}",
         initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
@@ -19,7 +19,7 @@ js-subscription-choices__control
 
       {% include '@cloudfour/components/button/button.twig' with {
         href: "#subscription-choices-#{form_id}",
-        class: "c-subscription-choices__control
+        class: "c-subscribe__control
 js-subscription-choices__control
 js-subscription-choices__get-weekly-digests-btn
 #{weekly_digests_btn_class|default('')}",
@@ -34,15 +34,15 @@ js-subscription-choices__get-weekly-digests-btn
     action="{{form_action|default('https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67')}}"
     method="post"
     target="_blank"
-    class="c-subscription-choices__form"
+    class="c-subscribe__form"
     aria-labelledby="get-weekly-digests-{{form_id}}"
   >
     <{{_heading_tag}} id="get-weekly-digests-{{form_id}}">
       {{weekly_digests_heading|default('Get Weekly Digests')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscription-choices__input-group">
-      <label class="c-subscription-choices__input-label" for="subscription-email-{{form_id}}">
+    <div class="c-subscribe__input-group">
+      <label class="c-subscribe__input-label" for="subscription-email-{{form_id}}">
         {{email_input_label|default('Email')}}
       </label>
       <input

From 135a3418b51cd6d09114f2213d33b675d790496e Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 13:52:59 -0700
Subject: [PATCH 63/94] Better CSS class names

---
 .../subscription-choices/subscription-choices.scss        | 4 ++--
 .../subscription-choices/subscription-choices.twig        | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 5eb2836e8..f1d555722 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -52,14 +52,14 @@
   ///    visually hidden when elements within the form are not in focus.
   ///
 
-  .c-subscribe__input-label,
+  .c-subscribe__form-input-label,
   .c-subscribe:not(.activate-form) // 1
     &:not(:target):not(:focus-within) {
     @include a11y.sr-only;
   }
 }
 
-.c-subscribe__input-group {
+.c-subscribe__form-input-group {
   display: flex;
   flex-direction: column;
   gap: 1em;
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 1f8c68f7a..e0b382cf4 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -41,19 +41,19 @@ js-subscription-choices__get-weekly-digests-btn
       {{weekly_digests_heading|default('Get Weekly Digests')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscribe__input-group">
-      <label class="c-subscribe__input-label" for="subscription-email-{{form_id}}">
+    <div class="c-subscribe__form-input-group">
+      <label class="c-subscribe__form-input-label" for="subscription-email-{{form_id}}">
         {{email_input_label|default('Email')}}
       </label>
       <input
         id="subscription-email-{{form_id}}"
-        class="c-input"
+        class="c-subscribe__form-input c-input"
         type="text"
         placeholder="{{email_input_placeholder|default('Your Email Address')}}"
         autocomplete="home email",
         required
       />
-      <button class="c-button">
+      <button class="c-subscribe__form-button c-button">
         {{submit_btn_label|default('Subscribe')}}
       </button>
     </div>

From 0a4c903f437dd3b8b5424c89aa3ade63837b1989 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Tue, 22 Mar 2022 14:39:25 -0700
Subject: [PATCH 64/94] Update
 src/components/subscription-choices/subscription-choices.test.ts

Co-authored-by: Caleb Eby <calebeby@users.noreply.github.com>
---
 .../subscription-choices/subscription-choices.test.ts         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index f3956f150..d69f5ee28 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -93,8 +93,8 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab');
 
       // Submit button should be in focus
-      const submitBtn = await screen.getByRole('button', { name: 'Subscribe' });
-      await expect(submitBtn).toHaveFocus();
+      const subscribeBtn = await screen.getByRole('button', { name: 'Subscribe' });
+      await expect(subscribeBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)
       ({ formHeight, formWidth } = await form.evaluate((formEl) => ({

From 9134022b79a690bc2a1bbda7a0933b522505be5d Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 14:56:11 -0700
Subject: [PATCH 65/94] Use toHaveAttribute assertion

---
 .../subscription-choices.test.ts              | 31 ++++++++-----------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index f3956f150..59afcf2a3 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -184,17 +184,15 @@ describe('Subscription Choices', () => {
       });
 
       // Confirm default form values
-      let form = await screen.getByRole('form');
-      let { formAction, emailInputPlaceHolder } = await form.evaluate(
-        (formEl) => ({
-          formAction: formEl.getAttribute('action'),
-          emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
-        })
-      );
-      expect(formAction).toBe(
+      let form = await screen.getByRole('form', {
+        name: 'Get Weekly Digests',
+      });
+      expect(form).toHaveAttribute(
+        'action',
         'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67'
       );
-      expect(emailInputPlaceHolder).toBe('Your Email Address');
+      let emailInput = await screen.getByRole('textbox', { name: 'Email' });
+      expect(emailInput).toHaveAttribute('placeholder', 'Your Email Address');
 
       // Customize the component
       await utils.injectHTML(
@@ -224,15 +222,12 @@ describe('Subscription Choices', () => {
       });
 
       // Confirm custom form values
-      form = await screen.getByRole('form');
-      ({ formAction, emailInputPlaceHolder } = await form.evaluate(
-        (formEl) => ({
-          formAction: formEl.getAttribute('action'),
-          emailInputPlaceHolder: formEl.querySelector('input')?.placeholder,
-        })
-      ));
-      expect(formAction).toBe('test-action.com');
-      expect(emailInputPlaceHolder).toBe('Gimme email');
+      form = await screen.getByRole('form', {
+        name: 'Weekly digests available',
+      });
+      expect(form).toHaveAttribute('action', 'test-action.com');
+      emailInput = await screen.getByRole('textbox', { name: 'Email' });
+      expect(emailInput).toHaveAttribute('placeholder', 'Gimme email');
 
       // Confirm custom notifications button
       const notificationsBtn = await screen.getByRole('button', {

From c6c548d876a65eb323a5476be6e241377bbc2b03 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 15:08:30 -0700
Subject: [PATCH 66/94] Lint

---
 .../subscription-choices/subscription-choices.test.ts         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 0bb94c44b..b444685db 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -93,7 +93,9 @@ describe('Subscription Choices', () => {
       await page.keyboard.press('Tab');
 
       // Submit button should be in focus
-      const subscribeBtn = await screen.getByRole('button', { name: 'Subscribe' });
+      const subscribeBtn = await screen.getByRole('button', {
+        name: 'Subscribe',
+      });
       await expect(subscribeBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)

From 5766e69a1b9456c6eee379e8bad03603e49300de Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 16:31:58 -0700
Subject: [PATCH 67/94] Address PR feedback

---
 src/components/button-swap/button-swap.stories.mdx   |  1 +
 src/components/button-swap/button-swap.twig          | 12 ++++++++++--
 .../subscription-choices/subscription-choices.scss   |  4 ++--
 .../subscription-choices/subscription-choices.twig   |  2 ++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/button-swap/button-swap.stories.mdx b/src/components/button-swap/button-swap.stories.mdx
index de5f2e713..88e8e9cfa 100644
--- a/src/components/button-swap/button-swap.stories.mdx
+++ b/src/components/button-swap/button-swap.stories.mdx
@@ -75,6 +75,7 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
 
 - `class` (string): Appends a CSS class(es) to the root element.
 - `button_class` (string): Appends a CSS class(es) to the button element.
+- `button_wrapper_class` (string): Appends a CSS class(es) to the button wrapper element that contains the button and visually hidden text.
 - `content_start_icon` (string, default `'bell'`): The button [icon](/docs/design-icons--page) (the same icon is applied to both buttons).
 - `initial_label` (string, default `'Unsubscribed from notifications'`): The first button visually hidden text.
 - `initial_visual_label` (string, default `'Get notifications'`): The first button label.
diff --git a/src/components/button-swap/button-swap.twig b/src/components/button-swap/button-swap.twig
index a236594db..f8208f642 100644
--- a/src/components/button-swap/button-swap.twig
+++ b/src/components/button-swap/button-swap.twig
@@ -3,7 +3,11 @@
   End icon support can be added in the future if needed.
 #}
 <div class="c-button-swap js-button-swap{% if class %} {{ class }}{% endif %}">
-  <div class="c-button-swap__subscribe js-button-swap__initial-button-wrapper">
+  <div class="{{[
+    'c-button-swap__subscribe',
+    'js-button-swap__initial-button-wrapper',
+    button_wrapper_class
+  ]|join(' ')}}">
     <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
       {{ initial_label|default('Currently unsubscribed from notifications') }}
     </span>
@@ -14,7 +18,11 @@
       label: initial_visual_label|default('Get notifications')
     } only %}
   </div>
-  <div class="c-button-swap__unsubscribe js-button-swap__swapped-button-wrapper" hidden>
+  <div class="{{[
+    'c-button-swap__unsubscribe',
+    'js-button-swap__swapped-button-wrapper',
+    button_wrapper_class
+  ]|join(' ')}}" hidden>
     <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
       {{ swapped_label|default('Currently subscribed to notifications') }}
     </span>
diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index f1d555722..effcf4c6f 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -18,11 +18,11 @@
   gap: 1em;
   margin: size.$rhythm-default 0;
 
-  .c-button-swap {
+  .c-subscripe__button-swap {
     flex: 1;
   }
 
-  .c-button-swap__subscribe {
+  .c-subscribe__button-swap-button-wrapper {
     display: flex;
   }
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index e0b382cf4..ecc3c7296 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -8,9 +8,11 @@
 
     <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+        class: 'c-subscripe__button-swap',
         button_class: "c-subscribe__control
 js-subscription-choices__control
 #{notifications_btn_class|default('')}",
+        button_wrapper_class: "c-subscribe__button-swap-button-wrapper",
         initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
         initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
         swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),

From 8c4de41a6b438658af7213fcec5a013037225562 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Tue, 22 Mar 2022 16:33:07 -0700
Subject: [PATCH 68/94] Fix typo

---
 src/components/subscription-choices/subscription-choices.scss | 2 +-
 src/components/subscription-choices/subscription-choices.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index effcf4c6f..969b7ff8b 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -18,7 +18,7 @@
   gap: 1em;
   margin: size.$rhythm-default 0;
 
-  .c-subscripe__button-swap {
+  .c-subscribe__button-swap {
     flex: 1;
   }
 
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index ecc3c7296..8c309cb12 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -8,7 +8,7 @@
 
     <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        class: 'c-subscripe__button-swap',
+        class: 'c-subscribe__button-swap',
         button_class: "c-subscribe__control
 js-subscription-choices__control
 #{notifications_btn_class|default('')}",

From 8273485bcdbf8aecebe5147db25df6a057b3958e Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 01:09:53 -0700
Subject: [PATCH 69/94] Close form on Escape

---
 .../subscription-choices.test.ts              | 24 +++++++++++++++++++
 .../subscription-choices.ts                   | 17 +++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index b444685db..571016678 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -162,6 +162,30 @@ describe('Subscription Choices', () => {
           interval: 1000,
         }
       );
+
+      // Navigate back quickly to confirm timeout getting cancelled
+      await page.keyboard.down('Shift'); // Navigate backwards
+      await page.keyboard.press('Tab'); // Submit button
+      await page.keyboard.up('Shift'); // Release Shift key
+
+      // Confirm the form is "active" again (not visually hidden)
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
+      expect(formHeight).toBeGreaterThan(1);
+      expect(formWidth).toBeGreaterThan(1);
+
+      // Should hide the form
+      await page.keyboard.press('Escape');
+
+      // The form should now be visually hidden
+      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
+      expect(formHeight).toBeLessThanOrEqual(1);
+      expect(formWidth).toBeLessThanOrEqual(1);
+
+      // Confirm the focus has moved back to the Weekly Digests link
+      // const weeklyDigestsBtn = await screen.getByRole('link', {
+      //   name: 'Get Weekly Digests',
+      // });
+      await expect(weeklyDigestsBtn).toHaveFocus();
     })
   );
 
diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index ea1f765a5..0a5f18a08 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -11,6 +11,8 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
 
   // Keeps track of active setTimeouts
   let blurTimeoutId: number;
+  // Keeps the current state of the form
+  let isFormOpen = false;
 
   // Query all the required elements
   const getWeeklyDigestsBtn = containerEl.querySelector(
@@ -31,6 +33,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   const onControlFocus = () => {
     clearTimeout(blurTimeoutId);
     containerEl.classList.remove(SHOW_FORM_CLASS);
+    isFormOpen = false;
   };
 
   // Show the form anytime any form element gets focus
@@ -38,6 +41,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   const onFormFocus = () => {
     clearTimeout(blurTimeoutId);
     containerEl.classList.add(SHOW_FORM_CLASS);
+    isFormOpen = true;
   };
 
   // Hide the form after a delay anytime focus is removed from a form element
@@ -45,6 +49,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     clearTimeout(blurTimeoutId);
     blurTimeoutId = window.setTimeout(() => {
       containerEl.classList.remove(SHOW_FORM_CLASS);
+      isFormOpen = false;
     }, BLUR_TIMEOUT);
   };
 
@@ -52,10 +57,20 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
   const onGetWeeklyDigestsClick = (event: Event) => {
     event.preventDefault();
     containerEl.classList.add(SHOW_FORM_CLASS);
+    isFormOpen = true;
     // Jump the focus to the first input element
     formEl.querySelector('input')?.focus();
   };
 
+  // Handles for the Escape keydown event
+  const onKeydown = (event: KeyboardEvent) => {
+    // We need to hide the form and reset the focus, we can get both by setting
+    // the focus back to the "Get Weekly Digests" link.
+    if (event.key === 'Escape' && isFormOpen) {
+      (getWeeklyDigestsBtn as HTMLElement).focus();
+    }
+  };
+
   // Clean up event listeners
   const destroy = () => {
     getWeeklyDigestsBtn.removeEventListener('click', onGetWeeklyDigestsClick);
@@ -66,6 +81,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     for (const controlEl of controlEls) {
       controlEl.removeEventListener('focus', onControlFocus);
     }
+    document.removeEventListener('keydown', onKeydown);
   };
 
   // Set up all event listeners
@@ -78,6 +94,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     for (const controlEl of controlEls) {
       controlEl.addEventListener('focus', onControlFocus);
     }
+    document.addEventListener('keydown', onKeydown);
   };
 
   init();

From 0b39b22f0233587c26aa3f96ace726bd62efad41 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 01:15:33 -0700
Subject: [PATCH 70/94] Fix comments

---
 .../subscription-choices/subscription-choices.test.ts    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscription-choices/subscription-choices.test.ts
index 571016678..1b0259b3f 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscription-choices/subscription-choices.test.ts
@@ -163,7 +163,7 @@ describe('Subscription Choices', () => {
         }
       );
 
-      // Navigate back quickly to confirm timeout getting cancelled
+      // Navigate back into the form
       await page.keyboard.down('Shift'); // Navigate backwards
       await page.keyboard.press('Tab'); // Submit button
       await page.keyboard.up('Shift'); // Release Shift key
@@ -176,15 +176,12 @@ describe('Subscription Choices', () => {
       // Should hide the form
       await page.keyboard.press('Escape');
 
-      // The form should now be visually hidden
+      // Confirm the form should is visually hidden
       ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
       expect(formHeight).toBeLessThanOrEqual(1);
       expect(formWidth).toBeLessThanOrEqual(1);
 
-      // Confirm the focus has moved back to the Weekly Digests link
-      // const weeklyDigestsBtn = await screen.getByRole('link', {
-      //   name: 'Get Weekly Digests',
-      // });
+      // The focus should reset back to the "weekly digests" link
       await expect(weeklyDigestsBtn).toHaveFocus();
     })
   );

From 32c928d182efc21146772d4a6b1fa6733afc2527 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 01:16:59 -0700
Subject: [PATCH 71/94] Fix typo

---
 src/components/subscription-choices/subscription-choices.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscription-choices/subscription-choices.ts
index 0a5f18a08..d5ba794bd 100644
--- a/src/components/subscription-choices/subscription-choices.ts
+++ b/src/components/subscription-choices/subscription-choices.ts
@@ -62,7 +62,7 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
     formEl.querySelector('input')?.focus();
   };
 
-  // Handles for the Escape keydown event
+  // Handler for the Escape keydown event
   const onKeydown = (event: KeyboardEvent) => {
     // We need to hide the form and reset the focus, we can get both by setting
     // the focus back to the "Get Weekly Digests" link.

From afc52b34481e6ad7e0a367573588b0190a93bfac Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 08:08:05 -0700
Subject: [PATCH 72/94] Use CSS grid because I couldn't flexbox correctly

---
 .../button-swap/button-swap.stories.mdx           |  1 -
 src/components/button-swap/button-swap.twig       | 12 ++----------
 .../subscription-choices.scss                     | 15 +++------------
 .../subscription-choices.twig                     |  2 --
 4 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/src/components/button-swap/button-swap.stories.mdx b/src/components/button-swap/button-swap.stories.mdx
index 88e8e9cfa..de5f2e713 100644
--- a/src/components/button-swap/button-swap.stories.mdx
+++ b/src/components/button-swap/button-swap.stories.mdx
@@ -75,7 +75,6 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
 
 - `class` (string): Appends a CSS class(es) to the root element.
 - `button_class` (string): Appends a CSS class(es) to the button element.
-- `button_wrapper_class` (string): Appends a CSS class(es) to the button wrapper element that contains the button and visually hidden text.
 - `content_start_icon` (string, default `'bell'`): The button [icon](/docs/design-icons--page) (the same icon is applied to both buttons).
 - `initial_label` (string, default `'Unsubscribed from notifications'`): The first button visually hidden text.
 - `initial_visual_label` (string, default `'Get notifications'`): The first button label.
diff --git a/src/components/button-swap/button-swap.twig b/src/components/button-swap/button-swap.twig
index f8208f642..a236594db 100644
--- a/src/components/button-swap/button-swap.twig
+++ b/src/components/button-swap/button-swap.twig
@@ -3,11 +3,7 @@
   End icon support can be added in the future if needed.
 #}
 <div class="c-button-swap js-button-swap{% if class %} {{ class }}{% endif %}">
-  <div class="{{[
-    'c-button-swap__subscribe',
-    'js-button-swap__initial-button-wrapper',
-    button_wrapper_class
-  ]|join(' ')}}">
+  <div class="c-button-swap__subscribe js-button-swap__initial-button-wrapper">
     <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
       {{ initial_label|default('Currently unsubscribed from notifications') }}
     </span>
@@ -18,11 +14,7 @@
       label: initial_visual_label|default('Get notifications')
     } only %}
   </div>
-  <div class="{{[
-    'c-button-swap__unsubscribe',
-    'js-button-swap__swapped-button-wrapper',
-    button_wrapper_class
-  ]|join(' ')}}" hidden>
+  <div class="c-button-swap__unsubscribe js-button-swap__swapped-button-wrapper" hidden>
     <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
       {{ swapped_label|default('Currently subscribed to notifications') }}
     </span>
diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 969b7ff8b..6b7ff46de 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -13,26 +13,17 @@
 }
 
 .c-subscribe__controls-wrapper {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: 1em;
   margin: size.$rhythm-default 0;
 
-  .c-subscribe__button-swap {
-    flex: 1;
-  }
-
-  .c-subscribe__button-swap-button-wrapper {
-    display: flex;
-  }
-
   @media (min-width: breakpoint.$s) {
-    flex-direction: row;
+    grid-template-columns: 1fr 1fr;
   }
 }
 
 .c-subscribe__control {
-  flex: 1;
+  width: 100%;
 }
 
 ///
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscription-choices/subscription-choices.twig
index 8c309cb12..e0b382cf4 100644
--- a/src/components/subscription-choices/subscription-choices.twig
+++ b/src/components/subscription-choices/subscription-choices.twig
@@ -8,11 +8,9 @@
 
     <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        class: 'c-subscribe__button-swap',
         button_class: "c-subscribe__control
 js-subscription-choices__control
 #{notifications_btn_class|default('')}",
-        button_wrapper_class: "c-subscribe__button-swap-button-wrapper",
         initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
         initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
         swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),

From fb5c566125050851edb0346936f302bbfae21cc5 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Wed, 23 Mar 2022 11:22:18 -0700
Subject: [PATCH 73/94] Update
 src/components/button-swap/button-swap.stories.mdx

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>
---
 src/components/button-swap/button-swap.stories.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button-swap/button-swap.stories.mdx b/src/components/button-swap/button-swap.stories.mdx
index de5f2e713..0cd11f983 100644
--- a/src/components/button-swap/button-swap.stories.mdx
+++ b/src/components/button-swap/button-swap.stories.mdx
@@ -73,8 +73,8 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
 
 ## Template Properties
 
-- `class` (string): Appends a CSS class(es) to the root element.
-- `button_class` (string): Appends a CSS class(es) to the button element.
+- `class` (string): Appends to the CSS class of the root element.
+- `button_class` (string): Appends to the CSS class of the button element.
 - `content_start_icon` (string, default `'bell'`): The button [icon](/docs/design-icons--page) (the same icon is applied to both buttons).
 - `initial_label` (string, default `'Unsubscribed from notifications'`): The first button visually hidden text.
 - `initial_visual_label` (string, default `'Get notifications'`): The first button label.

From 5c744b3aca182f854d3d8e0ba8c06ce81a1c6544 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Wed, 23 Mar 2022 11:25:50 -0700
Subject: [PATCH 74/94] Update
 src/components/subscription-choices/subscription-choices.scss

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>
---
 src/components/subscription-choices/subscription-choices.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscription-choices/subscription-choices.scss
index 6b7ff46de..19f4bc97c 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscription-choices/subscription-choices.scss
@@ -5,7 +5,7 @@
 @use '../../mixins/theme';
 
 ///
-/// Subscription Choices
+/// Subscribe component
 ///
 
 .c-subscribe {

From 2ab70153d8c4054bb303f242e9c8fe7314507e26 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 11:26:36 -0700
Subject: [PATCH 75/94] Update changeset

---
 .changeset/little-colts-happen.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/little-colts-happen.md b/.changeset/little-colts-happen.md
index 8b8207b56..acaf1ad26 100644
--- a/.changeset/little-colts-happen.md
+++ b/.changeset/little-colts-happen.md
@@ -2,4 +2,6 @@
 '@cloudfour/patterns': minor
 ---
 
-Add Subscription Choices component
+- Add Subscribe component
+- Update CI workflow to use Node 16
+- Add `button_class` template prop to the Button Swap component

From 013e962988ce5692a91aebff0e45e2e88581b97a Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 11:31:33 -0700
Subject: [PATCH 76/94] subscription-choices -> subscribe

---
 .../{subscription-choices => subscribe}/demo/demo.twig      | 0
 .../subscription-choices.scss => subscribe/subscribe.scss}  | 2 +-
 .../subscribe.stories.mdx}                                  | 6 +++---
 .../subscribe.test.ts}                                      | 2 +-
 .../subscription-choices.ts => subscribe/subscribe.ts}      | 0
 .../subscription-choices.twig => subscribe/subscribe.twig}  | 0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{subscription-choices => subscribe}/demo/demo.twig (100%)
 rename src/components/{subscription-choices/subscription-choices.scss => subscribe/subscribe.scss} (98%)
 rename src/components/{subscription-choices/subscription-choices.stories.mdx => subscribe/subscribe.stories.mdx} (97%)
 rename src/components/{subscription-choices/subscription-choices.test.ts => subscribe/subscribe.test.ts} (99%)
 rename src/components/{subscription-choices/subscription-choices.ts => subscribe/subscribe.ts} (100%)
 rename src/components/{subscription-choices/subscription-choices.twig => subscribe/subscribe.twig} (100%)

diff --git a/src/components/subscription-choices/demo/demo.twig b/src/components/subscribe/demo/demo.twig
similarity index 100%
rename from src/components/subscription-choices/demo/demo.twig
rename to src/components/subscribe/demo/demo.twig
diff --git a/src/components/subscription-choices/subscription-choices.scss b/src/components/subscribe/subscribe.scss
similarity index 98%
rename from src/components/subscription-choices/subscription-choices.scss
rename to src/components/subscribe/subscribe.scss
index 19f4bc97c..0a2b93aff 100644
--- a/src/components/subscription-choices/subscription-choices.scss
+++ b/src/components/subscribe/subscribe.scss
@@ -23,7 +23,7 @@
 }
 
 .c-subscribe__control {
-  width: 100%;
+  inline-size: 100%;
 }
 
 ///
diff --git a/src/components/subscription-choices/subscription-choices.stories.mdx b/src/components/subscribe/subscribe.stories.mdx
similarity index 97%
rename from src/components/subscription-choices/subscription-choices.stories.mdx
rename to src/components/subscribe/subscribe.stories.mdx
index b9be72f43..6d36fb009 100644
--- a/src/components/subscription-choices/subscription-choices.stories.mdx
+++ b/src/components/subscribe/subscribe.stories.mdx
@@ -1,8 +1,8 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
 import { makeTwigInclude } from '../../make-twig-include';
-import template from './subscription-choices.twig';
-import { initSubscriptionChoices } from './subscription-choices.ts';
+import template from './subscribe.twig';
+import { initSubscriptionChoices } from './subscribe.ts';
 // Helper function to initialize toggling button JS
 const templateStory = (args) => {
   useEffect(() => {
@@ -17,7 +17,7 @@ const templateStory = (args) => {
 };
 
 <Meta
-  title="Components/Subscription Choices"
+  title="Components/Subscribe"
   argTypes={{
     form_id: {
       type: { name: 'string', required: true },
diff --git a/src/components/subscription-choices/subscription-choices.test.ts b/src/components/subscribe/subscribe.test.ts
similarity index 99%
rename from src/components/subscription-choices/subscription-choices.test.ts
rename to src/components/subscribe/subscribe.test.ts
index 1b0259b3f..131850ca8 100644
--- a/src/components/subscription-choices/subscription-choices.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -5,7 +5,7 @@ import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
 
 // Helper to load the Twig template file
 const componentMarkup = loadTwigTemplate(
-  path.join(__dirname, './subscription-choices.twig')
+  path.join(__dirname, './subscribe.twig')
 );
 // Helper to load the demo Twig template file
 const demoMarkup = loadTwigTemplate(path.join(__dirname, './demo/demo.twig'));
diff --git a/src/components/subscription-choices/subscription-choices.ts b/src/components/subscribe/subscribe.ts
similarity index 100%
rename from src/components/subscription-choices/subscription-choices.ts
rename to src/components/subscribe/subscribe.ts
diff --git a/src/components/subscription-choices/subscription-choices.twig b/src/components/subscribe/subscribe.twig
similarity index 100%
rename from src/components/subscription-choices/subscription-choices.twig
rename to src/components/subscribe/subscribe.twig

From dd7a6da443768d14e2a001455711510123cb69cc Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Wed, 23 Mar 2022 11:33:01 -0700
Subject: [PATCH 77/94] Update src/components/subscribe/subscribe.test.ts

---
 src/components/subscribe/subscribe.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index 131850ca8..d7adc7c40 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -19,7 +19,7 @@ const initJS = (utils: PleasantestUtils) =>
     )
   `);
 
-describe('Subscription Choices', () => {
+describe('Subscription', () => {
   test(
     'should use semantic markup',
     withBrowser(async ({ utils, page }) => {

From 1a6ca26ed36c4dfcc849112a1c7a349b05de3c41 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 11:39:52 -0700
Subject: [PATCH 78/94] More filename updates

---
 src/components/subscribe/demo/demo.twig       |  2 +-
 .../subscribe/subscribe.stories.mdx           | 22 +++++++++----------
 src/components/subscribe/subscribe.test.ts    | 12 +++++-----
 src/components/subscribe/subscribe.ts         | 10 ++++-----
 src/components/subscribe/subscribe.twig       | 12 +++++-----
 5 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/subscribe/demo/demo.twig b/src/components/subscribe/demo/demo.twig
index 3d91036c3..f953cf61d 100644
--- a/src/components/subscribe/demo/demo.twig
+++ b/src/components/subscribe/demo/demo.twig
@@ -1,4 +1,4 @@
-{% embed '@cloudfour/components/subscription-choices/subscription-choices.twig' with {
+{% embed '@cloudfour/components/subscribe/subscribe.twig' with {
   form_id: 'test'
 } only %}{% endembed %}
 
diff --git a/src/components/subscribe/subscribe.stories.mdx b/src/components/subscribe/subscribe.stories.mdx
index 6d36fb009..361d50d67 100644
--- a/src/components/subscribe/subscribe.stories.mdx
+++ b/src/components/subscribe/subscribe.stories.mdx
@@ -2,13 +2,13 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
 import { makeTwigInclude } from '../../make-twig-include';
 import template from './subscribe.twig';
-import { initSubscriptionChoices } from './subscribe.ts';
+import { initSubscribe } from './subscribe.ts';
 // Helper function to initialize toggling button JS
 const templateStory = (args) => {
   useEffect(() => {
-    const templateEls = [
-      ...document.querySelectorAll('.js-subscription-choices'),
-    ].map((templateEl) => initSubscriptionChoices(templateEl));
+    const templateEls = [...document.querySelectorAll('.js-subscribe')].map(
+      (templateEl) => initSubscribe(templateEl)
+    );
     return () => {
       for (const templateEl of templateEls) templateEl.destroy();
     };
@@ -74,7 +74,7 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
       docs: {
         source: {
           code: makeTwigInclude(
-            '@cloudfour/components/subscription-choices/subscription-choices.twig',
+            '@cloudfour/components/subscribe/subscribe.twig',
             {
               form_id: 'example-demo',
             }
@@ -125,14 +125,14 @@ Choices component elements.
 ### Syntax
 
 ```js
-initSubscriptionChoices(subscriptionChoicesEl);
+initSubscribe(subscriptionChoicesEl);
 ```
 
 ### Parameters
 
 #### `subscriptionChoicesEl`
 
-The Subscription Choices component `.js-subscription-choices` root element.
+The Subscription Choices component `.js-subscribe` root element.
 
 ### Return value
 
@@ -150,8 +150,8 @@ An object with a `destroy` function that removes all event listeners added by th
 
 ```js
 // Initialize
-const subscriptionChoicesEl = initSubscriptionChoices(
-  document.querySelector('.js-subscription-choices')
+const subscriptionChoicesEl = initSubscribe(
+  document.querySelector('.js-subscribe')
 );
 
 // Remove all event listeners
@@ -163,8 +163,8 @@ subscriptionChoicesEl.destroy();
 ```js
 // Initialize
 const subscriptionChoiceEls = [
-  ...document.querySelectorAll('.js-subscription-choices'),
-].map((subscriptionChoiceEl) => initSubscriptionChoices(subscriptionChoiceEl));
+  ...document.querySelectorAll('.js-subscribe'),
+].map((subscriptionChoiceEl) => initSubscribe(subscriptionChoiceEl));
 
 // Remove all event listeners
 for (const subscriptionChoiceEl of subscriptionChoiceEls) {
diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index d7adc7c40..529cb64ca 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -13,9 +13,9 @@ const demoMarkup = loadTwigTemplate(path.join(__dirname, './demo/demo.twig'));
 // Helper to initialize the component JS
 const initJS = (utils: PleasantestUtils) =>
   utils.runJS(`
-    import { initSubscriptionChoices } from './subscription-choices'
-    export default () => initSubscriptionChoices(
-      document.querySelector('.js-subscription-choices')
+    import { initSubscribe } from './subscribe'
+    export default () => initSubscribe(
+      document.querySelector('.js-subscribe')
     )
   `);
 
@@ -24,7 +24,7 @@ describe('Subscription', () => {
     'should use semantic markup',
     withBrowser(async ({ utils, page }) => {
       await loadGlobalCSS(utils);
-      await utils.loadCSS('./subscription-choices.scss');
+      await utils.loadCSS('./subscribe.scss');
       await utils.injectHTML(await componentMarkup());
       await initJS(utils);
 
@@ -51,7 +51,7 @@ describe('Subscription', () => {
     'should be keyboard accessible',
     withBrowser(async ({ utils, screen, waitFor, page }) => {
       await loadGlobalCSS(utils);
-      await utils.loadCSS('./subscription-choices.scss');
+      await utils.loadCSS('./subscribe.scss');
       await utils.injectHTML(await demoMarkup());
       await initJS(utils);
 
@@ -191,7 +191,7 @@ describe('Subscription', () => {
     withBrowser(async ({ utils, screen }) => {
       // Set up CSS
       await loadGlobalCSS(utils);
-      await utils.loadCSS('./subscription-choices.scss');
+      await utils.loadCSS('./subscribe.scss');
 
       // No customization
       await utils.injectHTML(await componentMarkup({ form_id: 'test' }));
diff --git a/src/components/subscribe/subscribe.ts b/src/components/subscribe/subscribe.ts
index d5ba794bd..dc5da56a0 100644
--- a/src/components/subscribe/subscribe.ts
+++ b/src/components/subscribe/subscribe.ts
@@ -5,7 +5,7 @@
  * form hide delay when the focus exits the Subscriptoin Choices component if
  * the form is open.
  */
-export const initSubscriptionChoices = (containerEl: HTMLElement) => {
+export const initSubscribe = (containerEl: HTMLElement) => {
   const SHOW_FORM_CLASS = 'activate-form';
   const BLUR_TIMEOUT = 1000; // Milliseconds
 
@@ -16,20 +16,18 @@ export const initSubscriptionChoices = (containerEl: HTMLElement) => {
 
   // Query all the required elements
   const getWeeklyDigestsBtn = containerEl.querySelector(
-    '.js-subscription-choices__get-weekly-digests-btn'
+    '.js-subscribe__get-weekly-digests-btn'
   );
   const formEl = containerEl.querySelector('form');
   const formFocusableEls = containerEl.querySelectorAll('label, input, button');
-  const controlEls = containerEl.querySelectorAll(
-    '.js-subscription-choices__control'
-  );
+  const controlEls = containerEl.querySelectorAll('.js-subscribe__control');
 
   // Confirm we have what we need to proceed
   if (!getWeeklyDigestsBtn || !formEl) {
     return;
   }
 
-  // Hide the form anytime a `js-subscription-choices__control` gets focus
+  // Hide the form anytime a `js-subscribe__control` gets focus
   const onControlFocus = () => {
     clearTimeout(blurTimeoutId);
     containerEl.classList.remove(SHOW_FORM_CLASS);
diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index e0b382cf4..1befa6c91 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -1,6 +1,6 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
-<div class="c-subscribe js-subscription-choices{% if class %} {{ class }}{% endif %}">
+<div class="c-subscribe js-subscribe{% if class %} {{ class }}{% endif %}">
   <div class="c-subscribe__controls">
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}
@@ -9,7 +9,7 @@
     <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
         button_class: "c-subscribe__control
-js-subscription-choices__control
+js-subscribe__control
 #{notifications_btn_class|default('')}",
         initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
         initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
@@ -18,10 +18,10 @@ js-subscription-choices__control
       } only %}
 
       {% include '@cloudfour/components/button/button.twig' with {
-        href: "#subscription-choices-#{form_id}",
+        href: "#subscribe-#{form_id}",
         class: "c-subscribe__control
-js-subscription-choices__control
-js-subscription-choices__get-weekly-digests-btn
+js-subscribe__control
+js-subscribe__get-weekly-digests-btn
 #{weekly_digests_btn_class|default('')}",
         label: weekly_digests_btn_label|default('Get Weekly Digests'),
         content_start_icon: weekly_digests_btn_icon|default('envelope')
@@ -30,7 +30,7 @@ js-subscription-choices__get-weekly-digests-btn
   </div>
 
   <form
-    id="subscription-choices-{{form_id}}"
+    id="subscribe-{{form_id}}"
     action="{{form_action|default('https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67')}}"
     method="post"
     target="_blank"

From 0d3b273f510bc42f8df41b3371de924bc9ea31ba Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 17:18:27 -0700
Subject: [PATCH 79/94] More title changes

---
 src/components/subscribe/subscribe.stories.mdx | 17 +++++++++--------
 src/components/subscribe/subscribe.ts          |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/subscribe/subscribe.stories.mdx b/src/components/subscribe/subscribe.stories.mdx
index 361d50d67..138b0526e 100644
--- a/src/components/subscribe/subscribe.stories.mdx
+++ b/src/components/subscribe/subscribe.stories.mdx
@@ -57,9 +57,9 @@ const templateStory = (args) => {
   }}
 />
 
-# Subscription Choices
+# Subscribe
 
-The Subscription Choices component provides the UI to subscribe to notifications and/or email weekly digests.
+The Subscribe component provides the UI to subscribe to notifications and/or email weekly digests.
 
 This component embeds the [Button Swap component](?path=/docs/components-button-swap--default-story) for the "Get Notifications" button.
 
@@ -118,9 +118,10 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 ## JavaScript
 
-The Subscription Choices component UX can be progressively enhanced by adding
-a 1 second form hide delay when `:focus` is moved away from the Subscription
-Choices component elements.
+The Subscribe component UX can be progressively enhanced using JavaScript in the following ways:
+
+- A one second form hide delay is added when `:focus` is moved away from the Subscribe component elements
+- The form can be hidden by pressing the <kbd>Escape</kbd> key
 
 ### Syntax
 
@@ -132,7 +133,7 @@ initSubscribe(subscriptionChoicesEl);
 
 #### `subscriptionChoicesEl`
 
-The Subscription Choices component `.js-subscribe` root element.
+The Subscribe component `.js-subscribe` root element.
 
 ### Return value
 
@@ -146,7 +147,7 @@ An object with a `destroy` function that removes all event listeners added by th
 
 ### Examples
 
-#### Single Subscription Choices component on the page
+#### Single Subscribe component on the page
 
 ```js
 // Initialize
@@ -158,7 +159,7 @@ const subscriptionChoicesEl = initSubscribe(
 subscriptionChoicesEl.destroy();
 ```
 
-#### Multiple Subscription Choices components on the page
+#### Multiple Subscribe components on the page
 
 ```js
 // Initialize
diff --git a/src/components/subscribe/subscribe.ts b/src/components/subscribe/subscribe.ts
index dc5da56a0..6b15e48ac 100644
--- a/src/components/subscribe/subscribe.ts
+++ b/src/components/subscribe/subscribe.ts
@@ -1,7 +1,7 @@
 /**
- * Subscription Choices
+ * Subscribe
  *
- * Progressively enhances the UX for the Subscription Choices component. Adds a
+ * Progressively enhances the UX for the Subscribe component. Adds a
  * form hide delay when the focus exits the Subscriptoin Choices component if
  * the form is open.
  */

From 2a85120d80af06a4f1be3d8b01206d0f04e786ff Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 17:39:13 -0700
Subject: [PATCH 80/94] PR feedback

---
 src/components/subscribe/subscribe.twig | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index 1befa6c91..cb12a1215 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -1,6 +1,6 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
-<div class="c-subscribe js-subscribe{% if class %} {{ class }}{% endif %}">
+<div class="{{['c-subscribe', 'js-subscribe', class|default('')]|join(' ')}}">
   <div class="c-subscribe__controls">
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}
@@ -8,9 +8,11 @@
 
     <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        button_class: "c-subscribe__control
-js-subscribe__control
-#{notifications_btn_class|default('')}",
+        button_class: [
+          'c-subscribe__control',
+          'js-subscribe__control',
+          notifications_btn_class|default('')
+        ]|join(' '),
         initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
         initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
         swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
@@ -19,10 +21,12 @@ js-subscribe__control
 
       {% include '@cloudfour/components/button/button.twig' with {
         href: "#subscribe-#{form_id}",
-        class: "c-subscribe__control
-js-subscribe__control
-js-subscribe__get-weekly-digests-btn
-#{weekly_digests_btn_class|default('')}",
+        class: [
+          'c-subscribe__control',
+          'js-subscribe__control',
+          'js-subscribe__get-weekly-digests-btn',
+          weekly_digests_btn_class|default('')
+        ]|join(' '),
         label: weekly_digests_btn_label|default('Get Weekly Digests'),
         content_start_icon: weekly_digests_btn_icon|default('envelope')
       } only %}

From 297f7044e981a72637c3bc80f67e8d01aa08b98a Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Wed, 23 Mar 2022 18:51:18 -0700
Subject: [PATCH 81/94] Use an ArgsTable

---
 .../subscribe/subscribe.stories.mdx           | 177 +++++++++++++-----
 1 file changed, 126 insertions(+), 51 deletions(-)

diff --git a/src/components/subscribe/subscribe.stories.mdx b/src/components/subscribe/subscribe.stories.mdx
index 138b0526e..8782d4ab7 100644
--- a/src/components/subscribe/subscribe.stories.mdx
+++ b/src/components/subscribe/subscribe.stories.mdx
@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs';
 import { useEffect } from '@storybook/client-api';
 import { makeTwigInclude } from '../../make-twig-include';
 import template from './subscribe.twig';
@@ -21,38 +21,141 @@ const templateStory = (args) => {
   argTypes={{
     form_id: {
       type: { name: 'string', required: true },
-      description: 'The ID used for the email subscription form',
+      description: 'Appends to the Weekly Digests form `id` (should be unique)',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
     },
     class: {
       type: 'string',
-      description: 'CSS class(es) to add to the root element',
+      description: 'Appends to the CSS class of the root element',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    form_action: {
+      type: 'string',
+      description: 'The Weekly Digests form `action` value',
+      table: {
+        defaultValue: {
+          summary:
+            'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67',
+        },
+      },
     },
     heading_tag: {
       type: 'string',
-      defaultValue: 'h2',
-      description: 'The heading value for the headings',
+      description: 'Sets the heading value',
+      table: {
+        defaultValue: { summary: 'h2' },
+      },
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
       control: 'select',
     },
     never_miss_article_heading: {
       type: 'string',
-      defaultValue: 'Never miss an article!',
+      description: "The heading seen in the component's default state",
+      table: {
+        defaultValue: {
+          summary: 'Never miss an article!',
+        },
+      },
+    },
+    notifications_btn_class: {
+      type: 'string',
+      description: 'Appends to the CSS class of the "Get notifications" button',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    notifications_btn_initial_label: {
+      type: 'string',
+      description:
+        'See [Button Swap `initial_label`](/?path=/docs/components-button-swap--default-story#template-properties)',
+      table: {
+        defaultValue: { summary: 'Notifications have been turned off.' },
+      },
+    },
+    notifications_btn_initial_visual_label: {
+      type: 'string',
+      description:
+        'See [Button Swap `initial_visual_label`](/?path=/docs/components-button-swap--default-story#template-properties)',
+      table: { defaultValue: { summary: 'Get notifications' } },
+    },
+    notifications_btn_swapped_label: {
+      type: 'string',
+      description:
+        'See [Button Swap `swapped_label`](/?path=/docs/components-button-swap--default-story#template-properties)',
+      table: {
+        defaultValue: { summary: 'Notifications have been turned on.' },
+      },
+    },
+    notifications_btn_swapped_visual_label: {
+      type: 'string',
+      description:
+        'See [Button Swap `swapped_visual_label`](/?path=/docs/components-button-swap--default-story#template-properties)',
+      table: {
+        defaultValue: { summary: 'Turn off notifications' },
+      },
+    },
+    weekly_digests_btn_class: {
+      type: 'string',
+      description:
+        'Appends to the CSS class of the "Get Weekly Digests" button',
+      table: {
+        defaultValue: { summary: '' },
+      },
     },
     weekly_digests_btn_label: {
       type: 'string',
-      defaultValue: 'Get Weekly Digests',
+      description: 'The "Get Weekly Digests" button label',
+      table: {
+        defaultValue: { summary: 'Get Weekly Digests' },
+      },
+    },
+    weekly_digests_btn_icon: {
+      type: 'string',
+      description:
+        'The "Get Weekly Digests" button [icon](/?path=/docs/design-icons--page)',
+      table: {
+        defaultValue: { summary: 'envelope' },
+      },
+      options: ['envelope', 'heart', 'plus'],
+      control: 'select',
     },
     weekly_digests_heading: {
       type: 'string',
-      defaultValue: 'Get Weekly Digests',
+      description: 'The subscription form heading',
+      table: {
+        defaultValue: { summary: 'Get Weekly Digests' },
+      },
+    },
+    email_input_label: {
+      type: 'string',
+      description: 'The email input `<label>` value',
+      table: {
+        defaultValue: { summary: 'Email' },
+      },
     },
     email_input_placeholder: {
       type: 'string',
-      defaultValue: 'Your Email Address',
+      description: 'The email input placeholder text',
+      table: {
+        defaultValue: { summary: 'Your Email Address' },
+      },
     },
     submit_btn_label: {
       type: 'string',
-      defaultValue: 'Subscribe',
+      description: 'The subscription form submit button label',
+      table: {
+        defaultValue: { summary: 'Subscribe' },
+      },
     },
   }}
 />
@@ -61,11 +164,10 @@ const templateStory = (args) => {
 
 The Subscribe component provides the UI to subscribe to notifications and/or email weekly digests.
 
-This component embeds the [Button Swap component](?path=/docs/components-button-swap--default-story) for the "Get Notifications" button.
+This component embeds the [Button Swap component](/?path=/docs/components-button-swap--default-story) for the "Get Notifications" button.
 
 <Canvas>
   <Story
-    inline={false}
     name="Default"
     args={{
       form_id: 'example-demo',
@@ -89,36 +191,11 @@ This component embeds the [Button Swap component](?path=/docs/components-button-
 
 ## Template Properties
 
-### Required
-
-| property  | type   | default | description                                                          |
-| --------- | ------ | ------- | -------------------------------------------------------------------- |
-| `form_id` | string | `''`    | Appends this value to the weekly digest form `id`, should be unique. |
-
-### Optional
-
-| property                                 | type   | default                                 | description                                                                                                     |
-| ---------------------------------------- | ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `class`                                  | string | `''`                                    | Appends a CSS class(es) to the root `.c-subscribe` element.                                                     |
-| `form_action`                            | string | TBD                                     | The subscription form `action` value                                                                            |
-| `heading_tag`                            | string | `'h2'`                                  | The heading value (`h1`-`h6`)                                                                                   |
-| `never_miss_article_heading`             | string | `'Never miss an article!'`              | The default heading                                                                                             |
-| `notifications_btn_class`                | string | `''`                                    | Appends a CSS class(es) to the "Get notifications" button                                                       |
-| `notifications_btn_initial_label`        | string | `'Notifications have been turned off.'` | See [Button Swap `initial_label`](?path=/docs/components-button-swap--default-story#template-properties)        |
-| `notifications_btn_initial_visual_label` | string | `'Get notifications'`                   | See [Button Swap `initial_visual_label`](?path=/docs/components-button-swap--default-story#template-properties) |
-| `notifications_btn_swapped_label`        | string | `'Notifications have been turned on.'`  | See [Button Swap `swapped_label`](?path=/docs/components-button-swap--default-story#template-properties)        |
-| `notifications_btn_swapped_visual_label` | string | `'Turn off notifications'`              | See [Button Swap `swapped_visual_label`](?path=/docs/components-button-swap--default-story#template-properties) |
-| `weekly_digests_btn_class`               | string | `''`                                    | Appends a CSS class(es) to the "Weekly Digests" button                                                          |
-| `weekly_digests_btn_label`               | string | `'Get Weekly Digests'`                  | The "Weekly Digests" button label                                                                               |
-| `weekly_digests_btn_icon`                | string | `'envelope' `                           | The "Weekly Digests" button [icon](?path=/docs/design-icons--page)                                              |
-| `weekly_digests_heading`                 | string | `'Get Weekly Digests'`                  | The subscription form heading                                                                                   |
-| `email_input_label`                      | string | `'Email'`                               | The email input label                                                                                           |
-| `email_input_placeholder`                | string | `'Your Email Address'`                  | The email input placeholder text                                                                                |
-| `submit_btn_label`                       | string | `'Subscribe'`                           | The subscription form submit button label                                                                       |
+<ArgsTable story="Default" />
 
 ## JavaScript
 
-The Subscribe component UX can be progressively enhanced using JavaScript in the following ways:
+The Subscribe component UX can be progressively enhanced using JavaScript. Enhancements include:
 
 - A one second form hide delay is added when `:focus` is moved away from the Subscribe component elements
 - The form can be hidden by pressing the <kbd>Escape</kbd> key
@@ -126,12 +203,12 @@ The Subscribe component UX can be progressively enhanced using JavaScript in the
 ### Syntax
 
 ```js
-initSubscribe(subscriptionChoicesEl);
+initSubscribe(subscribeEl);
 ```
 
 ### Parameters
 
-#### `subscriptionChoicesEl`
+#### `subscribeEl`
 
 The Subscribe component `.js-subscribe` root element.
 
@@ -151,30 +228,28 @@ An object with a `destroy` function that removes all event listeners added by th
 
 ```js
 // Initialize
-const subscriptionChoicesEl = initSubscribe(
-  document.querySelector('.js-subscribe')
-);
+const subscribeEl = initSubscribe(document.querySelector('.js-subscribe'));
 
 // Remove all event listeners
-subscriptionChoicesEl.destroy();
+subscribeEl.destroy();
 ```
 
 #### Multiple Subscribe components on the page
 
 ```js
 // Initialize
-const subscriptionChoiceEls = [
-  ...document.querySelectorAll('.js-subscribe'),
-].map((subscriptionChoiceEl) => initSubscribe(subscriptionChoiceEl));
+const subscribeEls = [...document.querySelectorAll('.js-subscribe')].map(
+  (subscribeEl) => initSubscribe(subscribeEl)
+);
 
 // Remove all event listeners
-for (const subscriptionChoiceEl of subscriptionChoiceEls) {
-  subscriptionChoiceEl.destroy();
+for (const subscribeEl of subscribeEls) {
+  subscribeEl.destroy();
 }
 ```
 
 ### Note
 
 You will need to initialize the "Get Notifications" button as well, see the
-[Button Swap component](?path=/docs/components-button-swap--default-story#javascript)
+[Button Swap component](/?path=/docs/components-button-swap--default-story#javascript)
 for initialization docs.

From c6276bb31108f78f99cbe753d7644267d0e2d1b2 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 05:48:16 -0700
Subject: [PATCH 82/94] Update comments

---
 src/components/subscribe/subscribe.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/subscribe/subscribe.ts b/src/components/subscribe/subscribe.ts
index 6b15e48ac..788b9b2ca 100644
--- a/src/components/subscribe/subscribe.ts
+++ b/src/components/subscribe/subscribe.ts
@@ -1,9 +1,12 @@
 /**
  * Subscribe
  *
- * Progressively enhances the UX for the Subscribe component. Adds a
- * form hide delay when the focus exits the Subscriptoin Choices component if
- * the form is open.
+ * Progressively enhances the UX for the Subscribe component.
+ *
+ * Enhancements include:
+ * - A one second form hide delay is added when `:focus` is moved away from the
+ *   Subscribe component elements
+ * - The form can be hidden by pressing the `Escape` key
  */
 export const initSubscribe = (containerEl: HTMLElement) => {
   const SHOW_FORM_CLASS = 'activate-form';

From 4295313469d38bf5daa2ae7716709cc1ca762051 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 06:07:26 -0700
Subject: [PATCH 83/94] Add a class template prop to Input Group

---
 .changeset/little-colts-happen.md             |  3 ++-
 .../input-group/input-group.stories.mdx       | 24 +++++++++++++++----
 src/objects/input-group/input-group.twig      |  2 +-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/.changeset/little-colts-happen.md b/.changeset/little-colts-happen.md
index acaf1ad26..015a28f38 100644
--- a/.changeset/little-colts-happen.md
+++ b/.changeset/little-colts-happen.md
@@ -4,4 +4,5 @@
 
 - Add Subscribe component
 - Update CI workflow to use Node 16
-- Add `button_class` template prop to the Button Swap component
+- Add a `button_class` template prop to the Button Swap component
+- Add a `class` template prop to the Input Group component
diff --git a/src/objects/input-group/input-group.stories.mdx b/src/objects/input-group/input-group.stories.mdx
index 9643d3503..3dc578247 100644
--- a/src/objects/input-group/input-group.stories.mdx
+++ b/src/objects/input-group/input-group.stories.mdx
@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs';
 // The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
 // See: https://github.com/webpack-contrib/raw-loader#examples
 // For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
@@ -9,9 +9,21 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs';
 // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
 import inputGroupDemoSource from '!!raw-loader!./demo/input-group-demo.twig';
 import inputGroupDemo from './demo/input-group-demo.twig';
-import './input-group.scss';
 
-<Meta title="Objects/Input Group" />
+<Meta
+  title="Objects/Input Group"
+  argTypes={{
+    class: {
+      type: 'string',
+      description: 'Appends to the CSS class of the root element',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  }}
+/>
 
 # Input Group
 
@@ -30,6 +42,10 @@ Buttons and inputs can be put in whatever order you choose.
       },
     }}
   >
-    {inputGroupDemo}
+    {(args) => inputGroupDemo(args)}
   </Story>
 </Canvas>
+
+## Template Properties
+
+<ArgsTable story="Example" />
diff --git a/src/objects/input-group/input-group.twig b/src/objects/input-group/input-group.twig
index 802652fa8..1333ae61a 100644
--- a/src/objects/input-group/input-group.twig
+++ b/src/objects/input-group/input-group.twig
@@ -1,3 +1,3 @@
-<div class="o-input-group">
+<div class="{{['o-input-group', class|default('')]|join(' ')}}">
   {% block content %} {% endblock %}
 </div>

From 627307894b1c0df409b57c58dc912946dac2c80c Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 09:36:45 -0700
Subject: [PATCH 84/94] Use Input Group component

---
 src/components/subscribe/subscribe.scss    |  7 ----
 src/components/subscribe/subscribe.test.ts |  2 +-
 src/components/subscribe/subscribe.twig    | 43 ++++++++++++++--------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/subscribe/subscribe.scss b/src/components/subscribe/subscribe.scss
index 0a2b93aff..a95bcc0e7 100644
--- a/src/components/subscribe/subscribe.scss
+++ b/src/components/subscribe/subscribe.scss
@@ -51,12 +51,5 @@
 }
 
 .c-subscribe__form-input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
   margin: size.$rhythm-default 0;
-
-  @media (min-width: breakpoint.$s) {
-    flex-direction: row;
-  }
 }
diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index 529cb64ca..9ca70a684 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -41,7 +41,7 @@ describe('Subscription', () => {
             heading "Get Weekly Digests"
               text "Get Weekly Digests"
             text "Email"
-            textbox "Email"
+            textbox
             button "Subscribe"
       `);
     })
diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index cb12a1215..5c698b065 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -45,21 +45,32 @@
       {{weekly_digests_heading|default('Get Weekly Digests')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscribe__form-input-group">
-      <label class="c-subscribe__form-input-label" for="subscription-email-{{form_id}}">
-        {{email_input_label|default('Email')}}
-      </label>
-      <input
-        id="subscription-email-{{form_id}}"
-        class="c-subscribe__form-input c-input"
-        type="text"
-        placeholder="{{email_input_placeholder|default('Your Email Address')}}"
-        autocomplete="home email",
-        required
-      />
-      <button class="c-subscribe__form-button c-button">
-        {{submit_btn_label|default('Subscribe')}}
-      </button>
-    </div>
+    <label
+      class="c-subscribe__form-input-label"
+      for="subscription-email-{{form_id}}"
+    >
+      {{email_input_label|default('Email')}}
+    </label>
+    {% embed '@cloudfour/objects/input-group/input-group.twig' with {
+      class: 'c-subscribe__form-input-group',
+      form_id: form_id,
+      email_input_placeholder: email_input_placeholder,
+      submit_btn_label: submit_btn_label
+    } only %}
+      {% block content %}
+        {% include '@cloudfour/components/input/input.twig' with {
+          id: "subscription-email-#{form_id}",
+          type: 'email',
+          class: 'c-subscribe__form-input',
+          placeholder: email_input_placeholder|default('Your Email Address'),
+          autocomplete: 'home email',
+          required: 'required'
+        } only %}
+        {% include '@cloudfour/components/button/button.twig' with {
+          class: 'c-subscribe__form-button',
+          label: submit_btn_label|default('Subscribe')
+        } only %}
+      {% endblock %}
+    {% endembed %}
   </form>
 </div>

From d06656bae952073c1429badd0ad2876fcc71b6f8 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Thu, 24 Mar 2022 11:54:32 -0700
Subject: [PATCH 85/94] Update src/components/subscribe/subscribe.twig

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>
---
 src/components/subscribe/subscribe.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index 5c698b065..98116e019 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -1,6 +1,6 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
-<div class="{{['c-subscribe', 'js-subscribe', class|default('')]|join(' ')}}">
+<div class="c-subscribe js-subscribe {{class}}">
   <div class="c-subscribe__controls">
     <{{_heading_tag}}>
       {{never_miss_article_heading|default('Never miss an article!')}}

From 7437d2aa75123686d39cfe029dc4f21ffd17c96a Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <gerardo@cloudfour.com>
Date: Thu, 24 Mar 2022 11:54:46 -0700
Subject: [PATCH 86/94] Update src/objects/input-group/input-group.twig

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>
---
 src/objects/input-group/input-group.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/objects/input-group/input-group.twig b/src/objects/input-group/input-group.twig
index 1333ae61a..01a8da79b 100644
--- a/src/objects/input-group/input-group.twig
+++ b/src/objects/input-group/input-group.twig
@@ -1,3 +1,3 @@
-<div class="{{['o-input-group', class|default('')]|join(' ')}}">
+<div class="o-input-group {{class}}">
   {% block content %} {% endblock %}
 </div>

From b2401fcd18300929a836d26c0c1ee2f916ecbc72 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 11:57:07 -0700
Subject: [PATCH 87/94] controls-wrapper -> controls

---
 src/components/subscribe/subscribe.scss | 2 +-
 src/components/subscribe/subscribe.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscribe/subscribe.scss b/src/components/subscribe/subscribe.scss
index a95bcc0e7..339071183 100644
--- a/src/components/subscribe/subscribe.scss
+++ b/src/components/subscribe/subscribe.scss
@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.c-subscribe__controls-wrapper {
+.c-subscribe__controls {
   display: grid;
   gap: 1em;
   margin: size.$rhythm-default 0;
diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index 5c698b065..9bc492b6a 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -6,7 +6,7 @@
       {{never_miss_article_heading|default('Never miss an article!')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscribe__controls-wrapper">
+    <div class="c-subscribe__controls">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
         button_class: [
           'c-subscribe__control',

From 14ce64e2b0d6c80a081765a2fd931dfe5cbac256 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:11:52 -0700
Subject: [PATCH 88/94] Revert controls-wrapper -> controls

---
 src/components/subscribe/subscribe.scss | 2 +-
 src/components/subscribe/subscribe.twig | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/subscribe/subscribe.scss b/src/components/subscribe/subscribe.scss
index 339071183..a95bcc0e7 100644
--- a/src/components/subscribe/subscribe.scss
+++ b/src/components/subscribe/subscribe.scss
@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.c-subscribe__controls {
+.c-subscribe__controls-wrapper {
   display: grid;
   gap: 1em;
   margin: size.$rhythm-default 0;
diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index d3a1c672d..98116e019 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -6,7 +6,7 @@
       {{never_miss_article_heading|default('Never miss an article!')}}
     </{{_heading_tag}}>
 
-    <div class="c-subscribe__controls">
+    <div class="c-subscribe__controls-wrapper">
       {% include '@cloudfour/components/button-swap/button-swap.twig' with {
         button_class: [
           'c-subscribe__control',

From c9e2af36d0f38ad0c46ae14e6629a96416c2ccba Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:15:55 -0700
Subject: [PATCH 89/94] PR feedback, make action not have default

---
 src/components/subscribe/subscribe.stories.mdx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/subscribe/subscribe.stories.mdx b/src/components/subscribe/subscribe.stories.mdx
index 8782d4ab7..7ac3aeed4 100644
--- a/src/components/subscribe/subscribe.stories.mdx
+++ b/src/components/subscribe/subscribe.stories.mdx
@@ -28,22 +28,21 @@ const templateStory = (args) => {
         },
       },
     },
-    class: {
-      type: 'string',
-      description: 'Appends to the CSS class of the root element',
+    form_action: {
+      type: { name: 'string', required: true },
+      description: 'The Weekly Digests form `action` value',
       table: {
         defaultValue: {
           summary: '',
         },
       },
     },
-    form_action: {
+    class: {
       type: 'string',
-      description: 'The Weekly Digests form `action` value',
+      description: 'Appends to the CSS class of the root element',
       table: {
         defaultValue: {
-          summary:
-            'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67',
+          summary: '',
         },
       },
     },

From 6e7d0dc6b2be8524831ff595f80437753419bc30 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:25:22 -0700
Subject: [PATCH 90/94] Remove controls-wrapper

---
 src/components/subscribe/subscribe.scss |  2 +-
 src/components/subscribe/subscribe.twig | 54 ++++++++++++-------------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/components/subscribe/subscribe.scss b/src/components/subscribe/subscribe.scss
index a95bcc0e7..339071183 100644
--- a/src/components/subscribe/subscribe.scss
+++ b/src/components/subscribe/subscribe.scss
@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.c-subscribe__controls-wrapper {
+.c-subscribe__controls {
   display: grid;
   gap: 1em;
   margin: size.$rhythm-default 0;
diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index 98116e019..a4503648a 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -1,36 +1,34 @@
 {% set _heading_tag = heading_tag|default('h2') %}
 
 <div class="c-subscribe js-subscribe {{class}}">
-  <div class="c-subscribe__controls">
-    <{{_heading_tag}}>
-      {{never_miss_article_heading|default('Never miss an article!')}}
-    </{{_heading_tag}}>
+  <{{_heading_tag}}>
+    {{never_miss_article_heading|default('Never miss an article!')}}
+  </{{_heading_tag}}>
 
-    <div class="c-subscribe__controls-wrapper">
-      {% include '@cloudfour/components/button-swap/button-swap.twig' with {
-        button_class: [
-          'c-subscribe__control',
-          'js-subscribe__control',
-          notifications_btn_class|default('')
-        ]|join(' '),
-        initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
-        initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
-        swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
-        swapped_visual_label: notifications_btn_swapped_visual_label|default('Turn off notifications'),
-      } only %}
+  <div class="c-subscribe__controls">
+    {% include '@cloudfour/components/button-swap/button-swap.twig' with {
+      button_class: [
+        'c-subscribe__control',
+        'js-subscribe__control',
+        notifications_btn_class|default('')
+      ]|join(' '),
+      initial_label: notifications_btn_initial_label|default('Notifications have been turned off.'),
+      initial_visual_label: notifications_btn_initial_visual_label|default('Get notifications'),
+      swapped_label: notifications_btn_swapped_label|default('Notifications have been turned on.'),
+      swapped_visual_label: notifications_btn_swapped_visual_label|default('Turn off notifications'),
+    } only %}
 
-      {% include '@cloudfour/components/button/button.twig' with {
-        href: "#subscribe-#{form_id}",
-        class: [
-          'c-subscribe__control',
-          'js-subscribe__control',
-          'js-subscribe__get-weekly-digests-btn',
-          weekly_digests_btn_class|default('')
-        ]|join(' '),
-        label: weekly_digests_btn_label|default('Get Weekly Digests'),
-        content_start_icon: weekly_digests_btn_icon|default('envelope')
-      } only %}
-    </div>
+    {% include '@cloudfour/components/button/button.twig' with {
+      href: "#subscribe-#{form_id}",
+      class: [
+        'c-subscribe__control',
+        'js-subscribe__control',
+        'js-subscribe__get-weekly-digests-btn',
+        weekly_digests_btn_class|default('')
+      ]|join(' '),
+      label: weekly_digests_btn_label|default('Get Weekly Digests'),
+      content_start_icon: weekly_digests_btn_icon|default('envelope')
+    } only %}
   </div>
 
   <form

From 810fdea02088aaeba66f2138b52cd5434c4941d7 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:35:07 -0700
Subject: [PATCH 91/94] Delete default form_action

---
 src/components/subscribe/subscribe.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscribe/subscribe.twig b/src/components/subscribe/subscribe.twig
index a4503648a..559ece996 100644
--- a/src/components/subscribe/subscribe.twig
+++ b/src/components/subscribe/subscribe.twig
@@ -33,7 +33,7 @@
 
   <form
     id="subscribe-{{form_id}}"
-    action="{{form_action|default('https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67')}}"
+    action="{{form_action}}"
     method="post"
     target="_blank"
     class="c-subscribe__form"

From 3ec5c817ada3aa91fdef7a0d8e317134fe324933 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:40:12 -0700
Subject: [PATCH 92/94] Update broken test

---
 src/components/subscribe/subscribe.test.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index 9ca70a684..679534b4f 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -207,13 +207,6 @@ describe('Subscription', () => {
       });
 
       // Confirm default form values
-      let form = await screen.getByRole('form', {
-        name: 'Get Weekly Digests',
-      });
-      expect(form).toHaveAttribute(
-        'action',
-        'https://cloudfour.us13.list-manage.com/subscribe/post?u=ce064f42c86a5982dd218d4de&amp;id=7e505a6a67'
-      );
       let emailInput = await screen.getByRole('textbox', { name: 'Email' });
       expect(emailInput).toHaveAttribute('placeholder', 'Your Email Address');
 

From 73159e1b6951d013729c1d7e22b9787713993857 Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 12:41:36 -0700
Subject: [PATCH 93/94] Fix syntax error

---
 src/components/subscribe/subscribe.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index 679534b4f..07af05464 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -238,7 +238,7 @@ describe('Subscription', () => {
       });
 
       // Confirm custom form values
-      form = await screen.getByRole('form', {
+      const form = await screen.getByRole('form', {
         name: 'Weekly digests available',
       });
       expect(form).toHaveAttribute('action', 'test-action.com');

From c9216fdc855dc8c940c79c983e280325d7b069ff Mon Sep 17 00:00:00 2001
From: Gerardo Rodriguez <mr.gerardo.rodriguez@gmail.com>
Date: Thu, 24 Mar 2022 13:26:06 -0700
Subject: [PATCH 94/94] Address feedback from Caleb

---
 src/components/subscribe/subscribe.test.ts | 90 +++++++++++-----------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/src/components/subscribe/subscribe.test.ts b/src/components/subscribe/subscribe.test.ts
index 07af05464..744af568b 100644
--- a/src/components/subscribe/subscribe.test.ts
+++ b/src/components/subscribe/subscribe.test.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import type { PleasantestUtils } from 'pleasantest';
+import type { ElementHandle, PleasantestUtils } from 'pleasantest';
 import { withBrowser, getAccessibilityTree } from 'pleasantest';
 import { loadTwigTemplate, loadGlobalCSS } from '../../../test-utils';
 
@@ -10,6 +10,39 @@ const componentMarkup = loadTwigTemplate(
 // Helper to load the demo Twig template file
 const demoMarkup = loadTwigTemplate(path.join(__dirname, './demo/demo.twig'));
 
+/**
+ * Helper function that checks the `clientHeight` and `clientWidth` of
+ * a given element, expects dimensions to be smaller than or equal to `1`
+ * meaning the element is visually hidden.
+ */
+const expectElementToBeVisuallyHidden = async (
+  element: ElementHandle<HTMLElement>
+) => {
+  const { elHeight, elWidth } = await element.evaluate((el: HTMLElement) => ({
+    elHeight: el.clientHeight,
+    elWidth: el.clientWidth,
+  }));
+  expect(elHeight).toBeLessThanOrEqual(1);
+  expect(elWidth).toBeLessThanOrEqual(1);
+};
+
+/**
+ * Helper function that checks the `clientHeight` and `clientWidth` of
+ * given element, expects dimensions to be greater than or equal to `1`
+ * meaning the element is not visually hidden.
+ */
+const expectElementNotToBeVisuallyHidden = async (
+  form: ElementHandle<HTMLElement>
+) => {
+  const { elHeight, elWidth } = await form.evaluate((el: HTMLElement) => ({
+    elHeight: el.clientHeight,
+    elWidth: el.clientWidth,
+  }));
+
+  expect(elHeight).toBeGreaterThan(1);
+  expect(elWidth).toBeGreaterThan(1);
+};
+
 // Helper to initialize the component JS
 const initJS = (utils: PleasantestUtils) =>
   utils.runJS(`
@@ -55,25 +88,11 @@ describe('Subscription', () => {
       await utils.injectHTML(await demoMarkup());
       await initJS(utils);
 
-      // Helper function used throughout this test
-      //
-      // I eslint-disabled because it was wanted me to pull this function
-      // outside of the scope of this test, but, I feel collocating the function
-      // within the only test that uses the function makes more sense.
-      //
-      // eslint-disable-next-line @cloudfour/unicorn/consistent-function-scoping
-      const getFormDimensions = (formEl: HTMLElement) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      });
-
       // Confirm the form is visually hidden by default
       const form = await screen.getByRole('form', {
         name: 'Get Weekly Digests',
       });
-      let { formHeight, formWidth } = await form.evaluate(getFormDimensions);
-      expect(formHeight).toBeLessThanOrEqual(1);
-      expect(formWidth).toBeLessThanOrEqual(1);
+      await expectElementToBeVisuallyHidden(form);
 
       // Tab all the way to the form email input
       await page.keyboard.press('Tab'); // Notifications button
@@ -81,9 +100,7 @@ describe('Subscription', () => {
       await page.keyboard.press('Tab'); // Email input
 
       // Confirm the form is now "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       // Email input should be in focus
       const emailInput = await screen.getByRole('textbox', { name: 'Email' });
@@ -99,12 +116,7 @@ describe('Subscription', () => {
       await expect(subscribeBtn).toHaveFocus();
 
       // Confirm the form is still "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate((formEl) => ({
-        formHeight: formEl.clientHeight,
-        formWidth: formEl.clientWidth,
-      })));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       // Navigate back up to the Weekly Digests link
       await page.keyboard.down('Shift'); // Navigate backwards
@@ -119,9 +131,7 @@ describe('Subscription', () => {
       await expect(weeklyDigestsBtn).toHaveFocus();
 
       // The form should now be visually hidden again
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeLessThanOrEqual(1);
-      expect(formWidth).toBeLessThanOrEqual(1);
+      await expectElementToBeVisuallyHidden(form);
 
       // Navigate forward past the Submit to activate the form hide timeout
       await page.keyboard.press('Tab'); // Email input
@@ -129,9 +139,7 @@ describe('Subscription', () => {
       await page.keyboard.press('Tab'); // Out of the form
 
       // Confirm the form is still "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       // Navigate back quickly to confirm timeout getting cancelled
       await page.keyboard.down('Shift'); // Navigate backwards
@@ -139,23 +147,17 @@ describe('Subscription', () => {
       await page.keyboard.up('Shift'); // Release Shift key
 
       // Confirm the form is still "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       await page.keyboard.press('Tab'); // Out of the form
 
       // Confirm the form is still "active" (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       // After a timeout, the form eventually visually hides
       await waitFor(
         async () => {
-          ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-          expect(formHeight).toBeLessThanOrEqual(1);
-          expect(formWidth).toBeLessThanOrEqual(1);
+          await expectElementToBeVisuallyHidden(form);
         },
         {
           timeout: 2000,
@@ -169,17 +171,13 @@ describe('Subscription', () => {
       await page.keyboard.up('Shift'); // Release Shift key
 
       // Confirm the form is "active" again (not visually hidden)
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeGreaterThan(1);
-      expect(formWidth).toBeGreaterThan(1);
+      await expectElementNotToBeVisuallyHidden(form);
 
       // Should hide the form
       await page.keyboard.press('Escape');
 
       // Confirm the form should is visually hidden
-      ({ formHeight, formWidth } = await form.evaluate(getFormDimensions));
-      expect(formHeight).toBeLessThanOrEqual(1);
-      expect(formWidth).toBeLessThanOrEqual(1);
+      await expectElementToBeVisuallyHidden(form);
 
       // The focus should reset back to the "weekly digests" link
       await expect(weeklyDigestsBtn).toHaveFocus();