@thecb/components 9.1.3 → 9.1.4-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.3",
+  "version": "9.1.4-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -10,7 +10,8 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null
+  dataQa = null,
+  isRequired = false
 }) => (
   <FormSelect
     options={options}
@@ -22,6 +23,7 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
+    isRequired={isRequired}
   />
 );
 export default CountryDropdown;

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

@@ -116,6 +116,7 @@ const FormInput = ({
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,
+  isRequired = false,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -221,6 +222,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={isRequired}
             {...props}
           />
         ) : (
@@ -247,6 +249,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={isRequired}
             {...props}
           />
         )}

package/src/components/atoms/form-select/FormSelect.js

@@ -24,7 +24,8 @@ const FormSelect = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
   dataQa = null,
-  widthFitOptions = false
+  widthFitOptions = false,
+  isRequired = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -94,6 +95,7 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
+        required={isRequired}
       />
       <Stack direction="row" justify="space-between">
         <Text

package/src/components/atoms/layouts/Motion.styled.js

@@ -8,7 +8,7 @@ export const MotionWrapper = styled(motion.div)`
   padding: ${({ padding }) => padding};
   border: ${({ borderShorthand }) => borderShorthand};
   border-color: ${({ borderColor }) => borderColor};
-  border-size: ${({ borderSize }) => borderSize};
+  border-width: ${({ borderSize }) => borderSize};
   border-style: ${({ borderStyle }) => borderStyle};
   border-width: ${({ borderWidth }) => borderWidth};
   border-radius: ${({ borderRadius }) => borderRadius};

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -50,7 +50,8 @@ const PaymentFormACH = ({
   };
   const confirmRoutingNumberErrors = {
     [matchesField.error]:
-      "Confirm routing number field must match routing number"
+      "Confirm routing number field must match routing number",
+    [required.error]: "Confirm routing number is required"
   };
   const accountNumberErrors = {
     [required.error]: "Account number is required",
@@ -58,12 +59,21 @@ const PaymentFormACH = ({
   };
   const confirmAccountNumberErrors = {
     [matchesField.error]:
-      "Confirm account number field must match account number"
+      "Confirm account number field must match account number",
+    [required.error]: "Confirm account number is required"
   };
   const accountTypeErrors = {
     [required.error]: "Account type is required"
   };
 
+  const getIsRequiredFromValidators = useCallback(
+    field =>
+      !!field?.validators?.find(
+        validator => validator.type === "validator/REQUIRED"
+      ),
+    []
+  );
+
   return (
     <FormContainer variant={variant} role="form" aria-label="ACH Payment">
       <FormInputColumn>
@@ -76,6 +86,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          isRequired={getIsRequiredFromValidators(fields.name)}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -84,6 +95,7 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
+          isRequired={getIsRequiredFromValidators(fields.routingNumber)}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -106,6 +118,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={getIsRequiredFromValidators(fields.confirmRoutingNumber)}
           isNum
         />
         <FormInput
@@ -115,6 +128,7 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isRequired={getIsRequiredFromValidators(fields.accountNumber)}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -137,6 +151,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={getIsRequiredFromValidators(fields.confirmAccountNumber)}
           isNum
         />
         {allowBankAccountType && (
@@ -152,6 +167,7 @@ const PaymentFormACH = ({
             showErrors={showErrors}
             errorMessages={accountTypeErrors}
             field={fields.accountType}
+            isRequired={getIsRequiredFromValidators(fields.accountType)}
           />
         )}
         {!hideDefaultPayment && (

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

@@ -16,7 +16,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
-    validators: [matchesField("routingNumber")],
+    validators: [matchesField("routingNumber"), required()],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -24,7 +24,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber")],
+    validators: [matchesField("accountNumber"), required()],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useCallback } from "react";
 import { ThemeContext } from "styled-components";
 import {
   required,
@@ -47,6 +47,14 @@ const PaymentFormCard = ({
   const { isMobile } = useContext(ThemeContext);
   const showTerms = !!termsContent;
 
+  const getIsRequiredFromValidators = useCallback(
+    field =>
+      !!field?.validators?.find(
+        validator => validator.type === "validator/REQUIRED"
+      ),
+    []
+  );
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -110,6 +118,7 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
+            isRequired={getIsRequiredFromValidators(fields.country)}
           />
         )}
         <FormInput
@@ -121,6 +130,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          isRequired={getIsRequiredFromValidators(fields.nameOnCard)}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -133,6 +143,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={getIsRequiredFromValidators(fields.creditCardNumber)}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -150,6 +161,7 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            isRequired={getIsRequiredFromValidators(fields.expirationDate)}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -166,6 +178,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            isRequired={getIsRequiredFromValidators(fields.cvv)}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -184,6 +197,7 @@ const PaymentFormCard = ({
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
               autocompleteValue="billing postal-code"
+              isRequired={getIsRequiredFromValidators(fields.zipCode)}
             />
           </Box>
         )}

package/src/components/molecules/radio-section/RadioSection.js

@@ -123,7 +123,8 @@ const RadioSection = ({
               extraStyles={borderStyles}
               role="radio"
               aria-checked={openSection === section.id}
-              aria-disabled={section.disabled}
+              disabled={section.disabled}
+              required={section?.required}
             >
               <Stack childGap="0">
                 <Box
@@ -166,6 +167,8 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
+                            role="radio"
+                            required={!!section?.required}
                             id={`radio-input-${idString(section)}`}
                             name={idString(section)}
                             ariaDescribedBy={ariaDescribedBy}