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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.1-beta.0",
+  "version": "11.10.1-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

@@ -10,11 +10,11 @@ import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
 const Tooltip = ({
   tooltipID,
   children,
+  hasCustomTrigger = false,
   triggerText = "",
   containerExtraStyles = "",
   triggerButtonVariant = "smallGhost",
   content = "",
-  contentBackgroundColor = fallbackValues.borderColor,
   contentExtraStyles = "",
   minWidth = "250px",
   maxWidth = "100%",
@@ -31,7 +31,8 @@ const Tooltip = ({
     arrowRight: "10px",
     arrowBottom: "-8px",
     arrowLeft: "auto"
-  }
+  },
+  arrowColor
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -80,7 +81,7 @@ const Tooltip = ({
   }, []);
 
   const renderTrigger = () => {
-    if (children) {
+    if (hasCustomTrigger && children) {
       return React.cloneElement(React.Children.only(children), {
         "aria-describedby": tooltipID,
         onFocus: () => handleToggleTooltip(true),
@@ -103,7 +104,7 @@ const Tooltip = ({
         extraStyles={`
           color: ${themeValues.linkColor};
           &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
-          &:active, &:focus { color: ${themeValues.activeColor}; text-decoration: none;}
+          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
           button, span, &:hover span { text-decoration: none; }
         `}
       />
@@ -153,7 +154,11 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(themeValues.borderColor, arrowDirection, "8px")};
+            ${arrowBorder(
+              arrowColor || themeValues.borderColor,
+              arrowDirection,
+              "8px"
+            )};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

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

@@ -1,5 +1,9 @@
 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";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -165,6 +169,7 @@ export const Basic = {
 export const WithChildren = {
   args: {
     tooltipID: "tooltip-children",
+    hasCustomTrigger: true,
     content: "Extra information about this label.",
     contentPosition: {
       top: "-84px",
@@ -175,7 +180,15 @@ export const WithChildren = {
   },
   render: args => (
     <Tooltip {...args}>
-      <button type="button">Custom trigger</button>
+      <Box padding="0" extraStyles="white-space: nowrap;">
+        <AutopayOnIcon />
+        <Text
+          color={SEA_GREEN}
+          extraStyles="margin-left: 5px; white-space: nowrap;"
+        >
+          Custom trigger
+        </Text>
+      </Box>
     </Tooltip>
   )
 };
@@ -183,8 +196,9 @@ export const WithChildren = {
 export const RichTooltipContent = {
   args: {
     tooltipID: "tooltip-node-content",
-    contentBackgroundColor: "#ffffff",
+    contentExtraStyles: "background-color: #000000; color: #ffffff;",
     triggerText: "Rich content",
+    arrowColor: "black",
     contentPosition: {
       top: "-126px",
       right: "auto",