Update VAMC to use va-icon

[eselkin]

User Story or Problem Statement

<va-icon> is replacing <i> font awesome tags. VAMCs must replace font awesome with va-icon ASAP.

Description or Additional Context

Steps for Implementation

VAMC system detail pages

UDPATE 5/29: Only the Media file still has FA icons

1. update all src/site/paragraphs includes since all may be dependent (service location later)
   1. src/site/paragraphs/downloadable_file.drupal.liquid (3 occurrences)
      • Decision was made to update these instances to use the proper component (link component with download prop) rather than only updating the icon (Original component update ticket VAMC Detail page: adopt V1 and V3 components where components are not used #16999)
   2. src/site/paragraphs/link_teaser_featured_content.drupal.liquid (1 occ)
   3. src/site/paragraphs/lists_of_links.drupal.liquid (1 occ)
   4. src/site/paragraphs/media.drupal.liquid (1 occ)

Top Task pages

1. src/site/layouts/vamc_system_billing_insurance.drupal.liquid or src/site/layouts/vamc_system_medical_records_offi.drupal.liquid
   1. UPDATE 5/28: I can't find any FA icons in the above 2 files. I think they might be gone since SL was merged in and we no longer need to update anything here.
   2. Update NEW (SL integration branch) src/site/paragraphs/service_location.drupal.liquid (5 occurrences - not on main)

Side Nav

1. vets-website src/platform/site-wide/side-nav/components/SideNav.js
   • Bars icon in mobile display
   • src/platform/site-wide/side-nav/components/ExpandCollapseIcon.js 2 Chevrons

Press Releases/News Releases

1. Listing page: No changes
2. Press Release page: src/site/layouts/press_release.drupal.liquid (2 occ)
   • download could probably be changed to the download va-link type
   • However there is no link type for print, so that definitely has to update the icon. Additionally, that print link is actually a button and not a link with an onclick.
     • UPDATE 5/29: The print button should be a updated to secondary button however there is a pending question about the display of this on the 320 breakpoint

Already completed in other tickets

VAMC system pages - COMPLETED

Items

1. update src/site/layouts/health_care_region_page.drupal.liquid (16 occurrences) (question, should we be changing the See all Locations faux-buttons to buttons or continue buttons or active links) asked about font-size... Update font-size classes have no effect. We should change this to a secondary continue va-button or active link @thejordanwood @laflannery
   • Yes - we should be updating these "imposters" to use proper components. This work will close ticket VAMC "see all" CTAs should be styled as links, not buttons #15598
2. update src/site/includes/operatingStatusFlagsLinks.drupal.liquid (6 occurrences)
3. update src/site/facilities/facility_social_links.drupal.liquid (8 occurrences)
   • Note 1: We want to remember to change the icon to use the new X icon instead of the old Twitter
   • Note: This impacts VAMC Facility pages as well

VAMC Health Services - COMPLETED

Items

No Changes were needed

VAMC Operating Status pages - COMPLETED

Items

1. src/site/layouts/vamc_operating_status_and_alerts.drupal.liquid
   • Remove all faux va-on-this-page down-arrow links/icons (the real va-on-this-page elements capture the conditionally rendered h2 page elements)
   • Update fake alert icon/title spans (3 occ)
     • Decision was made to update these instances to use the proper component (alert component with slim prop) rather than only updating the icon (Original component update ticket VAMC Operating status: adopt V1 and V3 components where components are not used #16998)

Full width Banners - COMPLETED

Items

1. src/site/components/fullwidth_banner_alerts.drupal.liquid (1 occ)

Other banners - COMPLETED

Items

No Changes were needed as they were already va-banner or va-promo-banner

Stories - COMPLETED

Items

1. Stories listing - No changes needed
2. Story detail pages:
   • Update src/site/facilities/story_social_share.drupal.liquid (2 occ) (Uses the old twitter Icon and text, should this be updated @thejordanwood @laflannery)
     • Answer: Yes please update to use the new X icon and the new text should be "Share on X (formerly Twitter)"

Staff - COMPLETED

Items

1. Leadership listing - No changes needed
2. Person profile pages:
   • Update src/site/layouts/person_profile.drupal.liquid (2 occ) Can use the download va-link type.

Acceptance Criteria

• VAMC System page fontawesome icons have been replaced by va-icon
• VAMC Detail pages (programs, work for us, contact us) fontawesome icons have been replaced by va-icon
• VAMC Operating Status page fontawesome icons have been replaced by va-icon
• VAMC top-task pages (register for care, Billing and insurance, Medical records) fontawesome icons have been replaced by va-icons
• Side Nav contains no fontawesome icons in mobile or desktop views and have been replaced by va-icons
• Full-width banner has no fontawesome icon and has been been replaced by va-icons
• Stories have no fontawesome icons and have been been replaced by va-icons
• News releases have no fontawesome icons and have been been replaced by va-icons
• Staff have no fontawesome icons and have been been replaced by va-icons
• Update and run existing test(s).
• If additional tests are needed, stub a ticket to note this for future work.
• Requires accessibility review
• Requires design review

[laflannery]

@eselkin Regarding your question:

question, should we be changing the See all Locations faux-buttons to buttons or continue buttons or active links

The answer is yes, they should be active links and this has been ticketed separately here

Also, another question - does this list include the VAMC Banners? I don't think I saw them mentioned so I want to be sure. Thanks!

[jilladams]

Thanks @eselkin ! @maxx1128 could you gut check to confirm / deny the 5 point estimate here?

Also acknowledging; we don't have guidance from DS on this update, so that guidance may affect estimate once it's available.

[maxx1128]

@jilladams confirming the 5 points 👍

[eselkin]

@jilladams I put the 5 because it should be easy changes but there may be unforeseen problems like alignment and size issues.

@laflannery I'll double check on the banners. I know the alerts didn't have icon tags.

[eselkin]

When doing this ticket #15598 should also be brought in simultaneously.

[eselkin]

Added Full Width banner, other banners don't use icons and are already components @laflannery

[jilladams]

Noted re: the suggested ticket that should go along with this one, for refinement next week. (Eli, if you already have an idea how large that one is, feel free to go ahead and estimate async.)

[laflannery]

Another point we may want to consider discussing in refinement (which was briefly discussed in slack) is the effort between doing the icon work for custom code where a DS component is available. I think this only applies to 2 items:

• Alert - slim on operating status pages
• VAMC Banners

[eselkin]

@eselkin make separate ticket for SL integration branch work

[jilladams]

VAMC System Banner Alert with Situation Updates (full_width_banner_alert) -- doesn't use a component, needs to, needs custom work. We will not update the icon on alerts in this ticket. That work is in #16952 currently, and we'll either do it there or break it out of that ticket into its own as needed.

[eselkin]

@laflannery add component stuff (for downloadable file and media etc)

[laflannery]

Updated description to include notes that the following "imposters" should be replaced:

• "See all" buttons should be replaced with active prop
• Download links should be replaced with with download prop
• Media links should be replaced with with channel prop
• Operating status alerts should be replaced with with slim prop

[eselkin]

Updated to include Stories/Story Page, News Releases/News Release Page, Leadership/Person Profile

@mmiddaugh @jilladams @laflannery @thejordanwood See 10.ii above. Should we change the Twitter icon/text?
Also 9.ii there's two kinds of links on this page with icons (One is a print button that looks like a link and one is a download link). If we change one to the download va-link it might look odd next to each other.

[laflannery]

I will update the ticket description as well but to summarize:

• Yes change twitter icon and text please. The new text should be: "Share on X (formerly Twitter)"
• We are going to keep the Print button as is for now, changing the icon of course.
• We will change the download link to use the proper download va-link component. This should look/function fine next to the Print button

[laflannery]

@eselkin (I'm just going to keep updating this comment with the various things I'm striking out):

I struckout:

• the download links on 9 because these were done when Randi just did the News release component ticket News Release detail page: adopt V1 components where components are not used #17068
• The fake operating status alerts on number 4. These are getting done in VAMC Operating status: adopt V1 and V3 components where components are not used #16998
• All of Staff (number 11) because the only update was the download links on the person bio pages and that was handled in Staff templates: adopt V1 components where components are not used #17066

[laflannery]

Updating original description:

• src/site/layouts/health_care_region_page.drupal.liquid was completed in ticket VAMC System (incl banners): adopt V1 and V3 components where components are not used #16952
• src/site/includes/operatingStatusFlagsLinks.drupal.liquid was completed in ticket VAMC Locations: adopt V1 and V3 components where components are not used #16964
• src/site/facilities/facility_social_links.drupal.liquid was completed in ticket VAMC Facility template: adopt V1 and V3 components where components are not used #17654
• src/site/layouts/vamc_operating_status_and_alerts.drupal.liquid was completed in ticket VAMC Operating status: adopt V1 and V3 components where components are not used #16998
• src/site/components/fullwidth_banner_alerts.drupal.liquid was completed in ticket VAMC System (incl banners): adopt V1 and V3 components where components are not used #16952
• src/site/paragraphs/service_location.drupal.liquid was completed in ticket VAMC Facility template: adopt V1 and V3 components where components are not used #17654
• src/site/facilities/story_social_share.drupal.liquid was completed in ticket Stories: adopt V1 and V3 components where components are not used #17067

[laflannery]

src/site/paragraphs/downloadable_file.drupal.liquid was updated in ticket #16999
src/site/paragraphs/link_teaser_featured_content.drupal.liquid was updated in ticket #17657
src/site/paragraphs/lists_of_links.drupal.liquid was updated in ticket #17817

[chriskim2311]

Verified changes are live on prod, closing!