@thecb/components 9.3.0 → 9.3.1-beta.1

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

@@ -1,38 +0,0 @@
-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/molecules/popup-menu/PopupMenu.js

@@ -1,152 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,79 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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
-};