@thecb/components 11.8.0-beta.6 → 11.8.0-beta.8

package/package.json

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

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

@@ -1,24 +1,34 @@
-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, arrowBorder } from "../../../util/general";
-import { fallbackValues } from "./Tooltip.theme";
 import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import {
+  MATISSE_BLUE,
+  PEACOCK_BLUE,
+  SAPPHIRE_BLUE
+} 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 = ({
-  tooltipContainerExtraStyles = "",
-  themeValues,
-  tooltipID = "tooltip-content",
+  tooltipID,
   hasIconTrigger = false,
   IconTrigger = WarningIconXS,
   iconHelpText = "Open the tooltip",
-  tooltipContent = "",
-  tooltipTriggerText = "",
-  triggerTextExtraStyles = "",
-  contentExtraStyles = "",
+  triggerText = "Open the tooltip",
+  tooltipContent = "The contents of the tooltip go here.",
   contentPosition = {
     top: "-110px",
     right: "auto",
@@ -35,19 +45,32 @@ const Tooltip = ({
   minWidth = "250px",
   maxWidth = "300px",
   height = "auto",
-  buttonExtraStyles,
-  backgroundColor = "white",
-  borderColor = "rgba(255, 255, 255, 0.85)"
+  containerExtraStyles = "",
+  triggerExtraStyles = "",
+  triggerButtonVariant = "smallGhost"
 }) => {
-  const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top, right, bottom, left } = contentPosition ?? {};
-  const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition ?? {};
-
+  const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    TOOLTIP_THEME_SOURCE
+  );
+
+  const {
+    borderColor,
+    popoverTriggerColor: tooltipTriggerColor,
+    hoverColor,
+    activeColor
+  } = themeValues;
+
+  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);
     }
   };
 
@@ -57,27 +80,48 @@ const Tooltip = ({
     }
   };
 
+  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
+      ref={closeTimeoutRef}
       padding="0"
-      extraStyles={`position: relative; ${tooltipContainerExtraStyles}`}
+      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 && (
           <>
             <Box aria-label="Open tooltip">
               <IconTrigger color={tooltipTriggerColor} />
@@ -87,34 +131,47 @@ const Tooltip = ({
             </Box>
           </>
         )}
-        {!hasIconTrigger && (
+        {hasIconTrigger === false && (
           <Text
-            extraStyles={`color: ${tooltipTriggerColor}; &:hover {
-          ${hoverColor}; &:active ${activeColor}; ${triggerTextExtraStyles}`}
+            color={tooltipTriggerColor}
+            extraStyles={`
+              color: ${tooltipTriggerColor};
+              &:visited {
+                color: ${tooltipTriggerColor};
+              }
+              &:hover {
+                color: ${hoverColor}; 
+              }
+              &:active,
+              &:focus {
+                color: ${activeColor}; 
+              }
+              ${triggerExtraStyles};
+            `}
           >
-            {tooltipTriggerText}
+            {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}
+        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};
-          ${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>{tooltipContent}</Paragraph>
         <Box
@@ -137,4 +194,4 @@ const Tooltip = ({
   );
 };
 
-export default themeComponent(Tooltip, "Tooltip", fallbackValues);
+export default Tooltip;

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

@@ -1,52 +1,61 @@
+import React from "react";
 import Tooltip from "./Tooltip";
 import WarningIconXS from "../../atoms/icons/WarningIconXS";
-export default {
+
+const meta = {
   title: "Molecules/Tooltip",
   component: Tooltip,
-  tags: ["!autodocs"],
   parameters: {
-    layout: "centered",
-    controls: { expanded: true }
+    layout: "centered"
   },
+  tags: ["!autodocs"],
+  decorators: [
+    Story => (
+      <div style={{ padding: "120px 300px" }}>
+        <Story />
+      </div>
+    )
+  ],
   args: {
-    tooltipTriggerText: "",
-    tooltipContent: "",
+    tooltipID: "tooltip-id",
     hasIconTrigger: false,
     IconTrigger: WarningIconXS,
     iconHelpText: "Open the tooltip",
-    tooltipID: "tooltip-content",
-    tooltipContainerExtraStyles: undefined,
-    triggerTextExtraStyles: undefined,
+    triggerText: "Hover me",
+    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",
-    contentPosition: undefined,
-    arrowPosition: undefined,
-    arrowDirection: "down",
-    buttonExtraStyles: undefined,
-    backgroundColor: "white",
-    borderColor: "rgba(255, 255, 255, 0.85)",
-    contentExtraStyles: undefined
+    containerExtraStyles: "",
+    triggerExtraStyles: "",
+    triggerButtonVariant: "smallGhost"
   },
   argTypes: {
-    tooltipTriggerText: {
+    tooltipID: {
       description:
-        "Text element that tooltip is anchored to. Only used if hasIconTrigger is false.",
+        "Unique ID linking the trigger to the tooltip content for accessibility",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    tooltipContent: {
-      description: "Content of the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
+        defaultValue: { summary: undefined }
       }
     },
     hasIconTrigger: {
       description:
-        "Whether an icon is the trigger for the tooltip, instead of text",
+        "When true, renders an icon as the tooltip trigger instead of text",
+      control: { type: "boolean" },
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: false }
@@ -54,142 +63,173 @@ export default {
     },
     IconTrigger: {
       description:
-        "The icon component to display. Requires hasIcon to be true.",
+        "Icon component rendered as the trigger when hasIconTrigger is true",
       table: {
         type: { summary: "React Component" },
         defaultValue: { summary: "WarningIconXS" }
       }
     },
     iconHelpText: {
-      description: "Accessible description of the icon",
+      description: "Screen reader text for the icon trigger",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "Open the tooltip" }
       }
     },
-    tooltipID: {
+    triggerText: {
       description:
-        "ID value for tooltip. Use if displaying multiple tooltips on the same page.",
+        "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: "tooltip-content" }
+        defaultValue: { summary: "The contents of the tooltip go here." }
       }
     },
-    tooltipContainerExtraStyles: {
+    contentPosition: {
       description:
-        "Extra CSS styles to apply to the wrapper component around the trigger and tooltip",
+        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger",
       table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
+        type: { summary: "object" },
+        defaultValue: {
+          summary: `{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }`
+        }
       }
     },
-    triggerTextExtraStyles: {
-      description: "Extra styles to apply to the text trigger of the tooltip",
+    arrowDirection: {
+      description: "Direction the tooltip arrow points (up, down, left, right)",
+      control: { type: "select" },
+      options: ["up", "down", "left", "right"],
       table: {
-        type: { summary: "CSS string" },
-        defaultValue: { summary: undefined }
+        type: { summary: "string" },
+        defaultValue: { summary: "down" }
+      }
+    },
+    arrowPosition: {
+      description:
+        "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" }`
+        }
       }
     },
     minWidth: {
-      description: "Minimum width of the tooltip component",
+      description: "Minimum width of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "250px" }
       }
     },
     maxWidth: {
-      description: "Maximum width of the tooltip component",
+      description: "Maximum width of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "300px" }
       }
     },
     height: {
-      description: "Height of the tooltip component. Default sizes to content.",
+      description: "Height of the tooltip content box",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "auto" }
       }
     },
-    contentPosition: {
+    containerExtraStyles: {
       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",
+        "Additional CSS string applied to the tooltip container element",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "down" }
+        defaultValue: { summary: '""' }
       }
     },
-    buttonExtraStyles: {
-      description:
-        "Extra styles to apply to the button that wraps tooltip trigger",
+    triggerExtraStyles: {
+      description: "Additional CSS string applied to the text trigger element",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: '""' }
       }
     },
-    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)" }
-      }
-    },
-    contentExtraStyles: {
-      description: "Extra styles to apply to the tooltip content box",
+    triggerButtonVariant: {
+      description:
+        "Button variant applied to the trigger ButtonWithAction element",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "smallGhost" }
       }
     }
   }
 };
 
-export const BasicTooltip = {
+export default meta;
+
+export const Basic = {
   args: {
-    tooltipTriggerText: "Help",
+    tooltipID: "tooltip-basic",
+    triggerText: "How basic is this?",
     tooltipContent:
-      "Contact support at 1-800-CTY-VILL for help with your account balance."
+      "This is a detailed explanation of a feature or term that the user may need more context about."
   }
 };
 
-export const IconTooltip = {
+export const TooltipBelow = {
   args: {
-    hasIconTrigger: true,
-    IconTrigger: WarningIconXS,
-    tooltipContent:
-      "Contact support at 1-800-CTY-VILL for help with your account balance."
+    tooltipID: "tooltip-below",
+    contentPosition: {
+      top: "50px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    arrowDirection: "up",
+    arrowPosition: {
+      arrowTop: "-8px",
+      arrowRight: "10px",
+      arrowBottom: "auto",
+      arrowLeft: "auto"
+    }
   }
 };
 
-export const UnderneathTooltip = {
+export const TooltipRight = {
   args: {
-    tooltipTriggerText: "What's this?",
+    tooltipID: "tooltip-right",
+    contentPosition: {
+      top: "-40px",
+      right: "auto",
+      bottom: "auto",
+      left: "calc(100% + 12px)"
+    },
+    arrowDirection: "left",
+    arrowPosition: {
+      arrowTop: "50%",
+      arrowRight: "auto",
+      arrowBottom: "auto",
+      arrowLeft: "-8px"
+    }
+  }
+};
+
+export const CustomContent = {
+  args: {
+    tooltipID: "tooltip-custom-content",
+    triggerText: "What is this?",
     tooltipContent:
-      "Contact support at 1-800-CTY-VILL for help with your account balance.",
-    contentPosition: { top: "50px", left: "-100px" },
-    arrowPosition: { arrowTop: "-8px", arrowLeft: "50%" },
-    arrowDirection: "up"
+      "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/index.d.ts

@@ -1,31 +1,31 @@
 import React from "react";
 import Expand from "../../../util/expand";
-
 export interface TooltipProps {
+  tooltipID: string;
+  hasIconTrigger?: boolean;
+  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
+  iconHelpText?: string;
   triggerText?: string | JSX.Element;
-  content?: string | JSX.Element;
-  extraStyles?: string;
-  textExtraStyles?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  height?: string;
-  position?: { top: string; right: string; bottom: string; left: string };
+  tooltipContent: string;
+  contentPosition?: {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  };
+  arrowDirection?: string;
   arrowPosition?: {
     arrowTop: string;
     arrowRight: string;
     arrowBottom: string;
     arrowLeft: string;
   };
-  arrowDirection?: "left" | "right" | "top" | "bottom";
-  buttonExtraStyles?: string;
-  borderColor?: string;
-  backgroundColor?: string;
-  hasIconTrigger?: boolean;
-  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
-  iconHelpText?: string;
-  iconColor?: string;
-  tooltipID: string;
-  tooltipContentExtraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  containerExtraStyles?: string;
+  triggerExtraStyles?: string;
+  triggerButtonVariant?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &