@thecb/components 11.8.0-beta.3 → 11.8.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.8.0-beta.3",
+  "version": "11.8.0-beta.5",
   "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/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

@@ -4,57 +4,47 @@ 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 { noop, arrowBorder } from "../../../util/general";
 import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Tooltip.theme";
-import IconAdd from "../../atoms/icons/IconAdd";
-import { BLACK } 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}`;
-  }
-};
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import { SELECTIVE_YELLOW } from "../../../constants/colors";
 
 const Tooltip = ({
   themeValues,
   triggerText = "",
   content = "",
   hasIconTrigger = false,
-  IconTrigger = IconAdd,
+  IconTrigger = WarningIconXS,
   iconHelpText = "",
-  tooltipID = 0,
-  extraStyles,
+  tooltipID = "tooltip-content",
+  extraStyles = "",
   textExtraStyles = "",
   minWidth = "250px",
   maxWidth = "300px",
   height = "auto",
-  position,
-  arrowPosition,
   arrowDirection = "down",
-  transform = "none",
+  arrowPosition = {
+    arrowTop: "auto",
+    arrowRight: "10px",
+    arrowBottom: "-8px",
+    arrowLeft: "auto"
+  },
+  position = {
+    top: "-110px",
+    right: "auto",
+    bottom: "auto",
+    left: "-225px"
+  },
+  iconColor = SELECTIVE_YELLOW,
   buttonExtraStyles,
   backgroundColor = "white",
   borderColor = "rgba(255, 255, 255, 0.85)",
-  tooltipExtraStyles
+  tooltipContentExtraStyles
 }) => {
   const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
-    position ?? {};
-  const {
-    arrowTop = "auto",
-    arrowRight = "10px",
-    arrowBottom = "-8px",
-    arrowLeft = "auto"
-  } = arrowPosition ?? {};
+  const { top, right, bottom, left } = position ?? {};
+  const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition ?? {};
 
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
@@ -65,7 +55,7 @@ const Tooltip = ({
   };
 
   const handleKeyboardEvent = e => {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+    if (e.key === ESCAPE) {
       handleToggleTooltip(false);
     }
   };
@@ -89,14 +79,21 @@ const Tooltip = ({
       >
         {hasIconTrigger && (
           <>
-            <IconTrigger stroke={BLACK} />
+            <Box aria-label="Open tooltip">
+              <IconTrigger color={iconColor} />
+            </Box>
             <Box padding="0" srOnly>
               <Text>{iconHelpText}</Text>
             </Box>
           </>
         )}
         {!hasIconTrigger && (
-          <Text extraStyles={textExtraStyles}>{triggerText}</Text>
+          <Text
+            extraStyles={`color: ${tooltipTriggerColor}; &:hover {
+          ${hoverColor}; &:active ${activeColor}; ${textExtraStyles}`}
+          >
+            {triggerText}
+          </Text>
         )}
       </ButtonWithAction>
       <Box
@@ -107,6 +104,7 @@ const Tooltip = ({
         role="tooltip"
         minWidth={minWidth}
         maxWidth={maxWidth}
+        aria-hidden={!tooltipOpen}
         extraStyles={`
           display: ${tooltipOpen ? "block" : "none"}; 
           position: absolute; 
@@ -115,8 +113,7 @@ const Tooltip = ({
           bottom: ${bottom}; 
           left: ${left};
           height: ${height};
-          transform: ${transform};
-          ${tooltipExtraStyles};
+          ${tooltipContentExtraStyles};
           `}
       >
         <Paragraph>{content}</Paragraph>

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.
 

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

@@ -1,6 +1,5 @@
 import Tooltip from "./Tooltip";
-import IconAdd from "../../atoms/icons/IconAdd";
-
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
 export default {
   title: "Molecules/Tooltip",
   component: Tooltip,
@@ -13,9 +12,10 @@ export default {
     triggerText: "",
     content: "",
     hasIconTrigger: false,
-    IconTrigger: IconAdd,
+    IconTrigger: WarningIconXS,
     iconHelpText: "",
-    tooltipID: 0,
+    iconColor: undefined,
+    tooltipID: "tooltip-content",
     extraStyles: undefined,
     textExtraStyles: undefined,
     minWidth: "250px",
@@ -24,16 +24,15 @@ export default {
     position: undefined,
     arrowPosition: undefined,
     arrowDirection: "down",
-    transform: "none",
     buttonExtraStyles: undefined,
     backgroundColor: "white",
     borderColor: "rgba(255, 255, 255, 0.85)",
-    tooltipExtraStyles: undefined
+    tooltipContentExtraStyles: undefined
   },
   argTypes: {
     triggerText: {
       description:
-        "Text element that tooltip is anchored to. Only used if hasIcon is false.",
+        "Text element that tooltip is anchored to. Only used if hasIconTrigger is false.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "" }
@@ -59,7 +58,7 @@ export default {
         "The icon component to display. Requires hasIcon to be true.",
       table: {
         type: { summary: "React Component" },
-        defaultValue: { summary: "IconAdd" }
+        defaultValue: { summary: "WarningIconXS" }
       }
     },
     iconHelpText: {
@@ -69,12 +68,19 @@ export default {
         defaultValue: { summary: undefined }
       }
     },
+    iconColor: {
+      description: "Color of the icon trigger",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     tooltipID: {
       description:
         "ID value for tooltip. Use if displaying multiple tooltips on the same page.",
       table: {
-        type: { summary: "number" },
-        defaultValue: { summary: 0 }
+        type: { summary: "string" },
+        defaultValue: { summary: "tooltip-content" }
       }
     },
     extraStyles: {
@@ -136,13 +142,6 @@ export default {
         defaultValue: { summary: "down" }
       }
     },
-    transform: {
-      description: "CSS transform to apply to tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
     buttonExtraStyles: {
       description:
         "Extra styles to apply to the button that wraps tooltip trigger",
@@ -165,8 +164,8 @@ export default {
         defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
       }
     },
-    tooltipExtraStyles: {
-      description: "Extra styles to apply to the tooltip",
+    tooltipContentExtraStyles: {
+      description: "Extra styles to apply to the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: undefined }
@@ -186,7 +185,7 @@ export const BasicTooltip = {
 export const IconTooltip = {
   args: {
     hasIconTrigger: true,
-    IconTrigger: IconAdd,
+    IconTrigger: WarningIconXS,
     content:
       "Contact support at 1-800-CTY-VILL for help with your account balance."
   }

package/src/components/molecules/tooltip/index.d.ts

@@ -4,9 +4,6 @@ import Expand from "../../../util/expand";
 export interface TooltipProps {
   triggerText?: string | JSX.Element;
   content?: string | JSX.Element;
-  hasIcon?: boolean;
-  iconHelpText?: string;
-  tooltipID?: number;
   extraStyles?: string;
   textExtraStyles?: string;
   minWidth?: string;
@@ -20,11 +17,15 @@ export interface TooltipProps {
     arrowLeft: string;
   };
   arrowDirection?: "left" | "right" | "top" | "bottom";
-  transform?: string;
   buttonExtraStyles?: string;
   borderColor?: string;
   backgroundColor?: string;
-  tooltipExtraStyles?: string;
+  hasIconTrigger?: boolean;
+  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
+  iconHelpText?: string;
+  iconColor?: string;
+  tooltipID: string;
+  tooltipContentExtraStyles?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &

package/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -36,7 +36,7 @@ const SidebarStackContent = ({
     >
       <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
         {header ? header : <Box padding="0" key="header-box" />}
-        <Box padding="0" minWidth="100%" key="content-box" role="main">
+        <Box padding="0" minWidth="100%" key="content-box">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (

package/src/deprecated/icons/AlertInfoIcon.js

@@ -31,7 +31,7 @@ export const AlertInfoIcon = () => (
           </mask>
           <use
             id="background-2"
-            fill="#281978"
+            fill="#15749d"
             fillRule="nonzero"
             xlinkHref="#path-1"
           ></use>

package/src/util/general.js

@@ -222,3 +222,17 @@ export const adjustHexColor = (hex, percent, action) => {
     .slice(1)
     .padStart(6, "0")}`;
 };
+
+export 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}`;
+  }
+};