@thecb/components 11.10.1-beta.2 → 11.10.2-beta.2

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

@@ -1,9 +1,6 @@
 import React from "react";
 import Tooltip from "./Tooltip";
-import Text from "../../atoms/text/Text";
-import AutopayOnIcon from "../../atoms/icons/AutopayOnIcon";
-import Box from "../../atoms/layouts/Box";
-import { SEA_GREEN } from "../../../constants/colors";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -21,8 +18,11 @@ const meta = {
   ],
   args: {
     tooltipID: "tooltip-id",
+    hasIconTrigger: false,
+    IconTrigger: WarningIconXS,
+    iconHelpText: "Open the tooltip",
     triggerText: "Hover me",
-    content: "This is the tooltip content.",
+    tooltipContent: "The contents of the tooltip go here.",
     contentPosition: {
       top: "-110px",
       right: "auto",
@@ -40,56 +40,71 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    contentExtraStyles: "",
-    contentBackgroundColor: ""
+    triggerExtraStyles: "",
+    triggerButtonVariant: "smallGhost",
+    contentBackgroundColor: "",
+    contentExtraStyles: ""
   },
   argTypes: {
-    children: {
+    tooltipID: {
       description:
-        "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
+        "Unique ID linking the trigger to the tooltip content for accessibility",
       table: {
-        type: { summary: "React.ReactNode" },
+        type: { summary: "string" },
         defaultValue: { summary: undefined }
       }
     },
-    content: {
+    hasIconTrigger: {
       description:
-        "The content displayed inside the tooltip. Can be a string or a React node/element.",
+        "When true, renders an icon as the tooltip trigger instead of text",
+      control: { type: "boolean" },
       table: {
-        type: { summary: "string | React.ReactNode" },
-        defaultValue: { summary: '""' }
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
       }
     },
-    tooltipID: {
+    IconTrigger: {
       description:
-        "Unique ID for the tooltip content element. Used as the aria-describedby value on the trigger.",
+        "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",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: "Open the tooltip" }
       }
     },
     triggerText: {
       description:
-        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
+        "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: '""' }
+        defaultValue: { summary: "The contents of the tooltip go here." }
       }
     },
     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: {
@@ -99,31 +114,30 @@ 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" }
@@ -131,25 +145,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: '""' }
       }
     },
-    contentExtraStyles: {
-      description:
-        "Additional CSS string applied to the tooltip content element.",
+    triggerExtraStyles: {
+      description: "Additional CSS string applied to the text trigger element",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    contentBackgroundColor: {
-      description: "Background color of the tooltip content box.",
+    triggerButtonVariant: {
+      description:
+        "Button variant applied to the trigger ButtonWithAction element",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "white" }
+        defaultValue: { summary: "smallGhost" }
       }
     }
   }
@@ -160,67 +174,15 @@ export default meta;
 export const Basic = {
   args: {
     tooltipID: "tooltip-basic",
-    triggerText: "What is this?",
-    content:
+    triggerText: "How basic is this?",
+    tooltipContent:
       "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",
-    arrowColor: "black",
-    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",
@@ -240,8 +202,6 @@ 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",
@@ -257,3 +217,21 @@ 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,19 +1,9 @@
-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";
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const tooltipTriggerColor = "#15749D";
 
 export const fallbackValues = {
-  borderColor,
-  linkColor,
   hoverColor,
-  activeColor
+  activeColor,
+  tooltipTriggerColor
 };

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

@@ -1,11 +1,12 @@
 import React from "react";
 import Expand from "../../../util/expand";
-
 export interface TooltipProps {
-  children?: React.ReactNode;
-  content: string | React.ReactNode;
   tooltipID: string;
-  triggerText?: string;
+  hasIconTrigger?: boolean;
+  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
+  iconHelpText?: string;
+  triggerText?: string | JSX.Element;
+  tooltipContent: string;
   contentPosition?: {
     top: string;
     right: string;
@@ -23,6 +24,8 @@ export interface TooltipProps {
   maxWidth?: string;
   height?: string;
   containerExtraStyles?: string;
+  triggerExtraStyles?: string;
+  triggerButtonVariant?: string;
   contentExtraStyles?: string;
   contentBackgroundColor?: string;
 }

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