@thecb/components 11.11.0-beta.2 → 11.11.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.11.0-beta.2",
+  "version": "11.11.0-beta.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -86,7 +86,9 @@ const Tooltip = ({
         "aria-describedby": tooltipID,
         onFocus: () => handleToggleTooltip(true),
         onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        tabIndex: "0",
+        style: { cursor: "pointer" }
       });
     }
 
@@ -101,6 +103,7 @@ const Tooltip = ({
         onTouchStart={() => handleToggleTooltip(true)}
         data-qa={`tooltip-trigger-${tooltipID}`}
         text={triggerText}
+        tabIndex="0"
         extraStyles={`
           color: ${themeValues.linkColor};
           &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}

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

@@ -40,10 +40,18 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    contentExtraStyles: "",
-    contentBackgroundColor: ""
+    contentExtraStyles: ""
   },
   argTypes: {
+    hasCustomTrigger: {
+      description:
+        "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 }
+      }
+    },
     children: {
       description:
         "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
@@ -76,6 +84,14 @@ const meta = {
         defaultValue: { summary: '""' }
       }
     },
+    triggerButtonVariant: {
+      description:
+        "Variant passed to the default ButtonWithAction trigger. Has no effect when a custom trigger is used.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: '"smallGhost"' }
+      }
+    },
     contentPosition: {
       description:
         "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger.",
@@ -145,11 +161,12 @@ const meta = {
         defaultValue: { summary: '""' }
       }
     },
-    contentBackgroundColor: {
-      description: "Background color of the tooltip content box.",
+    arrowColor: {
+      description:
+        "Override color for the tooltip arrow. Defaults to the theme border color when not provided.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "white" }
+        defaultValue: { summary: undefined }
       }
     }
   }

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

@@ -5,7 +5,9 @@ export interface TooltipProps {
   children?: React.ReactNode;
   content: string | React.ReactNode;
   tooltipID: string;
+  hasCustomTrigger?: boolean;
   triggerText?: string;
+  triggerButtonVariant?: string;
   contentPosition?: {
     top: string;
     right: string;
@@ -24,7 +26,7 @@ export interface TooltipProps {
   height?: string;
   containerExtraStyles?: string;
   contentExtraStyles?: string;
-  contentBackgroundColor?: string;
+  arrowColor?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &