@thecb/components 10.11.2 → 10.12.0

package/dist/index.d.ts

@@ -576,8 +576,10 @@ declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -601,6 +603,10 @@ interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 declare const Card: React.FC<Expand<CardProps> &

package/dist/index.esm.js

@@ -39857,20 +39857,40 @@ var fallbackValues$E = {
 };
 
 var CardText = function CardText(_ref) {
-  var padding = _ref.padding,
+  var showQuitLink = _ref.showQuitLink,
+    onQuitClick = _ref.onQuitClick,
+    titleAs = _ref.titleAs,
+    padding = _ref.padding,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
-    as: "p",
+  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    overflow: true
+  }, titleText && /*#__PURE__*/React.createElement(Title$1, {
+    as: titleAs,
     variant: titleVariant,
     color: themeValues.titleColor,
     weight: themeValues.titleWeight
-  }, titleText), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, titleText), showQuitLink && /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    onClick: onQuitClick,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && onQuitClick();
+    },
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Close Card: ".concat(titleText),
+    extraStyles: "cursor: pointer;"
+  }, /*#__PURE__*/React.createElement(IconQuitLarge, null))), /*#__PURE__*/React.createElement(Paragraph$1, {
+    as: textAs,
     color: themeValues.textColor
   }, text))));
 };
@@ -39911,9 +39931,17 @@ var Card = function Card(_ref) {
     _ref$imgObjectFit = _ref.imgObjectFit,
     imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
     imgAltText = _ref.imgAltText,
+    _ref$onQuitClick = _ref.onQuitClick,
+    onQuitClick = _ref$onQuitClick === void 0 ? noop : _ref$onQuitClick,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "24px" : _ref$padding,
+    _ref$showQuitLink = _ref.showQuitLink,
+    showQuitLink = _ref$showQuitLink === void 0 ? false : _ref$showQuitLink,
     text = _ref.text,
+    _ref$textAs = _ref.textAs,
+    textAs = _ref$textAs === void 0 ? "p" : _ref$textAs,
+    _ref$titleAs = _ref.titleAs,
+    titleAs = _ref$titleAs === void 0 ? "h2" : _ref$titleAs,
     titleText = _ref.titleText,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
@@ -39970,9 +39998,13 @@ var Card = function Card(_ref) {
     width: "100%",
     extraStyles: "flex-basis: 100%;"
   }, text && /*#__PURE__*/React.createElement(CardText$1, {
+    onQuitClick: onQuitClick,
     padding: padding,
+    showQuitLink: showQuitLink,
+    titleAs: titleAs,
     titleText: titleText,
     text: text,
+    textAs: textAs,
     titleVariant: titleVariant
   }), children)))));
 };