@thecb/components 9.1.4-beta.5 → 9.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.4-beta.5",
+  "version": "9.1.4",
   "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,8 +10,7 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null,
-  isRequired = false
+  dataQa = null
 }) => (
   <FormSelect
     options={options}
@@ -23,7 +22,6 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    isRequired={isRequired}
   />
 );
 export default CountryDropdown;

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

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

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

@@ -24,8 +24,7 @@ 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,
-  isRequired = false
+  widthFitOptions = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -95,7 +94,6 @@ 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-width: ${({ borderSize }) => borderSize};
+  border-size: ${({ 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, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -50,8 +50,7 @@ const PaymentFormACH = ({
   };
   const confirmRoutingNumberErrors = {
     [matchesField.error]:
-      "Confirm routing number field must match routing number",
-    [required.error]: "Confirm routing number is required"
+      "Confirm routing number field must match routing number"
   };
   const accountNumberErrors = {
     [required.error]: "Account number is required",
@@ -59,21 +58,12 @@ const PaymentFormACH = ({
   };
   const confirmAccountNumberErrors = {
     [matchesField.error]:
-      "Confirm account number field must match account number",
-    [required.error]: "Confirm account number is required"
+      "Confirm account number field must match account number"
   };
   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>
@@ -86,7 +76,6 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
-          isRequired={getIsRequiredFromValidators(fields.name)}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -95,7 +84,6 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
-          isRequired={getIsRequiredFromValidators(fields.routingNumber)}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -118,7 +106,6 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={getIsRequiredFromValidators(fields.confirmRoutingNumber)}
           isNum
         />
         <FormInput
@@ -128,7 +115,6 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
-          isRequired={getIsRequiredFromValidators(fields.accountNumber)}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -151,7 +137,6 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={getIsRequiredFromValidators(fields.confirmAccountNumber)}
           isNum
         />
         {allowBankAccountType && (
@@ -167,7 +152,6 @@ 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"), required()],
+    validators: [matchesField("routingNumber")],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -24,7 +24,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber"), required()],
+    validators: [matchesField("accountNumber")],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useCallback } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { ThemeContext } from "styled-components";
 import {
   required,
@@ -47,14 +47,6 @@ 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 =>
@@ -118,7 +110,6 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
-            isRequired={getIsRequiredFromValidators(fields.country)}
           />
         )}
         <FormInput
@@ -130,7 +121,6 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
-          isRequired={getIsRequiredFromValidators(fields.nameOnCard)}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -143,7 +133,6 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
-          isRequired={getIsRequiredFromValidators(fields.creditCardNumber)}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -161,7 +150,6 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
-            isRequired={getIsRequiredFromValidators(fields.expirationDate)}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -178,7 +166,6 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
-            isRequired={getIsRequiredFromValidators(fields.cvv)}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -197,7 +184,6 @@ 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,8 +123,7 @@ const RadioSection = ({
               extraStyles={borderStyles}
               role="radio"
               aria-checked={openSection === section.id}
-              disabled={section.disabled}
-              required={section?.required}
+              aria-disabled={section.disabled}
             >
               <Stack childGap="0">
                 <Box
@@ -167,8 +166,6 @@ const RadioSection = ({
                       {!section.hideRadioButton && (
                         <Box padding="0">
                           <RadioButton
-                            role="radio"
-                            required={!!section?.required}
                             id={`radio-input-${idString(section)}`}
                             name={idString(section)}
                             ariaDescribedBy={ariaDescribedBy}

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,19 +24,21 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
 
@@ -97,7 +99,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="4px 14px 4px 4px"
+        margin="6px 14px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${GREY_CHATEAU}`;
+const inactiveColor = `${STORM_GREY}`;
 
 export const fallbackValues = {
   activeColor,