@thecb/components 9.3.1-beta.8 → 9.3.1

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, forwardRef } from "react";
 import styled, { ThemeContext } from "styled-components";
 import posed from "react-pose";
 import { linear } from "@popmotion/easing";
@@ -60,32 +60,36 @@ const Spinner = ({ color, isMobile }) => (
   
 */
 
-const ButtonWithAction = ({
-  action = noop,
-  variant = "primary",
-  text,
-  textWrap = false,
-  isLoading = false,
-  loadingColor = "white",
-  dataQa = null,
-  textExtraStyles,
-  contentOverride = false,
-  extraStyles = "",
-  tabIndex,
-  children,
-  extraDisabledStyles,
-  ...rest
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const themeValues = createThemeValues(
-    themeContext,
-    fallbackValues,
-    "Button",
-    variant
-  );
-  const { isMobile } = themeContext;
+const ButtonWithAction = forwardRef(
+  (
+    {
+      action = noop,
+      variant = "primary",
+      text,
+      textWrap = false,
+      isLoading = false,
+      loadingColor = "white",
+      dataQa = null,
+      textExtraStyles,
+      contentOverride = false,
+      extraStyles = "",
+      tabIndex,
+      children,
+      extraDisabledStyles,
+      ...rest
+    },
+    ref
+  ) => {
+    const themeContext = useContext(ThemeContext);
+    const themeValues = createThemeValues(
+      themeContext,
+      fallbackValues,
+      "Button",
+      variant
+    );
+    const { isMobile } = themeContext;
 
-  const hoverStyles = `
+    const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
@@ -95,7 +99,7 @@ const ButtonWithAction = ({
     };
     cursor: pointer;
   `;
-  const activeStyles = `
+    const activeStyles = `
     outline: none;
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
@@ -104,7 +108,7 @@ const ButtonWithAction = ({
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
   `;
-  const disabledStyles = `
+    const disabledStyles = `
     background-color: #6D717E;
     border-color: #6D717E;
     color: #FFFFFF;
@@ -116,47 +120,49 @@ const ButtonWithAction = ({
     ${extraDisabledStyles}
   `;
 
-  return (
-    <Box
-      variant={variant}
-      padding={themeValues.padding}
-      minHeight={themeValues.height}
-      minWidth={themeValues.minWidth}
-      background={themeValues.backgroundColor}
-      border={themeValues.border}
-      hoverStyles={hoverStyles}
-      activeStyles={activeStyles}
-      disabledStyles={disabledStyles}
-      as="button"
-      onClick={isLoading ? undefined : action}
-      borderRadius="2px"
-      theme={themeContext}
-      extraStyles={`margin: 0.5rem; ${extraStyles}`}
-      dataQa={dataQa}
-      tabIndex={tabIndex}
-      {...rest}
-    >
-      {contentOverride ? (
-        children
-      ) : (
-        <Center intrinsic>
-          {isLoading ? (
-            <Spinner color={loadingColor} isMobile={isMobile} />
-          ) : (
-            <Text
-              weight={themeValues.fontWeight}
-              variant={themeValues.fontSizeVariant}
-              color={themeValues.color}
-              textWrap={textWrap}
-              extraStyles={textExtraStyles}
-            >
-              {text}
-            </Text>
-          )}
-        </Center>
-      )}
-    </Box>
-  );
-};
+    return (
+      <Box
+        ref={ref}
+        variant={variant}
+        padding={themeValues.padding}
+        minHeight={themeValues.height}
+        minWidth={themeValues.minWidth}
+        background={themeValues.backgroundColor}
+        border={themeValues.border}
+        hoverStyles={hoverStyles}
+        activeStyles={activeStyles}
+        disabledStyles={disabledStyles}
+        as="button"
+        onClick={isLoading ? undefined : action}
+        borderRadius="2px"
+        theme={themeContext}
+        extraStyles={`margin: 0.5rem; ${extraStyles}`}
+        dataQa={dataQa}
+        tabIndex={tabIndex}
+        {...rest}
+      >
+        {contentOverride ? (
+          children
+        ) : (
+          <Center intrinsic>
+            {isLoading ? (
+              <Spinner color={loadingColor} isMobile={isMobile} />
+            ) : (
+              <Text
+                weight={themeValues.fontWeight}
+                variant={themeValues.fontSizeVariant}
+                color={themeValues.color}
+                textWrap={textWrap}
+                extraStyles={textExtraStyles}
+              >
+                {text}
+              </Text>
+            )}
+          </Center>
+        )}
+      </Box>
+    );
+  }
+);
 
 export default ButtonWithAction;

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
+import { ENTER } from "../../../constants/keyboard";
 import Box from "../layouts/Box";
 import Text from "../text";
 import { themeComponent } from "../../../util/themeUtils";
@@ -101,7 +102,7 @@ const Checkbox = ({
   const [focused, setFocused] = useState(false);
 
   const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       func();
     }
   };

package/src/components/atoms/dropdown/Dropdown.js

@@ -18,6 +18,7 @@ import {
   STORM_GREY,
   WHITE
 } from "../../../constants/colors";
+import { ENTER } from "../../../constants/keyboard";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
@@ -318,10 +319,9 @@ const Dropdown = ({
     >
       <Box
         as="input"
-        aria-multiline="false"
         autoComplete={autocompleteValue}
         aria-controls={`${ariaLabelledby}_listbox`}
-        aria-activedescendant="focused_option"
+        aria-activedescendant={isOpen ? "focused_option" : undefined}
         aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
@@ -402,7 +402,7 @@ const Dropdown = ({
                     tabIndex={-1}
                     onClick={e => handleItemSelection(e, choice, i)}
                     onKeyDown={e => {
-                      if (e.keyCode === 13) {
+                      if (e.keyCode === ENTER) {
                         handleItemSelection(e, choice, i);
                       }
                     }}

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/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/layouts/Motion.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, forwardRef } from "react";
 import { MotionWrapper } from "./Motion.styled";
 import { safeChildren } from "../../../util/general";
 
@@ -37,15 +37,12 @@ import { safeChildren } from "../../../util/general";
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-export const Motion = ({
-  position = "relative",
-  padding = "0",
-  children,
-  ...rest
-}) => (
-  <MotionWrapper position={position} padding={padding} {...rest}>
-    {safeChildren(children, <Fragment />)}
-  </MotionWrapper>
+export const Motion = forwardRef(
+  ({ position = "relative", padding = "0", children, ...rest }, ref) => (
+    <MotionWrapper position={position} padding={padding} ref={ref} {...rest}>
+      {safeChildren(children, <Fragment />)}
+    </MotionWrapper>
+  )
 );
 
 export default Motion;

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/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/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);