DIG-4148: Phone Number field on registration not dynamic

CityOfBoston · Mar 15, 2024 · a621f65 · a621f65
1 parent b850ac3
commit a621f65
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 81 deletions.
diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -1620,7 +1620,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           id="future-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1770,7 +1770,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1920,7 +1920,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2070,7 +2070,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2218,7 +2218,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
         <input
           className="txt-f"
           id="past-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -2368,7 +2368,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
         <input
           className="txt-f"
           id="initial-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -2580,7 +2580,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2624,7 +2624,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2694,7 +2694,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2875,7 +2875,7 @@ exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -2928,7 +2928,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4450,7 +4450,7 @@ exports[`Storyshots ProgressBar default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4511,7 +4511,7 @@ exports[`Storyshots ProgressBar first step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4572,7 +4572,7 @@ exports[`Storyshots ProgressBar last step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >
@@ -4633,7 +4633,7 @@ exports[`Storyshots ProgressBar with task name 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "768px",
+      "maxWidth": "600px",
     }
   }
 >

diff --git a/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx b/services-js/access-boston/src/client/device-verification/DeviceVerificationForm.tsx
@@ -1,4 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/core';
+
 import { FormikProps } from 'formik';
 import Link from 'next/link';
 
@@ -79,7 +82,7 @@ export default function DeviceVerificationForm(props: Props) {
 
         <hr className="hr hr--sq" aria-hidden />
 
-        <form className="m-v500" onSubmit={handleSubmit}>
+        <form className="m-v500" onSubmit={handleSubmit} css={FIELD_STYLING}>
           {phoneOrEmail === 'phone' && (
             <>
               <TextInput
@@ -142,6 +145,7 @@ export default function DeviceVerificationForm(props: Props) {
                 info="Choose a personal address, not a City of Boston one."
                 renderInputFunc={renderErrorNextToInput}
                 hideErrorMessage
+                className={`txt-email`}
               />
 
               <div className="t--subinfo m-v500">
@@ -181,3 +185,25 @@ export default function DeviceVerificationForm(props: Props) {
     </>
   );
 }
+
+export const FIELD_STYLING = css(`
+  input.txt-f {
+    min-width: 10.8rem;
+  }
+
+  input.txt-email {
+    min-width: 18rem;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 540px) {
+    input.txt-f {
+      min-width: 10.7rem;
+    }
+  
+    input.txt-email {
+      min-width: 12rem;
+      width: 100%;
+    }
+  }
+`);
diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -3578,7 +3578,7 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         className="txt-f"
                         disabled={true}
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
@@ -4005,7 +4005,7 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                       <input
                         className="txt-f"
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
@@ -11145,7 +11145,7 @@ exports[`Storyshots RegisterMfaPage default 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -11442,7 +11442,7 @@ exports[`Storyshots RegisterMfaPage email 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -11493,7 +11493,7 @@ exports[`Storyshots RegisterMfaPage email 1`] = `
                 className="g--6"
               >
                 <input
-                  className=" txt-f  css-1rqmmmp-TextInput"
+                  className="txt-email txt-f  css-1rqmmmp-TextInput"
                   id="input-3734019359"
                   name="email"
                   onBlur={[Function]}
@@ -11687,7 +11687,7 @@ exports[`Storyshots RegisterMfaPage modal open 1`] = `
         className="hr hr--sq"
       />
       <form
-        className="m-v500"
+        className="m-v500 css-wgwnsn-DeviceVerificationForm"
         onSubmit={[Function]}
       >
         <div
@@ -12048,7 +12048,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm code sending error 1`
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div
@@ -12246,7 +12246,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm email with error 1`]
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div
@@ -12297,7 +12297,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm email with error 1`]
             className="g--6"
           >
             <input
-              className=" txt-f txt-f--err css-1rqmmmp-TextInput"
+              className="txt-email txt-f txt-f--err css-1rqmmmp-TextInput"
               id="input-3734019359"
               name="email"
               onBlur={[Function]}
@@ -12387,7 +12387,7 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm phone 1`] = `
     className="hr hr--sq"
   />
   <form
-    className="m-v500"
+    className="m-v500 css-wgwnsn-DeviceVerificationForm"
     onSubmit={[Function]}
   >
     <div