@thecb/components 9.3.2-beta.1 → 9.3.2

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -7,6 +7,7 @@ import Heading from "../heading";
 import { Box, Center, Cover, Cluster } from "../layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
+import { ENTER } from "../../../constants/keyboard";
 import { noop } from "../../../util/general";
 
 const HiddenToggleSwitchBox = styled.input`
@@ -149,7 +150,7 @@ const ToggleSwitch = ({
   });
 
   const handleKeyDown = e => {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       onToggle();
     }
   };

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/collapsible-section/CollapsibleSection.js

@@ -4,6 +4,7 @@ import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
 import Title from "../../atoms/title";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { ENTER } from "../../../constants/keyboard";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { ChevronIcon } from "../../atoms/icons";
 import { noop } from "../../../util/general";
@@ -28,7 +29,7 @@ const CollapsibleSection = ({
   extraStyles = ""
 }) => {
   const handleKeyDown = e => {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       toggleSection();
     }
   };

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/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/obligation/modules/AutopayModalModule.js

@@ -70,19 +70,9 @@ const AutopayModal = ({
       : navigateToSettings
   };
 
-  const hoverStyles = `
-  &:hover {
-    .autopayIcon { fill: ${themeValues.hoverColor}; text-decoration: underline; cursor: pointer; }
-  }`;
+  const hoverStyles = "text-decoration: underline;";
+  const activeStyles = "text-decoration: underline;";
 
-  const activeStyles = `
-   &:active {
-    .autopayIcon { fill: ${themeValues.activeColor}; text-decoration: underline; }
-    }`;
-
-  const defaultStyles = `
-    .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
-     `;
   const renderAutoPayControl = () => {
     switch (controlType) {
       case "secondary": {
@@ -126,7 +116,7 @@ const AutopayModal = ({
             }}
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
-            extraStyles={defaultStyles}
+            extraStyles={"cursor: pointer;"}
           >
             <Cluster
               justify={isMobile ? "flex-start" : "flex-end"}

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

@@ -6,6 +6,7 @@ import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { useOutsideClick } from "../../../hooks";
 import { noop } from "../../../util/general";
+import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Popover.theme";
 
 const arrowBorder = (borderColor, direction, width = "8px") => {
@@ -76,7 +77,7 @@ const Popover = ({
           handleTogglePopover(false);
         }}
         onKeyDown={e => {
-          if (e.keyCode === 27) {
+          if (e.keyCode === ESCAPE) {
             handleTogglePopover(false);
           }
         }}

package/src/components/molecules/popup-menu/PopupMenu.js

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import Text from "../../atoms/text";
+import { Box } from "../../atoms/layouts";
+import PopupMenuItem from "./popup-menu-item/PopupMenuItem";
+import { fallbackValues } from "./PopupMenu.theme";
+import { PopupMenuContainer, PopupMenuTriggerButton } from "./PopupMenu.styled";
+
+const PopupMenu = ({
+  menuId = "popup-menu",
+  menuItems = [],
+  themeValues,
+  triggerText = "trigger text",
+  hasIcon = false,
+  icon: Icon,
+  iconHelpText = "", // for screen-readers, required if using an icon for trigger
+  menuFocus,
+  containerExtraStyles,
+  textExtraStyles,
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  position,
+  transform = "none",
+  buttonExtraStyles,
+  popupExtraStyles
+}) => {
+  const {
+    hoverColor,
+    activeColor,
+    menuTriggerColor,
+    backgroundColor
+  } = themeValues;
+  const { top = `${height}px`, right = "auto", bottom = "auto", left = "0" } =
+    position ?? {};
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef();
+  const triggerRef = useRef();
+  const toggleMenu = menuState => setIsMenuOpen(menuState);
+
+  useEffect(() => {
+    const checkIfClickedOutside = e => {
+      // If the menu is open and the clicked target is not within the menu or the trigger
+      if (
+        isMenuOpen &&
+        menuRef.current &&
+        !menuRef.current.contains(e.target) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target)
+      ) {
+        toggleMenu(false);
+      }
+    };
+
+    document.addEventListener("click", checkIfClickedOutside);
+
+    return () => {
+      document.removeEventListener("click", checkIfClickedOutside);
+    };
+  }, [isMenuOpen]);
+
+  return (
+    <PopupMenuContainer extraStyles={containerExtraStyles}>
+      <PopupMenuTriggerButton
+        ref={triggerRef}
+        action={() => {
+          toggleMenu(!isMenuOpen);
+        }}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            toggleMenu(false);
+          }
+        }}
+        contentOverride
+        variant="smallGhost"
+        tabIndex="0"
+        id={menuId}
+        borderRadius="8px"
+        aria-haspopup="true"
+        aria-expanded={isMenuOpen}
+        aria-controls={`${menuId}-container`}
+        extraStyles={buttonExtraStyles}
+      >
+        {hasIcon && (
+          <>
+            <Icon />
+            <Box padding="0" srOnly>
+              <Text id={`btn${menuId}_info`}>{iconHelpText}</Text>
+            </Box>
+          </>
+        )}
+        {!hasIcon && (
+          <Text
+            color={menuTriggerColor}
+            extraStyles={`&:active { color: ${activeColor}; } &:hover { color: ${hoverColor} }; ${textExtraStyles}`}
+          >
+            {triggerText}
+          </Text>
+        )}
+      </PopupMenuTriggerButton>
+      <Box
+        as="div"
+        id={`${menuId}-container`}
+        ref={menuRef}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            toggleMenu(false);
+          }
+        }}
+        background={backgroundColor}
+        borderRadius="8px"
+        boxShadow={`
+          0px 7px 32px 0px rgba(41, 42, 51, 0.2),
+          0px 1px 4px 0px rgba(41, 42, 51, 0.2),
+          0px 1px 8px -1px rgba(41, 42, 51, 0.3);
+        `}
+        role="menu"
+        aria-labelledby={menuId}
+        tabIndex={menuFocus && isMenuOpen ? "0" : "-1"}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        extraStyles={`
+          display: ${isMenuOpen ? "block" : "none"};
+          position: absolute;
+          padding: 8px 8px 3px 8px;
+          top: ${top}; 
+          left: ${left};
+          right: ${right};
+          bottom: ${bottom};
+          height: ${height};
+          transform: ${transform};
+          ${popupExtraStyles};
+        `}
+      >
+        {menuItems.map((item, index) => (
+          <PopupMenuItem
+            key={index}
+            id={`${menuId}-item-${index}`}
+            closeMenuCallback={() => {
+              toggleMenu(false);
+              // focus back to trigger button when menu closes
+              triggerRef.current.focus();
+            }}
+            {...item}
+          />
+        ))}
+      </Box>
+    </PopupMenuContainer>
+  );
+};
+
+export default themeComponent(PopupMenu, "PopupMenu", fallbackValues);

package/src/components/molecules/popup-menu/PopupMenu.stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { KebabMenuIcon, TrashIcon } from "../../atoms";
+import PopupMenu from "./PopupMenu";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+
+const menuItems = [
+  {
+    text: "Account Details",
+    action: noop
+  },
+  {
+    text: "Remove",
+    action: noop,
+    isDeleteAction: true,
+    hasIcon: true,
+    icon: TrashIcon
+  }
+];
+
+const story = page({
+  title: "Components|Molecules/PopupMenu",
+  Component: PopupMenu
+});
+
+export const popupMenu = () => (
+  <PopupMenu
+    hasIcon="true"
+    menuItems={menuItems}
+    icon={KebabMenuIcon}
+    minWidth={"50px"}
+    maxWidth={"208px"}
+    position={{ top: "0", left: "auto", right: "63px" }}
+    menuId={"menuId"}
+    containerExtraStyles={`margin-bottom: 100px;`}
+    buttonExtraStyles={`margin: 0 0 0 auto;`}
+    popupExtraStyles={`padding: 8px 8px 3px 8px;`}
+  />
+);
+export default story;

package/src/components/molecules/popup-menu/PopupMenu.styled.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { ButtonWithAction } from "../../atoms";
+import { Box } from "../../atoms";
+
+export const PopupMenuContainer = styled(Box)`
+  display: flex;
+  position: relative;
+  padding: 0;
+`;
+
+export const PopupMenuTriggerButton = styled(ButtonWithAction)`
+  padding: 10px 15px;
+  min-width: auto;
+  &:active,
+  &:focus {
+    outline: none;
+    border: 1px solid rgba(196, 206, 244, 1);
+    background-color: rgba(235, 239, 251, 1);
+  }
+`;

package/src/components/molecules/popup-menu/PopupMenu.theme.js

@@ -0,0 +1,11 @@
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const menuTriggerColor = "#15749D";
+const backgroundColor = "white";
+
+export const fallbackValues = {
+  hoverColor,
+  activeColor,
+  menuTriggerColor,
+  backgroundColor
+};

package/src/components/molecules/popup-menu/index.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import Expand from "../../../util/expand";
+
+export interface PopupMenuProps {
+  menuId?: string;
+  children?: ReactNode;
+  triggerText?: string | JSX.Element;
+  hasIcon?: boolean;
+  iconHelpText?: string; // for screen-readers, required if using an icon for trigger
+  menuFocus?: boolean;
+  containerExtraStyles?: string;
+  textExtraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  position?: { top: string; right: string; bottom: string; left: string };
+  transform?: string;
+  disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popupExtraStyles?: string;
+}
+
+export const PopupMenu: React.FC<Expand<PopupMenuProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/popup-menu/index.js

@@ -0,0 +1,3 @@
+import PopupMenu from "./PopupMenu";
+
+export default PopupMenu;

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { themeComponent } from "../../../../util/themeUtils";
+import { Box, Text } from "../../../atoms";
+import { fallbackValues } from "./PopupMenuItem.theme";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+import { PopupMenuItemContainer } from "./PopupMenuItem.styled";
+
+const PopupMenuItem = ({
+  id,
+  closeMenuCallback,
+  action,
+  themeValues,
+  text,
+  hasIcon = false,
+  isDeleteAction = false,
+  icon: Icon,
+  textExtraStyles,
+  hoverStyles,
+  activeStyles,
+  extraStyles,
+  ...rest
+}) => {
+  return (
+    <PopupMenuItemContainer
+      id={id}
+      role="menuItem"
+      text={text}
+      action={() => {
+        action();
+        closeMenuCallback();
+      }}
+      variant="smallGhost"
+      isDeleteAction={isDeleteAction}
+      theme={themeValues}
+      contentOverride
+      textExtraStyles={textExtraStyles}
+      hoverStyles={hoverStyles}
+      extraStyles={extraStyles}
+      activeStyles={`outline: none; ${activeStyles}`}
+      {...rest}
+    >
+      <Box
+        extraStyles={`
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+            padding: 0;
+        `}
+      >
+        {hasIcon && (
+          <Icon
+            iconFill={
+              isDeleteAction
+                ? themeValues.menuItemColorDelete
+                : themeValues.menuItemColor
+            }
+          />
+        )}
+        {text && (
+          <Text
+            variant="pS"
+            weight={FONT_WEIGHT_SEMIBOLD}
+            fontFamily="Public Sans, sans-serif"
+            color={
+              isDeleteAction
+                ? themeValues.menuItemColorDelete
+                : themeValues.menuItemColor
+            }
+            extraStyles={textExtraStyles}
+          >
+            {text}
+          </Text>
+        )}
+      </Box>
+    </PopupMenuItemContainer>
+  );
+};
+
+export default themeComponent(PopupMenuItem, "PopupMenuItem", fallbackValues);

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.styled.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+
+export const PopupMenuItemContainer = styled(ButtonWithAction)`
+  width: 100%;
+  margin: 0;
+  padding: 17px 11px;
+  margin-bottom: 5px;
+  border: 0;
+  cursor: pointer;
+  text-decoration: none;
+  ${({ theme, isDeleteAction }) => `
+    background-color: ${theme.menuItemBackgroundColor};
+    color: ${isDeleteAction ? theme.menuItemColorDelete : theme.menuItemColor};
+  `}
+  &:hover,
+  &:active {
+    text-decoration: none;
+    ${({ theme, isDeleteAction }) => `
+    background-color: ${
+      isDeleteAction
+        ? theme.menuItemHoverBackgroundColorDelete
+        : theme.menuItemHoverBackgroundColor
+    };
+  `}
+  }
+`;

package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.theme.js

@@ -0,0 +1,23 @@
+import {
+  ROYAL_BLUE_VIVID,
+  CORNFLOWER_BLUE,
+  RAZZMATAZZ_RED,
+  BLUSH_RED,
+  WHITE
+} from "../../../../constants/colors";
+
+const menuItemBackgroundColor = WHITE;
+const menuItemColor = ROYAL_BLUE_VIVID;
+const menuItemColorDelete = RAZZMATAZZ_RED;
+const menuItemHoverBackgroundColor = CORNFLOWER_BLUE;
+const menuItemHoverBackgroundColorDelete = BLUSH_RED;
+const menuItemHoverColor = ROYAL_BLUE_VIVID;
+
+export const fallbackValues = {
+  menuItemBackgroundColor,
+  menuItemColor,
+  menuItemColorDelete,
+  menuItemHoverBackgroundColor,
+  menuItemHoverBackgroundColorDelete,
+  menuItemHoverColor
+};