@thecb/components 8.4.0-beta.1 → 8.4.0-beta.3

package/dist/index.cjs.js

@@ -42845,84 +42845,75 @@ var fallbackValues$I = {
   color: color$b
 };
 
+// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+
 var LinkCard = function LinkCard(_ref) {
   var _ref$variant = _ref.variant,
-      _ref$workflowName = _ref.workflowName,
-      workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
-      _ref$workflowDescript = _ref.workflowDescription,
-      workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
-      _ref$workflowActionNa = _ref.workflowActionName,
-      workflowActionName = _ref$workflowActionNa === void 0 ? "Link an account" : _ref$workflowActionNa,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
       themeValues = _ref.themeValues,
-      slug = _ref.slug;
-  var navigate = reactRouterDom.useNavigate();
-  return /*#__PURE__*/React__default.createElement(Box, {
-    background: "#FEFEFE" // --grays-cool-gray-00
-    ,
-    border: "1px solid #C4CEF4;" // --primary-color-primary-30
-    ,
-    padding: 0,
-    borderRadius: "8px",
-    dataQa: "link-card-".concat(workflowDescription),
-    hoverStyles: "\n        border-radius: 8px;\n        cursor: pointer;\n        border: 1px solid ".concat(ROYAL_BLUE_VIVID, ";\n        background: var(--primary-color-primary-10, #EBEFFB);\n        /* Primitives/New Shadow/3-Pressed-New */\n        box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);\n        .show-on-hover {color: ").concat(ROYAL_BLUE_VIVID, ";}\n      "),
-    extraStyles: "display: flex; width: 288px;  min-width: 240px;  max-width: 288px;  min-height: 141px;  padding: 16px 24px;  flex-direction: column;  align-items: flex-start;  gap: 40px;  flex-shrink: 0;  align-self: stretch;",
-    onClick: function onClick() {
-      // @TODO replace with something valid like navigate
-      console.log("attempting navigation..."); // window.location.pathname = `/service/${slug}`;
+      path = _ref.path,
+      showLeft = _ref.showLeft,
+      leftContent = _ref.leftContent,
+      showRight = _ref.showRight,
+      rightContent = _ref.rightContent,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {
+    return navigate(path);
+  } : _ref$onClick;
+  return function () {
+    var navigate = reactRouterDom.useNavigate();
+    var activeHoverStyles = "\n    border-radius: 8px;\n    cursor: pointer;\n    border: 1px solid ".concat(themeValues.color, ";\n    background: var(--primary-color-primary-10, #EBEFFB);\n    /* Primitives/New Shadow/3-Pressed-New */\n    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);\n    .show-on-hover {color: ").concat(themeValues.color, ";}\n  ");
+    return /*#__PURE__*/React__default.createElement(Box, {
+      background: "#FEFEFE" // --grays-cool-gray-00
+      ,
+      border: "1px solid #C4CEF4;" // --primary-color-primary-30
+      ,
+      borderRadius: "8px",
+      dataQa: "link-card-".concat(title),
+      width: "100%",
+      maxWidth: "288px",
+      minWidth: "240px",
+      minHeight: "141px",
+      padding: "16px 24px",
+      extraStyles: " display: flex; flex-direction: column; align-items: flex-start; gap: 40px; flex-shrink: 0; align-self: stretch;",
+      hoverStyles: activeHoverStyles,
+      activeStyles: activeHoverStyles,
+      onClick: onClick
+    }, /*#__PURE__*/React__default.createElement(Stack, {
+      childGap: 0,
+      bottomItem: 3,
+      fullHeight: true
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      padding: "1rem 1rem 0 1rem"
+    }, /*#__PURE__*/React__default.createElement(Heading$1, {
+      variant: "h6",
+      weight: FONT_WEIGHT_SEMIBOLD,
+      color: themeValues.color,
+      margin: 0,
+      extraStyles: "display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
+    }, title)), /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0 1rem 40px"
+      /* minHeight={"4.25rem"}*/
 
-      navigate("/service/".concat(slug));
-    }
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: 0,
-    bottomItem: 3,
-    fullHeight: true
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1rem 1rem 0 1rem"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
-    weight: FONT_WEIGHT_SEMIBOLD,
-    color: themeValues.color,
-    margin: 0,
-    extraStyles: "display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
-  }, workflowName)), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 1rem 0",
-    minHeight: "4.25rem"
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "pS",
-    color: themeValues.color,
-    extraStyles: "overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
-  }, workflowDescription)), /*#__PURE__*/React__default.createElement(Box, {
-    background: "transparent",
-    borderWidthOverride: "0 0 0 0",
-    padding: "0 1rem 1rem 1rem"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    justify: "space-between"
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    background: "transparent",
-    borderWidthOverride: "0 0 0 0",
-    padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Badge$1, {
-    label: "Autopay Available",
-    Icon: AutopayIcon
-  })), /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    childGap: "6px"
-  }, workflowActionName === "Link an account" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    color: themeValues.color,
-    extraStyles: "text-align: right; color: transparent;",
-    className: "show-on-hover"
-  }, "Find"), /*#__PURE__*/React__default.createElement(PlusCircleIcon, {
-    color: themeValues.color
-  })), workflowActionName === "Pay now" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
-    color: themeValues.color,
-    extraStyles: "text-align: right; color: transparent;",
-    className: "show-on-hover"
-  }, "Pay"), /*#__PURE__*/React__default.createElement(ArrowRightIcon, {
-    color: themeValues.color
-  })))))));
+    }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+      variant: "pS",
+      color: themeValues.color,
+      extraStyles: "overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
+    }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
+      background: "transparent",
+      borderWidthOverride: "0 0 0 0",
+      padding: "0 1rem 1rem 1rem"
+    }, /*#__PURE__*/React__default.createElement(Stack, {
+      direction: "row",
+      justify: "space-between"
+    }, /*#__PURE__*/React__default.createElement(Stack, {
+      direction: "row",
+      childGap: "6px"
+    }, showLeft && leftContent, showRight && rightContent)))));
+  }();
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");