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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.8.0-beta.7",
+  "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

@@ -60,7 +60,7 @@ const Tooltip = ({
 
   const {
     borderColor,
-    popoverTriggerColor,
+    popoverTriggerColor: tooltipTriggerColor,
     hoverColor,
     activeColor
   } = themeValues;
@@ -107,25 +107,24 @@ const Tooltip = ({
       ref={closeTimeoutRef}
       padding="0"
       extraStyles={`position: relative; ${containerExtraStyles}`}
-      action={() => noop}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onKeyDown={handleKeyboardEvent}
+      onMouseEnter={() => handleMouseEnter(true)}
+      onMouseLeave={() => handleMouseLeave(false)}
       data-qa="tooltip-container"
     >
       <ButtonWithAction
         aria-describedby={tooltipID}
+        onKeyDown={handleKeyboardEvent}
         variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
         onTouchStart={() => handleToggleTooltip(true)}
         data-qa="tooltip-trigger"
-        contentOverride
+        contentOverride={true}
       >
         {hasIconTrigger === true && (
           <>
             <Box aria-label="Open tooltip">
-              <IconTrigger color={themeValues.links} />
+              <IconTrigger color={tooltipTriggerColor} />
             </Box>
             <Box padding="0" srOnly>
               <Text>{iconHelpText}</Text>
@@ -134,15 +133,17 @@ const Tooltip = ({
         )}
         {hasIconTrigger === false && (
           <Text
-            color={popoverTriggerColor}
+            color={tooltipTriggerColor}
             extraStyles={`
+              color: ${tooltipTriggerColor};
               &:visited {
-                color: ${popoverTriggerColor};
+                color: ${tooltipTriggerColor};
               }
               &:hover {
                 color: ${hoverColor}; 
               }
-              &:active {
+              &:active,
+              &:focus {
                 color: ${activeColor}; 
               }
               ${triggerExtraStyles};
@@ -159,10 +160,10 @@ const Tooltip = ({
         data-qa="tooltip-contents"
         extraStyles={`
           position: absolute;
-          display: ${tooltipOpen ? "block" : "none"}; 
+          display: ${tooltipOpen ? "block" : "none"};
           top: ${top}; 
-          right: ${right}; 
-          bottom: ${bottom}; 
+          right: ${right};
+          bottom: ${bottom};
           left: ${left};
           height: ${height};
           `}

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> &