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

package/dist/index.esm.js

@@ -42837,84 +42837,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 = useNavigate();
-  return /*#__PURE__*/React.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 = 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.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.createElement(Stack, {
+      childGap: 0,
+      bottomItem: 3,
+      fullHeight: true
+    }, /*#__PURE__*/React.createElement(Box, {
+      padding: "1rem 1rem 0 1rem"
+    }, /*#__PURE__*/React.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.createElement(Box, {
+      padding: "0 1rem 40px"
+      /* minHeight={"4.25rem"}*/
 
-      navigate("/service/".concat(slug));
-    }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: 0,
-    bottomItem: 3,
-    fullHeight: true
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: "1rem 1rem 0 1rem"
-  }, /*#__PURE__*/React.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.createElement(Box, {
-    padding: "0 1rem 0",
-    minHeight: "4.25rem"
-  }, /*#__PURE__*/React.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.createElement(Box, {
-    background: "transparent",
-    borderWidthOverride: "0 0 0 0",
-    padding: "0 1rem 1rem 1rem"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    justify: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, {
-    background: "transparent",
-    borderWidthOverride: "0 0 0 0",
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(Badge$1, {
-    label: "Autopay Available",
-    Icon: AutopayIcon
-  })), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    childGap: "6px"
-  }, workflowActionName === "Link an account" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pS",
-    color: themeValues.color,
-    extraStyles: "text-align: right; color: transparent;",
-    className: "show-on-hover"
-  }, "Find"), /*#__PURE__*/React.createElement(PlusCircleIcon, {
-    color: themeValues.color
-  })), workflowActionName === "Pay now" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pS",
-    color: themeValues.color,
-    extraStyles: "text-align: right; color: transparent;",
-    className: "show-on-hover"
-  }, "Pay"), /*#__PURE__*/React.createElement(ArrowRightIcon, {
-    color: themeValues.color
-  })))))));
+    }, /*#__PURE__*/React.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.createElement(Box, {
+      background: "transparent",
+      borderWidthOverride: "0 0 0 0",
+      padding: "0 1rem 1rem 1rem"
+    }, /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      justify: "space-between"
+    }, /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      childGap: "6px"
+    }, showLeft && leftContent, showRight && rightContent)))));
+  }();
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");