Skip to content

LG-10362: New Image Capture Page Language #8851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charleyf merged 8 commits into from
Jul 27, 2023
+16 −16
Merged

LG-10362: New Image Capture Page Language #8851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8d89b7b
Update english text
charleyf Jul 25, 2023
476d619
Update spanish text
charleyf Jul 25, 2023
b37c129
Update french text
charleyf Jul 25, 2023
712dbc3
Allow lowercase text in capture box
charleyf Jul 25, 2023
f7c4b21
Lint yaml files
charleyf Jul 25, 2023
bb5fc07
changelog: User-Facing Improvements, In-Person Proofing, Update text …
charleyf Jul 25, 2023
721c696
Use the font-size from %h2, which is different on mobile and desktop.
charleyf Jul 26, 2023
624b234
Merge branch 'main' into charley/lg-10362/new-image-capture-target-la…
charleyf Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/assets/stylesheets/components/_file-input.scss
View file
Open in desktop
Copy link
Copy Markdown
Contributor Author

@charleyf charleyf Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kellular Putting the screenshots here so we can use the threading to discuss. I did also want to mention that this PR changes from all uppercase like "FRONT" to mixed case as I'm seeing in the designs.

iOS - Chrome

IMG_9669

iOS - Safari

IMG_9670

Copy link
Copy Markdown

@kellular kellular Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! Yep, the tap target copy should be sentence case like you have it here.

Is the desktop screen size using an h1 for the tap target copy?

Copy link
Copy Markdown
Contributor Author

@charleyf charleyf Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the desktop in Chrome

<!-- The page heading -->
<!-- The font size is set to 1.75rem which ends up being computed to a font size of 28px for my browser -->
<h1 class="page-heading">Add photos of your ID</h1>

<!-- The text in the tap target -->
<!-- The font size is set to 1.625rem which ends up being computed to a font size of 26px for my browser -->
<strong class="usa-file-input__banner-text">Front of your driver’s license or state ID</strong>

Copy link
Copy Markdown
Contributor Author

@charleyf charleyf Jul 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's easy to resize this text, happy to give you a live demo of various sizes. Here's some screenshots with different font sizes I tried.

Tap-Target Text 1.25rem
rem-1 25

Tap-Target Text 1.5rem
rem-1 5

Tap-Target Text As Is 1.625rem
as-is-rem-1 625

Copy link
Copy Markdown

@kellular kellular Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for all the screenshots! Could we make the tap target text an h2 for both desktop and mobile? I think that's 1.375rem and 1.25rem respectively

Copy link
Copy Markdown
Contributor Author

@charleyf charleyf Jul 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made that change (commit link). The size of that text is now directly inherited from the h2 sizing. Here's what it looks like

Desktop
Screenshot 2023-07-26 at 15 05 04

Mobile
Screenshot 2023-07-26 at 15 04 46

Copy link
Copy Markdown

@kellular kellular Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! And just confirming - the tap target on desktop screen sizes will still include the "Drag file here or choose from folder" text right?

Copy link
Copy Markdown
Contributor Author

@charleyf charleyf Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep! That happened because I was using dev-tools on my desktop to view this and forgot to refresh the page. Here's what it looks like on my desktop right now
Screenshot 2023-07-26 at 15 25 23

Copy link
Copy Markdown

@kellular kellular Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great, thanks for confirming! This LGTM

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use 'uswds-core' as *;
@use '../utilities/typography' as *;

// ===============================================
// Pending upstream Login Design System revisions:
Expand Down Expand Up @@ -45,15 +46,14 @@

.usa-file-input__banner-text {
@include u-font-family('sans');
@extend %h2;
color: color('primary');
display: block;
font-size: 1.625rem;
letter-spacing: 0.4px;
line-height: 1.5;
// For content to appear as vertically centered, offset the larger line-height of the banner to
// match the space below the drag text.
margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) * 0.5;
text-transform: uppercase;

+ .usa-file-input__drag-text {
@include u-display('block');
Expand Down
10 changes: 5 additions & 5 deletions config/locales/doc_auth/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,17 +119,17 @@ en:
text4: Your password saves and encrypts your personal information.
headings:
address: Update your mailing address
back: Back
back: Back of your driver’s license or state ID
capture_complete: We verified your ID
capture_scan_warning_html: We couldn’t read the barcode on your ID. If the
information below is incorrect, please %{link_html} of your
state‑issued ID.
capture_scan_warning_link: upload new photos
capture_troubleshooting_tips: Having trouble adding your state‑issued ID?
document_capture: Add your state‑issued ID
document_capture: Add photos of your ID
document_capture_back: Back of your ID
document_capture_front: Front of your ID
front: Front
front: Front of your driver’s license or state ID
getting_started: Let’s verify your identity for %{sp_name}
hybrid_handoff: How would you like to add your ID?
interstitial: We are processing your images
Expand Down Expand Up @@ -162,8 +162,8 @@ en:
capture_status_small_document: Move Closer
capture_status_tap_to_capture: Tap to Capture
document_capture_intro_acknowledgment: We’ll collect information about you by
reading your state‑issued ID. We use this information to verify your
identity.
reading your driver’s license or state ID card. We use this information
to verify your identity.
getting_started_html: '%{sp_name} needs to make sure you are you — not someone
pretending to be you. %{link_html}'
getting_started_learn_more: Learn more about what you need to verify your identity
Expand Down
8 changes: 4 additions & 4 deletions config/locales/doc_auth/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,17 +144,17 @@ es:
text4: Su contraseña guarda y encripta su información personal.
headings:
address: Actualice su dirección postal
back: Parte Trasera
back: Reverso de su licencia de conducir o identificación estatal
capture_complete: Verificamos su identificación
capture_scan_warning_html: No pudimos leer el código de barras en su ID. Si la
información que aparece a continuación es incorrecta, por favor,
%{link_html} de su ID emitido por el estado.
capture_scan_warning_link: suba nuevas fotos
capture_troubleshooting_tips: '¿Tiene problemas para agregar su identificación emitida por el estado?'
document_capture: Añada su documento de identidad expedido por el estado
document_capture: Incluir fotos de su identificación
document_capture_back: Parte trasera de su documento de identidad
document_capture_front: Parte delantera de su documento de identidad
front: Parte Delantera
front: Anverso de su licencia de conducir o identificación estatal
getting_started: Vamos a verificar su identidad para %{sp_name}
hybrid_handoff: '¿Cómo desea añadir su documento de identidad?'
interstitial: Estamos procesando sus imágenes
Expand Down Expand Up @@ -190,7 +190,7 @@ es:
capture_status_small_document: Muévete mas cerca
capture_status_tap_to_capture: Toque para capturar
document_capture_intro_acknowledgment: Recopilaremos información sobre usted
leyendo su documento de identidad expedido por el Estado. Usamos esta
leyendo su licencia de conducir o identificación estatal. Usamos esta
información para verificar su identidad.
getting_started_html: '%{sp_name} necesita asegurarse de que es usted realmente
y no alguien que se hace pasar por usted. %{link_html}'
Expand Down
10 changes: 5 additions & 5 deletions config/locales/doc_auth/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,17 +150,17 @@ fr:
text4: Votre mot de passe sauvegarde et crypte vos informations personnelles.
headings:
address: Mettre à jour votre adresse postale
back: Verso
back: Verso de votre permis de conduire ou de votre carte d’identité de l’État
capture_complete: Nous avons vérifié votre document d’identité
capture_scan_warning_html: Nous n’avons pas pu lire le code-barres de votre
pièce d’identité. Si les informations ci-dessous sont incorrectes,
veuillez %{link_html} de votre carte d’identité délivrée par l’État.
capture_scan_warning_link: télécharger de nouvelles photos
capture_troubleshooting_tips: Vous rencontrez des difficultés pour ajouter votre pièce d’identité?
document_capture: Ajoutez votre carte d’identité délivrée par l’État
document_capture: Ajoutez des photos de votre pièce d’identité
document_capture_back: Verso de votre carte d’identité
document_capture_front: Recto de votre carte d’identité
front: Recto
front: Recto de votre permis de conduire ou de votre carte d’identité de l’État
getting_started: Vérifions votre identité pour %{sp_name}
hybrid_handoff: Comment voulez-vous ajouter votre identifiant ?
interstitial: Nous traitons vos images
Expand Down Expand Up @@ -195,8 +195,8 @@ fr:
capture_status_small_document: Approchez-vous
capture_status_tap_to_capture: Appuyez pour capturer
document_capture_intro_acknowledgment: Nous recueillons des informations sur
vous en lisant votre pièce d’identité délivrée par l’État. Nous
utilisons ces informations pour vérifier votre identité.
vous en lisant votre permis de conduire ou votre carte d’identité de
l’État. Nous utilisons ces informations pour vérifier votre identité.
getting_started_html: '%{sp_name} doit s’assurer que c’est bien vous — et non
quelqu’un qui se fait passer pour vous. %{link_html}'
getting_started_learn_more: En savoir plus sur ce dont vous avez besoin pour vérifier votre identité
Expand Down