@royaloperahouse/chord 0.7.26 → 0.7.27

package/dist/chord.esm.js

@@ -2114,7 +2114,7 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templat
   var color = _ref.color;
   return color;
 });
-var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
+var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _excluded$3 = ["children", "color"];
 
@@ -2123,7 +2123,7 @@ var Button$1 = function Button(_ref) {
       color = _ref.color,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var truncatedString = children.substring(0, 30);
+  var truncatedString = children.substring(0, 100);
   return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
     color: color
   }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
@@ -4990,10 +4990,16 @@ var Cards = function Cards(_ref) {
 
 var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
 var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
-var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), devices.mobileAndTablet);
+var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
+  var hideBottomBorder = _ref.hideBottomBorder;
+  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, function (_ref2) {
+  var hideTopBorder = _ref2.hideTopBorder;
+  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, devices.mobileAndTablet);
 var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  & > div {\n    margin-bottom: 2px;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  div {\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
+var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
   return address.split(',').map(function (chunk) {
@@ -5009,30 +5015,45 @@ var ContactCard = function ContactCard(_ref) {
       email = _ref.email,
       phone = _ref.phone,
       website = _ref.website,
-      address = _ref.address;
+      address = _ref.address,
+      _ref$hideBottomBorder = _ref.hideBottomBorder,
+      hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
+      _ref$hideTopBorder = _ref.hideTopBorder,
+      hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
   var hasDetails = email || phone || website;
+  var addressString = address == null ? void 0 : address.substring(0, 110);
+  var descriptionText = description == null ? void 0 : description.substring(0, 110);
   return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 8,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
+    "data-testid": "contact-card-wrapper",
+    hideBottomBorder: hideBottomBorder,
+    hideTopBorder: hideTopBorder
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, name), description && /*#__PURE__*/React__default.createElement(Subtitle, {
+  }, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
     level: 2
-  }, description), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
+  }, descriptionText), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
     "data-testid": "contact-card-details-block"
-  }, email && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, email), phone && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, phone), website && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, website)), address && /*#__PURE__*/React__default.createElement("div", {
+  }, email && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "mailto:" + email
+  }, email), phone && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "tel:" + phone
+  }, phone), website && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: website,
+    target: "_blank",
+    rel: "noreferrer"
+  }, website)), addressString && /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "contact-card-address-block"
   }, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, address)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(address)))))));
+  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
 var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a;