@thecb/components 11.7.0-beta.0 → 11.8.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.7.0-beta.0",
+  "version": "11.8.0-beta.1",
   "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 || ^17.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "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,10 +1,8 @@
 import {
   APRICOT_ORANGE,
-  INFO_BLUE,
   BLUSH_RED,
   HINT_GREEN,
   ZEST_ORANGE,
-  MATISSE_BLUE,
   RAZZMATAZZ_RED,
   EMERALD_GREEN,
   MUSTARD_YELLOW,
@@ -16,18 +14,20 @@ import {
   THUNDERBIRD_RED,
   HAZE_GREEN,
   ZODIAC_BLUE,
-  SCIENCE_BLUE
+  SCIENCE_BLUE,
+  LUCKY_POINT,
+  HAWKES_BLUE
 } from "../../../constants/colors";
 
 const background = {
-  info: `${INFO_BLUE}`,
+  info: `${HAWKES_BLUE}`,
   warn: `${APRICOT_ORANGE}`,
   error: `${BLUSH_RED}`,
   success: `${HINT_GREEN}`
 };
 
 const border = {
-  info: `${MATISSE_BLUE}`,
+  info: `${LUCKY_POINT}`,
   warn: `${ZEST_ORANGE}`,
   error: `${RAZZMATAZZ_RED}`,
   success: `${EMERALD_GREEN}`

package/src/components/atoms/display-card/DisplayCard.js

@@ -8,6 +8,7 @@ import ButtonWithAction from "../button-with-action";
 import ButtonWithLink from "../button-with-link";
 import { WHITE, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
 import Popover from "../../molecules/popover";
+import Tooltip from "../../molecules/tooltip";
 
 const DisplayCard = ({
   title,
@@ -17,6 +18,24 @@ const DisplayCard = ({
   url,
   link = false,
   helpText,
+  hasTooltip = false,
+  tooltipTriggerText = "",
+  tooltipContent = "",
+  tooltipPosition = {
+    top: "auto",
+    bottom: "calc(100% + 0.25rem)",
+    left: "auto",
+    right: "0"
+  },
+  tooltipArrowPosition = {
+    arrowBottom: "-0.5rem",
+    arrowRight: "0.625rem",
+    arrowTop: "auto",
+    arrowLeft: "auto"
+  },
+  tooltipArrowDirection,
+  tooltipExtraStyles,
+  tooltipTextExtraStyles = `max-width: 300px;`,
   hasPopover = false,
   popoverTriggerText = "",
   popoverContent = "",
@@ -42,6 +61,17 @@ const DisplayCard = ({
               popoverTextExtraStyles={popoverTextExtraStyles}
             />
           )}
+          {hasTooltip && (
+            <Tooltip
+              triggerText={tooltipTriggerText}
+              content={tooltipContent}
+              textExtraStyles={tooltipTextExtraStyles}
+              position={tooltipPosition}
+              arrowPosition={tooltipArrowPosition}
+              arrowDirection={tooltipArrowDirection}
+              tooltipExtraStyles={tooltipExtraStyles}
+            />
+          )}
         </Cluster>
       </Box>
       <Box padding="0">

package/src/components/atoms/display-card/DisplayCard.stories.js

@@ -18,6 +18,14 @@ const meta = {
     url: undefined,
     link: false,
     helpText: undefined,
+    hasTooltip: false,
+    tooltipTriggerText: "",
+    tooltipContent: "",
+    tooltipPosition: undefined,
+    tooltipArrowPosition: undefined,
+    tooltipArrowDirection: undefined,
+    tooltipExtraStyles: undefined,
+    tooltipTextExtraStyles: undefined,
     hasPopover: false,
     popoverTriggerText: "",
     popoverContent: "",
@@ -76,6 +84,64 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
+    hasTooltip: {
+      description: "Whether or not to render Tooltip component",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    tooltipTriggerText: {
+      description: "Text that triggers the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    tooltipContent: {
+      description: "Content displayed inside the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    tooltipPosition: {
+      description:
+        "Object with top/right/bottom/left values for tooltip position relative to trigger",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tooltipArrowPosition: {
+      description:
+        "Object with arrowTop/arrowRight/arrowBottom/arrowLeft values for the tooltip arrow",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tooltipArrowDirection: {
+      description: "Direction the tooltip arrow points",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tooltipExtraStyles: {
+      description: "Extra CSS styles to apply to the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tooltipTextExtraStyles: {
+      description: "Extra CSS styles for the tooltip trigger text",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "max-width: 300px;" }
+      }
+    },
     hasPopover: {
       description: "Whether or not to render Popover component",
       table: {
@@ -154,6 +220,15 @@ export const WithPopover = {
   render: args => <DisplayCard {...args} />
 };
 
+export const WithTooltip = {
+  args: {
+    hasTooltip: true,
+    tooltipTriggerText: "What's this?",
+    tooltipContent: "This is example tooltip content!"
+  },
+  render: args => <DisplayCard {...args} />
+};
+
 export const WithPopoverAndExtraStyles = {
   args: {
     hasPopover: true,

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = ({ strokeWidth = 1 }) => (
+const IconAdd = ({ stroke = "none", strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = ({ strokeWidth = 1 }) => (
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
+    <g fill="none" fillRule="evenodd" stroke={stroke} strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">

package/src/components/molecules/index.js

@@ -47,3 +47,4 @@ export { default as MultipleSelectFilter } from "./multiple-select-filter";
 export { default as ContactCard } from "./contact-card";
 export { default as HeroImage } from "./hero-image";
 export { default as TurnstileWidget } from "./turnstile-widget/TurnstileWidget";
+export { default as Tooltip } from "./tooltip";

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

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

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

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+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";
+
+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 = ({
+  themeValues,
+  triggerText = "",
+  content = "",
+  hasIconTrigger = false,
+  IconTrigger = IconAdd,
+  iconHelpText = "",
+  tooltipID = 0,
+  extraStyles,
+  textExtraStyles = "",
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  position,
+  arrowPosition,
+  arrowDirection = "down",
+  transform = "none",
+  buttonExtraStyles,
+  backgroundColor = "white",
+  borderColor = "rgba(255, 255, 255, 0.85)",
+  tooltipExtraStyles
+}) => {
+  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 [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const handleToggleTooltip = tooltipState => {
+    if (tooltipOpen !== tooltipState) {
+      setTooltipOpen(tooltipState);
+    }
+  };
+
+  const handleKeyboardEvent = e => {
+    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+      handleToggleTooltip(false);
+    }
+  };
+
+  return (
+    <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>
+      <ButtonWithAction
+        action={() => noop}
+        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}
+      >
+        {hasIconTrigger && (
+          <>
+            <IconTrigger stroke={BLACK} />
+            <Box padding="0" srOnly>
+              <Text>{iconHelpText}</Text>
+            </Box>
+          </>
+        )}
+        {!hasIconTrigger && (
+          <Text extraStyles={textExtraStyles}>{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}
+        extraStyles={`
+          display: ${tooltipOpen ? "block" : "none"}; 
+          position: absolute; 
+          top: ${top}; 
+          right: ${right}; 
+          bottom: ${bottom}; 
+          left: ${left};
+          height: ${height};
+          transform: ${transform};
+          ${tooltipExtraStyles};
+          `}
+      >
+        <Paragraph>{content}</Paragraph>
+        <Box
+          padding="0"
+          extraStyles={`
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
+            filter: drop-shadow(2px 8px 14px black);
+            bottom: ${arrowBottom};
+            right: ${arrowRight};
+            top: ${arrowTop};
+            left: ${arrowLeft};
+          `}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default themeComponent(Tooltip, "Tooltip", fallbackValues);

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TooltipStories from './Tooltip.stories.js';
+
+<Meta of={TooltipStories} />
+
+<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 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.
+
+<Controls />
+
+<Story />

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

@@ -0,0 +1,204 @@
+import Tooltip from "./Tooltip";
+import IconAdd from "../../atoms/icons/IconAdd";
+
+export default {
+  title: "Molecules/Tooltip",
+  component: Tooltip,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    triggerText: "",
+    content: "",
+    hasIconTrigger: false,
+    IconTrigger: IconAdd,
+    iconHelpText: "",
+    tooltipID: 0,
+    extraStyles: undefined,
+    textExtraStyles: undefined,
+    minWidth: "250px",
+    maxWidth: "300px",
+    height: "auto",
+    position: undefined,
+    arrowPosition: undefined,
+    arrowDirection: "down",
+    transform: "none",
+    buttonExtraStyles: undefined,
+    backgroundColor: "white",
+    borderColor: "rgba(255, 255, 255, 0.85)",
+    tooltipExtraStyles: undefined
+  },
+  argTypes: {
+    triggerText: {
+      description:
+        "Text element that tooltip is anchored to. Only used if hasIcon is false.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    content: {
+      description: "Content of the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    hasIconTrigger: {
+      description:
+        "Whether an icon is the trigger for the tooltip, instead of text",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    IconTrigger: {
+      description:
+        "The icon component to display. Requires hasIcon to be true.",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: "IconAdd" }
+      }
+    },
+    iconHelpText: {
+      description: "Accessible description of the icon",
+      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 }
+      }
+    },
+    extraStyles: {
+      description:
+        "Extra CSS styles to apply to the wrapper component around the trigger and tooltip",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    textExtraStyles: {
+      description: "Extra styles to apply to the text trigger of the tooltip",
+      table: {
+        type: { summary: "CSS string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of the tooltip component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "250px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of the tooltip component",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "300px" }
+      }
+    },
+    height: {
+      description: "Height of the tooltip component. Default sizes to content.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    position: {
+      description:
+        "Object containing values for top/right/bottom/left position of tooltip relative to trigger",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowPosition: {
+      description:
+        "Object containing values for arrowTop/arrowRight/arrowBottom/arrowLeft position of arrow on tooltip",
+      table: {
+        type: { summary: "Object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowDirection: {
+      description: "Direction the tooltip arrow points",
+      table: {
+        type: { summary: "string" },
+        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",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    backgroundColor: {
+      description: "Background color of the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "white" }
+      }
+    },
+    borderColor: {
+      description: "Color of the tooltip arrow",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
+      }
+    },
+    tooltipExtraStyles: {
+      description: "Extra styles to apply to the tooltip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export const BasicTooltip = {
+  args: {
+    triggerText: "Help",
+    content:
+      "Contact support at 1-800-CTY-VILL for help with your account balance."
+  }
+};
+
+export const IconTooltip = {
+  args: {
+    hasIconTrigger: true,
+    IconTrigger: IconAdd,
+    content:
+      "Contact support at 1-800-CTY-VILL for help with your account balance."
+  }
+};
+
+export const UnderneathTooltip = {
+  args: {
+    triggerText: "What's this?",
+    content:
+      "Contact support at 1-800-CTY-VILL for help with your account balance.",
+    position: { top: "50px", left: "-100px" },
+    arrowPosition: { arrowTop: "-8px", arrowLeft: "50%" },
+    arrowDirection: "up"
+  }
+};

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

@@ -0,0 +1,9 @@
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const tooltipTriggerColor = "#15749D";
+
+export const fallbackValues = {
+  hoverColor,
+  activeColor,
+  tooltipTriggerColor
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+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;
+  maxWidth?: string;
+  height?: string;
+  position?: { top: string; right: string; bottom: string; left: string };
+  arrowPosition?: {
+    arrowTop: string;
+    arrowRight: string;
+    arrowBottom: string;
+    arrowLeft: string;
+  };
+  arrowDirection?: "left" | "right" | "top" | "bottom";
+  transform?: string;
+  buttonExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  tooltipExtraStyles?: string;
+}
+
+export const Tooltip: React.FC<Expand<TooltipProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

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

package/src/deprecated/icons/AlertInfoIcon.js

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