@royaloperahouse/harmonic 0.7.1-g → 0.7.1-h

package/dist/harmonic.esm.js

@@ -2852,48 +2852,70 @@ var COLORS$1 = {
   hover: 'var(--button-secondary-hover-color)',
   pressed: 'var(--button-secondary-pressed-color)'
 };
+var isObjectWithKey = function isObjectWithKey(object, key) {
+  return typeof object === 'object' && object !== null && key in object;
+};
+var hasSecondaryButtonColor = function hasSecondaryButtonColor(theme) {
+  return isObjectWithKey(theme, 'colors') && isObjectWithKey(theme.colors, 'secondaryButton') && typeof theme.colors.secondaryButton === 'string';
+};
 var getTextColor$1 = function getTextColor(_ref) {
   var disabled = _ref.disabled,
-    textColor = _ref.textColor;
+    textColor = _ref.textColor,
+    theme = _ref.theme;
   if (disabled) {
     return COLORS$1.darkGrey;
   }
   if (textColor) {
     return "var(--color-" + textColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1["default"];
 };
 var getBorderColor = function getBorderColor(_ref2) {
   var disabled = _ref2.disabled,
-    borderColor = _ref2.borderColor;
+    borderColor = _ref2.borderColor,
+    theme = _ref2.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (borderColor) {
     return "var(--color-" + borderColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.border;
 };
 var getHoveredColor$1 = function getHoveredColor(_ref3) {
   var disabled = _ref3.disabled,
-    hoveredColor = _ref3.hoveredColor;
+    hoveredColor = _ref3.hoveredColor,
+    theme = _ref3.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (hoveredColor) {
     return "var(--color-" + hoveredColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.hover;
 };
 var getPressedColor$1 = function getPressedColor(_ref4) {
   var disabled = _ref4.disabled,
-    pressedColor = _ref4.pressedColor;
+    pressedColor = _ref4.pressedColor,
+    theme = _ref4.theme;
   if (disabled) {
     return COLORS$1.disabled;
   }
   if (pressedColor) {
     return "var(--color-" + pressedColor + ")";
   }
+  if (hasSecondaryButtonColor(theme)) {
+    return theme.colors.secondaryButton;
+  }
   return COLORS$1.pressed;
 };
 
@@ -5790,8 +5812,12 @@ var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObj
 var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-function useFocusTrap(containerRef, onEscape) {
+function useFocusTrap(containerRef, onEscape, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
   useEffect(function () {
+    if (!enabled) return undefined;
     var container = containerRef.current;
     if (!container) return undefined;
     var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
@@ -5824,7 +5850,9 @@ var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
     className = _ref.className,
-    inputRef = _ref.inputRef;
+    inputRef = _ref.inputRef,
+    _ref$trapFocus = _ref.trapFocus,
+    trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus;
   var _useState = useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
@@ -5834,7 +5862,7 @@ var SearchBar = function SearchBar(_ref) {
   var internalRef = useRef(null);
   var finalInputRef = inputRef != null ? inputRef : internalRef;
   var containerRef = useRef(null);
-  useFocusTrap(containerRef, onClose);
+  useFocusTrap(containerRef, onClose, trapFocus);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5914,7 +5942,7 @@ var SearchBar = function SearchBar(_ref) {
     onClick: onCloseHandler,
     onKeyDown: onKeyboardCloseHandler,
     "data-testid": "close-icon",
-    "aria-label": "Close search bar"
+    "aria-label": "Clear the search bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   })));
@@ -6958,7 +6986,7 @@ var core = /*#__PURE__*/_extends({}, common, {
   colors: /*#__PURE__*/_extends({}, commonColors, colors, {
     primary: colors.core,
     primaryButton: colors.core,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.core,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent',
     primaryButtonReverseBg: colors.cinema,
@@ -6971,7 +6999,7 @@ var stream = /*#__PURE__*/_extends({}, common, {
     primaryButton: colors.stream,
     primaryButtonReverseBg: colors.cinema,
     primaryButtonReverse: commonColors.white,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.stream,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   })
@@ -6982,7 +7010,7 @@ var cinema = /*#__PURE__*/_extends({}, common, {
     primaryButton: commonColors.white,
     primaryButtonReverseBg: commonColors.white,
     primaryButtonReverse: colors.cinema,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.cinema,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   })
@@ -6993,7 +7021,7 @@ var schools = /*#__PURE__*/_extends({}, common, {
     primaryButton: colors.core,
     primaryButtonReverseBg: colors.cinema,
     primaryButtonReverse: commonColors.white,
-    secondaryButton: commonColors.white,
+    secondaryButton: colors.core,
     tertiaryButton: 'transparent',
     auxiliaryButton: 'transparent'
   }),
@@ -7083,17 +7111,23 @@ var ButtonType;
 })(ButtonType || (ButtonType = {}));
 
 var _templateObject$J, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$7, _templateObject8$4;
-var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-light-grey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
+var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
 var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
 var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n  font-family: var(--font-family-header);\n  font-feature-settings:\n    'tnum' on,\n    'lnum' on,\n    'liga' off,\n    'calt' off;\n  font-size: var(--font-size-overline-2);\n  line-height: 12px;\n  text-align: center;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, Colors.White);
-var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media ", " {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  ", "\n"])), function (_ref2) {
+  var stackCtasEarly = _ref2.stackCtasEarly;
+  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
+}, function (_ref3) {
+  var stackCtasEarly = _ref3.stackCtasEarly;
+  return stackCtasEarly && "\n      @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n        * {\n          width: 100%;\n        }\n      }\n    ";
+});
 var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
 var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
 var PriceRow = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
-var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-dark-grey);\n"])));
+var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
 
 // Set max. character length
 var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -7136,8 +7170,13 @@ var UpsellCard = function UpsellCard(_ref) {
     flag = _ref.flag,
     offerTexts = _ref.offerTexts,
     link = _ref.link,
+    secondaryLink = _ref.secondaryLink,
+    _ref$stackCtasEarly = _ref.stackCtasEarly,
+    stackCtasEarly = _ref$stackCtasEarly === void 0 ? false : _ref$stackCtasEarly,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme,
+    _ref$secondaryTheme = _ref.secondaryTheme,
+    secondaryTheme = _ref$secondaryTheme === void 0 ? ThemeType.Core : _ref$secondaryTheme;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.slice(0, n) : str;
   };
@@ -7156,13 +7195,17 @@ var UpsellCard = function UpsellCard(_ref) {
     level: 4
   }, formatPrice(promoPrice)))) : (/*#__PURE__*/React__default.createElement(PriceRow, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
-  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText) {
+  }, formatPrice(price))))), (reducedOfferTexts == null ? void 0 : reducedOfferTexts.length) && reducedOfferTexts.map(function (offerText, index) {
     return /*#__PURE__*/React__default.createElement(OfferText, {
-      key: offerText.title,
+      key: "offer-" + index,
       title: offerText.title,
       description: offerText.description
     });
-  }), link && (/*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT))))));
+  }), ((link == null ? void 0 : link.text) || (secondaryLink == null ? void 0 : secondaryLink.text)) && (/*#__PURE__*/React__default.createElement(ButtonContainer, {
+    stackCtasEarly: stackCtasEarly
+  }, (link == null ? void 0 : link.text) && /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)), (secondaryLink == null ? void 0 : secondaryLink.text) && (/*#__PURE__*/React__default.createElement(Theme, {
+    theme: secondaryTheme
+  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT))))))));
 };
 
 var _templateObject$K;
@@ -7172,7 +7215,7 @@ var UpsellCards = function UpsellCards(_ref) {
   var upsellCards = _ref.upsellCards;
   return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
     return /*#__PURE__*/React__default.createElement(UpsellCard, {
-      key: "upsell-card-" + index,
+      key: "card-" + index,
       title: card.title,
       subTitle: card.subTitle,
       price: card.price,
@@ -7180,7 +7223,10 @@ var UpsellCards = function UpsellCards(_ref) {
       flag: card.flag,
       offerTexts: card.offerTexts,
       link: card.link,
-      theme: card.theme
+      secondaryLink: card.secondaryLink,
+      stackCtasEarly: true,
+      theme: card.theme,
+      secondaryTheme: card.secondaryTheme
     });
   }));
 };
@@ -7194,7 +7240,8 @@ var UpsellSection = function UpsellSection(_ref) {
     theme = _ref$theme === void 0 ? ThemeType.Core : _ref$theme;
   var themedUpsellCards = upsellCards ? [].concat(upsellCards).map(function (card) {
     return _extends({}, card, {
-      theme: card.theme || theme
+      theme: card.theme || theme,
+      secondaryTheme: card.secondaryTheme || theme
     });
   }) : [];
   return /*#__PURE__*/React__default.createElement(Theme, {
@@ -8710,14 +8757,16 @@ var ContentSummary = function ContentSummary(_ref) {
     "data-roh": "content-summary-item"
   }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
     "data-testid": "image-wrapper"
-  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['4:3']
   }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
     href: link.href
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image.src,
     alt: image.alt
-  }))) : (/*#__PURE__*/React__default.createElement("img", {
+  })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image.src,
     alt: image.alt
   }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {