Replace fontawesome icons in secondary nav

[wesrowe]

Description

User story

As a Cartography team member, I want to transition icons on the secondary nav to the new design system icons, so that the icons will stay the same after launch.

Notes

This ticket only covers icon updates in the secondary navigation component. A follow-on ticket will cover updating icons on the landing page (#83415).

Related conversations:

• clarifying thread with design system team (Matt) - currently 6/17
• Cartographers thread on options
• 5/17: team agreed to split the secondary nav icon updates from the landing page icon updates into a new ticket, #83415

Tasks

• [x] UX to provide icon mapping for secondary nav to engineering
• ~[ ] UX to provide icon mapping for additional landing page icons (payments & medical supplies) to engineering~ moved to another ticket
• [x] Get buy-in from stakeholders and any other affected VFS teams on the final set of icons for secondary nav, especially if we recommend icon swaps from the mapped icons
• [x] Request DST add new google material icon(s) to va-icon library if necessary
• [x] Get approval on new icon(s) if needed from design system team
• [ ] Engineering to implement icon changes

Acceptance criteria

• [x] any new requested icons have been accepted into design system library (and repos) for devs to use/pull from
  • we are accepting 4/5 mapped icons and have requested one new icon:
  • appointments: calendar_today icon (accepting mapped icon)
  • messages: forum (accepting mapped icon)
  • medications: pill (requested new icon / are rejecting the mapped icon medications)
  • medical records: note_add (accepting mapped icon)
• [x] Aligned with Kaitlin on new icon selection for secondary nav
• [x] Secondary nav renders the new USWDS icons
• [x] Devs have made an icon swap for the one rejected icon medications and are updating it with the new requested icon pill
• [x] QA review
• [x] A11y review

[sterkenburgsara]

Update 5/14:

• Got sign-off on removing the mapped medications pill bottle icon from the new va-icon library and requesting to bring in a new icon from the Google material design icon library called pill for usage across VA.gov for prescriptions/medications, including within the secondary navigation component. VADS ticket for that request is here..
• Also had a conversation in Slack about a discrepancy in the new library, whereby two icons are listed that both refer to appointments. We discussed this with Appointments and Auth experience teams, and OCTO design lead Kristen McConnell has a preference for the calendar_today icon between the two. Filed another VADS ticket to request removal of the other event_available icon that should not be used for appointments at this time.

[sterkenburgsara]

We now have our four icons decided for secondary nav, and developers can move forward with updating those. Those icons are as follows (all should be used at the smallest icon size of 24 px):

• Appointments: calendar_today
• Messages: forum
• Medications: pill(still waiting on approval of this icon from VADS per ticket linked in comment above)
• Medical records: note_add

We still need to work out the two remaining icons that will go on the My HealtheVet landing page for Payments & Medical supplies sections.

cc @carlosfelix2 @jonathanjnelson

[sterkenburgsara]

Some options we've explored for icons under payments + medical supplies in Figma here

Will need to connect with auth experience team (and potentially other teams that may be affected if we want to consider alternative icons) to get their PoV.

[wesrowe]

I split the in-page icon updates into a new ticket

[sterkenburgsara]

Update on ticket about pulling in pill icon. Sounds like the DST will prioritize getting this into repos in their next sprint, which starts later this week. Wes is getting updates from DST team PM Carol Wong.

[wesrowe]

Hoping for an update tomorrow morning.

Note: we want to have the pill merged by Friday's go/no-go one way or another. So please move ahead with the work-around if it needs to be started to meet that timeline.

[radavis]

Here's the commit that adds the pill icon.

Once a new release (> v42.0.0) is made, we'll be able to update the component library package in vets-website and update icons.

[radavis]

component-library issue

When using the pill icon, there is a fill color value coded within the svg.

	with fill	without fill
Mobile

[radavis]

DST is on it: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2875

[radavis]

Update to component-library was released (v42.1.1). Unblocked

https://github.com/department-of-veterans-affairs/component-library/releases/tag/v42.1.1

[allanto-ah]

Environment: Staging

Verified that the pill icon for Medications is appearing as expected. All the other icons in the secondary nav are looking as expected as well

[brea11y]

Verified that all icons (including the pill icon) have been swapped out with the new USWDS icons. Colors all match what is seen in Figma. No accessibility concerns.