@royaloperahouse/harmonic 0.8.0 → 0.9.1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [0.9.0]
+- 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/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;
 };
 
@@ -6934,7 +6956,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,
@@ -6947,7 +6969,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'
   })
@@ -6958,7 +6980,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'
   })
@@ -6969,7 +6991,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'
   }),
@@ -7057,17 +7079,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) {
@@ -7110,8 +7138,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;
   };
@@ -7130,13 +7163,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;
@@ -7146,7 +7183,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,
@@ -7154,7 +7191,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
     });
   }));
 };
@@ -7168,7 +7208,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, {
@@ -8774,14 +8815,13 @@ var _excluded$k = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
-    defaultSelectedIndex = _ref.defaultSelectedIndex;
-  var _useState = React.useState(defaultSelectedIndex != null ? defaultSelectedIndex : 0),
-    selectedIndex = _useState[0],
-    setSelectedIndex = _useState[1];
-  var handleClick = function handleClick(index, onClick) {
-    setSelectedIndex(index);
+    _ref$selectedIndex = _ref.selectedIndex,
+    selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
+    onSelect = _ref.onSelect;
+  var handleClick = React__default.useCallback(function (index, onClick) {
+    if (onSelect) onSelect(index);
     if (onClick) onClick();
-  };
+  }, [onSelect]);
   return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
     className: className
   }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
@@ -8798,7 +8838,8 @@ var HotFilters = function HotFilters(_ref) {
       backgroundColor: isSelected ? 'base-black' : 'base-white',
       textColor: isSelected ? 'base-white' : 'base-black',
       hoveredColor: "base-black",
-      pressedColor: "black-pressed"
+      pressedColor: "black-pressed",
+      "aria-pressed": isSelected
     }, rest), text);
   })));
 };