@thecb/components 9.1.4-beta.6 → 9.1.4

package/package.json

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

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

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

@@ -9,8 +9,7 @@ const FormStateDropdown = ({
   field,
   fieldActions,
   showErrors,
-  countryCode,
-  isRequired = false
+  countryCode
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -24,7 +23,6 @@ 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, { useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 import { required, hasLength } from "redux-freeform";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
@@ -10,7 +10,6 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
-import { getIsRequiredFromValidators } from "../../../util/formUtils";
 
 const AddressForm = ({
   variant = "default",
@@ -72,7 +71,6 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
-          isRequired={getIsRequiredFromValidators(useCallback)(fields.city)}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -83,7 +81,6 @@ 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)"
@@ -93,7 +90,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
-          isRequired={getIsRequiredFromValidators(useCallback)(fields.street2)}
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -104,7 +100,6 @@ 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"}
@@ -115,9 +110,6 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.stateProvince
-          )}
         />
         <FormInput
           isNum={isUS}
@@ -130,7 +122,6 @@ 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, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -16,7 +16,6 @@ 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",
@@ -51,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",
@@ -60,8 +58,7 @@ 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"
@@ -79,7 +76,6 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
-          isRequired={getIsRequiredFromValidators(useCallback)(fields.name)}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -88,9 +84,6 @@ const PaymentFormACH = ({
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.routingNumber
-          )}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -113,9 +106,6 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.confirmRoutingNumber
-          )}
           isNum
         />
         <FormInput
@@ -125,9 +115,6 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.accountNumber
-          )}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -150,9 +137,6 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.confirmAccountNumber
-          )}
           isNum
         />
         {allowBankAccountType && (
@@ -168,9 +152,6 @@ 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"), 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,
@@ -29,7 +29,6 @@ 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",
@@ -111,9 +110,6 @@ const PaymentFormCard = ({
             }}
             showErrors={showErrors}
             dataQa="Country"
-            isRequired={getIsRequiredFromValidators(useCallback)(
-              fields.country
-            )}
           />
         )}
         <FormInput
@@ -125,9 +121,6 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.nameOnCard
-          )}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -140,9 +133,6 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
-          isRequired={getIsRequiredFromValidators(useCallback)(
-            fields.creditCardNumber
-          )}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -160,9 +150,6 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
-            isRequired={getIsRequiredFromValidators(useCallback)(
-              fields.expirationDate
-            )}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -179,7 +166,6 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
-            isRequired={getIsRequiredFromValidators(useCallback)(fields.cvv)}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -198,9 +184,6 @@ 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

@@ -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/RadioSection.stories.js

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

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

@@ -19,25 +19,26 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null,
-  required = false
+  ariaLabel = null
 }) => {
   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"
     }
   };
 
@@ -92,14 +93,13 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
-        required={required}
         {...extraProps}
       />
       <Motion
         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,