@royaloperahouse/chord 0.7.48 → 0.7.49

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## [0.7.49]
+- Extend Card component with secondary CTA
+- Hover effect is optional for CTAs
+
 ## [0.7.48]
 - Add background themes to Information component
 

package/dist/chord.cjs.development.js

@@ -2086,6 +2086,50 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
   ThemeType["Cinema"] = "cinema";
 })(exports.ThemeType || (exports.ThemeType = {}));
 
+(function (CarouselType) {
+  CarouselType["Image"] = "image";
+  CarouselType["SmallCard"] = "SmallCard";
+  CarouselType["LargeCard"] = "LargeCard";
+})(exports.CarouselType || (exports.CarouselType = {}));
+
+(function (AspectRatio) {
+  AspectRatio["1:1"] = "1 / 1";
+  AspectRatio["3:4"] = "3 / 4";
+  AspectRatio["4:3"] = "4 / 3";
+  AspectRatio["16:9"] = "16 / 9";
+})(exports.AspectRatio || (exports.AspectRatio = {}));
+
+var AspectRatioLegacy;
+
+(function (AspectRatioLegacy) {
+  AspectRatioLegacy["1 / 1"] = "100";
+  AspectRatioLegacy["3 / 4"] = "133";
+  AspectRatioLegacy["4 / 3"] = "75";
+  AspectRatioLegacy["16 / 9"] = "56.25";
+})(AspectRatioLegacy || (AspectRatioLegacy = {}));
+
+var AspectRatioWidth;
+
+(function (AspectRatioWidth) {
+  AspectRatioWidth["1 / 1"] = "1";
+  AspectRatioWidth["3 / 4"] = "0.75";
+  AspectRatioWidth["4 / 3"] = "1.33";
+  AspectRatioWidth["16 / 9"] = "1.78";
+})(AspectRatioWidth || (AspectRatioWidth = {}));
+
+(function (TickboxMode) {
+  TickboxMode["Dark"] = "dark";
+  TickboxMode["Light"] = "light";
+})(exports.TickboxMode || (exports.TickboxMode = {}));
+
+var ButtonType;
+
+(function (ButtonType) {
+  ButtonType["Primary"] = "Primary";
+  ButtonType["Secondary"] = "Secondary";
+  ButtonType["Tertiary"] = "Tertiary";
+})(ButtonType || (ButtonType = {}));
+
 var _excluded$1 = ["children"];
 
 var PrimaryButton = function PrimaryButton(_ref) {
@@ -2654,31 +2698,6 @@ var SectionSplitter = function SectionSplitter(_ref) {
   }, /*#__PURE__*/React__default.createElement(Splitter, null)));
 };
 
-(function (AspectRatio) {
-  AspectRatio["1:1"] = "1 / 1";
-  AspectRatio["3:4"] = "3 / 4";
-  AspectRatio["4:3"] = "4 / 3";
-  AspectRatio["16:9"] = "16 / 9";
-})(exports.AspectRatio || (exports.AspectRatio = {}));
-
-var AspectRatioLegacy;
-
-(function (AspectRatioLegacy) {
-  AspectRatioLegacy["1 / 1"] = "100";
-  AspectRatioLegacy["3 / 4"] = "133";
-  AspectRatioLegacy["4 / 3"] = "75";
-  AspectRatioLegacy["16 / 9"] = "56.25";
-})(AspectRatioLegacy || (AspectRatioLegacy = {}));
-
-var AspectRatioWidth;
-
-(function (AspectRatioWidth) {
-  AspectRatioWidth["1 / 1"] = "1";
-  AspectRatioWidth["3 / 4"] = "0.75";
-  AspectRatioWidth["4 / 3"] = "1.33";
-  AspectRatioWidth["16 / 9"] = "1.78";
-})(AspectRatioWidth || (AspectRatioWidth = {}));
-
 var _templateObject$f;
 var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    position: relative;\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
@@ -3008,11 +3027,6 @@ var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_te
   return dark ? 'black' : 'white';
 });
 
-(function (TickboxMode) {
-  TickboxMode["Dark"] = "dark";
-  TickboxMode["Light"] = "light";
-})(exports.TickboxMode || (exports.TickboxMode = {}));
-
 var Tickbox = function Tickbox(_ref) {
   var children = _ref.children,
       _ref$mode = _ref.mode,
@@ -4193,12 +4207,6 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })) : null) : null))));
 };
 
-(function (CarouselType) {
-  CarouselType["Image"] = "image";
-  CarouselType["SmallCard"] = "SmallCard";
-  CarouselType["LargeCard"] = "LargeCard";
-})(exports.CarouselType || (exports.CarouselType = {}));
-
 var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$5;
 var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (_ref) {
   var type = _ref.type,
@@ -4916,10 +4924,16 @@ var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_
 var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__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$4 || (_templateObject7$4 = /*#__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$4 || (_templateObject8$4 = /*#__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 ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
-  var size = _ref3.size,
-      primaryButtonTextLength = _ref3.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
+
+var getButtonsOpacity = function getButtonsOpacity(_ref3) {
+  var onlyShowButtonsOnHover = _ref3.onlyShowButtonsOnHover;
+  return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
+};
+
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref4) {
+  var size = _ref4.size,
+      primaryButtonTextLength = _ref4.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref4.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -4927,9 +4941,9 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref4) {
-  var primaryButtonTextLength = _ref4.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref4.tertiaryButtonTextLength;
+}, devices.mobile, devices.tablet, function (_ref5) {
+  var primaryButtonTextLength = _ref5.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref5.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -4964,8 +4978,11 @@ var Progress = function Progress(_ref) {
 
 var _excluded$c = ["text"],
     _excluded2$1 = ["text"];
+
+var _buttonTypeToButton;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
+var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
 
 var Card = function Card(_ref) {
   var _ref$progress = _ref.progress,
@@ -4986,7 +5003,9 @@ var Card = function Card(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
       _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth;
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$onlyShowButtonsO = _ref.onlyShowButtonsOnHover,
+      onlyShowButtonsOnHover = _ref$onlyShowButtonsO === void 0 ? true : _ref$onlyShowButtonsO;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -4999,35 +5018,35 @@ var Card = function Card(_ref) {
       setHovered = _useState[1];
 
   var truncatedText = truncateHtmlString(text, 185, true);
-  var primaryButton = links == null ? void 0 : links[0];
+  var firstButton = links == null ? void 0 : links[0];
 
-  var _ref2 = primaryButton || {},
+  var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
-      primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
-  var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
-  var tertiaryButton = links == null ? void 0 : links[1];
+  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
+  var secondButton = links == null ? void 0 : links[1];
 
-  var _ref3 = tertiaryButton || {},
+  var _ref3 = secondButton || {},
       _ref3$text = _ref3.text,
-      tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
-
-  var tertiaryButtonTextTruncate = size === 'small' ? truncate(tertiaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(tertiaryButtonText, LENGTH_LARGE_TEXT$1);
+      secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
+      restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
 
-  var hoverHandler = function hoverHandler(value) {
+  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$1) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
+  var hoverHandler = onlyShowButtonsOnHover ? function (value) {
     if (value) {
       node.current.style.opacity = '1';
       node.current.style.transition = 'opacity 0.3s';
-    } else {
-      node.current.style.opacity = '0';
-      node.current.style.transition = 'opacity 0.3s';
+      return;
     }
 
+    node.current.style.opacity = '0';
+    node.current.style.transition = 'opacity 0.3s';
     setHovered(value);
-  };
-
+  } : function () {};
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : Button$1;
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return hoverHandler(true);
@@ -5037,8 +5056,8 @@ var Card = function Card(_ref) {
     },
     "data-testid": "cardcontainer"
   }, ' ', /*#__PURE__*/React__default.createElement("a", {
-    href: primaryButton == null ? void 0 : primaryButton.href,
-    target: primaryButton == null ? void 0 : primaryButton.target,
+    href: firstButton == null ? void 0 : firstButton.href,
+    target: firstButton == null ? void 0 : firstButton.target,
     className: "targetLink"
   }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     "data-testid": "hovercontainer"
@@ -5049,12 +5068,8 @@ var Card = function Card(_ref) {
     alt: imageAltText
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress
-  }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
+  })), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
     fullWidth: fullWidth
-  }, /*#__PURE__*/React__default.createElement("a", {
-    href: primaryButton == null ? void 0 : primaryButton.href,
-    target: primaryButton == null ? void 0 : primaryButton.target,
-    className: "targetLink"
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
   }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
@@ -5065,13 +5080,14 @@ var Card = function Card(_ref) {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  })), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
+  }))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
     "data-testid": "buttonscontainer",
     size: size,
-    primaryButtonTextLength: primaryButtonText.length,
-    tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
+    primaryButtonTextLength: firstButtonText.length,
+    tertiaryButtonTextLength: secondButtonText.length,
+    onlyShowButtonsOnHover: onlyShowButtonsOnHover
+  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
 };
 
 var _templateObject$H, _templateObject2$q;
@@ -5108,7 +5124,8 @@ var Cards = function Cards(_ref) {
       text: card.text,
       links: card.links,
       tags: card.tags,
-      withContinueWatching: card.withContinueWatching
+      withContinueWatching: card.withContinueWatching,
+      onlyShowButtonsOnHover: card.onlyShowButtonsOnHover
     }));
   }));
 };