@royaloperahouse/harmonic 0.7.1-g → 0.7.1-h

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [TBD]
+- Upsell Card, Upsell Cards, Upsell section:
+- Add secondary CTA
+- Update device styling
+
 ## [0.2.3]
 - Restyle PromoWithTitle component
 

package/dist/components/atoms/Buttons/Secondary/utils.d.ts

@@ -8,7 +8,7 @@ export declare const COLORS: {
     readonly hover: "var(--button-secondary-hover-color)";
     readonly pressed: "var(--button-secondary-pressed-color)";
 };
-export declare const getTextColor: ({ disabled, textColor }: SecondaryButtonProps) => string;
-export declare const getBorderColor: ({ disabled, borderColor }: SecondaryButtonProps) => string;
-export declare const getHoveredColor: ({ disabled, hoveredColor }: SecondaryButtonProps) => string;
-export declare const getPressedColor: ({ disabled, pressedColor }: SecondaryButtonProps) => string;
+export declare const getTextColor: ({ disabled, textColor, theme }: SecondaryButtonProps) => string;
+export declare const getBorderColor: ({ disabled, borderColor, theme }: SecondaryButtonProps) => string;
+export declare const getHoveredColor: ({ disabled, hoveredColor, theme }: SecondaryButtonProps) => string;
+export declare const getPressedColor: ({ disabled, pressedColor, theme }: SecondaryButtonProps) => string;

package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts

@@ -7,7 +7,7 @@ interface ContentSummaryProps {
 interface Clickable {
     clickable?: boolean;
 }
-export declare const BodyTextRelative: import("styled-components").StyledComponent<({ children, size, color, className, bold, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyTextRelative: import("styled-components").StyledComponent<({ children, size, color, className, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
 export declare const ContentSummaryWrapper: import("styled-components").StyledComponent<"article", any, Clickable, never>;
 export declare const ContentSummaryImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentSummaryTextWrapper: import("styled-components").StyledComponent<"div", any, ContentSummaryProps, never>;

package/dist/components/molecules/SearchBar/SearchBar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISearchBarProps } from '../../../types/navigation';
-declare const SearchBar: ({ onClick, onClose, className, inputRef }: ISearchBarProps) => React.JSX.Element;
+declare const SearchBar: ({ onClick, onClose, className, inputRef, trapFocus }: ISearchBarProps) => React.JSX.Element;
 export default SearchBar;

package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts

@@ -7,7 +7,9 @@ declare type WithColor = {
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PromoLabel: import("styled-components").StyledComponent<"div", any, WithColor, never>;
-export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {
+    stackCtasEarly: boolean;
+}, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OfferTextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PriceRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.js

@@ -2829,48 +2829,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;
 };
 
@@ -5765,8 +5787,12 @@ var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_te
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.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;
+  }
   React.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"])';
@@ -5799,7 +5825,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 = React.useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
@@ -5809,7 +5837,7 @@ var SearchBar = function SearchBar(_ref) {
   var internalRef = React.useRef(null);
   var finalInputRef = inputRef != null ? inputRef : internalRef;
   var containerRef = React.useRef(null);
-  useFocusTrap(containerRef, onClose);
+  useFocusTrap(containerRef, onClose, trapFocus);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5889,7 +5917,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"
   })));
@@ -6933,7 +6961,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,
@@ -6946,7 +6974,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'
   })
@@ -6957,7 +6985,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'
   })
@@ -6968,7 +6996,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'
   }),
@@ -7056,17 +7084,23 @@ var TextOnly = function TextOnly(_ref) {
 })(exports.ButtonType || (exports.ButtonType = {}));
 
 var _templateObject$J, _templateObject2$x, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$7, _templateObject8$4;
-var Wrapper$2 = /*#__PURE__*/styled__default.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__default.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__default.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__default.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;
 }, exports.Colors.White);
-var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
+var ButtonContainer = /*#__PURE__*/styled__default.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__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
 var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
 var PriceRow = /*#__PURE__*/styled__default.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__default.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__default.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) {
@@ -7109,8 +7143,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 ? exports.ThemeType.Core : _ref$theme;
+    theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme,
+    _ref$secondaryTheme = _ref.secondaryTheme,
+    secondaryTheme = _ref$secondaryTheme === void 0 ? exports.ThemeType.Core : _ref$secondaryTheme;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.slice(0, n) : str;
   };
@@ -7129,13 +7168,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;
@@ -7145,7 +7188,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,
@@ -7153,7 +7196,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
     });
   }));
 };
@@ -7167,7 +7213,8 @@ var UpsellSection = function UpsellSection(_ref) {
     theme = _ref$theme === void 0 ? exports.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, {
@@ -8683,14 +8730,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: exports.AspectRatio['4:3']
   }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
     href: link.href
+  }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: exports.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: exports.AspectRatio['4:3']
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image.src,
     alt: image.alt
   }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {