"Get Weekly Digests" pattern

.changeset/little-colts-happen.md

@@ -0,0 +1,8 @@
+---
+'@cloudfour/patterns': minor
+---
+
+- Add Subscribe component
+- Update CI workflow to use Node 16
+- Add a `button_class` template prop to the Button Swap component
+- Add a `class` template prop to the Input Group component

.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:

src/components/button-swap/button-swap.stories.mdx

@@ -73,7 +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.
+- `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.

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 %}

src/components/subscribe/demo/demo.twig

@@ -0,0 +1,5 @@
+{% embed '@cloudfour/components/subscribe/subscribe.twig' with {
+  form_id: 'test'
+} only %}{% endembed %}
+
+<p>This is only for demo purposes. <a href="#">I am a link</a></p>

src/components/subscribe/subscribe.scss

@@ -0,0 +1,55 @@
+@use '../../compiled/tokens/scss/breakpoint';
+@use '../../compiled/tokens/scss/color';
+@use '../../compiled/tokens/scss/size';
+@use '../../mixins/a11y';
+@use '../../mixins/theme';
+
+///
+/// Subscribe component
+///
+
+.c-subscribe {
+  position: relative;
+}
+
+.c-subscribe__controls {
+  display: grid;
+  gap: 1em;
+  margin: size.$rhythm-default 0;
+
+  @media (min-width: breakpoint.$s) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.c-subscribe__control {
+  inline-size: 100%;
+}
+
+///
+/// 1. Ensures the form background color matches the current theme
+///
+
+.c-subscribe__form {
+  background-color: var(--theme-color-background-base); // 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.
+  ///
+
+  .c-subscribe__form-input-label,
+  .c-subscribe:not(.activate-form) // 1
+    &:not(:target):not(:focus-within) {
+    @include a11y.sr-only;
+  }
+}
+
+.c-subscribe__form-input-group {
+  margin: size.$rhythm-default 0;
+}