Skip to content

Commit c6c8faa

Browse files
randimaysrandimays
authored
VACMS-17568 Email signup web components (#2008)
1 parent fbbb212 commit c6c8faa

File tree

3 files changed

+75
-63
lines changed

3 files changed

+75
-63
lines changed

‎src/site/assets/sass/style.scss

+7
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@
2323
margin: 2em auto;
2424
}
2525

26+
.homepage-email-update-wrapper {
27+
.homepage-email-input::part(form-header) {
28+
font-size: 2rem;
29+
}
30+
}
31+
2632
// START: Styles for mobile app promo banner
33+
2734
.smartbanner {
2835
position: absolute;
2936
top: 0;

‎src/site/includes/email-update-signup.drupal.liquid

+65-62
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,70 @@
1-
<!-- Email Updates Signup -->
2-
<div class="homepage-email-updates-signup">
3-
<div class="homepage-email-updates-signup__wrapper vads-u-background-color--primary-alt-lightest">
4-
<div class="vads-u-padding-x--2p5 vads-u-padding-top--2p5">
5-
<div class="homepage-email-update-wrapper vads-u-padding-bottom--1p5">
6-
<div class="vads-u-display--flex vads-u-justify-content--center">
7-
<div>
8-
<h2 class="vads-u-font-size--lg
9-
vads-u-font-family--serif
10-
vads-u-margin--0">
11-
Sign up to get the latest VA updates
12-
</h2>
13-
<div class="vads-u-margin-top--2p5 medium-screen:vads-u-margin-top--0">
14-
<form
15-
action="https://public.govdelivery.com/accounts/USVACHOOSE/subscribers/qualify"
16-
accept-charset="UTF-8"
17-
method="post">
18-
<input name="utf8" type="hidden" value="✓">
19-
<input type="hidden" name="category_id" id="category_id_top" value="USVACHOOSE_C1">
20-
<label for="email">Email Address</label>
21-
<input inputmode="email"
22-
type="email"
23-
name="email"
24-
id="email"
25-
autocomplete="email"
26-
class="vads-u-width--full
27-
medium-screen:vads-u-width-auto" />
28-
<button
29-
onclick="recordMultipleEvents([
30-
{
31-
event: 'cta-button-click', 'button-type': 'primary', 'button-click-label': 'Sign up',
32-
},
33-
{ event: 'homepage-email-sign-up', action: 'Homepage email sign up' }
34-
]);"
35-
type="submit"
36-
class="vads-u-width--full
37-
medium-screen:vads-u-width--auto
38-
vads-u-display--block">
39-
Sign up
40-
</button>
41-
</form>
42-
</div>
43-
</div>
44-
</div>
45-
</div>
46-
<div id="vets-banner-1" class="veteran-banner-2 vads-u-display--none medium-screen:vads-u-display--block">
47-
<div class="veteran-banner-container vads-u-margin-y--0 vads-u-margin-x--auto">
48-
<picture>
49-
<source
50-
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-1.png 640w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-2.png 920w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-3.png 1316w"
51-
media="(max-width: 767px)">
52-
<source
53-
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-1.png 1008w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-2.png 1887w"
54-
media="(max-width: 1008px)">
55-
<img class="vads-u-width--full"
56-
src="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png"
57-
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png 1280w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-2.png 2494w"
58-
loading="lazy" alt="Veteran portraits">
59-
</picture>
60-
</div>
1+
<div class="homepage-email-update-wrapper vads-u-background-color--primary-alt-lightest">
2+
<div class="vads-u-padding-x--2p5 vads-u-padding-top--2p5">
3+
<div class="vads-u-display--flex vads-u-justify-content--center">
4+
<div>
5+
<div class="vads-u-margin-top--2p5 medium-screen:vads-u-margin-top--0">
6+
<form
7+
action="https://public.govdelivery.com/accounts/USVACHOOSE/subscribers/qualify"
8+
accept-charset="UTF-8"
9+
method="post"
10+
>
11+
<input type="hidden" name="utf8" value="✓">
12+
<input type="hidden" name="category_id" id="category_id_top" value="USVACHOOSE_C1">
13+
<input type="hidden" name="email" id="homepage-hidden-email" value="">
14+
<va-text-input
15+
autocomplete="email"
16+
class="vads-u-width--full medium-screen:vads-u-width-auto homepage-email-input"
17+
form-heading="Sign up to get the latest VA updates"
18+
form-heading-level="2"
19+
id="homepage-email-signup-input"
20+
inputmode="email"
21+
label="Email Address"
22+
type="email"
23+
use-forms-pattern="single"
24+
/></va-text-input>
25+
<button
26+
onclick="recordMultipleEvents([
27+
{
28+
event: 'cta-button-click', 'button-type': 'primary', 'button-click-label': 'Sign up',
29+
},
30+
{ event: 'homepage-email-sign-up', action: 'Homepage email sign up' }
31+
]);"
32+
type="submit"
33+
class="vads-u-width--full
34+
medium-screen:vads-u-width--auto
35+
vads-u-display--block vads-u-margin-bottom--2">
36+
Sign up
37+
</button>
38+
</form>
6139
</div>
6240
</div>
6341
</div>
42+
<div id="vets-banner-1" class="vads-u-display--none medium-screen:vads-u-display--block">
43+
<div class="veteran-banner-container vads-u-margin-y--0 vads-u-margin-x--auto">
44+
<picture>
45+
<source
46+
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-1.png 640w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-2.png 920w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-mobile-3.png 1316w"
47+
media="(max-width: 767px)">
48+
<source
49+
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-1.png 1008w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-tablet-2.png 1887w"
50+
media="(max-width: 1008px)">
51+
<img class="vads-u-width--full"
52+
src="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png"
53+
srcset="https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-1.png 1280w, https://s3-us-gov-west-1.amazonaws.com/content.www.va.gov/img/homepage/veterans-banner-desktop-2.png 2494w"
54+
loading="lazy" alt="Veteran portraits">
55+
</picture>
56+
</div>
57+
</div>
6458
</div>
59+
</div>
60+
61+
<script>
62+
const emailSignupInput = document.querySelector('#homepage-email-signup-input');
63+
const hiddenEmailSignupInput = document.querySelector('#homepage-hidden-email');
64+
65+
const setHiddenEmailInputValue = event => {
66+
hiddenEmailSignupInput.setAttribute('value', event?.target?.value || '');
67+
};
6568
66-
<!-- / Email Updates Signup -->
67-
69+
emailSignupInput.addEventListener('input', setHiddenEmailInputValue);
70+
</script>

‎src/site/includes/tests/homepage.cypress.spec.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ describe('home page', () => {
77
.should('exist')
88
.should('be.visible');
99

10+
const verifyHiddenElement = selector => cy.get(selector).should('exist');
11+
1012
const verifyText = (selector, text) =>
1113
cy
1214
.get(selector)
@@ -138,7 +140,7 @@ describe('home page', () => {
138140
email()
139141
.scrollIntoView()
140142
.within(() => {
141-
verifyElement('[name="email"]');
143+
verifyHiddenElement('[name="email"]');
142144
});
143145

144146
// Footer ====================================================

0 commit comments

Comments
 (0)