@royaloperahouse/chord 1.20.0 → 1.20.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.20.2]
+- Card: change cursor to default for cards without buttons
+- HighlightsCarousel: hide button in case there are no text for them
+
+## [1.20.1]
+- Reset the select component's selected value to the first option if options change
+
 ## [1.20.0]
 - Tickbox: Add black-on-white option
 ## [1.19.0]

package/dist/chord.cjs.development.js

@@ -5315,7 +5315,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     }
   })), additionalInfo && /*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 5
-  }, additionalInfo))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText)), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
+  }, additionalInfo))), /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, (firstButton == null ? void 0 : firstButton.text) && /*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText)), (secondButton == null ? void 0 : secondButton.text) && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText))), /*#__PURE__*/React__default.createElement(CarouselWrapper$1, {
     "data-testid": "carousel-wrapper"
   }, hasMultipleImages && /*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
     "data-testid": "rotator-buttons"
@@ -5710,56 +5710,59 @@ var _templateObject$J, _templateObject2$t, _templateObject3$l, _templateObject4$
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
-  var onlyShowButtonsOnHover = _ref.onlyShowButtonsOnHover;
+var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
+  var isCardClickable = _ref.isCardClickable;
+  return isCardClickable ? 'pointer' : 'default';
+}, function (_ref2) {
+  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
   return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
 });
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref2) {
-  var lineColor = _ref2.lineColor,
-      theme = _ref2.theme;
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
+  var lineColor = _ref3.lineColor,
+      theme = _ref3.theme;
   if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
   return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
 }, zIndexes.contentOverlay);
 var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref4) {
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
+}, function (_ref5) {
+  var fullWidth = _ref5.fullWidth;
+  return fullWidth ? '0' : '20px';
 });
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobileAndTablet);
 var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
 var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref5) {
-  var isVisible = _ref5.isVisible;
+var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
+  var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, devices.mobile, function (_ref6) {
-  var isGridCard = _ref6.isGridCard;
+}, devices.mobile, function (_ref7) {
+  var isGridCard = _ref7.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var LabelElements = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref7) {
-  var bgColor = _ref7.bgColor,
-      theme = _ref7.theme;
+var LabelElements = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
+  var bgColor = _ref8.bgColor,
+      theme = _ref8.theme;
   return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
 });
 var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
-var getButtonsOpacity = function getButtonsOpacity(_ref8) {
-  var onlyShowButtonsOnHover = _ref8.onlyShowButtonsOnHover;
+var getButtonsOpacity = function getButtonsOpacity(_ref9) {
+  var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
 
-var getButtonsMinHeight = function getButtonsMinHeight(_ref9) {
-  var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
+  var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref10) {
-  var size = _ref10.size,
-      primaryButtonTextLength = _ref10.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref10.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
+  var size = _ref11.size,
+      primaryButtonTextLength = _ref11.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5767,15 +5770,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$1 ||
   }
 
   return '';
-}, devices.mobile, getButtonsMinHeight, function (_ref11) {
-  var fullWidth = _ref11.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref12) {
+}, devices.mobile, getButtonsMinHeight, function (_ref12) {
   var fullWidth = _ref12.fullWidth;
   return fullWidth ? '0' : '20px';
-}, devices.tablet, getButtonsMinHeight, function (_ref13) {
-  var primaryButtonTextLength = _ref13.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
+}, function (_ref13) {
+  var fullWidth = _ref13.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, devices.tablet, getButtonsMinHeight, function (_ref14) {
+  var primaryButtonTextLength = _ref14.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref14.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -5872,7 +5875,15 @@ var Card = function Card(_ref) {
       return onlyShowButtonsOnHover ? hoverHandler(false) : undefined;
     },
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
-    "data-testid": "cardcontainer"
+    "data-testid": "cardcontainer",
+    isCardClickable: !!firstButton
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: firstButton == null ? void 0 : firstButton.href,
+    target: firstButton == null ? void 0 : firstButton.target,
+    className: "targetLink",
+    style: {
+      flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
+    }
   }, /*#__PURE__*/React__default.createElement(LabelContainer, {
     isGridCard: isGridCard,
     isVisible: !!labelParams
@@ -5884,14 +5895,7 @@ var Card = function Card(_ref) {
     iconName: labelParams.iconName,
     direction: labelParams.iconDirection,
     color: (_labelParams$color = labelParams.color) != null ? _labelParams$color : exports.Colors.White
-  })))), ' ', /*#__PURE__*/React__default.createElement("a", {
-    href: firstButton == null ? void 0 : firstButton.href,
-    target: firstButton == null ? void 0 : firstButton.target,
-    className: "targetLink",
-    style: {
-      flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
-    }
-  }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
+  })))), ' ', hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     lineColor: hoverLineColor,
     "data-testid": "hovercontainer"
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
@@ -7747,6 +7751,14 @@ function Select(_ref3) {
       document.removeEventListener('click', closeSelectOnBlur, false);
     };
   }, []);
+  React.useEffect(function () {
+    if (options.length === 0) {
+      setSelectedValue(null);
+      return;
+    }
+
+    setSelectedValue(options[0]);
+  }, [options]);
   return /*#__PURE__*/React__default.createElement(Wrapper$3, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",