Skip to content

Commit e33548a

Browse files
olitharp-nciolitharp-nci
committed
adf
1 parent 5cba604 commit e33548a

7 files changed

Lines changed: 97 additions & 22 deletions

File tree

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/__tests__/cgdp-profile-box.biography.dom.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const cgdpProfileBoxBiographyDom = `
22
<div class="cgdp-profile-box cgdp-profile-box--biography">
3-
<div class="grid-row grid-gap">
3+
<div class="grid-row grid-gap-lg">
44
<div class="tablet:grid-col-4">
55
<img loading="lazy" src="/" width="160" height="140" alt="Jennifer K. Loukissas, M.P.P.">
66
</div>
@@ -22,6 +22,7 @@ export const cgdpProfileBoxBiographyDom = `
2222
240-276-7367 <span class="contact-divider">|</span>
2323
<a class="cgdp-profile-box__email" href="mailto:loukissj@mail.nih.gov" tabindex="-1">loukissj@mail.nih.gov</a>
2424
</div>
25+
<a href="https://dceg2.cancer.gov/cgi-bin-pubsearch/pubsearch/index.pl?EntryLimit=0&amp;branch=ALL&amp;searchTxtAuth=chanock%20s&amp;authorOption=exact&amp;pi=0010114442" class="cgdp-profile-box__publications no-exit-notification" tabindex="-1">Scientific Publications</a>
2526
<div class="cgdp-profile-box__social-media">
2627
<a class="cgdp-profile-box__twitter no-exit-notification usa-social-link" href="https://twitter.com/jloukissas" tabindex="-1">
2728
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="usa-icon" role="img" aria-labelledby="x-title">

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/__tests__/cgdp-profile-box.cancer-center.dom.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const cgdpProfileBoxCancerCenterDom = `
22
<div class="cgdp-profile-box cgdp-profile-box--cancer-center">
3-
<div class="grid-row grid-gap">
3+
<div class="grid-row grid-gap-lg">
44
<div class="tablet:grid-col-4">
55
<img loading="lazy" src="/" width="215" height="101" alt="Duke University Medical Center Duke Cancer Institute">
66
</div>
@@ -15,11 +15,11 @@ export const cgdpProfileBoxCancerCenterDom = `
1515
<div translate="no">Box 2714 <br>2424 Erwin Road <br> Durham, North Carolina 27710 </div>
1616
<div>
1717
Consultation and Referral Service:
18-
<a href="tel:1-888-275-3853" rel="nofollow" tabindex="-1">1-888-275-3853</a><br>
18+
<a href="tel:1-888-275-3853" rel="nofollow" tabindex="-1" class="cgdp-profile-box__phone">1-888-275-3853</a><br>
1919
</div>
2020
</div>
2121
<div class="cgdp-profile-box__website">
22-
<a href="/" tabindex="-1">Visit Website</a>
22+
<a href="/" tabindex="-1" class="cgdp-profile-box__website-url">Visit Website</a>
2323
</div>
2424
</div>
2525
</div>

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/__tests__/cgdp-profile-box.test.ts‎

Lines changed: 67 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ describe('NCIDS Profile Box', () => {
4343
componentType: 'Profile Box',
4444
profileBoxType: 'Biography',
4545
profileBoxTitle: 'Jennifer K. Loukissas, M.P.P.',
46-
profileField: 'todo',
46+
profileField: 'Email Address',
4747
linkType: 'Email',
4848
}
4949
);
5050
});
5151

52-
it('sends analytics for external links', async () => {
52+
it('sends analytics for twitter links', async () => {
5353
// Let's make a spy to ensure that trackOther is called correctly
5454
const spy = jest.spyOn(eddlUtil, 'trackOther');
5555

@@ -73,13 +73,73 @@ describe('NCIDS Profile Box', () => {
7373
componentType: 'Profile Box',
7474
profileBoxType: 'Biography',
7575
profileBoxTitle: 'Jennifer K. Loukissas, M.P.P.',
76-
profileField: 'todo',
76+
profileField: 'Twitter Profile Handle',
7777
linkType: 'External',
7878
}
7979
);
8080
});
8181

82-
it('sends analytics for internal links', async () => {
82+
it('sends analytics for linkedin links', async () => {
83+
// Let's make a spy to ensure that trackOther is called correctly
84+
const spy = jest.spyOn(eddlUtil, 'trackOther');
85+
86+
// Inject the HTML into the dom.
87+
document.body.insertAdjacentHTML('beforeend', cgdpProfileBoxBiographyDom);
88+
89+
// Create the JS
90+
cgdpProfileBox();
91+
92+
// Get links
93+
const link = screen.getByText('Connect with me on LinkedIn');
94+
95+
// Click the link
96+
fireEvent.click(link);
97+
98+
expect(spy).toHaveBeenCalledWith(
99+
'Inner:ProfileBox:LinkClick',
100+
'Inner:ProfileBox:LinkClick',
101+
{
102+
location: 'Body',
103+
componentType: 'Profile Box',
104+
profileBoxType: 'Biography',
105+
profileBoxTitle: 'Jennifer K. Loukissas, M.P.P.',
106+
profileField: 'LinkedIn Profile Handle',
107+
linkType: 'External',
108+
}
109+
);
110+
});
111+
112+
it('sends analytics for publications links', async () => {
113+
// Let's make a spy to ensure that trackOther is called correctly
114+
const spy = jest.spyOn(eddlUtil, 'trackOther');
115+
116+
// Inject the HTML into the dom.
117+
document.body.insertAdjacentHTML('beforeend', cgdpProfileBoxBiographyDom);
118+
119+
// Create the JS
120+
cgdpProfileBox();
121+
122+
// Get links
123+
const link = screen.getByText('Scientific Publications');
124+
125+
// Click the link
126+
fireEvent.click(link);
127+
128+
expect(spy).toHaveBeenCalledWith(
129+
'Inner:ProfileBox:LinkClick',
130+
'Inner:ProfileBox:LinkClick',
131+
{
132+
location: 'Body',
133+
componentType: 'Profile Box',
134+
profileBoxType: 'Biography',
135+
profileBoxTitle: 'Jennifer K. Loukissas, M.P.P.',
136+
profileField: 'Publications',
137+
linkType: 'External',
138+
}
139+
);
140+
});
141+
142+
it('sends analytics for website links', async () => {
83143
// Let's make a spy to ensure that trackOther is called correctly
84144
const spy = jest.spyOn(eddlUtil, 'trackOther');
85145

@@ -106,7 +166,7 @@ describe('NCIDS Profile Box', () => {
106166
componentType: 'Profile Box',
107167
profileBoxType: 'Cancer Center',
108168
profileBoxTitle: 'Duke Cancer Center',
109-
profileField: 'todo',
169+
profileField: 'Website',
110170
linkType: 'Internal',
111171
}
112172
);
@@ -139,7 +199,7 @@ describe('NCIDS Profile Box', () => {
139199
componentType: 'Profile Box',
140200
profileBoxType: 'Cancer Center',
141201
profileBoxTitle: 'Duke Cancer Center',
142-
profileField: 'todo',
202+
profileField: 'Other',
143203
linkType: 'Other',
144204
}
145205
);
@@ -174,7 +234,7 @@ describe('NCIDS Profile Box', () => {
174234
componentType: 'Profile Box',
175235
profileBoxType: 'Cancer Center',
176236
profileBoxTitle: '_ERROR_',
177-
profileField: 'todo',
237+
profileField: 'Other',
178238
linkType: 'Other',
179239
}
180240
);

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/cgdp-profile-box.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ enum FieldTypes {
88
Linkedin = 'LinkedIn Profile Handle',
99
/** field_twitter_handle */
1010
Twitter = 'Twitter Profile Handle',
11-
/** field_twitter_handle */
11+
/** field_email_address */
1212
Email = 'Email Address',
1313
/** field_scientific_publications */
14-
Publications = 'Publications............',
14+
Publications = 'Publications',
15+
/** field_website_url */
16+
Website = 'Website',
1517
/** Something was clicked we didn't expect. */
1618
Other = 'Other',
1719
}
@@ -31,7 +33,7 @@ enum LinkTypes {
3133
}
3234

3335
/**
34-
* Tracks a language toggle click.
36+
* Tracks clicks on links within the profile box component.
3537
* @param profileBoxType 'Biography' or 'Cancer Center'
3638
* @param profileBoxTitle Heading of profile box
3739
* @param profileField Type of profile field
@@ -101,9 +103,6 @@ const getProfileBoxHeading = (profileBoxElement: HTMLElement): string => {
101103
* @param link Link clicked.
102104
*/
103105
const getProfileBoxField = (link: HTMLAnchorElement): string => {
104-
// what's the best way to grab the field name?
105-
// const profileField = profileBoxElement.parentElement;
106-
107106
switch (true) {
108107
case link.classList.contains('cgdp-profile-box__linkedin'):
109108
return FieldTypes.Linkedin;
@@ -113,6 +112,8 @@ const getProfileBoxField = (link: HTMLAnchorElement): string => {
113112
return FieldTypes.Email;
114113
case link.classList.contains('cgdp-profile-box__publications'):
115114
return FieldTypes.Publications;
115+
case link.classList.contains('cgdp-profile-box__website-url'):
116+
return FieldTypes.Website;
116117
default:
117118
return FieldTypes.Other;
118119
}

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/front-end/src/lib/components/cgdp-profile-box/index.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
@forward 'usa-icon';
2+
@forward 'usa-link';
23
@use 'uswds-core' as *;
34

45
.cgdp-profile-box {
56
@include u-shadow(2);
67
@include u-radius('md');
7-
@include u-padding(3);
8+
padding: units(2.5) units(4);
9+
10+
@include at-media('tablet') {
11+
padding: units(2) units(3);
12+
}
813

914
img {
1015
@include u-margin-bottom(2);

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/biography/node--cgov-biography--full.html.twig‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
<!-- ********************************* BEGIN Page Content ********************************** -->
44
<article>
55
<div class="cgdp-profile-box cgdp-profile-box--biography">
6-
<div class="grid-row grid-gap">
6+
<div class="grid-row grid-gap-lg">
77
<div class="tablet:grid-col-4">
8-
{{ content.field_image_promotional }}
8+
{% if content.field_image_promotional %}
9+
{{ content.field_image_promotional }}
10+
{% else %}
11+
<img src="{{ get_placeholder_image('ncids_promo_1x1') }}" alt="No Image Placeholder">
12+
{% endif %}
913
</div>
1014
<div class="tablet:grid-col-8">
1115
<h1 class="cgdp-profile-box__heading">{{ node.label }}</h1>

‎docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/content/cancer_center/node--cgov-cancer-center--full.html.twig‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
<!-- ********************************* BEGIN Page Content ********************************** -->
44
<article>
55
<div class="cgdp-profile-box cgdp-profile-box--cancer-center">
6-
<div class="grid-row grid-gap">
6+
<div class="grid-row grid-gap-lg">
77
<div class="tablet:grid-col-4">
8-
{{ content.field_image_promotional }}
8+
{% if content.field_image_promotional %}
9+
{{ content.field_image_promotional }}
10+
{% else %}
11+
<img src="{{ get_placeholder_image('ncids_promo_1x1') }}" alt="No Image Placeholder">
12+
{% endif %}
913
</div>
1014

1115
<div class="tablet:grid-col-8">

0 commit comments

Comments
 (0)