Sitewide Alerts: upgrade to va-icon

[randimays]

Description

The Design System team is deprecating Font Awesome and encouraging teams to use <va-icon> where possible by the end of May 2024. Slack post here: https://dsva.slack.com/archives/C03R5SBELQM/p1710776364414359

We need to convert all usage of <i> in this application to <va-icon> to align with the icons in DST's library here: https://design.va.gov/foundation/icons

<va-icon> guidance in Storybook: https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default

Engineering notes

Icons to be converted:

1. https://github.com/department-of-veterans-affairs/vets-website/blob/17621d7d0b4c4a3df774bd3a742aeda72cdae797/src/platform/site-wide/alerts/MobileAppCallout.jsx#L39
2. https://github.com/department-of-veterans-affairs/vets-website/blob/17621d7d0b4c4a3df774bd3a742aeda72cdae797/src/platform/site-wide/alerts/MobileAppCallout.jsx#L54

User story

AS A PO/PM for products/features/applications managed by the Public Websites team
I WANT our features/products/applicates migrated to va-icon where appropriate
SO THAT when the migration to va-icon and deprecation of Font Awesome takes place, there won't be degraded Veteran-facing experiences in VA.gov.

Quality / testing notes

• Spot check of all converted icons on mobile and desktop
• Update any unit / e2e tests where applicable

Acceptance criteria

• a11y review
• all instances of <i> that can be converted to <va-icon> are converted

[jilladams]

Q here: Ticket is for Alerts but code refs are for Search. Just want to confirm that full width banners and promo banners were also considered re: whether they have any icons to replace?

[randimays]

Darn, I must've been having some clipboard issues. I updated the links in this ticket to the correct ones 🔍

Promo banners that use the v3 web component are already covered by the DST upgrading their own icons: https://design.va.gov/components/banner/promo.

I think full width banners are Facilities-specific (per this Slack thread); but could use a sanity check there. @laflannery?

[laflannery]

Ok I had to go back to @randimays on this cause to many things called banners. The end result is that PW alerts are all using the banners template which Randi indicated in her above comment us DS component so icons will come along for the ride.

There is another file fullwidth_banner_alerts that is used by Facilities that is custom code and will need to be handled by that team

[jilladams]

Technically: Public Websites owns both:

1. Full Width Alerts (banners in drupal machine language) -- these are the ones that show at page top when they're live.
2. Promo Banners (promo_banner in Drupal machines) -- these show at page bottom.

Facilities has adapted the use of Full Width Alerts as the backbone of VAMC System Banner Alert with Situation Updates. So the icons on that may come along for the ride.

Let me know if that makes everything perfectly muddy again. :D

[jilladams]

Also I might just be repeating what Laura already knew.

[laflannery]

@jilladams What I was referring to and linked above above are Github files, not content types in Drupal and I think that's where the split in ownership is:

• PW owns the Full Width Alerts content type in Drupal use the banners Github file to render these on the front end
• Facilities on the other hand owns System banner alerts and they use a Github file named fullwidth_banner_alerts to render these.

The fact that everything is named the same but refer to different things is where I think the mud comes into play

[randimays]

@jilladams @laflannery More muddiness: this ticket is only for the Mobile App Callout banner in vets-website (not related to anything Drupal-y).

I dug into it a bit more, at first thinking that because it's in the site wide folder in vets-website, it's used for many things. It's actually only used for a single authenticated page at the moment: The blue banner at the bottom of this screenshot:

Based on that, I'm not sure if we own this (or if it's useful anywhere else). Any thoughts?

[jilladams]

As far as I'm aware, we do not own that. I feel comfortable closing this as no op based on that. Reopen if I'm missing something!

[jilladams]

Restating / Noting again since I keep forgetting, from discussion with Laura:

1. Full Width Alerts (banners in drupal machine language) -- already uses a component, DS will handle icon updates
2. Promo Banners (promo_banner in Drupal machines) -- already uses a component, DS will handle icon updates
3. VAMC System Banner Alert with Situation Updates (full_width_banner_alert) -- doesn't use a component, needs to, needs custom work. May be affected by font-awesome deprecation. Work is captured in VAMC System (incl banners): adopt V1 and V3 components where components are not used #16952