"Get Weekly Digests" pattern by gerardo-rodriguez · Pull Request #1679 · cloudfour/cloudfour.com-patterns

gerardo-rodriguez · 2022-03-15T00:34:19Z

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)

ClosesGet Weekly Digests pattern #1541

changeset-bot · 2022-03-15T00:34:22Z

🦋 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 · 2022-03-15T00:34:24Z

✅ 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 · 2022-03-24T17:13:35Z

+ heading "Get Weekly Digests"
+ text "Get Weekly Digests"
+ text "Email"
+ textbox


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

@gerardo-rodriguez I tried to debug this locally, I logged the markup using:
console.log(awaitpage.evaluate(()=>document.body.innerHTML));
right before the snapshot.
It looks like the id/for attributes aren't getting set correctly.
<labelclass="c-subscribe__form-input-label" for="subscription-email-"> Email </label><divclass="o-input-group c-subscribe__form-input-group"><inputtype="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?

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!

gerardo-rodriguez · 2022-03-24T17:46:46Z

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

Co-authored-by: Tyler Sticka <tyler@cloudfour.com>

…dfour.com-patterns into feature/disclosure-widget * 'feature/disclosure-widget' of github.com:cloudfour/cloudfour.com-patterns: Update src/objects/input-group/input-group.twig Update src/components/subscribe/subscribe.twig

gerardo-rodriguez · 2022-03-24T19:45:51Z

@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 · 2022-03-25T12:07:00Z

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

spaceninja

Code looks good, and works as described

WIP
6b14852

gerardo-rodriguez self-assigned this Mar 15, 2022

gerardo-rodriguez added 2 commits March 15, 2022 12:21

Update button to receive aria_controls value
3cdb7f4

More WIP
60720f8

gerardo-rodriguez changed the title ~~WIP~~"Get Weekly Digests" patternMar 16, 2022

gerardo-rodriguez mentioned this pull request Mar 16, 2022
Get Weekly Digests pattern #1541
Closed

gerardo-rodriguez added 22 commits March 16, 2022 17:35

Work in some of Tyler's suggestions
f7bf494

More changes
082b5a5

More progress
a079740

Pretty solid state
d6f47b4

Some cleanup
4f6147d

Add button_class support to Buttton Swap
afd8072

Use button_class + cleanup
a98c1c2

More changes
b45bf8c

Refactor names
26bdc4b

WIP, adding tests
ad210d9

Use page directly for accessibility tree snapshot
888cb8a

Add describe block, rename test using "should"
7f8d450

Make things better
64edec0

More work
831c201

More progress
12aa611

Simplify template a bit
ccdd478

More updates
9d7f43a

Progress
af6a7ce

Fine-tune test
84850e5

Fix broken code
0da57a0

Adjust layout
8fa62b3

Update tests
752c6fc

gerardo-rodriguez added 5 commits March 23, 2022 17:39

PR feedback
2a85120

Use an ArgsTable
297f704

Update comments
c6276bb

Add a class template prop to Input Group
4295313

Use Input Group component
6273078

gerardo-rodriguez commented Mar 24, 2022
View reviewed changes

gerardo-rodriguez requested a review from tylersticka March 24, 2022 17:48

tylersticka reviewed Mar 24, 2022
View reviewed changes

Comment threadsrc/components/subscribe/subscribe.scss Outdated
Comment threadsrc/objects/input-group/input-group.twig Outdated
Comment threadsrc/components/subscribe/subscribe.twig Outdated
Comment threadsrc/components/subscribe/subscribe.twig Outdated

gerardo-rodriguezand others added 10 commits March 24, 2022 11:54

Update src/components/subscribe/subscribe.twig
d06656b
Co-authored-by: Tyler Sticka <tyler@cloudfour.com>

Update src/objects/input-group/input-group.twig
7437d2a
Co-authored-by: Tyler Sticka <tyler@cloudfour.com>

controls-wrapper -> controls
b2401fc

Revert controls-wrapper -> controls
14ce64e

PR feedback, make action not have default
c9e2af3

Remove controls-wrapper
6e7d0dc

Delete default form_action
810fdea

Update broken test
3ec5c81

Fix syntax error
73159e1

gerardo-rodriguez requested a review from tylersticka March 24, 2022 19:42

tylersticka reviewed Mar 24, 2022
View reviewed changes

Address feedback from Caleb
c9216fd

gerardo-rodriguez requested a review from a teamMarch 25, 2022 17:26

spaceninja approved these changes Mar 25, 2022
View reviewed changes

gerardo-rodriguez merged commit fc595a8 into v-nextMar 25, 2022

gerardo-rodriguez deleted the feature/disclosure-widget branch March 25, 2022 21:45

github-actionsBot mentioned this pull request Mar 25, 2022
Publish Next Version #1598
Merged

calebeby mentioned this pull request Mar 28, 2022
Set a default form_id for the subscribe pattern for testing #1689
Merged

Navigation Menu

Uh oh!

"Get Weekly Digests" pattern - #1679

"Get Weekly Digests" pattern#1679
gerardo-rodriguez merged 96 commits into
v-nextfrom
feature/disclosure-widget

gerardo-rodriguez commented Mar 15, 2022•
edited
Loading

Uh oh!

changeset-botBot commented Mar 15, 2022•
edited
Loading

Uh oh!

netlifyBot commented Mar 15, 2022•
edited
Loading

Uh oh!

gerardo-rodriguezMar 24, 2022

Uh oh!

calebebyMar 28, 2022

Uh oh!

gerardo-rodriguezMar 28, 2022

Uh oh!

calebebyMar 28, 2022

Uh oh!

gerardo-rodriguez commented Mar 24, 2022•
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gerardo-rodriguez commented Mar 24, 2022

Uh oh!

tylersticka left a comment

Uh oh!

gerardo-rodriguez commented Mar 25, 2022

Uh oh!

spaceninja left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gerardo-rodriguez commented Mar 15, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Screenshots

Testing

Accessibility

General

Theming

Known issues

Uh oh!

changeset-botBot commented Mar 15, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlifyBot commented Mar 15, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cloudfour-patterns ready!

Uh oh!

gerardo-rodriguezMar 24, 2022

Choose a reason for hiding this comment

Uh oh!

calebebyMar 28, 2022

Choose a reason for hiding this comment

Uh oh!

gerardo-rodriguezMar 28, 2022

Choose a reason for hiding this comment

Uh oh!

calebebyMar 28, 2022

Choose a reason for hiding this comment

Uh oh!

gerardo-rodriguez commented Mar 24, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gerardo-rodriguez commented Mar 24, 2022

Uh oh!

tylersticka left a comment

Choose a reason for hiding this comment

Uh oh!

gerardo-rodriguez commented Mar 25, 2022

Uh oh!

spaceninja left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gerardo-rodriguez commented Mar 15, 2022•
edited
Loading

changeset-botBot commented Mar 15, 2022•
edited
Loading

netlifyBot commented Mar 15, 2022•
edited
Loading

gerardo-rodriguez commented Mar 24, 2022•
edited
Loading