@royaloperahouse/chord 2.9.1 → 2.10.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [2.10.0]
+- Upsell Card, Upsell Cards, Upsell section:
+- Add secondary CTA
+- Update device styling
+
 ## [2.9.1]
 - AnchorBar and SignUpForm accessibility bug fixes
 

package/dist/chord.cjs.development.js

@@ -2771,10 +2771,12 @@ var PrimaryButton = function PrimaryButton(_ref) {
 };
 
 var _templateObject$5;
-var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n  border-color: ", ";\n"])), function (_ref) {
+var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n\n  ", "\n"])), function (_ref) {
   var color = _ref.color,
       theme = _ref.theme;
-  return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
+  var themeColor = (theme == null ? void 0 : theme.colors) && color && theme.colors[color];
+  if (!themeColor) themeColor = color ? "var(--base-color-" + color + ")" : theme.colors.primary;
+  return "\n      border-color: " + themeColor + ";\n      color: " + themeColor + ";\n    ";
 });
 
 var _excluded$2 = ["children"];
@@ -2783,7 +2785,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
   var children = _ref.children,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(SecondaryButtonWrapper, Object.assign({
     color: exports.Colors.Primary
   }, props), children);
 };
@@ -7293,7 +7295,13 @@ var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templa
   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$1 = /*#__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$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
@@ -7340,8 +7348,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;
@@ -7362,12 +7375,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: "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$L;
@@ -7375,8 +7393,9 @@ var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$L || (_template
 
 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) {
+  return /*#__PURE__*/React__default.createElement(Wrapper$3, null, upsellCards == null ? void 0 : upsellCards.map(function (card, index) {
     return /*#__PURE__*/React__default.createElement(UpsellCard, {
+      key: "card-" + index,
       title: card.title,
       subTitle: card.subTitle,
       price: card.price,
@@ -7384,7 +7403,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
     });
   }));
 };
@@ -9235,7 +9257,7 @@ var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$d ||
 var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__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(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\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(_templateObject10$5 || (_templateObject10$5 = /*#__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(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__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 PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
@@ -9417,7 +9439,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: firstButtonText.length,
     tertiaryButtonTextLength: secondButtonText.length
-  }, firstButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$2, null, disableCTA ? /*#__PURE__*/React__default.createElement(FirstButtonComponent, {
+  }, firstButton && /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, null, disableCTA ? /*#__PURE__*/React__default.createElement(FirstButtonComponent, {
     bgColor: exports.Colors.MidGrey,
     onClick: function onClick() {
       return null;
@@ -11756,7 +11778,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, {