@thecb/components 9.3.1-beta.0 → 9.3.1-beta.2

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -95,6 +95,7 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
+  labelledById,
   dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
@@ -105,6 +106,10 @@ const Checkbox = ({
     }
   };
 
+  const titleId = title ? `checkboxlabel-${name}` : undefined;
+  const ariaLabelledById = labelledById ?? titleId;
+  const ariaLabel = ariaLabelledById ? undefined : name;
+
   return (
     <Box
       padding="0"
@@ -122,7 +127,8 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={name}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledById}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -155,6 +161,7 @@ const Checkbox = ({
         </CheckboxContainer>
         {title && (
           <Text
+            id={titleId}
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -19,6 +19,7 @@ export const checkbox = () => (
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
+    labelledById={text("labelledById", undefined, "props")}
   />
 );
 

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

@@ -10,6 +10,7 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
+  isRequired = false,
   dataQa = null
 }) => (
   <FormSelect
@@ -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

@@ -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,37 +55,65 @@ const DropdownContentWrapper = styled.div`
 `;
 
 const DropdownItemWrapper = styled.li`
-  background-color: ${({ selected, themeValues }) =>
-    selected ? themeValues.selectedColor : WHITE};
   text-align: start;
-  border-width: 0px;
-  border-color: transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
   box-shadow: none;
-  padding: 1rem;
   box-sizing: border-box;
   width: 100%;
   list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
-    background-color: ${({ selected, disabled, themeValues }) =>
+    border-color: ${({ disabled, selected, themeValues }) =>
       selected
-        ? themeValues.selectedColor
+        ? themeValues.focusColor
         : disabled
         ? WHITE
         : themeValues.hoverColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+      border-color: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+    }
   }
   &:focus {
-    background-color: ${({ selected, disabled, themeValues }) =>
-      selected
-        ? themeValues.selectedColor
-        : disabled
-        ? WHITE
-        : themeValues.hoverColor};
     outline: none;
+    border-color: ${({ themeValues }) => themeValues.selectedColor};
+    > * {
+      background: ${({ selected, disabled, themeValues }) =>
+        selected
+          ? themeValues.focusColor
+          : disabled
+          ? WHITE
+          : themeValues.hoverColor};
+      border-color: white;
+      outline: none;
+    }
   }
 `;
 
+const DropdownItemBorder = styled.div`
+  background: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  border-color: ${({ selected, themeValues }) =>
+    selected ? themeValues.selectedColor : WHITE};
+  border-width: 2px;
+  border-style: solid;
+  padding: 12px;
+`;
+
 const Dropdown = ({
   placeholder,
   options,
@@ -105,7 +133,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([]);
@@ -234,13 +263,15 @@ const Dropdown = ({
   useEffect(() => {
     if (autoEraseTypeAhead) {
       clearTimeout(timer);
-      setTimer(setTimeout(() => setInputValue(""), 3000));
+      setTimer(setTimeout(() => setInputValue(""), 20000));
     }
+
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().startsWith(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().startsWith(inputValue.toLowerCase())
+          option?.value?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >=
+            0 ||
+          option.text?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >= 0
       )
     );
   }, [inputValue]);
@@ -328,7 +359,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
-        required={options.required}
+        required={options.required || isRequired}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -385,27 +416,33 @@ 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;`}
+                    <DropdownItemBorder
+                      disabled={disabledValues.includes(choice.value)}
+                      selected={choice.value === value}
+                      themeValues={themeValues}
                     >
-                      {choice.text}
-                    </Text>
+                      <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/dropdown/Dropdown.theme.js

@@ -1,9 +1,15 @@
-import { HOVER_LIGHT_BLUE, MATISSE_BLUE } from "../../../constants/colors";
+import {
+  HOVER_LIGHT_BLUE,
+  MATISSE_BLUE,
+  MATISSE_BLUE_DARK
+} from "../../../constants/colors";
 
 const selectedColor = `${MATISSE_BLUE}`;
 const hoverColor = `${HOVER_LIGHT_BLUE}`;
+const focusColor = `${MATISSE_BLUE_DARK}`;
 
 export const fallbackValues = {
   selectedColor,
-  hoverColor
+  hoverColor,
+  focusColor
 };

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,28 +95,31 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
+        isRequired={isRequired}
       />
       <Stack direction="row" justify="space-between">
-        <Text
-          color={ERROR_COLOR}
-          variant="pXS"
-          weight={themeValues.fontWeight}
-          extraStyles={`
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
+          <Text
+            color={ERROR_COLOR}
+            variant="pXS"
+            weight={themeValues.fontWeight}
+            extraStyles={`
             word-break: break-word;
             font-family: Public Sans;
             &::first-letter {
               text-transform: uppercase;
             }
           `}
-          id={createIdFromString(labelTextWhenNoError, "error message")}
-          aria-live="polite"
-          aria-atomic={true}
-          data-qa={createIdFromString(labelTextWhenNoError, "error message")}
-        >
-          {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-            ? errorMessages[field.errors[0]]
-            : ""}
-        </Text>
+            id={createIdFromString(labelTextWhenNoError, "error message")}
+            aria-live="polite"
+            aria-atomic={true}
+            data-qa={createIdFromString(labelTextWhenNoError, "error message")}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
       </Stack>
     </SelectContainer>
   );

package/src/components/atoms/icons/AccountNumberImage.js

@@ -7,6 +7,8 @@ const AccountNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
+      role="img"
+      aria-label="A check with the account number highlighted in the bottom center"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-364 -546)">

package/src/components/atoms/icons/BankIcon.js

@@ -8,6 +8,8 @@ export const BankIcon = () => {
       viewBox="0 0 28 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Check Payment"
     >
       <path
         d="M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z"

package/src/components/atoms/icons/CheckmarkIcon.js

@@ -9,6 +9,8 @@ const CheckmarkIcon = () => (
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
+    role="img"
+    aria-label="Successful payment, green checkmark"
   >
     <g
       id="Cityville-Checkout---Desktop---Logged-In"

package/src/components/atoms/icons/GenericCard.js

@@ -7,6 +7,8 @@ const GenericCard = () => (
     viewBox="0 0 28 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Card Payment"
   >
     <rect width="28" height="18" rx="2" fill="#15749D" />
     <path

package/src/components/atoms/icons/GenericCardLarge.js

@@ -8,6 +8,8 @@ const GenericCardLarge = () => {
       viewBox="0 0 36 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Card Payment"
     >
       <rect width="36" height="24" rx="2" fill="#15749D" />
       <path

package/src/components/atoms/icons/RoutingNumberImage.js

@@ -7,6 +7,8 @@ const RoutingNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
+      role="img"
+      aria-label="A check with the routing number highlighted in the lower left hand corner"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-365 -522)">

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

@@ -71,6 +71,7 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -81,6 +82,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
           dataQa="Address"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -100,6 +102,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
           dataQa="City"
+          isRequired={true}
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -110,6 +113,7 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
+          isRequired={true}
         />
         <FormInput
           isNum={isUS}
@@ -122,6 +126,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="postal-code"
           dataQa="Zip code"
+          isRequired={true}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/email-form/EmailForm.js

@@ -19,7 +19,8 @@ const EmailForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  isRequired = false
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -48,6 +49,7 @@ const EmailForm = ({
           isEmail
           autocompleteValue="email"
           dataQa="Email address"
+          isRequired={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/index.d.ts

@@ -4,3 +4,4 @@ export * from "./editable-table";
 export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
+export * from "./toast-notification";

package/src/components/molecules/index.js

@@ -37,5 +37,6 @@ export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
 export { default as Timeout } from "./timeout";
+export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";

package/src/components/molecules/modal/Modal.js

@@ -67,7 +67,8 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: customWidth || "615px"
+            width: customWidth || "615px",
+            overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
         >

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

@@ -76,6 +76,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -97,6 +98,7 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
@@ -107,6 +109,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Account number"
@@ -128,6 +131,7 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
@@ -137,6 +141,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
           isNum
         />
         {allowBankAccountType && (
@@ -152,6 +157,7 @@ const PaymentFormACH = ({
             showErrors={showErrors}
             errorMessages={accountTypeErrors}
             field={fields.accountType}
+            isRequired={true}
           />
         )}
         {!hideDefaultPayment && (

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

@@ -121,6 +121,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -133,6 +134,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -150,6 +152,7 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            isRequired={true}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -166,6 +169,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            isRequired={true}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -184,6 +188,7 @@ const PaymentFormCard = ({
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
               autocompleteValue="billing postal-code"
+              isRequired={true}
             />
           </Box>
         )}

package/src/components/molecules/phone-form/PhoneForm.js

@@ -19,7 +19,8 @@ const PhoneForm = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  isRequired = false
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -43,6 +44,7 @@ const PhoneForm = ({
           autocompleteValue="tel-national"
           dataQa="Phone number"
           isNum={true}
+          isRequired={isRequired}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/popover/Popover.js

@@ -4,7 +4,7 @@ import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
-import { useOutsideClick } from "../../../util";
+import { useOutsideClick } from "../../../hooks";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";