@royaloperahouse/chord 0.7.44 → 0.7.45

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.45]
+- PromoWithTags: extend the component to handle extra content
+
 ## [0.7.44]
 - PromoWithTags, PromoWithTitle: change grid for text content on tablet view
 

package/dist/chord.cjs.development.js

@@ -5446,7 +5446,7 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$O, _templateObject2$w, _templateObject3$o, _templateObject4$i, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2;
+var _templateObject$O, _templateObject2$w, _templateObject3$o, _templateObject4$i, _templateObject5$e, _templateObject6$b, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 10;
 var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$O || (_templateObject$O = /*#__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) {
@@ -5456,34 +5456,37 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$O ||
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
 }, devices.mobile);
-var PromoWithTagsImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
+var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      display: ", ";\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
-}, devices.mobile);
+}, devices.mobile, function (_ref5) {
+  var hideSection = _ref5.hideSection;
+  return hideSection ? 'none' : 'block';
+});
 var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
 var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.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 PromoWithTagsText = /*#__PURE__*/styled__default.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  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\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) {
+var PromoWithTagsText = /*#__PURE__*/styled__default.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  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\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 (_ref6) {
   var theme = _ref6.theme;
-  return theme.colors.darkgrey;
+  return theme.colors.black;
 }, function (_ref7) {
   var theme = _ref7.theme;
+  return theme.colors.darkgrey;
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
-  var hasTextLinks = _ref8.hasTextLinks;
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref9) {
+  var hasTextLinks = _ref9.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
-}, function (_ref9) {
-  var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
-      primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
-      _ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
+}, function (_ref10) {
+  var _ref10$primaryButtonT = _ref10.primaryButtonTextLength,
+      primaryButtonTextLength = _ref10$primaryButtonT === void 0 ? 0 : _ref10$primaryButtonT,
+      _ref10$tertiaryButton = _ref10.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref10$tertiaryButton === void 0 ? 0 : _ref10$tertiaryButton;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5491,11 +5494,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref10) {
-  var _ref10$primaryButtonT = _ref10.primaryButtonTextLength,
-      primaryButtonTextLength = _ref10$primaryButtonT === void 0 ? 0 : _ref10$primaryButtonT,
-      _ref10$tertiaryButton = _ref10.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref10$tertiaryButton === void 0 ? 0 : _ref10$tertiaryButton;
+}, devices.mobile, devices.tablet, function (_ref11) {
+  var _ref11$primaryButtonT = _ref11.primaryButtonTextLength,
+      primaryButtonTextLength = _ref11$primaryButtonT === void 0 ? 0 : _ref11$primaryButtonT,
+      _ref11$tertiaryButton = _ref11.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref11$tertiaryButton === void 0 ? 0 : _ref11$tertiaryButton;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -5504,13 +5507,17 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref11) {
-  var marginBottom = _ref11.marginBottom;
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref12) {
+  var marginBottom = _ref12.marginBottom;
   return marginBottom + "px";
 });
 var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
 var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
 var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
+var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
+var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
+var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
 var _excluded$i = ["text"],
     _excluded2$2 = ["text"],
@@ -5532,7 +5539,12 @@ var PromoWithTags = function PromoWithTags(_ref) {
       aboveTitleTags = _ref.aboveTitleTags,
       belowTitleTags = _ref.belowTitleTags,
       middleText = _ref.middleText,
-      bottomText = _ref.bottomText;
+      bottomText = _ref.bottomText,
+      image = _ref.image;
+
+  var _useState = React.useState(false),
+      showExtraContent = _useState[0],
+      setShowExtraContent = _useState[1];
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -5540,6 +5552,19 @@ var PromoWithTags = function PromoWithTags(_ref) {
 
   var imageToLeft = imagePosition === 'left';
   var titleLevel = titleSize === 'large' ? 2 : 3;
+  var isExtraContentPresent = !!children;
+  var anchorLink = title.replace(' ', '-').toLocaleLowerCase() + "-content";
+
+  var handleExtraContent = function handleExtraContent(e) {
+    e.preventDefault();
+    setShowExtraContent(true);
+
+    if (window.matchMedia && window.matchMedia(devices.mobile).matches) {
+      window.location.href = "#" + anchorLink;
+    }
+  };
+
+  var defaultOnClickHandler = isExtraContentPresent ? handleExtraContent : undefined;
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
@@ -5564,15 +5589,31 @@ var PromoWithTags = function PromoWithTags(_ref) {
     return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, null, /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, restTextLink), textLinkText));
   }) : null;
   return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
+    id: anchorLink,
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(PromoWithTagsImageWrapper, {
-    "data-testid": "image-wrapper",
+  }, /*#__PURE__*/React__default.createElement(PromoWithTagsExtraContentWrapper, {
+    "data-testid": "extra-content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  }, showExtraContent && /*#__PURE__*/React__default.createElement(MobileTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
+    level: titleLevel
+  }, title)), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
-  }, children)), /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
+  }, isExtraContentPresent && showExtraContent ? /*#__PURE__*/React__default.createElement(ExtraContentWrapper, null, children, /*#__PURE__*/React__default.createElement(IconWrapper$2, {
+    "data-testid": "extra-content-close-button",
+    onClick: function onClick() {
+      return setShowExtraContent(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Close",
+    color: exports.Colors.Black
+  }))) : image && /*#__PURE__*/React__default.createElement("img", {
+    "data-testid": "promo-with-tags-image",
+    src: image.src,
+    alt: image.alt
+  }))), /*#__PURE__*/React__default.createElement(PromoWithTagsContentWrapper, {
     "data-testid": "content-wrapper",
-    imageToLeft: imageToLeft
+    imageToLeft: imageToLeft,
+    hideSection: showExtraContent
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 16
   }, /*#__PURE__*/React__default.createElement(TypeTags, {
@@ -5600,7 +5641,9 @@ var PromoWithTags = function PromoWithTags(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))));
+  }, primaryButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, !showExtraContent && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
+    onClick: defaultOnClickHandler
+  }, restPrimaryButton), primaryButtonTextTruncate)), tertiaryButton && /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate))));
 };
 
 var _templateObject$P, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$f, _templateObject6$c, _templateObject7$8;