Update logs and emblems global implementation

[ajsarkar28]

Monthly Update for Stakeholders

Date	Progress & Key Accomplishments	Issues/Risks/Blockers
9/9/24	Not started
9/17/24	Engineering in progress

Overview

What was updated in the Design System?

In va-mobile-library, the official VA logos and emblems were updated in version 0.6.0 of the Assets package and Figma library to be consistent with VA.gov. The new files are:

• VALogo
  • VAOnDark.png
  • VAOnLight.png
• serviceEmblems
  • vic-air-force-coat-of-arms.png
  • vic-army-symbol.png
  • vic-cg-emblem.png
  • vic-navy-emblem.png
  • vic-space-force-logo-on-dark.png
  • vic-space-force-logo-on-light.png
  • vic-space-force-logo.png
  • vic-usmc-emblem.png

What changes are recommended in the Flagship Mobile App?

1. In va-mobile-app, the VA logos and emblems in the VAIcon component should be updated as follows. After the files are updated, the vaParentLogo and dodBranch files should be removed from the VAIcon component.
   • Update: Logo.svg :arrow_right: VAOnDark.png
   • Update: AirForce.svg :arrow_right: vic-air-force-coat-of-arms.png
   • Update: Army.svg :arrow_right: vic-army-symbol.png
   • Update: CoastGuard.svg :arrow_right: vic-cg-emblem.png
   • Update: MarineCorps.svg :arrow_right: vic-usmc-emblem.png
   • Update: Navy.svg :arrow_right: vic-navy-emblem.png
   • New: VAOnLight.png
   • New: vic-space-force-logo-on-dark.png
   • New: vic-space-force-logo-on-light.png
   • New: vic-space-force-logo.png
2. In Figma, the VA logos and emblems should be updated in the shipped files. After the files are updated, the Logo component should be removed from the Flagship Library file.

Where are these files used in the Flagship Mobile App?

Currently, the logos and service emblems are used on the home screen, profile screen, and Veteran Status.

Additional resources

• How to use the Assets package
• Documentation on Logos will be available in the coming weeks
• For more information about Service Emblems, reach out to #va-mobile-design-system in Slack.

Acceptance criteria

• [ ] Logos and emblems are updated in va-mobile-app with the files in va-mobile-library's Assets package
• [ ] Logos and emblems are removed from VAIcon component in va-mobile-app
• [ ] After the above two bullets are completed, pass this ticket to Brea for the remainder of ACs
• [ ] Logos and emblems are updated in shipped files in Figma.
• [ ] Logos and emblems are removed from the Flagship Library file in Figma.

[TKDickson]

@theodur can you associate your PR with this ticket, instead of the epic itself? I will need to move my test plan over here as well, note to self

[TKDickson]

VA icons show appropriately, light and dark mode, on:

• [x] Initial app load
• [x] Pre-login screen
• [x] Log in sync screen
• [x] Log out sync screen
• [x] Onboarding carousel

Military branch icons show appropriately, light and dark mode, on:

• [x] Home (nametag component)
• [x] Profile (nametag component)
• [x] Veteran status card
• [x] Military history screen....? maybe? Or we may have removed that UI. I'll check there either way. (later edit - there's no icon on the military history screen)

Also:

• [x] Can still log into demo mode by multiple taps on the prelogin screen, without assistive tech

• [x] Can still log into demo mode by multiple taps on the prelogin screen, with assistive tech

• [x] Screenreader announcement of VA icon on home is unchanged & correct Screenreader announcement of each military branch icon is unchanged (they're skipped) & correct logo showing for:

• [x] Air force

• [x] coast guard

• [x] army

• [x] Navy

• [x] Space force

• [x] Marines

[TKDickson]

@theodur on the veteran status screen (which doesn't have light and dark mode variations), previously we were always showing the (equivalent of the) vic-space-force-logo-on-dark.png logo, so the "USSF" text would have sufficient contrast.

On this branch/with this change, the space force logo on the veteran status screen is changing with dark/light mode, which is causing this contrast issue (green circle mine/added):

Can we go back to having an override for light mode, to keep the sufficient contrast, even with the DS changes?

[TKDickson]

And if all this ^ is actually something to chat about with the design system team, let me know!

[theodur]

@TKDickson Good catch, that was because the new MilitaryBranchEmblem component defaulted to setting it based on the theme. I added an override option to it, so this should be fixed now

[TKDickson]

Space Force emblem now displaying with enough contrast, light and dark mode, regardless of screen.

[TKDickson]

Running iOS and Android scripts (something appears to have gone awry with the PR, because they're not running there automatically)

[TKDickson]

@theodur looks like you need to make changes to the VeteranStatus detox script? Failing on emblems checks

[theodur]

Dang it, thought I got them all. Should be fixed now @TKDickson. I'll wait and see if the PR decides to automatically kick off the E2E tests. If not, I'll manually run them

[theodur]

No dice, had to run them manually:

• iOS
• Android

[TKDickson]

Sadly, the VeteranStatusCard e2e script is also still failing due to logo/emblem change.

[theodur]

Fixed it and kicked off new test runs

https://github.com/department-of-veterans-affairs/va-mobile-app/actions/runs/11129832012

https://github.com/department-of-veterans-affairs/va-mobile-app/actions/runs/11129848124

[TKDickson]

Whoops, I accidentally cancelled your runs. But mine passed (or at least the failures aren't this branch)! iOS and Android