search

department-of-veterans-affairs / va.gov-cms

Editor-centered management for Veteran-centered content.
https://prod.cms.va.gov
GNU General Public License v2.0
78 stars 59 forks source link

Campaign Landing Pages: upgrade to va-icon #17821

Closed randimays closed 1 week ago

randimays commented 1 month ago

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/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L76
  2. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L81
  3. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L539
  4. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L556
  5. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L573
  6. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L590
  7. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L607
  8. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L624
  9. https://github.com/department-of-veterans-affairs/content-build/blob/267e8c01b81d33570a2d97cf9f71e93b23f996fb/src/site/layouts/campaign_landing_page.drupal.liquid#L651

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

Acceptance criteria

FranECross commented 1 month ago

Thanks so much, @randimays !!

randimays commented 1 month ago

Update: having trouble getting the icons to show up properly in content-build. Turns out there is a similar issue (with the image paths that the web-component relies on) in vets-website. Ray Messina from the Platform team has a draft PR for vets-website to attempt to fix this, and the problem is likely the same in content-build. We'll be delayed a bit on va-icon tickets in both CB and VW until we can straighten this out. CC @chriskim2311 @FranECross @jilladams

randimays commented 1 month ago

Update: still blocked here. Ray merged this PR today intending to help with CI/linting issues in vets-website, but that is unrelated to the issue that's blocking this ticket (and other content-build va-icon tickets). Ray made this PR which was merged in yesterday to test the icon path issue (fixing that would unblock us) but I haven't heard any updates on whether his solution worked.

FranECross commented 1 month ago

I just pinged Ray on [this PR])https://github.com/department-of-veterans-affairs/vets-website/pull/29341) which was merged in yesterday asking if it was successful.

randimays commented 1 month ago

Update: we are still blocked here, but likely not for very long. Ray added the missing file to content-build yesterday, but the file path (in the web component) is still incorrect. They are working on fixing/testing it today.

randimays commented 1 month ago

We are seeing some style/alignment issues with the va-icon. Putting back into Blocked while DST works on a fix for this.

jilladams commented 3 weeks ago

Noting: Randi still having local issues seeing the updated icon positioning fix. But: theoretically unblocked.

randimays commented 3 weeks ago

We added the <va-icon>s to CLPs and we're finding that the "size 3" of the icons (the smallest size available) is still too large for the icons on these pages.

Slack conversation with DST here: https://dsva.slack.com/archives/C01DBGX4P45/p1715116583772769

We are awaiting DST's responses to the questions at the bottom. For now putting this back to Blocked.

jilladams commented 2 weeks ago

@aklausmeier @thejordanwood in the Slack thread Randi referenced above, the decision was to stick with Size 3 for homepage icons. I think that applies here as well, though this one is re: social icons on CLPs. Could you confirm that's the design preference? If a screenshot of 2 vs. 3 would help pin it down, we can help provide that once @randimays comes back around to this and can build it locally. I guess I'm proposing un-Blocking this with a design call. Lemme know how y'all feel, cc @FranECross

aklausmeier commented 2 weeks ago

We need to stick to size 3, confirmed here. I'd like to review a PR or screenshot of the PR with this sizing for final design review. Removing blocked label.

jilladams commented 2 weeks ago

Added to ACs, thanks Amanda!

randimays commented 2 weeks ago

Picking this up to finish it out; we already have all the code written and need to get it reviewed in PR.

randimays commented 1 week ago

Validated a few CLPs in production. Looking good! Closing.