@thecb/components 9.3.1-beta.8 → 9.3.1

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