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

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,66 @@ 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",
+    contentBackgroundColor: "#ffffff",
+    triggerText: "Rich content",
+    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 +239,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 +256,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;
 }