@thecb/components 9.1.4 → 9.1.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.4",
+  "version": "9.1.6-beta.0",
   "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/dropdown/Dropdown.js

@@ -105,7 +105,8 @@ const Dropdown = ({
   ariaDescribedby,
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
-  ariaInvalid = false
+  ariaInvalid = false,
+  isRequired = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -328,7 +329,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
-        required={options.required}
+        required={options.required || isRequired}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}

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/atoms/state-province-dropdown/StateProvinceDropdown.js

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { required, hasLength } from "redux-freeform";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
@@ -10,6 +10,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import { getIsRequiredFromValidators } from "../../../util/formUtils";
 
 const AddressForm = ({
   variant = "default",
@@ -71,6 +72,7 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.city)}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -81,6 +83,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
           dataQa="Address"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.street1)}
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -90,6 +93,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.street2)}
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -100,6 +104,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
           dataQa="City"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.city)}
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -110,6 +115,9 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.stateProvince
+          )}
         />
         <FormInput
           isNum={isUS}
@@ -122,6 +130,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="postal-code"
           dataQa="Zip code"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.zip)}
         />
         {showWalletCheckbox && (
           <Checkbox

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,
@@ -16,6 +16,7 @@ import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
 import { Cluster, Cover } from "../../atoms/layouts";
 import TermsAndConditions from "../terms-and-conditions";
+import { getIsRequiredFromValidators } from "../../../util/formUtils";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -50,7 +51,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,7 +60,8 @@ 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"
@@ -76,6 +79,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          isRequired={getIsRequiredFromValidators(useCallback)(fields.name)}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -84,6 +88,9 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.routingNumber
+          )}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -106,6 +113,9 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.confirmRoutingNumber
+          )}
           isNum
         />
         <FormInput
@@ -115,6 +125,9 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.accountNumber
+          )}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -137,6 +150,9 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.confirmAccountNumber
+          )}
           isNum
         />
         {allowBankAccountType && (
@@ -152,6 +168,9 @@ const PaymentFormACH = ({
             showErrors={showErrors}
             errorMessages={accountTypeErrors}
             field={fields.accountType}
+            isRequired={getIsRequiredFromValidators(useCallback)(
+              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,
@@ -29,6 +29,7 @@ import {
 import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
 import TermsAndConditions from "../terms-and-conditions";
+import { getIsRequiredFromValidators } from "../../../util/formUtils";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -110,6 +111,9 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
+            isRequired={getIsRequiredFromValidators(useCallback)(
+              fields.country
+            )}
           />
         )}
         <FormInput
@@ -121,6 +125,9 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.nameOnCard
+          )}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -133,6 +140,9 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={getIsRequiredFromValidators(useCallback)(
+            fields.creditCardNumber
+          )}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -150,6 +160,9 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            isRequired={getIsRequiredFromValidators(useCallback)(
+              fields.expirationDate
+            )}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -166,6 +179,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            isRequired={getIsRequiredFromValidators(useCallback)(fields.cvv)}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -184,6 +198,9 @@ const PaymentFormCard = ({
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
               autocompleteValue="billing postal-code"
+              isRequired={getIsRequiredFromValidators(useCallback)(
+                fields.zipCode
+              )}
             />
           </Box>
         )}

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

@@ -47,7 +47,8 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy
+  ariaDescribedBy,
+  isRequired = false
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -105,7 +106,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup">
+      <Stack childGap="0" role="radiogroup" required={isRequired}>
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -123,7 +124,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 +168,8 @@ 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/RadioSection.stories.js

@@ -49,10 +49,11 @@ const sections = [
     title: "New Card",
     content: <p>The form to add a credit card would go here.</p>,
     rightIconsLabel: cardIconsLabel,
-    rightIcons: cardIcons
+    rightIcons: cardIcons,
+    required: true
   },
-  { id: "bar", title: "Bar", content: <div>Content 1</div> },
-  { id: "baz", title: "Baz", content: <div>Content 2</div> }
+  { id: "bar", title: "Bar", content: <div>Content 1</div>, required: true },
+  { id: "baz", title: "Baz", content: <div>Content 2</div>, required: true }
 ];
 
 export const radioSection = () => {

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

@@ -19,7 +19,8 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null
+  ariaLabel = null,
+  required = false
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -93,6 +94,7 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
+        required={required}
         {...extraProps}
       />
       <Motion

package/src/util/formUtils.js

@@ -0,0 +1,9 @@
+export const getIsRequiredFromValidators = callbackFn => {
+  return callbackFn(
+    field =>
+      !!field.validators.find(
+        validator => validator.type === "validator/REQUIRED"
+      ),
+    []
+  );
+};