@thecb/components 12.0.2-beta.2 → 12.0.2

package/dist/index.esm.js

@@ -45825,7 +45825,7 @@ var disabledBorderColor$1 = GHOST_GREY;
 var disabledColor$2 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
-var borderColor$5 = MANATEE_GREY;
+var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
 var textColor$5 = BRIGHT_GREY;
 var fallbackValues$L = {
@@ -45839,37 +45839,34 @@ var fallbackValues$L = {
   textColor: textColor$5
 };
 
-var StyledAnchor = styled("a").withConfig({
-  displayName: "LinkCardstyled__StyledAnchor",
-  componentId: "sc-l5q1h2-0"
-})(["", ""], function (_ref) {
-  var disabled = _ref.$disabled,
-    theme = _ref.$theme,
-    extraStyles = _ref.$extraStyles,
-    disabledStyles = _ref.$disabledStyles,
-    hoverStyles = _ref.$hoverStyles,
-    activeStyles = _ref.$activeStyles;
-  return "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(extraStyles || "", "\n\n  ").concat(disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n          ").concat(disabledStyles || "", "\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n        ".concat(hoverStyles || "", "\n\n        &:hover:not(:active) {\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n          ").concat(activeStyles || "", "\n        }\n      "), "\n  ");
-});
+var getCardBaseStyles = function getCardBaseStyles(theme, disabled, extraStyles) {
+  return "\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  font-size: inherit;\n  color: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(disabled ? "pointer-events: none;" : "", "\n  ").concat(extraStyles || "", "\n");
+};
+var getCardHoverActiveStyles = function getCardHoverActiveStyles(theme, disabled, hoverStyles, activeStyles) {
+  if (disabled) {
+    return "\n      &:hover,\n      &:active {\n        cursor: default;\n        box-shadow: none;\n        border: 1px solid ".concat(theme.disabledBorderColor, ";\n      }\n    ");
+  }
+  return "\n    &:hover,\n    &:active {\n      cursor: pointer;\n      box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n        0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n        0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n        0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n        0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n        0px 80px 33px 0px rgba(41, 42, 51, 0);\n    }\n    ".concat(hoverStyles || "", "\n\n    &:hover:not(:active) {\n      border: 1px solid ").concat(theme.borderColor, ";\n    }\n\n    &:active {\n      background-color: ").concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.borderColor, ";\n      ").concat(activeStyles || "", "\n    }\n  ");
+};
 var Title$2 = styled(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
-  componentId: "sc-l5q1h2-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref2) {
-  var disabled = _ref2.$disabled,
-    theme = _ref2.$theme;
+  componentId: "sc-l5q1h2-0"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref) {
+  var disabled = _ref.$disabled,
+    theme = _ref.$theme;
   return disabled ? theme.disabledColor : theme.color;
 });
 var Subtitle = styled(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
-  componentId: "sc-l5q1h2-2"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref3) {
-  var disabled = _ref3.$disabled,
-    theme = _ref3.$theme;
+  componentId: "sc-l5q1h2-1"
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref2) {
+  var disabled = _ref2.$disabled,
+    theme = _ref2.$theme;
   return disabled ? theme.disabledColor : theme.textColor;
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
-  componentId: "sc-l5q1h2-3"
+  componentId: "sc-l5q1h2-2"
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
@@ -45900,21 +45897,9 @@ var LinkCard = function LinkCard(_ref) {
     isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
   var regex = /\W/g;
   var locatorSlug = title === null || title === void 0 || (_title$toLowerCase = title.toLowerCase) === null || _title$toLowerCase === void 0 || (_title$toLowerCase = _title$toLowerCase.call(title)) === null || _title$toLowerCase === void 0 || (_title$toLowerCase$re = _title$toLowerCase.replaceAll) === null || _title$toLowerCase$re === void 0 ? void 0 : _title$toLowerCase$re.call(_title$toLowerCase, regex, "-");
-  return /*#__PURE__*/React__default.createElement(StyledAnchor, {
-    key: "link-card-".concat(locatorSlug),
-    href: disabled ? undefined : href,
-    rel: isExternalLink ? "noopener noreferrer" : undefined,
-    target: isExternalLink ? "_blank" : undefined,
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled,
-    $disabled: disabled,
-    "aria-label": "".concat(title, ", ").concat(subtitle),
-    "data-qa": "link-card-".concat(locatorSlug),
-    $theme: themeValues,
-    $extraStyles: disabled ? "pointer-events: none; ".concat(extraStyles) : extraStyles,
-    $hoverStyles: extraHoverStyles,
-    $activeStyles: extraActiveStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  var baseStyles = getCardBaseStyles(themeValues, disabled, extraStyles);
+  var hoverActiveStyles = getCardHoverActiveStyles(themeValues, disabled, extraHoverStyles, extraActiveStyles);
+  var cardContent = /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
     justify: "space-between",
@@ -45956,7 +45941,30 @@ var LinkCard = function LinkCard(_ref) {
     justify: "space-between"
   }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React__default.createElement(Box, {
     extraStyles: "margin-right: auto;"
-  }), showRight && !!rightContent && rightContent))));
+  }), showRight && !!rightContent && rightContent)));
+  if (isExternalLink) {
+    return /*#__PURE__*/React__default.createElement(ExternalLink, {
+      key: "link-card-".concat(locatorSlug),
+      href: disabled ? undefined : href,
+      newTab: true,
+      isUnderlined: false,
+      tabIndex: disabled ? "-1" : "0",
+      ariaLabel: "".concat(title, ", ").concat(subtitle),
+      dataQa: "link-card-".concat(locatorSlug),
+      extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
+    }, cardContent);
+  }
+  return /*#__PURE__*/React__default.createElement(InternalLink, {
+    key: "link-card-".concat(locatorSlug),
+    to: disabled ? undefined : href,
+    isUnderlined: false,
+    hoverUnderline: false,
+    tabIndex: disabled ? "-1" : "0",
+    "aria-label": "".concat(title, ", ").concat(subtitle),
+    "aria-disabled": disabled,
+    "data-qa": "link-card-".concat(locatorSlug),
+    extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
+  }, cardContent);
 };
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");