VACMS-17816 Benefit Hub landing page icon updates

[randimays]

Summary

Update all Benefit Hub landing page icons to use <va-icon>.

Related issue(s)

• Benefit Hub Landing Pages: upgrade to va-icon va.gov-cms#17816

Testing done

Tested all benefit hubs locally across breakpoints:

/health-care
/disability
/education
/careers-employment
/pension
/housing-assistance
/life-insurance
/burials-memorials
/records
/service-member-benefits
/family-member-benefits

Screenshots

Hub icons

Social media icons

[laflannery]

@randimays I only looked at a couple landing pages so far but my 1 question is that there is a Youtube va-link option. Should we use that in the social nav options? I don't think it should be an issue from an a11y standpoint - because all the icons would be hidden anyway so I wouldn't be concerned about consistency - but from a tech standpoint, would there be an issue for having 1 link done differently than all the others?

[maxx1128]

The code looks good! I think there's one potential refactor to make it more DRY, otherwise it's 👍

[laflannery]

@randimays I just remembered that we should be using the new X logo instead of the old Twitter one. Can we change that?

Also - would it be possible to change the wording of the twitter links or should that be a different ticket? The link text would say "[Service Name] X (formerly Twitter)"

[randimays]

@laflannery I made the update to use the YouTube va-link. Apologies I missed this before! The icon that comes with the video va-link is smaller than the others, though. I tried the "default" icon size for the others (same as font size) and they are too small and difficult to align properly with long link titles when they wrap to 2 lines. I updated the screenshots in the description.

[laflannery]

Ok @randimays one more try, which I apologize for. There is an a11y defect with the Channel variant of the link component, explain in the slack post here so for that reason, can we go back to the way you had this before and build this like all the others - using separate <va-icon> and <va-link> components?

[randimays]

@jtmst @laflannery @thejordanwood @aklausmeier This is ready for review, please.

[laflannery]

One very minor update - Can we capitalize the T in "YouTube" as it currently is on Prod?

[thejordanwood]

This looks good to me!

[laflannery]

Looks good!

[jtmst]

looks great 🚀

[eselkin]

LGTM