@thecb/components 9.1.6-beta.0 → 9.1.7-beta.0

package/package.json

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

@@ -12,11 +12,11 @@ import styled from "styled-components";
 import "core-js/proposals/relative-indexing-method";
 
 import {
-  WHITE,
+  ERROR_COLOR,
   GREY_CHATEAU,
-  STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR
+  STORM_GREY,
+  WHITE
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -55,10 +55,8 @@ const DropdownContentWrapper = styled.div`
 `;
 
 const DropdownItemWrapper = styled.li`
-  background-color: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
   text-align: start;
-  border-width: 0px;
+  border-width: 2px;
   border-color: transparent;
   box-shadow: none;
   padding: 1rem;
@@ -67,6 +65,23 @@ const DropdownItemWrapper = styled.li`
   list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
+  &:hover {
+    border-color: themeValues.selectedColor;
+  }
+  &:focus {
+    outline: none;
+    border-color: themeValues.selectedColor;
+  }
+`;
+// ${({ selected, themeValues }) =>
+// selected ? themeValues.selectedColor : TRANSPARENT};
+const DropdownItemBorder = styled.div`
+  background-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  border-width: 2px;
+  border-color: white;
+  width: 100%;
+
   &:hover {
     background-color: ${({ selected, disabled, themeValues }) =>
       selected
@@ -105,8 +120,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 +343,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
-        required={options.required || isRequired}
+        required={options.required}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -386,27 +400,29 @@ const Dropdown = ({
                     role="option"
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
                   >
-                    <Text
-                      variant="p"
-                      color={
-                        choice.value === value
-                          ? WHITE
-                          : disabledValues.includes(choice.value)
-                          ? STORM_GREY
-                          : MINESHAFT_GREY
-                      }
-                      extraStyles={`padding-left: 16px;
-                      cursor: ${
-                        disabledValues.includes(choice.value)
-                          ? "default"
-                          : "pointer"
-                      };
-                      white-space: nowrap;
-                      overflow: hidden;
-                      text-overflow: ellipsis;`}
-                    >
-                      {choice.text}
-                    </Text>
+                    <DropdownItemBorder selected={choice.value === value}>
+                      <Text
+                        variant="p"
+                        color={
+                          choice.value === value
+                            ? WHITE
+                            : disabledValues.includes(choice.value)
+                            ? STORM_GREY
+                            : MINESHAFT_GREY
+                        }
+                        extraStyles={`padding-left: 16px;
+                        cursor: ${
+                          disabledValues.includes(choice.value)
+                            ? "default"
+                            : "pointer"
+                        };
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;`}
+                      >
+                        {choice.text}
+                      </Text>
+                    </DropdownItemBorder>
                   </DropdownItemWrapper>
                 );
               })}

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

@@ -47,8 +47,7 @@ const RadioSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   containerStyles = "",
-  ariaDescribedBy,
-  isRequired = false
+  ariaDescribedBy
 }) => {
   const handleKeyDown = (id, e) => {
     if (e?.keyCode === 13 || e?.keyCode === 32) {
@@ -106,7 +105,7 @@ const RadioSection = ({
       borderRadius="4px"
       extraStyles={containerStyles}
     >
-      <Stack childGap="0" role="radiogroup" required={isRequired}>
+      <Stack childGap="0" role="radiogroup">
         {sections
           .filter(section => !section.hidden)
           .map(section => (
@@ -124,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
@@ -168,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,8 +19,7 @@ const RadioButton = ({
   ariaDescribedBy = "",
   themeValues,
   ariaLabelledBy = "",
-  ariaLabel = null,
-  required = false
+  ariaLabel = null
 }) => {
   const buttonBorder = {
     onFocused: {
@@ -94,7 +93,6 @@ const RadioButton = ({
         onClick={toggleRadio}
         aria-describedby={ariaDescribedBy}
         tabIndex="-1"
-        required={required}
         {...extraProps}
       />
       <Motion