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

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, WHITE } 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,81 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    triggerExtraStyles: "",
-    triggerButtonVariant: "smallGhost",
-    contentBackgroundColor: "",
     contentExtraStyles: ""
   },
   argTypes: {
-    tooltipID: {
+    hasCustomTrigger: {
       description:
-        "Unique ID linking the trigger to the tooltip content for accessibility",
+        "When true, the component uses the children prop as the trigger element instead of the default ButtonWithAction.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    customTriggerRole: {
+      description:
+        "Role for the custom trigger element for accessibility purposes. Defaults to undefined.",
+      control: { type: "text" },
       table: {
         type: { summary: "string" },
         defaultValue: { summary: undefined }
       }
     },
-    hasIconTrigger: {
+    children: {
       description:
-        "When true, renders an icon as the tooltip trigger instead of text",
-      control: { type: "boolean" },
+        "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: "boolean" },
-        defaultValue: { summary: false }
+        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: undefined }
       }
     },
-    IconTrigger: {
+    content: {
       description:
-        "Icon component rendered as the trigger when hasIconTrigger is true",
+        "The content displayed inside the tooltip. Can be a string or a React node/element.",
       table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: "WarningIconXS" }
+        type: { summary: "string | React.ReactNode" },
+        defaultValue: { summary: '""' }
       }
     },
-    iconHelpText: {
-      description: "Screen reader text for the icon trigger",
+    tooltipID: {
+      description:
+        "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",
+        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
       table: {
-        type: { summary: "string | JSX.Element" },
-        defaultValue: { summary: "Open the tooltip" }
+        type: { summary: "string" },
+        defaultValue: { summary: '""' }
       }
     },
-    tooltipContent: {
-      description: "The content displayed inside the tooltip",
+    triggerButtonVariant: {
+      description:
+        "Variant passed to the default ButtonWithAction trigger. Has no effect when a custom trigger is used.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "The contents of the tooltip go here." }
+        defaultValue: { summary: '"smallGhost"' }
       }
     },
     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 +124,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" }
+        defaultValue: { summary: "100%" }
       }
     },
     height: {
-      description: "Height of the tooltip content box",
+      description: "Height of the tooltip content box.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "auto" }
@@ -145,25 +156,26 @@ 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: {
+    backgroundColor: {
       description:
-        "Button variant applied to the trigger ButtonWithAction element",
+        "Override backgroundColor for the tooltip arrow. Defaults to WHITE when not provided.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "smallGhost" }
+        defaultValue: { summary: WHITE }
       }
     }
   }
@@ -174,15 +186,69 @@ 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",
+    backgroundColor: "black",
+    contentPosition: {
+      top: "-126px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    content: React.createElement("div", { style: { padding: "8px" } }, [
+      React.createElement("strong", null, "Bold title"),
+      React.createElement(
+        "p",
+        null,
+        "With ",
+        React.createElement("em", null, "an italic text detail"),
+        " below."
+      )
+    ])
+  }
+};
+
 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 +268,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 +285,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,18 @@
-const hoverColor = "#116285";
-const activeColor = "#0E506D";
-const tooltipTriggerColor = "#15749D";
+import {
+  ROYAL_BLUE_VIVID,
+  ROYAL_BLUE,
+  CONGRESS_BLUE,
+  CHARADE_GREY
+} from "../../../constants/colors";
+
+const hoverColor = ROYAL_BLUE;
+const activeColor = CONGRESS_BLUE;
+const linkColor = ROYAL_BLUE_VIVID;
+const textColor = CHARADE_GREY;
 
 export const fallbackValues = {
+  linkColor,
   hoverColor,
   activeColor,
-  tooltipTriggerColor
+  textColor
 };

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

@@ -1,12 +1,13 @@
 import React from "react";
 import Expand from "../../../util/expand";
+
 export interface TooltipProps {
+  children?: React.ReactNode;
+  content: React.ReactNode;
   tooltipID: string;
-  hasIconTrigger?: boolean;
-  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
-  iconHelpText?: string;
-  triggerText?: string | JSX.Element;
-  tooltipContent: string;
+  hasCustomTrigger?: boolean;
+  triggerText?: string;
+  triggerButtonVariant?: string;
   contentPosition?: {
     top: string;
     right: string;
@@ -24,10 +25,9 @@ export interface TooltipProps {
   maxWidth?: string;
   height?: string;
   containerExtraStyles?: string;
-  triggerExtraStyles?: string;
-  triggerButtonVariant?: string;
   contentExtraStyles?: string;
-  contentBackgroundColor?: string;
+  backgroundColor?: string;
+  customTriggerRole?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &

package/src/util/formats.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { createFormat } from "formatted-input";
 import Text from "../components/atoms/text";
-import { ASH_GREY, FIRE_YELLOW } from "../constants/colors";
+import { ASH_GREY, FIRE_YELLOW, STORM_GREY } from "../constants/colors";
 export const formatDelimiter = "_";
 
 export const phoneFormats = [
@@ -101,7 +101,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Exp Date {expireDate}
@@ -112,6 +113,7 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
+          fontSize=".75rem"
           color={FIRE_YELLOW}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
@@ -123,7 +125,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Expired