LG-12693 How to verify biometric design updates

[gina-yamada]

🎫 Ticket

LG-12693 Implementation: How to verify biometric design updates

🛠 Summary of changes

• Added conditional text, tag, and icon for the biometric flow.
• Conditional text in 4 languages

📜 Testing Plan

• Step 1 Start identity-oidc-sintatra locally
• Step 2 Ensure in_person_proofing_opt_in_enabled is set to true and doc_auth_selfie_capture_enabled flag is set to false in config.application.yml and start identity-idp locally
• Step 3 Visit localhost:9292
• Step 4 Pick identity-verified for Level of Service and Sign in
• Step 5 Move through the app until you get to url /verify/how_to_verify
• Step 6 Inspect page to ensure original view (text, icon, no tag) still persists for the non- biometric flow. You can review DOS translations here, or inspect dev or main side by side this branch. Check English, Spanish, French, and Chinese.
• Step 7 Stop both servers.
• Step 8 Set doc_auth_selfie_capture_enabled flag to true.
• Step 9 Start only idp and visit localhost:3000/test/oidc/login
• Step 10 pick biometrics
• Step 11 Move through the app until you get to url /verify/how_to_verify
• Step 12 Inspect page to check that the content for biometrics has been updated according to the AC list in LG-12693. Check English, Spanish, French, and Chinese. DOS translations here.

👀 Screenshots

Screenshots take on 05/13/24 are below in the comments. Those are most recent to see UI (English only)- icon relative to tag/h2.

CURRENT AS OF 05/08/24.

Non Selfie Section: English

Selfie Section: English

Non Selfie Section: Spanish

Selfie Section: Spanish

Non Selfie Section: French

Selfie Section: French

Non Selfie Section: Chinese

Selfie Section: Chinese

Screenshots directly below are outdated as translations have been updated. I am keeping screenshots in to show the changes from pulling in main for history.

OUTDATED - Non Selfie Section: English

OUTDATED - Selfie Section: English

OUTDATED - Non Selfie Section: Spanish

OUTDATED - Selfie Section: Spanish

OUTDATED - Non Selfie Section: French

OUTDATED - Selfie Section: French

OUTDATED - Non Selfie Section: Chinese

OUTDATED - Selfie Section: Chinese

[gina-yamada]

@rutvigupta-design There are 8 screenshots in the description above. Let me know what you think. Thank you!

[rutvigupta-design]

@gina-yamada @carmenrosalop will review the screenshots for design!

[gina-yamada]

@carmenrosalop I added the margin to the tag. There are screenshots in the description. It is ready for a review. Thank you!

[JackRyan1989]

Hey @gina-yamada this is looking great. I noticed that I'm seeing some discrepencies from the design on mobile:

The Figma design keeps the text wrapped to the right of the image. The breakpoint is at 640px.

[gina-yamada]

Updated images:

Mobile

Selfie:

Non-selfie:

Desktop

Selfie:

Non-selfie:

[gina-yamada]

Hey @gina-yamada this is looking great. I noticed that I'm seeing some discrepencies from the design on mobile: The Figma design keeps the text wrapped to the right of the image. The breakpoint is at 640px.

@JackRyan1989 You are right about that. My changes in this file added a tag and did not change the mobile design/layout. This PR is actually where the mobile designs don't match the Figma mocks. There is a screenshot of mobile on the pull request- you can see it was how it is today and not what was on the mocks. I fixed the spacing a little (see screenshot directly above in the comments section) since you viewed. I wrote up a new ticket to handle the template change because it is out of scope for this ticket. Plus, this ticket should go in asap so that it is in when biometrics go's live. Let me know if you strongly disagree. New ticket: How To Verify- Update Mobile View to Match Mocks

[JackRyan1989]

Hey @gina-yamada this is looking great. I noticed that I'm seeing some discrepencies from the design on mobile: The Figma design keeps the text wrapped to the right of the image. The breakpoint is at 640px.

@JackRyan1989 You are right about that. My changes in this file added a tag and did not change the mobile design/layout. This PR is actually where the mobile designs don't match the Figma mocks. There is a screenshot of mobile on the pull request- you can see it was how it is today and not what was on the mocks. I fixed the spacing a little (see screenshot directly above in the comments section) since you viewed. I wrote up a new ticket to handle the template change because it is out of scope for this ticket. Plus, this ticket should go in asap so that it is in when biometrics go's live. Let me know if you strongly disagree. New ticket: How To Verify- Update Mobile View to Match Mocks

Hey @gina-yamada this is looking great. I noticed that I'm seeing some discrepencies from the design on mobile: The Figma design keeps the text wrapped to the right of the image. The breakpoint is at 640px.

@JackRyan1989 You are right about that. My changes in this file added a tag and did not change the mobile design/layout. This PR is actually where the mobile designs don't match the Figma mocks. There is a screenshot of mobile on the pull request- you can see it was how it is today and not what was on the mocks. I fixed the spacing a little (see screenshot directly above in the comments section) since you viewed. I wrote up a new ticket to handle the template change because it is out of scope for this ticket. Plus, this ticket should go in asap so that it is in when biometrics go's live. Let me know if you strongly disagree. New ticket: How To Verify- Update Mobile View to Match Mocks

Yeah I don't think this a stop the pressed kinda thing. Thanks for making the new ticket.

[gina-yamada]

@carmenrosalop Hi Carmen! There are screenshots in the comments section above along with the new ticket. Please have a review and let me know if you approve as is. Thank you

[carmenrosalop]

LGTM! The distance between the icons and content in mobile is a bit off, but @gina-yamada will make an update in this ticket https://cm-jira.usa.gov/browse/LG-13315 so we can close the current PR