@thecb/components 11.10.1-beta.2 → 11.11.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.1-beta.2",
+  "version": "11.11.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/dropdown/Dropdown.js

@@ -13,7 +13,6 @@ import "core-js/proposals/relative-indexing-method";
 
 import {
   ERROR_COLOR,
-  GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
   WHITE
@@ -35,7 +34,7 @@ const IconWrapper = styled.div`
 
 const DropdownContentWrapper = styled.div`
   transform-origin: 0 0;
-  border: 1px solid ${GREY_CHATEAU};
+  border: 1px solid ${STORM_GREY};
   border-radius: 2px;
   background-color: ${WHITE};
   padding: 8px 0 8px;
@@ -349,7 +348,7 @@ const Dropdown = ({
             ? ERROR_COLOR
             : isOpen
             ? themeValues.selectedColor
-            : GREY_CHATEAU
+            : STORM_GREY
         }
         dataQa={placeholder}
         extraStyles={

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -2,6 +2,7 @@ import React from "react";
 
 const DropdownIcon = () => (
   <svg
+    aria-hidden="true"
     version="1.2"
     xmlns="http://www.w3.org/2000/svg"
     overflow="visible"

package/src/components/atoms/dropdown/DropdownIconV2.js

@@ -7,6 +7,7 @@ const DropdownIconV2 = ({
   ...props
 }) => (
   <svg
+    aria-hidden="true"
     width={width}
     height={height}
     viewBox={`0 0 ${width} ${height}`}

package/src/components/atoms/form-layouts/FormInput.js

@@ -148,7 +148,7 @@ const FormInput = ({
     <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
-          <Cluster justify="space-between" align="center">
+          <Cluster justify="space-between" align="center" overflow>
             {labelDisplayOverride ? (
               labelDisplayOverride
             ) : (

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

@@ -2,23 +2,34 @@ 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, arrowBorder } from "../../../util/general";
-import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import {
+  MATISSE_BLUE,
+  PEACOCK_BLUE,
+  SAPPHIRE_BLUE,
+  WHITE
+} from "../../../constants/colors";
+
+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 = ({
   tooltipID,
-  children,
-  hasCustomTrigger = false,
-  triggerText = "",
-  containerExtraStyles = "",
-  triggerButtonVariant = "smallGhost",
-  content = "",
-  contentExtraStyles = "",
-  minWidth = "250px",
-  maxWidth = "100%",
-  height = "auto",
+  hasIconTrigger = false,
+  IconTrigger = WarningIconXS,
+  iconHelpText = "Open the tooltip",
+  triggerText = "Open the tooltip",
+  tooltipContent = "The contents of the tooltip go here.",
   contentPosition = {
     top: "-110px",
     right: "auto",
@@ -32,7 +43,14 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
-  arrowColor
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  containerExtraStyles = "",
+  triggerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  contentExtraStyles = "",
+  contentBackgroundColor = WHITE
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -43,16 +61,23 @@ const Tooltip = ({
     TOOLTIP_THEME_SOURCE
   );
 
+  const {
+    borderColor,
+    popoverTriggerColor: tooltipTriggerColor,
+    hoverColor,
+    activeColor
+  } = themeValues;
+
   const { top, right, bottom, left } = contentPosition;
   const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition;
 
-  const handleToggleTooltip = desiredState => {
-    if (tooltipOpen !== desiredState) {
-      setTooltipOpen(desiredState);
+  const handleToggleTooltip = desiredTooltipState => {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
     }
   };
 
-  const handleKeyDown = e => {
+  const handleKeyboardEvent = e => {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
@@ -80,73 +105,80 @@ const Tooltip = ({
     };
   }, []);
 
-  const renderTrigger = () => {
-    if (hasCustomTrigger && children) {
-      return React.cloneElement(React.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: () => handleToggleTooltip(true),
-        onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown
-      });
-    }
-
-    return (
+  return (
+    <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={handleKeyDown}
+        onKeyDown={handleKeyboardEvent}
         variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
         onTouchStart={() => handleToggleTooltip(true)}
-        data-qa={`tooltip-trigger-${tooltipID}`}
-        text={triggerText}
-        extraStyles={`
-          color: ${themeValues.linkColor};
-          &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
-          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
-          button, span, &:hover span { text-decoration: none; }
-        `}
-      />
-    );
-  };
-
-  return (
-    <Box
-      padding="0"
-      extraStyles={`position: relative; ${containerExtraStyles}`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-qa={`${tooltipID}-container`}
-    >
-      {renderTrigger()}
+        data-qa="tooltip-trigger"
+        contentOverride={true}
+      >
+        {hasIconTrigger === true && (
+          <>
+            <Box aria-label="Open tooltip">
+              <IconTrigger color={tooltipTriggerColor} />
+            </Box>
+            <Box padding="0" srOnly>
+              <Text>{iconHelpText}</Text>
+            </Box>
+          </>
+        )}
+        {hasIconTrigger === false && (
+          <Text
+            color={tooltipTriggerColor}
+            extraStyles={`
+              color: ${tooltipTriggerColor};
+              &:visited {
+                color: ${tooltipTriggerColor};
+              }
+              &:hover {
+                color: ${hoverColor}; 
+              }
+              &:active,
+              &:focus {
+                color: ${activeColor}; 
+              }
+              ${triggerExtraStyles};
+            `}
+          >
+            {triggerText}
+          </Text>
+        )}
+      </ButtonWithAction>
       <Box
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={themeValues.borderColor}
+        background={contentBackgroundColor}
         data-qa="tooltip-contents"
         extraStyles={`
           position: absolute;
           display: ${tooltipOpen ? "block" : "none"};
-          top: ${top};
+          top: ${top}; 
           right: ${right};
           bottom: ${bottom};
           left: ${left};
           height: ${height};
           ${contentExtraStyles}
-        `}
-        boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-        border="1px solid transparent"
+          `}
+        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}
       >
-        {typeof content === "string" ? (
-          <Text color={themeValues.linkColor}>{content}</Text>
-        ) : (
-          content
-        )}
+        <Paragraph>{tooltipContent}</Paragraph>
         <Box
           padding="0"
           extraStyles={`
@@ -154,11 +186,7 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(
-              arrowColor || themeValues.borderColor,
-              arrowDirection,
-              "8px"
-            )};
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

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

@@ -6,19 +6,9 @@ import * as TooltipStories from './Tooltip.stories.js';
 
 <Title />
 
-Tooltip is an accessible tooltip component implementing the [WAI-ARIA Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). It displays supplemental information when the user hovers over or focuses on a trigger element.
+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 trigger can be either:
-- **Custom children**: Pass any single React element as `children`. It will receive `aria-describedby`, focus, blur, and keyboard handlers automatically.
-- **Default button**: When no `children` are provided, a `ButtonWithAction` is rendered using the `triggerText` prop.
-
-The tooltip content (`content` prop) accepts a plain string or a React node for rich content. It is styled similarly to the Popover component, including an arrow pointing toward the trigger.
-
-### Accessibility
-- The trigger element has `aria-describedby` referencing the tooltip.
-- The tooltip container has `role="tooltip"`.
-- Pressing **Escape** dismisses the tooltip.
-- Focus stays on the trigger while the tooltip is displayed.
+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 />
 

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

@@ -1,9 +1,6 @@
 import React from "react";
 import Tooltip from "./Tooltip";
-import Text from "../../atoms/text/Text";
-import AutopayOnIcon from "../../atoms/icons/AutopayOnIcon";
-import Box from "../../atoms/layouts/Box";
-import { SEA_GREEN } from "../../../constants/colors";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -21,8 +18,11 @@ const meta = {
   ],
   args: {
     tooltipID: "tooltip-id",
+    hasIconTrigger: false,
+    IconTrigger: WarningIconXS,
+    iconHelpText: "Open the tooltip",
     triggerText: "Hover me",
-    content: "This is the tooltip content.",
+    tooltipContent: "The contents of the tooltip go here.",
     contentPosition: {
       top: "-110px",
       right: "auto",
@@ -40,56 +40,71 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    contentExtraStyles: "",
-    contentBackgroundColor: ""
+    triggerExtraStyles: "",
+    triggerButtonVariant: "smallGhost",
+    contentBackgroundColor: "",
+    contentExtraStyles: ""
   },
   argTypes: {
-    children: {
+    tooltipID: {
       description:
-        "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
+        "Unique ID linking the trigger to the tooltip content for accessibility",
       table: {
-        type: { summary: "React.ReactNode" },
+        type: { summary: "string" },
         defaultValue: { summary: undefined }
       }
     },
-    content: {
+    hasIconTrigger: {
       description:
-        "The content displayed inside the tooltip. Can be a string or a React node/element.",
+        "When true, renders an icon as the tooltip trigger instead of text",
+      control: { type: "boolean" },
       table: {
-        type: { summary: "string | React.ReactNode" },
-        defaultValue: { summary: '""' }
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
       }
     },
-    tooltipID: {
+    IconTrigger: {
       description:
-        "Unique ID for the tooltip content element. Used as the aria-describedby value on the trigger.",
+        "Icon component rendered as the trigger when hasIconTrigger is true",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: "WarningIconXS" }
+      }
+    },
+    iconHelpText: {
+      description: "Screen reader text for the icon trigger",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "Open the tooltip" }
       }
     },
     triggerText: {
       description:
-        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
+        "Text rendered as the tooltip trigger when hasIconTrigger is false",
+      table: {
+        type: { summary: "string | JSX.Element" },
+        defaultValue: { summary: "Open the tooltip" }
+      }
+    },
+    tooltipContent: {
+      description: "The content displayed inside the tooltip",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: '""' }
+        defaultValue: { summary: "The contents of the tooltip go here." }
       }
     },
     contentPosition: {
       description:
-        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger.",
+        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger",
       table: {
         type: { summary: "object" },
         defaultValue: {
-          summary:
-            '{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }'
+          summary: `{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }`
         }
       }
     },
     arrowDirection: {
-      description:
-        "Direction the tooltip arrow points (up, down, left, right).",
+      description: "Direction the tooltip arrow points (up, down, left, right)",
       control: { type: "select" },
       options: ["up", "down", "left", "right"],
       table: {
@@ -99,31 +114,30 @@ const meta = {
     },
     arrowPosition: {
       description:
-        "CSS position values (arrowTop, arrowRight, arrowBottom, arrowLeft) for the arrow element.",
+        "CSS position values (arrowTop, arrowRight, arrowBottom, arrowLeft) for the arrow element",
       table: {
         type: { summary: "object" },
         defaultValue: {
-          summary:
-            '{ arrowTop: "auto", arrowRight: "10px", arrowBottom: "-8px", arrowLeft: "auto" }'
+          summary: `{ arrowTop: "auto", arrowRight: "10px", arrowBottom: "-8px", arrowLeft: "auto" }`
         }
       }
     },
     minWidth: {
-      description: "Minimum width of the tooltip content box.",
+      description: "Minimum width of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "250px" }
       }
     },
     maxWidth: {
-      description: "Maximum width of the tooltip content box.",
+      description: "Maximum width of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "300px" }
       }
     },
     height: {
-      description: "Height of the tooltip content box.",
+      description: "Height of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "auto" }
@@ -131,25 +145,25 @@ const meta = {
     },
     containerExtraStyles: {
       description:
-        "Additional CSS string applied to the tooltip container element.",
+        "Additional CSS string applied to the tooltip container element",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    contentExtraStyles: {
-      description:
-        "Additional CSS string applied to the tooltip content element.",
+    triggerExtraStyles: {
+      description: "Additional CSS string applied to the text trigger element",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    contentBackgroundColor: {
-      description: "Background color of the tooltip content box.",
+    triggerButtonVariant: {
+      description:
+        "Button variant applied to the trigger ButtonWithAction element",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "white" }
+        defaultValue: { summary: "smallGhost" }
       }
     }
   }
@@ -160,67 +174,15 @@ export default meta;
 export const Basic = {
   args: {
     tooltipID: "tooltip-basic",
-    triggerText: "What is this?",
-    content:
+    triggerText: "How basic is this?",
+    tooltipContent:
       "This is a detailed explanation of a feature or term that the user may need more context about."
   }
 };
 
-export const WithChildren = {
-  args: {
-    tooltipID: "tooltip-children",
-    hasCustomTrigger: true,
-    content: "Extra information about this label.",
-    contentPosition: {
-      top: "-84px",
-      right: "auto",
-      bottom: "auto",
-      left: "-225px"
-    }
-  },
-  render: args => (
-    <Tooltip {...args}>
-      <Box padding="0" extraStyles="white-space: nowrap;">
-        <AutopayOnIcon />
-        <Text
-          color={SEA_GREEN}
-          extraStyles="margin-left: 5px; white-space: nowrap;"
-        >
-          Custom trigger
-        </Text>
-      </Box>
-    </Tooltip>
-  )
-};
-
-export const RichTooltipContent = {
-  args: {
-    tooltipID: "tooltip-node-content",
-    contentExtraStyles: "background-color: #000000; color: #ffffff;",
-    triggerText: "Rich content",
-    arrowColor: "black",
-    contentPosition: {
-      top: "-126px",
-      right: "auto",
-      bottom: "auto",
-      left: "-225px"
-    },
-    content: (
-      <div style={{ padding: "8px" }}>
-        <strong>Bold title</strong>
-        <p>
-          With <em>an italic text detail</em> below.
-        </p>
-      </div>
-    )
-  }
-};
-
 export const TooltipBelow = {
   args: {
     tooltipID: "tooltip-below",
-    triggerText: "Hover for info",
-    content: "This tooltip appears below the trigger.",
     contentPosition: {
       top: "50px",
       right: "auto",
@@ -240,8 +202,6 @@ export const TooltipBelow = {
 export const TooltipRight = {
   args: {
     tooltipID: "tooltip-right",
-    triggerText: "Hover for info",
-    content: "This tooltip appears to the right.",
     contentPosition: {
       top: "-40px",
       right: "auto",
@@ -257,3 +217,21 @@ export const TooltipRight = {
     }
   }
 };
+
+export const CustomContent = {
+  args: {
+    tooltipID: "tooltip-custom-content",
+    triggerText: "What is this?",
+    tooltipContent:
+      "This is a detailed explanation of a feature or term that the user may need more context about."
+  }
+};
+
+export const CustomWidth = {
+  args: {
+    tooltipID: "tooltip-custom-width",
+    minWidth: "150px",
+    maxWidth: "200px",
+    tooltipContent: "A narrower tooltip."
+  }
+};

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

@@ -1,19 +1,9 @@
-import {
-  MATISSE_BLUE,
-  PEACOCK_BLUE,
-  SAPPHIRE_BLUE
-} from "../../../constants/colors";
-
-const hoverColor = SAPPHIRE_BLUE;
-const activeColor = PEACOCK_BLUE;
-const linkColor = MATISSE_BLUE;
-const borderColor = "rgba(255, 255, 255, 0.85)";
-
-export const TOOLTIP_THEME_SOURCE = "Button";
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const tooltipTriggerColor = "#15749D";
 
 export const fallbackValues = {
-  borderColor,
-  linkColor,
   hoverColor,
-  activeColor
+  activeColor,
+  tooltipTriggerColor
 };

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

@@ -1,11 +1,12 @@
 import React from "react";
 import Expand from "../../../util/expand";
-
 export interface TooltipProps {
-  children?: React.ReactNode;
-  content: string | React.ReactNode;
   tooltipID: string;
-  triggerText?: string;
+  hasIconTrigger?: boolean;
+  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
+  iconHelpText?: string;
+  triggerText?: string | JSX.Element;
+  tooltipContent: string;
   contentPosition?: {
     top: string;
     right: string;
@@ -23,6 +24,8 @@ export interface TooltipProps {
   maxWidth?: string;
   height?: string;
   containerExtraStyles?: string;
+  triggerExtraStyles?: string;
+  triggerButtonVariant?: string;
   contentExtraStyles?: string;
   contentBackgroundColor?: string;
 }