@thecb/components 8.4.1 → 8.4.3-beta.0

package/dist/index.d.ts

@@ -952,6 +952,7 @@ declare const EditableTable: React.FC<Expand<EditableTableProps> &
 interface TableListItemProps {
   title: string | JSX.Element;
   value: string | JSX.Element;
+  onClick?: () => void;
   canEdit?: boolean;
   canRemove?: boolean;
   isMobile?: boolean;

package/dist/index.esm.js

@@ -14855,7 +14855,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
   }), /*#__PURE__*/React.createElement("mask", {
     id: "mask0_902_435-".concat(text),
     style: {
-      "mask-type": "alpha"
+      maskType: "alpha"
     },
     maskUnits: "userSpaceOnUse",
     x: "1",
@@ -17778,15 +17778,15 @@ var ArrowRightCircleIconSmall = function ArrowRightCircleIconSmall(_ref) {
 var ArrowRightIcon = function ArrowRightIcon(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
-      _ref$labeledBy = _ref.labeledBy,
-      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
+      _ref$labelledBy = _ref.labelledBy,
+      labelledBy = _ref$labelledBy === void 0 ? "" : _ref$labelledBy;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    "aria-labeledBy": labeledBy
+    "aria-labelledby": labelledBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18209,15 +18209,15 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 var PlusCircleIcon = function PlusCircleIcon(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
-      _ref$labeledBy = _ref.labeledBy,
-      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
+      _ref$labelledBy = _ref.labelledBy,
+      labelledBy = _ref$labelledBy === void 0 ? "" : _ref$labelledBy;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    "aria-labelledby": labeledBy
+    "aria-labelledby": labelledBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -41242,6 +41242,8 @@ var EditableTable = function EditableTable(_ref) {
 var TableListItem = function TableListItem(_ref) {
   var title = _ref.title,
       value = _ref.value,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
       _ref$canEdit = _ref.canEdit,
       canEdit = _ref$canEdit === void 0 ? false : _ref$canEdit,
       _ref$canRemove = _ref.canRemove,
@@ -41252,7 +41254,8 @@ var TableListItem = function TableListItem(_ref) {
     padding: "0px",
     extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }\n  ".concat(isMobile && borderTopItem && "&:first-child {\n    > * {\n      border-top: 1px solid ".concat(GHOST_GREY, ";\n    }\n  }"), "\n  ")
   }, /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(EditableTableListItem, {
-    isMobile: isMobile
+    isMobile: isMobile,
+    onClick: onClick
   }, /*#__PURE__*/React.createElement(TableItemKey, {
     isMobile: isMobile
   }, /*#__PURE__*/React.createElement(Text$1, {
@@ -42992,10 +42995,12 @@ var LinkCard = function LinkCard(_ref) {
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
+  var regex = /\W/g;
+  var locatorSlug = title.toLowerCase().replaceAll(regex, "-");
   return /*#__PURE__*/React.createElement(Container, {
     border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
-    dataQa: "link-card-".concat(title),
+    dataQa: "link-card-".concat(locatorSlug),
     width: "100%",
     maxWidth: isMobile ? "100%" : "288px",
     minWidth: isMobile ? "240px" : "288px",