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

package/dist/index.cjs.js

@@ -14863,7 +14863,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
 };
 
 var IconAdd = function IconAdd(_ref) {
-  var _ref$strokeWidth = _ref.strokeWidth,
+  var _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? "none" : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
     strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14878,7 +14880,7 @@ var IconAdd = function IconAdd(_ref) {
   })), /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
-    stroke: "none",
+    stroke: stroke,
     strokeWidth: strokeWidth
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(-407 -563)"
@@ -25558,15 +25560,17 @@ var Tooltip = function Tooltip(_ref) {
     triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
     _ref$content = _ref.content,
     content = _ref$content === void 0 ? "" : _ref$content,
-    _ref$hasIcon = _ref.hasIcon,
-    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-    Icon = _ref.icon,
+    _ref$hasIconTrigger = _ref.hasIconTrigger,
+    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
+    _ref$IconTrigger = _ref.IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
     _ref$iconHelpText = _ref.iconHelpText,
     iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
     _ref$tooltipID = _ref.tooltipID,
     tooltipID = _ref$tooltipID === void 0 ? 0 : _ref$tooltipID,
     extraStyles = _ref.extraStyles,
-    textExtraStyles = _ref.textExtraStyles,
+    _ref$textExtraStyles = _ref.textExtraStyles,
+    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _ref$textExtraStyles,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
     _ref$maxWidth = _ref.maxWidth,
@@ -25615,9 +25619,11 @@ var Tooltip = function Tooltip(_ref) {
       setTooltipOpen(tooltipState);
     }
   };
-  var triggerRef = useOutsideClickHook(function () {
-    return handleToggleTooltip(false);
-  });
+  var handleKeyboardEvent = function handleKeyboardEvent(e) {
+    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+      handleToggleTooltip(false);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -25626,16 +25632,12 @@ var Tooltip = function Tooltip(_ref) {
       return noop$1;
     },
     onFocus: function onFocus() {
-      handleToggleTooltip(true);
+      return handleToggleTooltip(true);
     },
     onBlur: function onBlur() {
-      handleToggleTooltip(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === ESCAPE) {
-        handleToggleTooltip(false);
-      }
+      return handleToggleTooltip(false);
     },
+    onKeyDown: handleKeyboardEvent,
     onTouchStart: function onTouchStart() {
       return handleToggleTooltip(true);
     },
@@ -25651,20 +25653,20 @@ var Tooltip = function Tooltip(_ref) {
     contentOverride: true,
     variant: "smallGhost",
     tabIndex: "0",
-    "aria-describedby": tooltipOpen ? "tooltip".concat(tooltipID) : undefined,
-    ref: triggerRef,
+    "aria-describedby": tooltipID,
     extraStyles: buttonExtraStyles
-  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    stroke: BLACK
+  }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     srOnly: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
-    color: tooltipTriggerColor,
-    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
+    extraStyles: textExtraStyles
   }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     background: backgroundColor,
     borderRadius: "4px",
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-    id: "tooltip".concat(tooltipID),
+    id: tooltipID,
     role: "tooltip",
     minWidth: minWidth,
     maxWidth: maxWidth,
@@ -25684,6 +25686,10 @@ var DisplayCard = function DisplayCard(_ref) {
     url = _ref.url,
     _ref$link = _ref.link,
     link = _ref$link === void 0 ? false : _ref$link,
+    linkText = _ref.linkText,
+    linkURL = _ref.linkURL,
+    _ref$linkExtraStyles = _ref.linkExtraStyles,
+    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles,
     helpText = _ref.helpText,
     _ref$hasTooltip = _ref.hasTooltip,
     hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
@@ -25757,7 +25763,10 @@ var DisplayCard = function DisplayCard(_ref) {
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     color: CHARADE_GREY
-  }, item), link ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
+  }, item), linkText && linkURL && /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
+    to: linkURL,
+    extraStyles: linkExtraStyles
+  }, linkText), link ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     text: buttonText,
     url: url,
     variant: "smallGhost",