@thecb/components 9.3.0-beta.1 → 9.3.0

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/KebabMenuIcon.d.ts

@@ -0,0 +1 @@
+export const KebabMenuIcon: JSX.Element;

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

@@ -0,0 +1,38 @@
+import React from "react";
+
+const KebabMenuIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="32"
+      viewBox="0 0 21 32"
+      fill="none"
+    >
+      <path
+        d="M0 4C0 1.79086 1.79086 0 4 0L17 0C19.2091 0 21 1.79086 21 4V28C21 30.2091 19.2091 32 17 32H4C1.79086 32 0 30.2091 0 28L0 4Z"
+        fill="none"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 6C9.39333 6 8.5 6.89333 8.5 8C8.5 9.10667 9.39333 10 10.5 10C11.6067 10 12.5 9.10667 12.5 8C12.5 6.89333 11.6067 6 10.5 6Z"
+        fill="#3B5BDB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 14C9.39333 14 8.5 14.8933 8.5 16C8.5 17.1067 9.39333 18 10.5 18C11.6067 18 12.5 17.1067 12.5 16C12.5 14.8933 11.6067 14 10.5 14Z"
+        fill="#3B5BDB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 22C9.39333 22 8.5 22.9067 8.5 24C8.5 25.0933 9.40667 26 10.5 26C11.5933 26 12.5 25.0933 12.5 24C12.5 22.9067 11.6067 22 10.5 22Z"
+        fill="#3B5BDB"
+      />
+    </svg>
+  );
+};
+
+export default KebabMenuIcon;

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/icons/TrashIcon.js

@@ -2,46 +2,48 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const TrashIcon = ({ themeValues }) => (
-  <svg
-    width="20px"
-    height="20px"
-    viewBox="0 0 20 20"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-  >
-    <defs>
-      <path
-        d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
-        id="trash-path-1"
-      ></path>
-    </defs>
-    <g
-      id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
+const TrashIcon = ({ themeValues, iconFill }) => {
+  return (
+    <svg
+      width="20px"
+      height="20px"
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
     >
-      <mask id="trash-mask-2" fill="white">
-        <use xlinkHref="#trash-path-1"></use>
-      </mask>
-      <use
-        id="trash-Mask"
-        fill={themeValues.singleIconColor}
-        fillRule="nonzero"
-        xlinkHref="#trash-path-1"
-      ></use>
-      <polygon
-        id="trash-Path"
-        fill={themeValues.singleIconColor}
-        fillRule="nonzero"
-        mask="url(#trash-mask-2)"
-        points="0 0 20 0 20 20 0 20"
-      ></polygon>
-    </g>
-  </svg>
-);
+      <defs>
+        <path
+          d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
+          id="trash-path-1"
+        ></path>
+      </defs>
+      <g
+        id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <mask id="trash-mask-2" fill="white">
+          <use xlinkHref="#trash-path-1"></use>
+        </mask>
+        <use
+          id="trash-Mask"
+          fill={iconFill ?? themeValues.singleIconColor}
+          fillRule="nonzero"
+          xlinkHref="#trash-path-1"
+        ></use>
+        <polygon
+          id="trash-Path"
+          fill={iconFill ?? themeValues.singleIconColor}
+          fillRule="nonzero"
+          mask="url(#trash-mask-2)"
+          points="0 0 20 0 20 20 0 20"
+        ></polygon>
+      </g>
+    </svg>
+  );
+};
 
 export default themeComponent(TrashIcon, "Icons", fallbackValues, "primary");

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

@@ -38,7 +38,8 @@ import {
   SuccessfulIcon,
   VoidedIcon,
   StatusUnknownIcon,
-  AutopayIcon
+  AutopayIcon,
+  KebabMenuIcon
 } from "./index";
 
 const story = page({
@@ -84,3 +85,4 @@ export const successfulIcon = () => <SuccessfulIcon />;
 export const voidedIcon = () => <VoidedIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
+export const kebabMenuIcon = () => <KebabMenuIcon />;

package/src/components/atoms/icons/index.d.ts

@@ -21,3 +21,4 @@ export * from "./SuccessfulIconMedium";
 export * from "./SuccessfulIconSmall";
 export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
+export * from "./KebabMenuIcon";

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

@@ -86,6 +86,7 @@ import ArrowLeftCircleIconMedium from "./ArrowLeftCircleIconMedium";
 import ChargebackIconMedium from "./ChargebackIconMedium";
 import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
+import KebabMenuIcon from "./KebabMenuIcon";
 
 export {
   AccountsIcon,
@@ -175,5 +176,6 @@ export {
   ArrowLeftCircleIconMedium,
   ChargebackIconMedium,
   ChargebackReversalIconMedium,
-  PlusCircleIcon
+  PlusCircleIcon,
+  KebabMenuIcon
 };

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -15,7 +15,6 @@ const FormStateDropdown = ({
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   const options = [placeholder, ...getOptions(countryCode)];
-
   return (
     <FormSelect
       options={options}

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

@@ -58,7 +58,6 @@ const AddressForm = ({
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
           field={fields.country}
-          isRequired={true}
           onChange={value => {
             actions.fields.country.set(value);
             // temporary measure to not dirty fields until
@@ -72,6 +71,7 @@ const AddressForm = ({
           }}
           showErrors={showErrors}
           dataQa="Country"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -92,7 +92,6 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
-          isRequired={false}
         />
         <FormInput
           labelTextWhenNoError="City"

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

@@ -108,8 +108,8 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          isRequired={true}
           isNum
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Account number"
@@ -118,7 +118,6 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
-          isRequired={true}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -132,22 +131,22 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
           dataQa="Confirm account number"
-          isRequired={true}
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
           isNum
         />
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
-            isRequired={true}
             dataQa="Account type"
             options={[
               { text: "Select account type", value: "" },
@@ -158,6 +157,7 @@ const PaymentFormACH = ({
             showErrors={showErrors}
             errorMessages={accountTypeErrors}
             field={fields.accountType}
+            isRequired={true}
           />
         )}
         {!hideDefaultPayment && (
@@ -188,7 +188,6 @@ const PaymentFormACH = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
-                  isRequired={true}
                 />
               </Cover>
             )}

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

@@ -98,7 +98,6 @@ const PaymentFormCard = ({
         {!hideZipCode && (
           <CountryDropdown
             labelTextWhenNoError="Country"
-            isRequired={true}
             errorMessages={countryErrorMessages}
             field={fields.country}
             onChange={value => {
@@ -122,6 +121,7 @@ const PaymentFormCard = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="cc-name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
@@ -134,6 +134,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          isRequired={true}
         />
         <FormInputRow
           breakpoint={isMobile ? "1000rem" : "21rem"}
@@ -151,6 +152,7 @@ const PaymentFormCard = ({
             isNum
             removeFromValue={/\//} // removes "/" from browser autofill
             autocompleteValue="cc-exp"
+            isRequired={true}
           />
           <FormInput
             labelTextWhenNoError="CVV"
@@ -167,6 +169,7 @@ const PaymentFormCard = ({
             }
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             autocompleteValue="cc-csc"
+            isRequired={true}
           />
         </FormInputRow>
         {!hideZipCode && (
@@ -185,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";
 

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
+};