@thecb/components 11.8.0-beta.1 → 11.8.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.8.0-beta.1",
+  "version": "11.8.0-beta.10",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -81,8 +81,8 @@
     "vite": "^5.2.11"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.13.1 || ^17.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0",
     "react-router-dom": "^6.3.0",
     "styled-components": "^5.1.1",
     "styled-theming": "^2.2.0"

package/src/components/atoms/alert/Alert.theme.js

@@ -1,8 +1,10 @@
 import {
   APRICOT_ORANGE,
+  INFO_BLUE,
   BLUSH_RED,
   HINT_GREEN,
   ZEST_ORANGE,
+  MATISSE_BLUE,
   RAZZMATAZZ_RED,
   EMERALD_GREEN,
   MUSTARD_YELLOW,
@@ -14,20 +16,18 @@ import {
   THUNDERBIRD_RED,
   HAZE_GREEN,
   ZODIAC_BLUE,
-  SCIENCE_BLUE,
-  LUCKY_POINT,
-  HAWKES_BLUE
+  SCIENCE_BLUE
 } from "../../../constants/colors";
 
 const background = {
-  info: `${HAWKES_BLUE}`,
+  info: `${INFO_BLUE}`,
   warn: `${APRICOT_ORANGE}`,
   error: `${BLUSH_RED}`,
   success: `${HINT_GREEN}`
 };
 
 const border = {
-  info: `${LUCKY_POINT}`,
+  info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   error: `${RAZZMATAZZ_RED}`,
   success: `${EMERALD_GREEN}`

package/src/components/atoms/index.js

@@ -13,7 +13,6 @@ export { default as SortableTableHeading } from "./sortable-table-heading";
 export { default as CountryDropdown } from "./country-dropdown";
 export { default as Detail } from "./detail";
 export { default as DisplayBox } from "./display-box";
-export { default as DisplayCard } from "./display-card";
 export { default as Dropdown } from "./dropdown";
 export * from "./form-layouts";
 export { default as FormSelect } from "./form-select";

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -31,15 +31,20 @@ const PaymentButtonBar = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
+  // cancel URLs are external (back to client system)
+  const handleCancel = () => {
+    window.location.href = cancelURL;
+  };
+
   const backButton =
     !!cancelURL && !!cancelText ? (
-      <ButtonWithLink
+      <ButtonWithAction
         text={cancelText}
-        url={cancelURL}
+        action={handleCancel}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={backButtonTestId || cancelText}
-        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
+        aria-label={`${cancelText}, navigate back to previous site`}
         role="link"
       />
     ) : (
@@ -50,7 +55,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
-          aria-labelledby="back-button"
+          aria-label={"Back, navigate to previous page"}
           role="link"
         />
       )

package/src/components/molecules/popover/Popover.js

@@ -5,24 +5,10 @@ import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { useOutsideClick } from "../../../hooks";
-import { noop } from "../../../util/general";
+import { noop, arrowBorder } from "../../../util/general";
 import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Popover.theme";
 
-const arrowBorder = (borderColor, direction, width = "8px") => {
-  const angle = `${width} solid transparent`;
-  const straight = `${width} solid ${borderColor}`;
-  if (direction == "down") {
-    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
-  } else if (direction == "up") {
-    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
-  } else if (direction == "left") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
-  } else if (direction == "right") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
-  }
-};
-
 const Popover = ({
   themeValues,
   triggerText = "",

package/src/components/molecules/tooltip/Tooltip.js

@@ -1,125 +1,184 @@
-import React, { useState } from "react";
-import { themeComponent } from "../../../util/themeUtils";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { createThemeValues } from "../../../util/themeUtils";
+import { ThemeContext } from "styled-components";
 import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
-import { noop } from "../../../util/general";
-import { ESCAPE } from "../../../constants/keyboard";
-import { fallbackValues } from "./Tooltip.theme";
-import IconAdd from "../../atoms/icons/IconAdd";
-import { BLACK } from "../../../constants/colors";
+import { noop, arrowBorder } from "../../../util/general";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import {
+  MATISSE_BLUE,
+  PEACOCK_BLUE,
+  SAPPHIRE_BLUE,
+  WHITE
+} from "../../../constants/colors";
 
-const arrowBorder = (borderColor, direction, width = "8px") => {
-  const angle = `${width} solid transparent`;
-  const straight = `${width} solid ${borderColor}`;
-  if (direction == "down") {
-    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
-  } else if (direction == "up") {
-    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
-  } else if (direction == "left") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
-  } else if (direction == "right") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
-  }
+const TOOLTIP_THEME_SOURCE = "Popover";
+
+const fallbackValues = {
+  hoverColor: SAPPHIRE_BLUE,
+  activeColor: PEACOCK_BLUE,
+  popoverTriggerColor: MATISSE_BLUE,
+  borderColor: `rgba(255, 255, 255, 0.85)`
 };
 
 const Tooltip = ({
-  themeValues,
-  triggerText = "",
-  content = "",
+  tooltipID,
   hasIconTrigger = false,
-  IconTrigger = IconAdd,
-  iconHelpText = "",
-  tooltipID = 0,
-  extraStyles,
-  textExtraStyles = "",
+  IconTrigger = WarningIconXS,
+  iconHelpText = "Open the tooltip",
+  triggerText = "Open the tooltip",
+  tooltipContent = "The contents of the tooltip go here.",
+  contentPosition = {
+    top: "-110px",
+    right: "auto",
+    bottom: "auto",
+    left: "-225px"
+  },
+  arrowDirection = "down",
+  arrowPosition = {
+    arrowTop: "auto",
+    arrowRight: "10px",
+    arrowBottom: "-8px",
+    arrowLeft: "auto"
+  },
   minWidth = "250px",
   maxWidth = "300px",
   height = "auto",
-  position,
-  arrowPosition,
-  arrowDirection = "down",
-  transform = "none",
-  buttonExtraStyles,
-  backgroundColor = "white",
-  borderColor = "rgba(255, 255, 255, 0.85)",
-  tooltipExtraStyles
+  containerExtraStyles = "",
+  triggerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  contentExtraStyles = "",
+  contentBackgroundColor = WHITE
 }) => {
-  const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
-    position ?? {};
+  const closeTimeoutRef = useRef(null);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    TOOLTIP_THEME_SOURCE
+  );
+
   const {
-    arrowTop = "auto",
-    arrowRight = "10px",
-    arrowBottom = "-8px",
-    arrowLeft = "auto"
-  } = arrowPosition ?? {};
+    borderColor,
+    popoverTriggerColor: tooltipTriggerColor,
+    hoverColor,
+    activeColor
+  } = themeValues;
 
-  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const { top, right, bottom, left } = contentPosition;
+  const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition;
 
-  const handleToggleTooltip = tooltipState => {
-    if (tooltipOpen !== tooltipState) {
-      setTooltipOpen(tooltipState);
+  const handleToggleTooltip = desiredTooltipState => {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
     }
   };
 
   const handleKeyboardEvent = e => {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+    if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
   };
 
+  const handleMouseEnter = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+
+  const handleMouseLeave = () => {
+    closeTimeoutRef.current = setTimeout(() => {
+      handleToggleTooltip(false);
+    }, 300);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
-    <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>
+    <Box
+      ref={closeTimeoutRef}
+      padding="0"
+      extraStyles={`position: relative; ${containerExtraStyles}`}
+      onMouseEnter={() => handleMouseEnter(true)}
+      onMouseLeave={() => handleMouseLeave(false)}
+      data-qa="tooltip-container"
+    >
       <ButtonWithAction
-        action={() => noop}
+        aria-describedby={tooltipID}
+        onKeyDown={handleKeyboardEvent}
+        variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
-        onKeyDown={handleKeyboardEvent}
         onTouchStart={() => handleToggleTooltip(true)}
-        onTouchEnd={() => handleToggleTooltip(false)}
-        onMouseEnter={() => handleToggleTooltip(true)}
-        onMouseLeave={() => handleToggleTooltip(false)}
-        contentOverride
-        variant="smallGhost"
-        tabIndex="0"
-        aria-describedby={tooltipID}
-        extraStyles={buttonExtraStyles}
+        data-qa="tooltip-trigger"
+        contentOverride={true}
       >
-        {hasIconTrigger && (
+        {hasIconTrigger === true && (
           <>
-            <IconTrigger stroke={BLACK} />
+            <Box aria-label="Open tooltip">
+              <IconTrigger color={tooltipTriggerColor} />
+            </Box>
             <Box padding="0" srOnly>
               <Text>{iconHelpText}</Text>
             </Box>
           </>
         )}
-        {!hasIconTrigger && (
-          <Text extraStyles={textExtraStyles}>{triggerText}</Text>
+        {hasIconTrigger === false && (
+          <Text
+            color={tooltipTriggerColor}
+            extraStyles={`
+              color: ${tooltipTriggerColor};
+              &:visited {
+                color: ${tooltipTriggerColor};
+              }
+              &:hover {
+                color: ${hoverColor}; 
+              }
+              &:active,
+              &:focus {
+                color: ${activeColor}; 
+              }
+              ${triggerExtraStyles};
+            `}
+          >
+            {triggerText}
+          </Text>
         )}
       </ButtonWithAction>
       <Box
-        background={backgroundColor}
-        borderRadius="4px"
-        boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-        id={tooltipID}
         role="tooltip"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
+        id={tooltipID}
+        aria-hidden={!tooltipOpen}
+        background={contentBackgroundColor}
+        data-qa="tooltip-contents"
         extraStyles={`
-          display: ${tooltipOpen ? "block" : "none"}; 
-          position: absolute; 
+          position: absolute;
+          display: ${tooltipOpen ? "block" : "none"};
           top: ${top}; 
-          right: ${right}; 
-          bottom: ${bottom}; 
+          right: ${right};
+          bottom: ${bottom};
           left: ${left};
           height: ${height};
-          transform: ${transform};
-          ${tooltipExtraStyles};
+          ${contentExtraStyles}
           `}
+        boxShadow={`0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)`}
+        border={`1px solid transparent`}
+        borderRadius="4px"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
       >
-        <Paragraph>{content}</Paragraph>
+        <Paragraph>{tooltipContent}</Paragraph>
         <Box
           padding="0"
           extraStyles={`
@@ -140,4 +199,4 @@ const Tooltip = ({
   );
 };
 
-export default themeComponent(Tooltip, "Tooltip", fallbackValues);
+export default Tooltip;

package/src/components/molecules/tooltip/Tooltip.mdx

@@ -6,7 +6,7 @@ import * as TooltipStories from './Tooltip.stories.js';
 
 <Title />
 
-The Tooltip is a fully accessible tooltip widget that displays additional information when a user hovers over or focuses on a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `icon` prop. The trigger is rendered as a `ButtonWithAction` with the `smallGhost` variant.
+The Tooltip is a fully accessible tooltip widget that displays additional information when a user hovers over or focuses on a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `IconTrigger` prop. The trigger is rendered as a `ButtonWithAction` with the `smallGhost` variant.
 
 The Tooltip uses the WAI-ARIA tooltip pattern (`role="tooltip"` and `aria-describedby`) for accessibility. It can be positioned anywhere around the trigger element using the position props. Content and style of the tooltip are customizable.