@thecb/components 8.4.11-beta.8 → 9.0.0-beta.0

package/src/components/molecules/modal/Modal.js

@@ -44,12 +44,13 @@ const Modal = ({
   customWidth,
   isLoading,
   buttonExtraStyles,
-  children
+  children,
+  dataQa = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
   return (
-    <div ref={modalContainerRef}>
+    <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
         <AriaModal
           // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -69,15 +69,17 @@ const PaymentFormACH = ({
       <FormInputColumn>
         <FormInput
           labelTextWhenNoError="Name on checking account"
+          dataQa="Name on checking account"
           errorMessages={nameErrors}
           field={fields.name}
           fieldActions={actions.fields.name}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="name"
+          autocompleteValue="name"
         />
         <FormInput
           labelTextWhenNoError="Routing number"
+          dataQa="Routing number"
           errorMessages={routingNumberErrors}
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
@@ -87,17 +89,18 @@ const PaymentFormACH = ({
             <AccountAndRoutingModal
               link="What is this?"
               title="Where is my routing number?"
-              content="Your routing number is the 9-digit number in the bottom left
-                  corner of your check."
+              content="Your routing number is the 9-digit number in the bottom left corner of your check."
               imageType="Routing"
               isOpen={showRouting}
               toggleOpen={toggleShowRouting}
+              data-qa="What is my routing number"
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
+          dataQa="Confirm routing number"
           errorMessages={confirmRoutingNumberErrors}
           field={fields.confirmRoutingNumber}
           fieldActions={actions.fields.confirmRoutingNumber}
@@ -107,6 +110,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Account number"
+          dataQa="Account number"
           errorMessages={accountNumberErrors}
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
@@ -116,17 +120,18 @@ const PaymentFormACH = ({
             <AccountAndRoutingModal
               link="What is this?"
               title="Where is my account number?"
-              content="Your account number is usually the 10-digit number in the bottom
-                of your check to the right of the routing number."
+              content="Your account number is usually the 10-digit number in the bottom of your check to the right of the routing number."
               imageType="Account"
               isOpen={showAccount}
               toggleOpen={toggleShowAccount}
+              dataQa="What is my account number"
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
+          dataQa="Confirm account number"
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
@@ -137,6 +142,7 @@ const PaymentFormACH = ({
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
+            dataQa="Account type"
             options={[
               { text: "Select account type", value: "" },
               { text: "Checking", value: "CHECKING" },
@@ -151,6 +157,7 @@ const PaymentFormACH = ({
         {!hideDefaultPayment && (
           <Checkbox
             title="Save as Default Payment Method"
+            dataQa="default-payment-ach"
             name="default-payment-ach"
             onChange={toggleCheckbox}
             checked={defaultMethod.value}
@@ -162,6 +169,7 @@ const PaymentFormACH = ({
             {showWalletCheckbox && (
               <Checkbox
                 name="bank checkbox"
+                dataQa="Save checking account to wallet"
                 title="Save checking account to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -109,19 +109,22 @@ const PaymentFormCard = ({
               }
             }}
             showErrors={showErrors}
+            dataQa="Country"
           />
         )}
         <FormInput
           labelTextWhenNoError="Name on card"
+          dataQa="Name on card"
           errorMessages={nameOnCardErrors}
           field={fields.nameOnCard}
           fieldActions={actions.fields.nameOnCard}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="cc-name"
+          autocompleteValue="cc-name"
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
+          dataQa="Credit card number"
           errorMessages={creditCardNumberErrors}
           field={fields.creditCardNumber}
           fieldActions={actions.fields.creditCardNumber}
@@ -129,7 +132,7 @@ const PaymentFormCard = ({
           formatter={creditCardFormat}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
-          autocomplete="cc-number"
+          autocompleteValue="cc-number"
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -137,6 +140,7 @@ const PaymentFormCard = ({
         >
           <FormInput
             labelTextWhenNoError="Expiration date (MM/YY)"
+            dataQa="Expiration date"
             errorMessages={expirationDateErrors}
             field={fields.expirationDate}
             fieldActions={actions.fields.expirationDate}
@@ -145,10 +149,11 @@ const PaymentFormCard = ({
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
-            autocomplete="cc-exp"
+            autocompleteValue="cc-exp"
           />
           <FormInput
             labelTextWhenNoError="CVV"
+            dataQa="CVV"
             errorMessages={cvvErrors}
             field={fields.cvv}
             fieldActions={actions.fields.cvv}
@@ -160,7 +165,7 @@ const PaymentFormCard = ({
                 : "/CVVHint.svg"
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-            autocomplete="cc-csc"
+            autocompleteValue="cc-csc"
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -172,12 +177,13 @@ const PaymentFormCard = ({
               isNum={isUS}
               formatter={isUS ? zipFormat : null}
               labelTextWhenNoError="Zip code"
+              dataQa="Zip code"
               errorMessages={zipCodeErrors}
               field={fields.zipCode}
               fieldActions={actions.fields.zipCode}
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-              autocomplete="billing postal-code"
+              autocompleteValue="billing postal-code"
             />
           </Box>
         )}
@@ -186,6 +192,7 @@ const PaymentFormCard = ({
             {showWalletCheckbox && (
               <Checkbox
                 name="credit card checkbox"
+                dataQa="Save credit card to wallet"
                 title="Save credit card to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}

package/src/components/molecules/phone-form/PhoneForm.js

@@ -7,7 +7,6 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 import Checkbox from "../../atoms/checkbox";
-import { noop } from "../../../util/general";
 import { phoneFormats, formatDelimiter } from "../../../util/formats";
 
 const PhoneForm = ({
@@ -40,8 +39,8 @@ const PhoneForm = ({
           showErrors={showErrors}
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
-          isNum
-          autocomplete="tel"
+          autocompleteValue="tel"
+          dataQa="Phone number"
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -59,7 +59,7 @@ const RegistrationForm = ({
         fieldActions={actions.fields.firstName}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-        autocomplete="given-name"
+        autocompleteValue="given-name"
       />
       <FormInput
         labelTextWhenNoError="Last name"
@@ -68,7 +68,7 @@ const RegistrationForm = ({
         fieldActions={actions.fields.lastName}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-        autocomplete="family-name"
+        autocompleteValue="family-name"
       />
       <FormInput
         labelTextWhenNoError="Email address"
@@ -79,7 +79,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="email"
         isEmail
-        autocomplete="email"
+        autocompleteValue="email"
       />
       <FormInput
         labelTextWhenNoError="Password"
@@ -89,7 +89,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
-        autocomplete="new-password"
+        autocompleteValue="new-password"
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -99,7 +99,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
-        autocomplete="new-password"
+        autocompleteValue="new-password"
       />
       <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
         <PasswordRequirements password={fields.password} isMobile={isMobile} />

package/src/components/molecules/reset-password-form/ResetPasswordForm.js

@@ -49,7 +49,7 @@ const ResetPasswordForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
-        autocomplete="new-password"
+        autocompleteValue="new-password"
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -59,7 +59,7 @@ const ResetPasswordForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
-        autocomplete="new-password"
+        autocompleteValue="new-password"
       />
       <Box padding="0">
         <PasswordRequirements password={fields.password} isMobile={isMobile} />

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -10,15 +10,17 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant
+  linkVariant,
+  dataQa = "TermsAndConditionsControlV1"
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
-    <DisplayBox>
+    <DisplayBox dataQ={dataQa}>
       <Stack>
         <Checkbox
           name="terms"
           title="Terms and Conditions"
+          dataQa="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -26,7 +26,8 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions"
+  modalTitle = "Terms and Conditions",
+  dataQa = "TermsAndConditionsControlV2"
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -45,6 +46,7 @@ const TermsAndConditionsControlV2 = ({
       background={displayInline ? "transparent" : containerBackground}
       boxShadow={displayInline ? "none" : standardBoxShadow}
       borderRadius={displayInline ? "0" : "4px"}
+      dataQa={dataQa}
     >
       <Stack childGap="0">
         {html && <Box padding="0">{html}</Box>}
@@ -78,15 +80,17 @@ const TermsAndConditionsControlV2 = ({
                 />
               )}
             </Cluster>
-            {showCheckbox && hasError && (
-              <Text
-                variant="pXS"
-                color={ERROR_COLOR}
-                id={`${id}-error-message`}
-              >
-                {errorMessage}
-              </Text>
-            )}
+            <div aria-live="polite" aria-atomic={true}>
+              {showCheckbox && hasError && (
+                <Text
+                  variant="pXS"
+                  color={ERROR_COLOR}
+                  id={`${id}-error-message`}
+                >
+                  {errorMessage}
+                </Text>
+              )}
+            </div>
           </Stack>
         </Cluster>
       </Stack>