@thecb/components 6.1.2 → 6.1.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.2",
+  "version": "6.1.4-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -86,6 +86,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.5.0"
+    "redux-freeform": "^5.6.0-beta.3"
   }
 }

package/src/components/atoms/form-layouts/FormInput.js

@@ -112,6 +112,7 @@ const FormInput = ({
   themeValues,
   background,
   customHeight,
+  autocomplete,
   extraStyles,
   ...props
 }) => {
@@ -210,6 +211,7 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
+            autocomplete={autocomplete}
             {...props}
           />
         ) : (
@@ -235,6 +237,7 @@ const FormInput = ({
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
+            autocomplete={autocomplete}
             {...props}
           />
         )}

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -9,7 +9,8 @@ const FormStateDropdown = ({
   field,
   fieldActions,
   showErrors,
-  countryCode
+  countryCode,
+  autocomplete
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -22,7 +23,7 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
-      autocompleteValue="address-level1"
+      autocompleteValue={autocomplete}
     />
   );
 };

package/src/components/molecules/address-form/AddressForm.js

@@ -72,6 +72,7 @@ const AddressForm = ({
           fieldActions={actions.fields.street1}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="address-line1"
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -79,6 +80,7 @@ const AddressForm = ({
           fieldActions={actions.fields.street2}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="address-line2"
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -87,6 +89,7 @@ const AddressForm = ({
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="address-level2"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -96,6 +99,7 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="address-level1"
         />
         <FormInput
           isNum={isUS}
@@ -106,6 +110,7 @@ const AddressForm = ({
           fieldActions={actions.fields.zip}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="postal-code"
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -91,6 +91,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
+            autocomplete="current-password"
           />
           <FormInput
             labelTextWhenNoError="New password"
@@ -100,6 +101,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
+            autocomplete="new-password"
           />
           <FormInput
             labelTextWhenNoError="Confirm password"
@@ -109,6 +111,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
+            autocomplete="new-password"
           />
         </FormInputColumn>
         <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>

package/src/components/molecules/edit-name-form/EditNameForm.js

@@ -35,6 +35,7 @@ const EditNameForm = ({
           fieldActions={actions.fields.firstName}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="given-name"
         />
         <FormInput
           labelTextWhenNoError="Last Name"
@@ -43,6 +44,7 @@ const EditNameForm = ({
           fieldActions={actions.fields.lastName}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="family-name"
         />
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/editable-list/EditableList.js

@@ -36,7 +36,8 @@ const EditableList = ({
   modalProps,
   autoPayMethods,
   as = "p",
-  qaPrefix
+  qaPrefix,
+  ariaLabel
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -111,7 +112,7 @@ const EditableList = ({
                           text="Remove"
                           action={() => removeItem(item.id)}
                           extraStyles={`min-width: 0;`}
-                          aria-label={`Remove ${itemName}`}
+                          aria-label={`Remove ${ariaLabel || itemName}`}
                         />
                       )}
                     </Box>
@@ -129,7 +130,7 @@ const EditableList = ({
                         text="Edit"
                         action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
-                        aria-label={`Edit ${itemName}`}
+                        aria-label={`Edit ${ariaLabel || itemName}`}
                       />
                     </Box>
                   )}

package/src/components/molecules/email-form/EmailForm.js

@@ -46,6 +46,7 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isEmail
+          autocomplete="email"
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -27,6 +27,7 @@ const ForgotPasswordForm = ({
       showErrors={showErrors}
       onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
       isEmail
+      autocomplete="email"
     />
   );
 };

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -152,6 +152,7 @@ const InternalUserInfoForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             disabled={namesDisabled}
+            autocomplete="given-name"
           />
           <FormInput
             labelTextWhenNoError="Last Name"
@@ -161,6 +162,7 @@ const InternalUserInfoForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             disabled={namesDisabled}
+            autocomplete="family-name"
           />
           <FormInput
             labelTextWhenNoError="Email"
@@ -170,6 +172,7 @@ const InternalUserInfoForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             disabled={emailDisabled}
+            autocomplete="email"
           />
           {formType === PROFILE && (
             <FormInput

package/src/components/molecules/login-form/LoginForm.js

@@ -31,6 +31,7 @@ const LoginForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         isEmail
+        autocomplete="email"
       />
       <FormInput
         labelTextWhenNoError="Password"
@@ -40,6 +41,7 @@ const LoginForm = ({
         fieldActions={actions.fields.password}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        autocomplete="current-password"
       />
     </FormInputColumn>
   );

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

@@ -70,6 +70,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.name}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="name"
         />
         <FormInput
           labelTextWhenNoError="Routing number"

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

@@ -114,6 +114,7 @@ const PaymentFormCard = ({
           fieldActions={actions.fields.nameOnCard}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          autocomplete="cc-name"
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -124,6 +125,7 @@ const PaymentFormCard = ({
           formatter={creditCardFormat}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
+          autocomplete="cc-number"
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -138,6 +140,7 @@ const PaymentFormCard = ({
             formatter={expirationDateFormat}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             isNum
+            autocomplete="cc-exp"
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -152,6 +155,7 @@ const PaymentFormCard = ({
                 : "/CVVHint.svg"
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            autocomplete="cc-csc"
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -168,6 +172,7 @@ const PaymentFormCard = ({
               fieldActions={actions.fields.zipCode}
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+              autocomplete="billing postal-code"
             />
           </Box>
         )}

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

@@ -6,7 +6,8 @@ import {
   matchesRegex,
   validateWhen,
   dateAfterToday,
-  isValidMonth
+  isValidMonth,
+  onlyExpirationDate
 } from "redux-freeform";
 
 //TODO: Will make zip code able to have more than 5 digits once we add in the FormattedInput because it will have issues with format of 60606-1111.
@@ -30,7 +31,7 @@ const formConfig = {
       isValidMonth(0),
       dateAfterToday("MMYY", "month", true)
     ],
-    constraints: [onlyIntegers(), hasLength(0, 4)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],

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

@@ -41,6 +41,7 @@ const PhoneForm = ({
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
           isNum
+          autocomplete="tel"
         />
         {showWalletCheckbox && (
           <Checkbox

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

@@ -59,6 +59,7 @@ const RegistrationForm = ({
         fieldActions={actions.fields.firstName}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        autocomplete="given-name"
       />
       <FormInput
         labelTextWhenNoError="Last name"
@@ -67,6 +68,7 @@ const RegistrationForm = ({
         fieldActions={actions.fields.lastName}
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+        autocomplete="family-name"
       />
       <FormInput
         labelTextWhenNoError="Email address"
@@ -77,6 +79,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="email"
         isEmail
+        autocomplete="email"
       />
       <FormInput
         labelTextWhenNoError="Password"
@@ -86,6 +89,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
+        autocomplete="new-password"
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -95,6 +99,7 @@ const RegistrationForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
+        autocomplete="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,6 +49,7 @@ const ResetPasswordForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
+        autocomplete="new-password"
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -58,6 +59,7 @@ const ResetPasswordForm = ({
         showErrors={showErrors}
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         type="password"
+        autocomplete="new-password"
       />
       <Box padding="0">
         <PasswordRequirements password={fields.password} isMobile={isMobile} />