@thecb/components 11.2.0 → 11.2.1-beta.0

package/dist/index.cjs.js

@@ -16170,7 +16170,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
     x: "-0.0864258",
     width: "14",
     height: "14",
-    fill: linkColor
+    fill: "none"
   })));
 };
 
@@ -51279,6 +51279,116 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
 };
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$$);
 
+var Container$1 = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Container",
+  componentId: "sc-1v62a1n-0"
+})(["display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;"]);
+var Title$3 = styled__default(Heading$1).withConfig({
+  displayName: "ContactCardstyled__Title",
+  componentId: "sc-1v62a1n-1"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;background-color:transparent;font-weight:", ";"], FONT_WEIGHT_SEMIBOLD);
+var Content = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Content",
+  componentId: "sc-1v62a1n-2"
+})(["padding:0;font-size:", ";line-height:1.313rem;overflow-wrap:normal;letter-spacing:0.14px;"], FONT_SIZE.SM);
+var Footer$1 = styled__default(Stack).withConfig({
+  displayName: "ContactCardstyled__Footer",
+  componentId: "sc-1v62a1n-3"
+})(["width:100%;"]);
+var Divider = styled__default(Box).withConfig({
+  displayName: "ContactCardstyled__Divider",
+  componentId: "sc-1v62a1n-4"
+})(["padding:0;height:1px;width:100%;"]);
+
+var ContactCard = function ContactCard(_ref) {
+  var title = _ref.title,
+    _ref$secondTitle = _ref.secondTitle,
+    secondTitle = _ref$secondTitle === void 0 ? "Helpful Links" : _ref$secondTitle,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    _ref$links = _ref.links,
+    links = _ref$links === void 0 ? [] : _ref$links,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+    _ref$titleVariant = _ref.titleVariant,
+    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Contact Information" : _ref$ariaLabel,
+    _ref$linkVariant = _ref.linkVariant,
+    linkVariant = _ref$linkVariant === void 0 ? "primary" : _ref$linkVariant;
+  var themeContext = React.useContext(styled.ThemeContext);
+  var isMobile = themeContext.isMobile;
+  var linkFallbackValues = {
+    externalLinkColor: ROYAL_BLUE_VIVID
+  };
+  var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
+  return /*#__PURE__*/React__default.createElement(Container$1, {
+    borderRadius: "8px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
+    dataQa: createIdFromString(title, "contact-card"),
+    maxWidth: isMobile ? "100%" : "208px",
+    minWidth: isMobile ? "240px" : "208px",
+    minHeight: "141px",
+    padding: "1.5rem",
+    extraStyles: extraStyles,
+    role: "complementary",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "8px",
+    bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: 0,
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Title$3, {
+    variant: titleVariant,
+    margin: 0,
+    fontSize: FONT_SIZE.MD
+  }, title)), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Content, null, content))), links.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SolidDivider$1, {
+    "aria-hidden": true
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "8px",
+    bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Title$3, {
+    variant: titleVariant,
+    margin: 0,
+    fontSize: FONT_SIZE.MD
+  }, secondTitle), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "4px",
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
+    fullHeight: true
+  }, links.map(function (link) {
+    var linkID = createIdFromString(link.text, "contact-card-link");
+    return /*#__PURE__*/React__default.createElement(ExternalLink, {
+      key: linkID,
+      dataQa: linkID,
+      href: link.link,
+      newTab: true,
+      extraStyles: "\n                      flex-direction: row;\n                      align-items: center;\n                      align-content: flex-start;\n                      justify-content: space-between;\n                    ",
+      size: FONT_SIZE.SM,
+      lineHeight: "1.313rem"
+    }, link.text, /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
+      linkColor: linkThemeValues.externalLinkColor,
+      text: link.text
+    }));
+  })))));
+};
+
 var pageBackground = "#FBFCFD";
 var fallbackValues$10 = {
   pageBackground: pageBackground
@@ -51663,6 +51773,7 @@ exports.ChevronIcon = ChevronIcon$1;
 exports.CloseIcon = CloseIcon;
 exports.Cluster = Cluster;
 exports.CollapsibleSection = CollapsibleSection$1;
+exports.ContactCard = ContactCard;
 exports.Copyable = Copyable;
 exports.CountryDropdown = CountryDropdown;
 exports.Cover = Cover;