@royaloperahouse/chord 2.9.0-d-development → 2.9.1-b-development

package/CHANGELOG.md

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

package/dist/chord.cjs.development.js

@@ -7362,7 +7362,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"])));
@@ -7409,6 +7415,9 @@ 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;
 
@@ -7431,12 +7440,15 @@ 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 && /*#__PURE__*/React__default.createElement(ButtonContainer, {
+    stackCtasEarly: stackCtasEarly
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)), secondaryLink && /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT)))));
 };
 
 var _templateObject$L;
@@ -7444,8 +7456,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,
@@ -7453,6 +7466,8 @@ var UpsellCards = function UpsellCards(_ref) {
       flag: card.flag,
       offerTexts: card.offerTexts,
       link: card.link,
+      secondaryLink: card.secondaryLink,
+      stackCtasEarly: true,
       theme: card.theme
     });
   }));