@thecb/components 12.0.0-beta.9 → 12.0.1-beta.1

package/dist/index.cjs.js

@@ -45839,37 +45839,34 @@ var fallbackValues$L = {
   textColor: textColor$5
 };
 
-var StyledAnchor = styled__default("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__default(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__default(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__default(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",
@@ -45930,7 +45915,7 @@ var LinkCard = function LinkCard(_ref) {
     variant: titleVariant,
     $theme: themeValues,
     margin: 0,
-    disabled: disabled
+    $disabled: disabled
   }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     linkColor: themeValues.color,
     text: locatorSlug,
@@ -45944,7 +45929,7 @@ var LinkCard = function LinkCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
     $theme: themeValues,
-    disabled: disabled
+    $disabled: disabled
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
@@ -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 ? "" : 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 ? "" : 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");