changelog: Upcoming Features, split doc auth, visual and content chan…

…ges for split doc auth capture pages

app/javascript/packages/document-capture/components/_file-input.scss

@@ -17,6 +17,18 @@
   border-width: 3px;
 }
 
+usa-file-input:not(
+    .usa-file-input--has-value,
+    .usa-file-input--value-pending,
+    .usa-file-input--is-id-capture
+  )
+  .usa-file-input__target,
+.usa-form-group--error .usa-file-input .usa-file-input__target,
+.usa-form-group--success .usa-file-input .usa-file-input__target {
+  height: 21rem;
+  width: 12rem;
+}
+
 .usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) {
   .usa-file-input__target {
     border-color: color('primary');
@@ -75,7 +87,17 @@
     width: 100%;
   }
 }
-
+.usa-file-input.usa-file-input--single-value:not(.usa-file-input--is-id-capture) {
+  .usa-file-input__preview {
+    width: 12rem;
+  }
+  .usa-file-input__target {
+    width: 12rem;
+  }
+  .usa-file-input__preview-image {
+    width: 12rem;
+  }
+}
 .usa-file-input__input:not([disabled]):focus {
   outline: 3px solid color('primary');
   outline-offset: 6px;

app/javascript/packages/document-capture/components/documents-step.tsx

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
 import { FormStepComponentProps, FormStepsButton } from '@18f/identity-form-steps';
-import { PageHeading } from '@18f/identity-components';
 import { Cancel } from '@18f/identity-verify-flow';
 import HybridDocCaptureWarning from './hybrid-doc-capture-warning';
 import TipList from './tip-list';
-import { DeviceContext, SelfieCaptureContext, UploadContext } from '../context';
+import { DeviceContext, UploadContext } from '../context';
 import {
   ImageValue,
   DefaultSideProps,
@@ -38,13 +37,7 @@ export function DocumentsCaptureStep({
 
 export function DocumentCaptureSubheaderOne() {
   const { t } = useI18n();
-  return (
-    <h2>
-      <hr className="margin-y-5" />
-      {'1. '}
-      {t('doc_auth.headings.document_capture_subheader_id')}
-    </h2>
-  );
+  return <h1>{t('doc_auth.headings.document_capture')}</h1>;
 }
 
 export default function DocumentsStep({
@@ -57,10 +50,6 @@ export default function DocumentsStep({
   const { t } = useI18n();
   const { isMobile } = useContext(DeviceContext);
   const { flowPath } = useContext(UploadContext);
-  const { isSelfieCaptureEnabled } = useContext(SelfieCaptureContext);
-  const pageHeaderText = isSelfieCaptureEnabled
-    ? t('doc_auth.headings.document_capture_with_selfie')
-    : t('doc_auth.headings.document_capture');
   const defaultSideProps: DefaultSideProps = {
     registerField,
     onChange,
@@ -70,7 +59,6 @@ export default function DocumentsStep({
   return (
     <>
       {flowPath === 'hybrid' && <HybridDocCaptureWarning className="margin-bottom-4" />}
-      <PageHeading>{pageHeaderText}</PageHeading>
       <DocumentCaptureSubheaderOne />
       <TipList
         titleClassName="margin-bottom-0 text-bold"

app/javascript/packages/document-capture/components/file-input.tsx

@@ -256,6 +256,7 @@ function FileInput(props: FileInputProps, ref: ForwardedRef<any>) {
   // they don't have a preview. This shows the name of the file in the upload
   // box (using the existing preview) when the file name ends with .yml
   const isYAMLFile: boolean = value instanceof window.File && value.name.endsWith('.yml');
+  const isIdCapture: boolean = !(label === t('doc_auth.headings.document_capture_selfie'));
 
   /**
    * In response to a file input change event, confirms that the file is valid before calling
@@ -387,6 +388,7 @@ function FileInput(props: FileInputProps, ref: ForwardedRef<any>) {
           isDraggingOver && 'usa-file-input--drag',
           value && !isValuePending && 'usa-file-input--has-value',
           isValuePending && 'usa-file-input--value-pending',
+          isIdCapture && 'usa-file-input--is-id-capture',
         ]
           .filter(Boolean)
           .join(' ')}

app/javascript/packages/document-capture/components/selfie-step.tsx

@@ -5,7 +5,6 @@ import {
   FormStepsButton,
   FormStepsContext,
 } from '@18f/identity-form-steps';
-import { PageHeading } from '@18f/identity-components';
 import { Cancel } from '@18f/identity-verify-flow';
 import HybridDocCaptureWarning from './hybrid-doc-capture-warning';
 import DocumentSideAcuantCapture from './document-side-acuant-capture';
@@ -27,8 +26,7 @@ export function SelfieCaptureStep({
   const { t } = useI18n();
   return (
     <>
-      <hr className="margin-y-5" />
-      <h2>2. {t('doc_auth.headings.document_capture_subheader_selfie')}</h2>
+      <h1>{t('doc_auth.headings.document_capture_subheader_selfie')}</h1>
       <p>{t('doc_auth.info.selfie_capture_content')}</p>
       <TipList
         title={t('doc_auth.tips.document_capture_selfie_selfie_text')}
@@ -57,10 +55,8 @@ export default function SelfieStep({
   onError = () => {},
   registerField = () => undefined,
 }: FormStepComponentProps<DocumentsAndSelfieStepValue>) {
-  const { t } = useI18n();
   const { isLastStep } = useContext(FormStepsContext);
   const { flowPath } = useContext(UploadContext);
-  const pageHeaderText = t('doc_auth.headings.document_capture_with_selfie');
 
   const defaultSideProps: DefaultSideProps = {
     registerField,
@@ -71,7 +67,6 @@ export default function SelfieStep({
   return (
     <>
       {flowPath === 'hybrid' && <HybridDocCaptureWarning className="margin-bottom-4" />}
-      <PageHeading>{pageHeaderText}</PageHeading>
       <SelfieCaptureStep defaultSideProps={defaultSideProps} selfieValue={value.selfie} />
       {isLastStep ? <FormStepsButton.Submit /> : <FormStepsButton.Continue />}
       <Cancel />

config/locales/en.yml

@@ -579,7 +579,7 @@ doc_auth.headings.document_capture_back: Back of your ID
 doc_auth.headings.document_capture_front: Front of your ID
 doc_auth.headings.document_capture_selfie: Photo of your face
 doc_auth.headings.document_capture_subheader_id: Driver’s license or state ID card
-doc_auth.headings.document_capture_subheader_selfie: Photo of your face
+doc_auth.headings.document_capture_subheader_selfie: Add a photo of your face
 doc_auth.headings.document_capture_with_selfie: Add photos of your ID and a photo of yourself
 doc_auth.headings.front: Front of your driver’s license or state ID
 doc_auth.headings.how_to_verify: Choose how you want to verify your identity
@@ -679,16 +679,16 @@ doc_auth.instructions.text2: You will not need your physical SSN card.
 doc_auth.instructions.text3: We match your phone number with your personal information and send a one-time code to your phone.
 doc_auth.instructions.text4: Your password saves and encrypts your personal information.
 doc_auth.tips.document_capture_hint: Must be a JPG or PNG
-doc_auth.tips.document_capture_id_text1: Place your ID on a flat and dark surface.
-doc_auth.tips.document_capture_id_text2: Take your photo in a well-lit place.
-doc_auth.tips.document_capture_id_text3: Avoid glare or shadows on your ID.
+doc_auth.tips.document_capture_id_text1: Use a flat and dark surface
+doc_auth.tips.document_capture_id_text2: Take photos in a well-lit place
+doc_auth.tips.document_capture_id_text3: Avoid glare or shadows
 doc_auth.tips.document_capture_id_text4: File size should be at least 2 MB.
-doc_auth.tips.document_capture_selfie_id_header_text: How to take clear photos of your ID
+doc_auth.tips.document_capture_selfie_id_header_text: How to take clear photos
 doc_auth.tips.document_capture_selfie_selfie_text: How to prepare for your photo
-doc_auth.tips.document_capture_selfie_text1: Remove any clothing items or accessories that might cover your face. We suggest removing your glasses or hat.
-doc_auth.tips.document_capture_selfie_text2: Take your photo in a well-lit place.
-doc_auth.tips.document_capture_selfie_text3: Keep your expression neutral.
-doc_auth.tips.document_capture_selfie_text4: Make sure your whole face is visible within the green circle.
+doc_auth.tips.document_capture_selfie_text1: Remove any items covering your face, like glasses or a hat
+doc_auth.tips.document_capture_selfie_text2: Take photo in a well-lit place
+doc_auth.tips.document_capture_selfie_text3: Keep your expression neutral
+doc_auth.tips.document_capture_selfie_text4: Make sure your whole face is visible within the green circle
 doc_auth.tips.mobile_phone_required: Mobile Phone Required
 doc_auth.tips.review_issues_id_header_text: 'Review the images of your state‑issued ID:'
 doc_auth.tips.review_issues_id_text1: Did you use a dark background?

config/locales/es.yml

@@ -590,7 +590,7 @@ doc_auth.headings.document_capture_back: Reverso de su identificación
 doc_auth.headings.document_capture_front: Frente de su identificación
 doc_auth.headings.document_capture_selfie: Fotografía de su cara
 doc_auth.headings.document_capture_subheader_id: Licencia de conducir o identificación estatal
-doc_auth.headings.document_capture_subheader_selfie: Fotografía de su cara
+doc_auth.headings.document_capture_subheader_selfie: Añada una foto de su cara
 doc_auth.headings.document_capture_with_selfie: Agregue fotos de su identificación y una foto de usted
 doc_auth.headings.front: Frente de su licencia de conducir o identificación estatal
 doc_auth.headings.how_to_verify: Elija cómo desea verificar su identidad
@@ -690,15 +690,15 @@ doc_auth.instructions.text2: No necesita la tarjeta física del Seguro Social.
 doc_auth.instructions.text3: Revisamos que su número de teléfono coincida con su información personal y enviamos un código de un solo uso a su teléfono.
 doc_auth.instructions.text4: Su contraseña guarda y cifra su información personal.
 doc_auth.tips.document_capture_hint: Debe ser un archivo JPG o PNG
-doc_auth.tips.document_capture_id_text1: Coloque su identificación en una superficie plana y de color oscuro.
-doc_auth.tips.document_capture_id_text2: Tómese la foto en un lugar bien iluminado.
-doc_auth.tips.document_capture_id_text3: Evite que se vean reflejos o sombras en su identificación.
+doc_auth.tips.document_capture_id_text1: Use una superficie plana y de color oscuro.
+doc_auth.tips.document_capture_id_text2: Tome fotos en un lugar bien iluminado
+doc_auth.tips.document_capture_id_text3: Evite que se vean reflejos o sombras
 doc_auth.tips.document_capture_id_text4: El tamaño del archivo debe ser de al menos 2 MB.
 doc_auth.tips.document_capture_selfie_id_header_text: Cómo tomar fotos nítidas de su identificación
 doc_auth.tips.document_capture_selfie_selfie_text: Cómo prepararse para tomar su foto
-doc_auth.tips.document_capture_selfie_text1: Quite cualquier prenda o accesorio que pueda cubrirle la cara. Sugerimos que se quite los anteojos o el sombrero.
-doc_auth.tips.document_capture_selfie_text2: Tómese la foto en un lugar bien iluminado.
-doc_auth.tips.document_capture_selfie_text3: Mantenga una expresión neutral.
+doc_auth.tips.document_capture_selfie_text1: Quite cualquier prenda o accesorio que pueda cubrirle la cara, como anteojos o un sombrero.
+doc_auth.tips.document_capture_selfie_text2: Tómese la foto en un lugar bien iluminado
+doc_auth.tips.document_capture_selfie_text3: Mantenga una expresión neutral
 doc_auth.tips.document_capture_selfie_text4: Revise que se vea su rostro completo dentro del círculo verde.
 doc_auth.tips.mobile_phone_required: Se necesita un teléfono móvil
 doc_auth.tips.review_issues_id_header_text: 'Revise las imágenes de su identificación emitida por el estado:'

config/locales/fr.yml

@@ -579,7 +579,7 @@ doc_auth.headings.document_capture_back: Verso de votre pièce d’identité
 doc_auth.headings.document_capture_front: Recto de votre carte d’identité
 doc_auth.headings.document_capture_selfie: Photo de votre visage
 doc_auth.headings.document_capture_subheader_id: Permis de conduire ou carte d’identité d’un État
-doc_auth.headings.document_capture_subheader_selfie: Photo de votre visage
+doc_auth.headings.document_capture_subheader_selfie: Ajouter une photo de votre visage
 doc_auth.headings.document_capture_with_selfie: Ajouter des photos de votre pièce d’identité et une photo de vous-même
 doc_auth.headings.front: Recto de votre permis de conduire ou de votre carte d’identité d’un État
 doc_auth.headings.how_to_verify: Choisir la manière dont vous souhaitez confirmer votre identité
@@ -679,16 +679,16 @@ doc_auth.instructions.text2: Vous n’aurez pas besoin de votre carte de sécuri
 doc_auth.instructions.text3: Nous comparons votre numéro de téléphone à vos informations personnelles et vous envoyons un code à usage unique sur votre téléphone.
 doc_auth.instructions.text4: Votre mot de passe s’enregistre et chiffre vos informations personnelles.
 doc_auth.tips.document_capture_hint: Doit être au format JPG ou PNG
-doc_auth.tips.document_capture_id_text1: Placez votre pièce d’identité sur une surface plane et sombre.
-doc_auth.tips.document_capture_id_text2: Prenez votre photo dans un endroit bien éclairé.
-doc_auth.tips.document_capture_id_text3: Évitez les reflets et les ombres sur votre pièce d’identité.
+doc_auth.tips.document_capture_id_text1: Utilisez une surface plane et foncée
+doc_auth.tips.document_capture_id_text2: Prenez vos photos dans un endroit bien éclairé
+doc_auth.tips.document_capture_id_text3: Évitez les reflets ou les ombres
 doc_auth.tips.document_capture_id_text4: La taille du fichier doit être d’au moins 2 Mo.
-doc_auth.tips.document_capture_selfie_id_header_text: Comment prendre des photos nettes de votre pièce d’identité
+doc_auth.tips.document_capture_selfie_id_header_text: Comment prendre des photos nettes
 doc_auth.tips.document_capture_selfie_selfie_text: Comment vous préparer pour prendre la photo de vous-même
-doc_auth.tips.document_capture_selfie_text1: Retirez tous articles ou accessoires vestimentaires susceptibles de cacher votre visage. Nous vous conseillons de retirer vos lunettes ou votre couvre-chef.
-doc_auth.tips.document_capture_selfie_text2: Prenez votre photo dans un endroit bien éclairé.
-doc_auth.tips.document_capture_selfie_text3: Gardez une expression neutre.
-doc_auth.tips.document_capture_selfie_text4: Assurez-vous que l’ensemble de votre visage soit visible à l’intérieur du cercle vert.
+doc_auth.tips.document_capture_selfie_text1: Enlevez tout ce qui cache votre visage (lunettes, couvre-chef, etc.)
+doc_auth.tips.document_capture_selfie_text2: Prenez votre photo dans un endroit bien éclairé
+doc_auth.tips.document_capture_selfie_text3: Gardez une expression neutre
+doc_auth.tips.document_capture_selfie_text4: Assurez-vous que l’ensemble de votre visage est visible dans le cercle vert
 doc_auth.tips.mobile_phone_required: Téléphone mobile nécessaire
 doc_auth.tips.review_issues_id_header_text: 'Examinez les images de votre carte d’identité délivrée par l’État :'
 doc_auth.tips.review_issues_id_text1: Avez-vous utilisé un arrière-plan de couleur sombre ?

config/locales/zh.yml

@@ -590,7 +590,7 @@ doc_auth.headings.document_capture_back: 你身份证件的背面
 doc_auth.headings.document_capture_front: 你身份证件的正面
 doc_auth.headings.document_capture_selfie: 你面部照片
 doc_auth.headings.document_capture_subheader_id: 驾照或州政府颁发的身份证件
-doc_auth.headings.document_capture_subheader_selfie: 你本人照片
+doc_auth.headings.document_capture_subheader_selfie: 添加您面部照片
 doc_auth.headings.document_capture_with_selfie: 添加你身份证件和本人的照片
 doc_auth.headings.front: 驾照或州政府颁发身份证件的正面
 doc_auth.headings.how_to_verify: 选择你想如何验证身份
@@ -690,16 +690,16 @@ doc_auth.instructions.text2: 不需要你社会保障卡实体。
 doc_auth.instructions.text3: 我们把你的电话号码与个人信息匹配，并向你的电话发送一个一次性代码。
 doc_auth.instructions.text4: 你的密码对你个人信息进行存储并加密。
 doc_auth.tips.document_capture_hint: 必须是 JPG 或 PNG
-doc_auth.tips.document_capture_id_text1: 把你身份证件放在一个平坦、暗色的表面上。
-doc_auth.tips.document_capture_id_text2: 在光线明亮的地方拍照。
-doc_auth.tips.document_capture_id_text3: 避免身份证件上有炫光或阴影。
+doc_auth.tips.document_capture_id_text1: 使用水平和深色表面
+doc_auth.tips.document_capture_id_text2: 在光线明亮的地方拍照
+doc_auth.tips.document_capture_id_text3: 避免炫光或阴影
 doc_auth.tips.document_capture_id_text4: 文件大小应当至少 2 兆。
-doc_auth.tips.document_capture_selfie_id_header_text: 如何拍摄你身份证件的清晰照片
+doc_auth.tips.document_capture_selfie_id_header_text: 如何拍摄清晰照片
 doc_auth.tips.document_capture_selfie_selfie_text: 如何准备拍照
-doc_auth.tips.document_capture_selfie_text1: 摘掉可能盖住你面部的任何服饰。我们建议你摘掉眼镜和帽子。
-doc_auth.tips.document_capture_selfie_text2: 在光线明亮的地方拍照。
-doc_auth.tips.document_capture_selfie_text3: 面部表情保持中性。
-doc_auth.tips.document_capture_selfie_text4: 确保你整个面部都可以在绿色圆圈中看到。
+doc_auth.tips.document_capture_selfie_text1: 摘掉任何遮盖您面孔的东西，比如眼镜或帽子
+doc_auth.tips.document_capture_selfie_text2: 在光线明亮的地方拍照
+doc_auth.tips.document_capture_selfie_text3: 保持中性表情
+doc_auth.tips.document_capture_selfie_text4: 确保您整个面孔都可以在绿色圆圈里看到
 doc_auth.tips.mobile_phone_required: 要求有手机
 doc_auth.tips.review_issues_id_header_text: 请仔细查看你州政府颁发身份证件的图像：
 doc_auth.tips.review_issues_id_text1: 你是否使用了暗色背景？

spec/javascript/packages/document-capture/components/documents-and-selfie-step-spec.tsx

@@ -172,8 +172,8 @@ describe('document-capture/components/documents-and-selfie-step', () => {
         level: 2,
       });
       const selfieHeader = getByRole('heading', {
-        name: '2. doc_auth.headings.document_capture_subheader_selfie',
-        level: 2,
+        name: 'doc_auth.headings.document_capture_subheader_selfie',
+        level: 1,
       });
       expect(front).to.be.ok();
       expect(back).to.be.ok();