(#4566) CGDP Profile Box by olitharp-nci · Pull Request #5136 · NCIOCPL/cgov-digital-platform

olitharp-nci · 2026-02-17T19:36:18Z

bryanpizzillo · 2026-02-18T01:26:39Z

@olitharp-nci you will need to resolve the conflicts before the Main CI will execute. GH won't even attempt to build with known conflicts. (No will it change the state of the pending check for Build, Test and Upload Artifacts.)

Copilot

Pull request overview

This pull request converts the Biography and Cancer Center Profile Boxes from legacy styles to NCIDS (NCI Design System) styles, implementing the requirements outlined in issue #4566. The changes include updating Twig templates, adding new SCSS styling with USWDS tokens, implementing analytics tracking for link clicks, and configuring image display settings.

Changes:

Converted profile box markup from legacy div-based layout to NCIDS grid system with BEM class naming
Implemented analytics tracking for profile box link clicks (email, social media, publications)
Updated social media icons from CSS sprite-based to inline SVG icons
Configured new 1x1 image style and display mode for profile box images

Reviewed changes

Copilot reviewed 24 out of 29 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
node--cgov-biography--full.html.twig	Updated biography page template to use NCIDS grid layout and BEM classes for profile box
node--cgov-cancer-center--full.html.twig	Updated cancer center page template to use NCIDS grid layout and BEM classes for profile box
address-plain.html.twig	Changed address wrapper from `<p>` to `<div>` for semantic correctness
field--field-twitter-handle.html.twig	Replaced icon font with inline SVG for X/Twitter icon
field--field-linkedin-handle.html.twig	Replaced icon font with inline SVG for LinkedIn icon
field--field-title.html.twig	Changed markup from nested divs to semantic unordered list
field--field-scientific-publications.html.twig	Simplified markup removing icon and using text-only link
field--field-phone-number.html.twig	Removed wrapper div to simplify markup
field--field-email-address.html.twig	Simplified email link markup with proper BEM class
field--field-campus.html.twig	Minor whitespace cleanup
field--field-office-location.html.twig	Minor whitespace cleanup
cgdp-profile-box/index.ts	Passthrough export for component initialization
cgdp-profile-box/index.scss	SCSS styles implementing NCIDS tokens for profile box styling
cgdp-profile-box/cgdp-profile-box.ts	Analytics tracking implementation for profile box link clicks
cgdp-profile-box.test.ts	Unit tests for analytics tracking functionality
cgdp-profile-box.biography.dom.ts	Test fixture with biography profile box HTML
cgdp-profile-box.cancer-center.dom.ts	Test fixture with cancer center profile box HTML
cancer-center.scss	Added forward for cgdp-profile-box styles
cancer-center-legacy.scss	Removed legacy profile-panel import
biography.scss	Added forward for cgdp-profile-box styles
biography-legacy.scss	Moved press-contact styles from profile-panel, removed profile-panel import
_profile-panel.scss	Deleted entire legacy profile panel stylesheet
biography-stephen-chanock.content.yml	Updated image filename reference
image.style.ncids_profile_box_1x1.yml	Added 1x1 image style configuration for profile box images
core.entity_view_mode.media.ncids_image_display_profile_box.yml	Added entity view mode for profile box images
core.entity_view_display.media.cgov_image.ncids_image_display_profile_box.yml	Configured entity view display for profile box images

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-18T01:30:24Z

+				profileField: 'todo',
+				linkType: 'Email',
+			}
+		);


The test expectations include 'profileField: "todo"' as placeholder values. These tests will pass but are not verifying the actual profileField values that should be returned by getProfileBoxField. The tests should verify the correct field types like 'Email Address', 'Twitter Profile Handle', 'LinkedIn Profile Handle', 'Publications............', or 'Other' depending on which link is being tested.

Copilot · 2026-02-18T01:30:24Z

+				componentType: 'Profile Box',
+				profileBoxType: 'Biography',
+				profileBoxTitle: 'Jennifer K. Loukissas, M.P.P.',
+				profileField: 'todo',


The test expectations include 'profileField: "todo"' as placeholder values. These tests will pass but are not verifying the actual profileField values that should be returned by getProfileBoxField. For this external link test clicking on Twitter, the expected profileField should be 'Twitter Profile Handle'.

Suggested change

profileField: 'todo',

profileField: 'Twitter Profile Handle',

Copilot · 2026-02-18T01:30:25Z

+				componentType: 'Profile Box',
+				profileBoxType: 'Cancer Center',
+				profileBoxTitle: 'Duke Cancer Center',
+				profileField: 'todo',


The test expectations include 'profileField: "todo"' as placeholder values. These tests will pass but are not verifying the actual profileField values that should be returned by getProfileBoxField. For this internal link test, the expected profileField should be 'Other' since the website link doesn't have a specific class to identify it in the getProfileBoxField function.

Suggested change

profileField: 'todo',

profileField: 'Other',

Copilot · 2026-02-18T01:30:26Z

+const getProfileBoxField = (link: HTMLAnchorElement): string => {
+	// what's the best way to grab the field name?
+	// const profileField = profileBoxElement.parentElement;
+
+	switch (true) {
+		case link.classList.contains('cgdp-profile-box__linkedin'):
+			return FieldTypes.Linkedin;
+		case link.classList.contains('cgdp-profile-box__twitter'):
+			return FieldTypes.Twitter;
+		case link.classList.contains('cgdp-profile-box__email'):
+			return FieldTypes.Email;
+		case link.classList.contains('cgdp-profile-box__publications'):
+			return FieldTypes.Publications;
+		default:
+			return FieldTypes.Other;
+	}


The getProfileBoxField function does not handle organization links (field_org_url_1 and field_org_url_2), phone number links, or website URL links. These links will all fall through to the 'Other' case. Consider adding specific CSS classes to these link types and corresponding cases in the switch statement to properly track which field was clicked. For example, add classes like 'cgdp-profile-box__org-link', 'cgdp-profile-box__phone-link', and 'cgdp-profile-box__website-url' to enable proper field identification in analytics.

cgdp-management-server · 2026-06-12T17:37:17Z

ODE Deployment

Code has been deployed to ODE 1141.

andyvanavery31 · 2026-06-16T21:42:24Z

Updates following meeting on 16JUN2026:

At Widescreen breakpoint, comps are 24px all around, can we update top and bottom to be 24px
At Mobile, can we update the padding on top and bottom to be 32px instead of 20px
Font sizes - h1 is correct. a little bit bigger than the comp but that is how it's computed. Body text needs to be wrapped in usa-prose and should be 16px with a line-height of 4 (24px)
Visit Website is missing an external link icon
Border should be 1px base-lighter #DFE1E2
Box-shadow should be token 2
The Profile box will stay the width of the page and will not be narrowed to align with the application of measure via usa-prose
The image crop used will be the 1x1 crop
When an image set for a profile box does not have the 1x1 crop set, then the 1x1 placeholder image will display

cc: @blilianyu

Closes #4566

bryanpizzillo requested a review from Copilot February 18, 2026 01:24

Copilot started reviewing on behalf of bryanpizzillo February 18, 2026 01:24 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

olitharp-nci force-pushed the ticket/4566-cgdp-profile-box branch from 9f729ab to 3f9364c Compare April 8, 2026 15:30

olitharp-nci mentioned this pull request Apr 8, 2026

(#5041) CGDP Profile Box #5084

Closed

olitharp-nci force-pushed the ticket/4566-cgdp-profile-box branch from 3f9364c to 5d67d58 Compare April 8, 2026 17:50

olitharp-nci force-pushed the ticket/4566-cgdp-profile-box branch from 5d67d58 to e33548a Compare May 10, 2026 23:53

olitharp-nci force-pushed the ticket/4566-cgdp-profile-box branch 3 times, most recently from 131d531 to b45403c Compare June 10, 2026 06:03

(#4566) CGDP Profile Box

83434ac

Closes #4566

olitharp-nci force-pushed the ticket/4566-cgdp-profile-box branch from b45403c to 83434ac Compare July 8, 2026 16:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

(#4566) CGDP Profile Box#5136

(#4566) CGDP Profile Box#5136
olitharp-nci wants to merge 1 commit into
developfrom
ticket/4566-cgdp-profile-box

olitharp-nci commented Feb 17, 2026

Uh oh!

bryanpizzillo commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

cgdp-management-server Bot commented Jun 12, 2026

Uh oh!

andyvanavery31 commented Jun 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	profileField: 'todo',
	profileField: 'Twitter Profile Handle',

Uh oh!

Conversation

olitharp-nci commented Feb 17, 2026

Uh oh!

bryanpizzillo commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

cgdp-management-server Bot commented Jun 12, 2026

ODE Deployment

Uh oh!

andyvanavery31 commented Jun 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants