VACMS 18326 content-build fontawesome removal #2133

eselkin · 2024-06-15T06:52:31Z

Summary

Removes fontawesome and replaces with va-icon
Sitewide Facilities

Related issue(s)

Replace Font awesome with va-icon in remaining content-build files va.gov-cms#18326

Testing done

Checked manually. Forced display of some of the features locally to expose (could not find example of staff_profile without a photo)
Check manually on tugboat (will try to create a staff profile with no image)

Screenshots

Staff Profile without images with PR

Staff Profiles past - fontawesome

(outdated should be removed)Operation Status page - old

(outdated should be removed)Operation Status page - with PR (follows pattern from operating status page)

## What areas of the site does it impact?

(Describe what parts of the site are impacted if code touched other areas)

Acceptance criteria

Quality Assurance & Testing

I fixed|updated|added unit tests and integration tests for each feature (if applicable).
No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
Linting warnings have been addressed
Documentation has been updated (link to documentation *if necessary)
Screenshot of the developed feature is added
Accessibility testing has been performed

Error Handling

Browser console contains no warnings or errors.
Events are being sent to the appropriate logging solution
Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

Did you login to a local build and verify all authenticated routes work as expected with a test user

⚠️ Team Sites (only applies to modifications made to the VA.gov header) ⚠️

The header does not contain any web-components
I used the proxy-rewrite steps to test the injected header scenario
I reached out in the #sitewide-public-websites Slack channel for questions

Requested Feedback

Check that in conjunction with vets-website PR of same name that Staff profiles without photos show new va-icon and that icon is centered in gray circle. Check that Operating status page shows normal text for normal notices and slim alerts for all others.

va-vfs-bot

Icon found

Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.

What you can do

Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.

Note:

Font Awesome is deprecated. Please use va-icon instead. For more information, visit the migration documentation: Migrate from font awesome to va-icon

va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

@@ -1,19 +1,19 @@
 {% if fieldOperatingStatusFacility == 'notice' %}
    <span class="operating-status-flag operating-status-flag-notice operating-status usa-alert usa-alert-info background-color-only vads-u-margin-top--1 vads-u-padding-y--1 vads-u-padding-x--1p5">
-      <i class="fa fa-info-circle" aria-hidden="true"></i>
+      <va-icon icon="info" size="3" class="os-icon"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

        Facility notice
-      <i class="fa fa-chevron-right vads-u-padding-left--0p5" aria-hidden="true"></i>
+      <va-icon icon="chevron_right" size="3" class="os-chevron-right vads-u-padding-left--0p5"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

    </span>
    {% elsif fieldOperatingStatusFacility == 'limited' %}
    <span class="operating-status-flag operating-status-flag-warning operating-status usa-alert usa-alert-warning background-color-only vads-u-margin-top--1 vads-u-padding-y--1 vads-u-padding-x--1p5">
-      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+      <va-icon icon="warning" size="3" class="os-icon"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

        Limited services and hours
-      <i class="fa fa-chevron-right vads-u-padding-left--0p5" aria-hidden="true"></i>
+      <va-icon icon="chevron_right" size="3" class="os-chevron-right vads-u-padding-left--0p5"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

    </span>
    {% elsif fieldOperatingStatusFacility == 'closed' %}
    <span class="operating-status-flag operating-status-flag-error operating-status usa-alert usa-alert-error background-color-only vads-u-margin-top--1 vads-u-padding-y--1 vads-u-padding-x--1p5">
-      <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+      <va-icon icon="error" size="3" class="os-icon"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/includes/operation_status_information.liquid

        Facility Closed
-      <i class="fa fa-chevron-right vads-u-padding-left--0p5" aria-hidden="true"></i>
+      <va-icon icon="chevron_right" size="3" class="os-chevron-right vads-u-padding-left--0p5"></va-icon>


va-vfs-bot · 2024-06-18T23:09:38Z

src/site/paragraphs/staff_profile.drupal.liquid

-      <span class="fas fa-user circular-profile-missing-icon"></span>
-    </span>
+        <div class="circular-profile-image bio-paragraph-image vads-u-position--relative vads-u-background-color--gray-lightest vads-u-display--block">
+            <div class="circular-profile-missing-icon"><va-icon size="6" icon="person"></va-icon></div>


chriskim2311

LGTM!

randimays

Added a question.

When filling out the PR template, could you please make sure any boilerplate is removed (including the message above the Summary heading)?

src/site/includes/operation_status_information.liquid

randimays

LGTM

jilladams

Approving on behalf of Facilities FE since it has FE code review and Daniel's out.

eselkin added 2 commits June 14, 2024 23:42

fontawesome removal

48b3af2

revert exclusion to see icon presented

f71c58f

va-vfs-bot temporarily deployed to master/VACMS-18326-remove-remaining-fontawesome-tags/VACMS-18326-remove-remaining-fontawesome-tags June 15, 2024 22:44 Inactive

roughly the same size as the fa icon

7f861a3

va-vfs-bot temporarily deployed to master/VACMS-18326-remove-remaining-fontawesome-tags/VACMS-18326-remove-remaining-fontawesome-tags June 16, 2024 06:05 Inactive

eselkin added 2 commits June 18, 2024 12:49

cleanup

e632074

Merge branch 'main' into VACMS-18326-remove-remaining-fontawesome-tags

4d7c62c

eselkin marked this pull request as ready for review June 18, 2024 23:09

eselkin requested review from a team as code owners June 18, 2024 23:09

va-vfs-bot reviewed Jun 18, 2024

View reviewed changes

chriskim2311 approved these changes Jun 19, 2024

View reviewed changes

randimays reviewed Jun 19, 2024

View reviewed changes

src/site/includes/operation_status_information.liquid Show resolved Hide resolved

platform-support-slack-integration bot mentioned this pull request Jun 19, 2024

Hi, I also need a review for this PR: https://github.com/dep... department-of-veterans-affairs/va.gov-team#86396

Closed

va-vfs-bot deployed to master/VACMS-18326-remove-remaining-fontawesome-tags/VACMS-18326-remove-remaining-fontawesome-tags June 19, 2024 18:31 View deployment

randimays approved these changes Jun 19, 2024

View reviewed changes

CBonade approved these changes Jun 20, 2024

View reviewed changes

jilladams approved these changes Jun 20, 2024

View reviewed changes

eselkin merged commit 5547fe1 into main Jun 20, 2024
27 checks passed

eselkin deleted the VACMS-18326-remove-remaining-fontawesome-tags branch June 20, 2024 15:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VACMS 18326 content-build fontawesome removal #2133

VACMS 18326 content-build fontawesome removal #2133

eselkin commented Jun 15, 2024 •

edited

Loading

va-vfs-bot left a comment

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

va-vfs-bot Jun 18, 2024

chriskim2311 left a comment

randimays left a comment

randimays left a comment

jilladams left a comment

VACMS 18326 content-build fontawesome removal #2133

VACMS 18326 content-build fontawesome removal #2133

Conversation

eselkin commented Jun 15, 2024 • edited Loading

Summary

Related issue(s)

Testing done

Screenshots

Acceptance criteria

Quality Assurance & Testing

Error Handling

Authentication

⚠️ Team Sites (only applies to modifications made to the VA.gov header) ⚠️

Requested Feedback

va-vfs-bot left a comment

Choose a reason for hiding this comment

Icon found

What you can do

Note:

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

va-vfs-bot Jun 18, 2024

Choose a reason for hiding this comment

chriskim2311 left a comment

Choose a reason for hiding this comment

randimays left a comment

Choose a reason for hiding this comment

randimays left a comment

Choose a reason for hiding this comment

jilladams left a comment

Choose a reason for hiding this comment

eselkin commented Jun 15, 2024 •

edited

Loading