@royaloperahouse/chord 0.7.24 → 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, {
@@ -2607,7 +2607,7 @@ var SponsorLogo = function SponsorLogo(_ref) {
 };
 
 var _templateObject$d;
-var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
+var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
 var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
@@ -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;
@@ -5240,10 +5261,13 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
 };
 
-var _templateObject$L, _templateObject2$u, _templateObject3$n;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
-var PersonLink = /*#__PURE__*/styled.a(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+var _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet);
+var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
+var PersonLink = /*#__PURE__*/styled.a(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -5258,34 +5282,37 @@ var Person = function Person(_ref) {
   }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
 };
 
+var textSection = function textSection(role) {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+    title: "role",
+    "data-roh": role.dataROH
+  }, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 1
+  }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1,
+    tag: "p"
+  }, role.people.map(function (person, personIndex) {
+    return /*#__PURE__*/React__default.createElement(Person, {
+      key: "" + person.name + personIndex,
+      person: person,
+      withSeparator: role.people.length !== personIndex + 1
+    });
+  })));
+};
+
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
-      key: role.name + "-" + index,
-      columnStartDesktop: index % 4 * 3 + 3,
-      columnSpanDesktop: 3,
-      columnStartDevice: index % 2 * 6 + 2,
-      columnSpanDevice: 6
-    }, /*#__PURE__*/React__default.createElement(RoleWrapper, {
-      title: "role",
-      "data-roh": role.dataROH
-    }, /*#__PURE__*/React__default.createElement(Overline, {
-      level: 1
-    }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
-      level: 1,
-      tag: "p"
-    }, role.people.map(function (person, personIndex) {
-      return /*#__PURE__*/React__default.createElement(Person, {
-        key: "" + person.name + personIndex,
-        person: person,
-        withSeparator: role.people.length !== personIndex + 1
-      });
-    })));
+      key: role.name + "-" + index
+    }, role.people[0].headshot && role.people[0].useHeadshot ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+      src: role.people[0].headshot,
+      alt: role.people[0].name
+    })), textSection(role)) : textSection(role));
   }));
 };
 
-var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$h, _templateObject5$d, _templateObject6$a, _templateObject7$7;
+var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$i, _templateObject5$e, _templateObject6$b, _templateObject7$7;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
@@ -5303,9 +5330,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$o ||
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -5508,7 +5535,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
 };
 
 var _templateObject$Q, _templateObject2$x, _templateObject3$p;
-var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
 var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -5523,7 +5550,7 @@ var Quote = function Quote(_ref) {
     columnSpanDesktop: 8,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(TextWrapper$3, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
   }, /*#__PURE__*/React__default.createElement("div", {
     dangerouslySetInnerHTML: {