"Get Weekly Digests" pattern

[gerardo-rodriguez]

Overview

This PR introduces a Subscription Choices component.

• It includes an embedded Button Swap component for the "Get Notifications" button
• It shows/hides the email subscription form

Screenshots

Testing

Preview: https://deploy-preview-1679--cloudfour-patterns.netlify.app/?path=/story/components-subscribe--default-story

Accessibility

• Confirm you can use the keyboard to navigate to and away from the form
• There should not be a form hide delay when tabbing backward from the form to the "Get Weekly Digests" link
• There should be a form hide delay when you tab forward out of the form
• Confirm VoiceOver + Safari experience is accessible

General

With both keyboard and mouse inputs, clicking/activating the "Get Weekly Digests" link should:

• Reveal the form over the controls
• Set the :focus onto the email input field

If the form is visible, hitting Escape on the keyboard should:

• Hide the form
• Move the :focus to the "Get Weekly Digests" link

Theming

• Confirm the form background color looks correct in each theme.

Known issues

I was unable to figure out how to set the form background color for the "dark alternate" theme. Any ideas @tylersticka? (This has been resolved)

---

• Closes Get Weekly Digests pattern #1541

[changeset-bot]

🦋 Changeset detected

Latest commit: c9216fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	c9216fd
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/623cd3e6ea84500008878540
😎 Deploy Preview	https://deploy-preview-1679--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[gerardo-rodriguez]

I switched to using the Input Group with an Input component and this value changed. Before when I was using a vanilla <input>, it read textbox "Email". Now it only reads textbox. The "name" value seems to have gone away?

I reviewed both the vanilla and Input Group with the Input component and I was unable to notice a difference in the markup so I'm not sure why this changed. 🤔

[calebeby]

@gerardo-rodriguez I tried to debug this locally, I logged the markup using:

console.log(await page.evaluate(() => document.body.innerHTML));

right before the snapshot.

It looks like the id/for attributes aren't getting set correctly.

<label class="c-subscribe__form-input-label" for="subscription-email-">
          Email
        </label>
        <div class="o-input-group c-subscribe__form-input-group">


      <input type="email" class="c-input c-subscribe__form-input" id="subscription-email-null" placeholder="Your
 Email Address" autocomplete="home email" required="">

Looks like we are missing the form_id prop?

[gerardo-rodriguez]

I logged the markup using

Great idea! We should add this “recipe” tip somewhere in the Pleasantest docs. It wasn’t obvious I could do that. LOL

Looks like we are missing the form_id prop?

Oh, odd! Let’s create a GH issue for this. Can you help me with that? If not, no worries, I can do so later this morning.

Thanks for following up, @calebeby!

[calebeby]

#1689

[gerardo-rodriguez]

@tylersticka @spaceninja I'm not sure why CI isn't running after my last commit, but this PR is ready for another review! I have addressed all feedback.

I did leave a question for @calebeby, but I don't think that's a blocker for this PR.

[gerardo-rodriguez]

@tylersticka Thanks for your feedback! 🎉

I have addressed the latest round of feedback. 😉

[tylersticka]

LGTM, will defer approval to @cloudfour/dev since I feel less qualified to review the JS and testing stuff!

[gerardo-rodriguez]

@calebeby @spaceninja Can either of you help out with a final dev review? Thank you!

[spaceninja]

Code looks good, and works as described