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

package/package.json

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

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

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { createThemeValues, themeComponent } from "../../../util/themeUtils";
+import { createThemeValues } from "../../../util/themeUtils";
 import { ThemeContext } from "styled-components";
 import Text from "../../atoms/text";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { noop, arrowBorder } from "../../../util/general";
-import { fallbackValues } from "./Tooltip.theme";
+import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
 
 const Tooltip = ({
   tooltipID,
@@ -19,19 +19,18 @@ const Tooltip = ({
   minWidth = "250px",
   maxWidth = "100%",
   height = "auto",
-  arrowDirection = "down",
   contentPosition = {
-    top: "auto",
+    top: "-110px",
     right: "auto",
-    bottom: "calc(100% + 8px)", // always sits above the trigger + 8px gap for arrow
-    left: "50%", // anchors to horizontal center of trigger
-    transform: "translateX(-50%)" // shifts left by half tooltip's own width → centered
+    bottom: "auto",
+    left: "-225px"
   },
+  arrowDirection = "down",
   arrowPosition = {
     arrowTop: "auto",
-    arrowRight: "auto",
+    arrowRight: "10px",
     arrowBottom: "-8px",
-    arrowLeft: "calc(50% - 8px)" // centers the 0-width arrow element (16px wide border)
+    arrowLeft: "auto"
   },
   arrowColor
 }) => {
@@ -41,7 +40,7 @@ const Tooltip = ({
   const themeValues = createThemeValues(
     themeContext,
     fallbackValues,
-    "Tooltip"
+    TOOLTIP_THEME_SOURCE
   );
 
   const { top, right, bottom, left } = contentPosition;
@@ -83,21 +82,12 @@ const Tooltip = ({
 
   const renderTrigger = () => {
     if (hasCustomTrigger && children) {
-      return (
-        <Box
-          padding="0"
-          extraStyles="cursor: pointer;"
-          tabIndex="0"
-          role="button"
-          data-qa={`tooltip-trigger-${tooltipID}`}
-          aria-describedby={tooltipID}
-          onFocus={() => handleToggleTooltip(true)}
-          onBlur={() => handleToggleTooltip(false)}
-          onKeyDown={handleKeyDown}
-        >
-          {children}
-        </Box>
-      );
+      return React.cloneElement(React.Children.only(children), {
+        "aria-describedby": tooltipID,
+        onFocus: () => handleToggleTooltip(true),
+        onBlur: () => handleToggleTooltip(false),
+        onKeyDown: handleKeyDown
+      });
     }
 
     return (
@@ -113,10 +103,9 @@ const Tooltip = ({
         text={triggerText}
         extraStyles={`
           color: ${themeValues.linkColor};
-          cursor: pointer;
-          &:hover { color: ${themeValues.hoverColor}; text-decoration: none; }
-          &:active, &:focus { color: ${themeValues.activeColor}; text-decoration: none; }
-          button, span, &:hover span { text-decoration: none; } 
+          &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
+          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
+          button, span, &:hover span { text-decoration: none; }
         `}
       />
     );
@@ -182,4 +171,4 @@ const Tooltip = ({
   );
 };
 
-export default themeComponent(Tooltip, "Tooltip", fallbackValues);
+export default Tooltip;

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

@@ -9,6 +9,8 @@ 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,