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

package/package.json

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

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

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

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

@@ -2,34 +2,23 @@ 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 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)`
-};
+import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
 
 const Tooltip = ({
   tooltipID,
-  hasIconTrigger = false,
-  IconTrigger = WarningIconXS,
-  iconHelpText = "Open the tooltip",
-  triggerText = "Open the tooltip",
-  tooltipContent = "The contents of the tooltip go here.",
+  children,
+  hasCustomTrigger = false,
+  triggerText = "",
+  containerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  content = "",
+  contentExtraStyles = "",
+  minWidth = "250px",
+  maxWidth = "100%",
+  height = "auto",
   contentPosition = {
     top: "-110px",
     right: "auto",
@@ -43,14 +32,7 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
-  minWidth = "250px",
-  maxWidth = "300px",
-  height = "auto",
-  containerExtraStyles = "",
-  triggerExtraStyles = "",
-  triggerButtonVariant = "smallGhost",
-  contentExtraStyles = "",
-  contentBackgroundColor = WHITE
+  arrowColor
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -61,23 +43,16 @@ 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 = desiredTooltipState => {
-    if (tooltipOpen !== desiredTooltipState) {
-      setTooltipOpen(desiredTooltipState);
+  const handleToggleTooltip = desiredState => {
+    if (tooltipOpen !== desiredState) {
+      setTooltipOpen(desiredState);
     }
   };
 
-  const handleKeyboardEvent = e => {
+  const handleKeyDown = e => {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
@@ -105,80 +80,73 @@ const Tooltip = ({
     };
   }, []);
 
-  return (
-    <Box
-      ref={closeTimeoutRef}
-      padding="0"
-      extraStyles={`position: relative; ${containerExtraStyles}`}
-      onMouseEnter={() => handleMouseEnter(true)}
-      onMouseLeave={() => handleMouseLeave(false)}
-      data-qa="tooltip-container"
-    >
+  const renderTrigger = () => {
+    if (hasCustomTrigger && children) {
+      return React.cloneElement(React.Children.only(children), {
+        "aria-describedby": tooltipID,
+        onFocus: () => handleToggleTooltip(true),
+        onBlur: () => handleToggleTooltip(false),
+        onKeyDown: handleKeyDown
+      });
+    }
+
+    return (
       <ButtonWithAction
+        action={noop}
         aria-describedby={tooltipID}
-        onKeyDown={handleKeyboardEvent}
+        onKeyDown={handleKeyDown}
         variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
         onTouchStart={() => handleToggleTooltip(true)}
-        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>
+        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()}
       <Box
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={contentBackgroundColor}
+        background={themeValues.borderColor}
         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}
       >
-        <Paragraph>{tooltipContent}</Paragraph>
+        {typeof content === "string" ? (
+          <Text color={themeValues.linkColor}>{content}</Text>
+        ) : (
+          content
+        )}
         <Box
           padding="0"
           extraStyles={`
@@ -186,7 +154,11 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(borderColor, arrowDirection, "8px")};
+            ${arrowBorder(
+              arrowColor || themeValues.borderColor,
+              arrowDirection,
+              "8px"
+            )};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

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

@@ -6,9 +6,19 @@ 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 `IconTrigger` prop. The trigger is rendered as a `ButtonWithAction` with the `smallGhost` variant.
+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 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.
+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.
 
 <Controls />
 

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

@@ -1,6 +1,9 @@
 import React from "react";
 import Tooltip from "./Tooltip";
-import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import Text from "../../atoms/text/Text";
+import AutopayOnIcon from "../../atoms/icons/AutopayOnIcon";
+import Box from "../../atoms/layouts/Box";
+import { SEA_GREEN } from "../../../constants/colors";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -18,11 +21,8 @@ const meta = {
   ],
   args: {
     tooltipID: "tooltip-id",
-    hasIconTrigger: false,
-    IconTrigger: WarningIconXS,
-    iconHelpText: "Open the tooltip",
     triggerText: "Hover me",
-    tooltipContent: "The contents of the tooltip go here.",
+    content: "This is the tooltip content.",
     contentPosition: {
       top: "-110px",
       right: "auto",
@@ -40,71 +40,56 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    triggerExtraStyles: "",
-    triggerButtonVariant: "smallGhost",
-    contentBackgroundColor: "",
-    contentExtraStyles: ""
+    contentExtraStyles: "",
+    contentBackgroundColor: ""
   },
   argTypes: {
-    tooltipID: {
+    children: {
       description:
-        "Unique ID linking the trigger to the tooltip content for accessibility",
+        "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
       table: {
-        type: { summary: "string" },
+        type: { summary: "React.ReactNode" },
         defaultValue: { summary: undefined }
       }
     },
-    hasIconTrigger: {
+    content: {
       description:
-        "When true, renders an icon as the tooltip trigger instead of text",
-      control: { type: "boolean" },
+        "The content displayed inside the tooltip. Can be a string or a React node/element.",
       table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
+        type: { summary: "string | React.ReactNode" },
+        defaultValue: { summary: '""' }
       }
     },
-    IconTrigger: {
+    tooltipID: {
       description:
-        "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",
+        "Unique ID for the tooltip content element. Used as the aria-describedby value on the trigger.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "Open the tooltip" }
+        defaultValue: { summary: undefined }
       }
     },
     triggerText: {
       description:
-        "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",
+        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "The contents of the tooltip go here." }
+        defaultValue: { summary: '""' }
       }
     },
     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: {
@@ -114,30 +99,31 @@ 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" }
@@ -145,25 +131,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: '""' }
       }
     },
-    triggerExtraStyles: {
-      description: "Additional CSS string applied to the text trigger element",
+    contentExtraStyles: {
+      description:
+        "Additional CSS string applied to the tooltip content element.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    triggerButtonVariant: {
-      description:
-        "Button variant applied to the trigger ButtonWithAction element",
+    contentBackgroundColor: {
+      description: "Background color of the tooltip content box.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "smallGhost" }
+        defaultValue: { summary: "white" }
       }
     }
   }
@@ -174,15 +160,67 @@ export default meta;
 export const Basic = {
   args: {
     tooltipID: "tooltip-basic",
-    triggerText: "How basic is this?",
-    tooltipContent:
+    triggerText: "What is this?",
+    content:
       "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",
@@ -202,6 +240,8 @@ 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",
@@ -217,21 +257,3 @@ 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,9 +1,19 @@
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const tooltipTriggerColor = "#15749D";
+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";
 
 export const fallbackValues = {
+  borderColor,
+  linkColor,
   hoverColor,
-  activeColor,
-  tooltipTriggerColor
+  activeColor
 };

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

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