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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.8.0-beta.5",
+  "version": "11.8.0-beta.7",
   "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,28 +1,40 @@
-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 { ESCAPE } from "../../../constants/keyboard";
-import { fallbackValues } from "./Tooltip.theme";
 import WarningIconXS from "../../atoms/icons/WarningIconXS";
-import { SELECTIVE_YELLOW } from "../../../constants/colors";
+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 = ({
-  themeValues,
-  triggerText = "",
-  content = "",
+  tooltipID,
   hasIconTrigger = false,
   IconTrigger = WarningIconXS,
-  iconHelpText = "",
-  tooltipID = "tooltip-content",
-  extraStyles = "",
-  textExtraStyles = "",
-  minWidth = "250px",
-  maxWidth = "300px",
-  height = "auto",
+  iconHelpText = "Open the tooltip",
+  triggerText = "Open the tooltip",
+  tooltipContent = "The contents of the tooltip go here.",
+  contentPosition = {
+    top: "-110px",
+    right: "auto",
+    bottom: "auto",
+    left: "-225px"
+  },
   arrowDirection = "down",
   arrowPosition = {
     arrowTop: "auto",
@@ -30,93 +42,137 @@ const Tooltip = ({
     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)",
-  tooltipContentExtraStyles
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  containerExtraStyles = "",
+  triggerExtraStyles = "",
+  triggerButtonVariant = "smallGhost"
 }) => {
-  const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top, right, bottom, left } = position ?? {};
-  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,
+    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);
     }
   };
 
   const handleKeyboardEvent = e => {
-    if (e.key === ESCAPE) {
+    if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
   };
 
+  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 padding="0" extraStyles={`position: relative; ${extraStyles}`}>
+    <Box
+      ref={closeTimeoutRef}
+      padding="0"
+      extraStyles={`position: relative; ${containerExtraStyles}`}
+      action={() => noop}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onKeyDown={handleKeyboardEvent}
+      data-qa="tooltip-container"
+    >
       <ButtonWithAction
-        action={() => noop}
+        aria-describedby={tooltipID}
+        variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
-        onKeyDown={handleKeyboardEvent}
         onTouchStart={() => handleToggleTooltip(true)}
-        onTouchEnd={() => handleToggleTooltip(false)}
-        onMouseEnter={() => handleToggleTooltip(true)}
-        onMouseLeave={() => handleToggleTooltip(false)}
+        data-qa="tooltip-trigger"
         contentOverride
-        variant="smallGhost"
-        tabIndex="0"
-        aria-describedby={tooltipID}
-        extraStyles={buttonExtraStyles}
       >
-        {hasIconTrigger && (
+        {hasIconTrigger === true && (
           <>
             <Box aria-label="Open tooltip">
-              <IconTrigger color={iconColor} />
+              <IconTrigger color={themeValues.links} />
             </Box>
             <Box padding="0" srOnly>
               <Text>{iconHelpText}</Text>
             </Box>
           </>
         )}
-        {!hasIconTrigger && (
+        {hasIconTrigger === false && (
           <Text
-            extraStyles={`color: ${tooltipTriggerColor}; &:hover {
-          ${hoverColor}; &:active ${activeColor}; ${textExtraStyles}`}
+            color={popoverTriggerColor}
+            extraStyles={`
+              &:visited {
+                color: ${popoverTriggerColor};
+              }
+              &:hover {
+                color: ${hoverColor}; 
+              }
+              &:active {
+                color: ${activeColor}; 
+              }
+              ${triggerExtraStyles};
+            `}
           >
             {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={`
+          position: absolute;
           display: ${tooltipOpen ? "block" : "none"}; 
-          position: absolute; 
           top: ${top}; 
           right: ${right}; 
           bottom: ${bottom}; 
           left: ${left};
           height: ${height};
-          ${tooltipContentExtraStyles};
           `}
+        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>{content}</Paragraph>
+        <Paragraph>{tooltipContent}</Paragraph>
         <Box
           padding="0"
           extraStyles={`
@@ -137,4 +193,4 @@ const Tooltip = ({
   );
 };
 
-export default themeComponent(Tooltip, "Tooltip", fallbackValues);
+export default Tooltip;

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

@@ -9,28 +9,27 @@ export default {
     controls: { expanded: true }
   },
   args: {
-    triggerText: "",
-    content: "",
+    tooltipTriggerText: "",
+    tooltipContent: "",
     hasIconTrigger: false,
     IconTrigger: WarningIconXS,
-    iconHelpText: "",
-    iconColor: undefined,
+    iconHelpText: "Open the tooltip",
     tooltipID: "tooltip-content",
-    extraStyles: undefined,
-    textExtraStyles: undefined,
+    tooltipContainerExtraStyles: undefined,
+    triggerTextExtraStyles: undefined,
     minWidth: "250px",
     maxWidth: "300px",
     height: "auto",
-    position: undefined,
+    contentPosition: undefined,
     arrowPosition: undefined,
     arrowDirection: "down",
     buttonExtraStyles: undefined,
     backgroundColor: "white",
     borderColor: "rgba(255, 255, 255, 0.85)",
-    tooltipContentExtraStyles: undefined
+    contentExtraStyles: undefined
   },
   argTypes: {
-    triggerText: {
+    tooltipTriggerText: {
       description:
         "Text element that tooltip is anchored to. Only used if hasIconTrigger is false.",
       table: {
@@ -38,7 +37,7 @@ export default {
         defaultValue: { summary: "" }
       }
     },
-    content: {
+    tooltipContent: {
       description: "Content of the tooltip",
       table: {
         type: { summary: "string" },
@@ -65,14 +64,7 @@ export default {
       description: "Accessible description of the icon",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    iconColor: {
-      description: "Color of the icon trigger",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "Open the tooltip" }
       }
     },
     tooltipID: {
@@ -83,7 +75,7 @@ export default {
         defaultValue: { summary: "tooltip-content" }
       }
     },
-    extraStyles: {
+    tooltipContainerExtraStyles: {
       description:
         "Extra CSS styles to apply to the wrapper component around the trigger and tooltip",
       table: {
@@ -91,7 +83,7 @@ export default {
         defaultValue: { summary: undefined }
       }
     },
-    textExtraStyles: {
+    triggerTextExtraStyles: {
       description: "Extra styles to apply to the text trigger of the tooltip",
       table: {
         type: { summary: "CSS string" },
@@ -119,7 +111,7 @@ export default {
         defaultValue: { summary: "auto" }
       }
     },
-    position: {
+    contentPosition: {
       description:
         "Object containing values for top/right/bottom/left position of tooltip relative to trigger",
       table: {
@@ -164,7 +156,7 @@ export default {
         defaultValue: { summary: "rgba(255, 255, 255, 0.85)" }
       }
     },
-    tooltipContentExtraStyles: {
+    contentExtraStyles: {
       description: "Extra styles to apply to the tooltip content box",
       table: {
         type: { summary: "string" },
@@ -176,8 +168,8 @@ export default {
 
 export const BasicTooltip = {
   args: {
-    triggerText: "Help",
-    content:
+    tooltipTriggerText: "Help",
+    tooltipContent:
       "Contact support at 1-800-CTY-VILL for help with your account balance."
   }
 };
@@ -186,17 +178,17 @@ export const IconTooltip = {
   args: {
     hasIconTrigger: true,
     IconTrigger: WarningIconXS,
-    content:
+    tooltipContent:
       "Contact support at 1-800-CTY-VILL for help with your account balance."
   }
 };
 
 export const UnderneathTooltip = {
   args: {
-    triggerText: "What's this?",
-    content:
+    tooltipTriggerText: "What's this?",
+    tooltipContent:
       "Contact support at 1-800-CTY-VILL for help with your account balance.",
-    position: { top: "50px", left: "-100px" },
+    contentPosition: { top: "50px", left: "-100px" },
     arrowPosition: { arrowTop: "-8px", arrowLeft: "50%" },
     arrowDirection: "up"
   }