@royaloperahouse/chord 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [1.2.0]
+- Card: buttons do not change position on mobiles; 
+
 ## [1.1.0]
 - TitleWithCTA: fix cases with a long title
 - Card: add pointer cursor to container

package/dist/chord.cjs.development.js

@@ -4985,10 +4985,15 @@ var getButtonsOpacity = function getButtonsOpacity(_ref4) {
   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 (_ref5) {
-  var size = _ref5.size,
-      primaryButtonTextLength = _ref5.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref5.tertiaryButtonTextLength;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref5) {
+  var onlyShowButtonsOnHover = _ref5.onlyShowButtonsOnHover;
+  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
+};
+
+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    ", ";\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 (_ref6) {
+  var size = _ref6.size,
+      primaryButtonTextLength = _ref6.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref6.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -4996,9 +5001,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref6) {
-  var primaryButtonTextLength = _ref6.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref6.tertiaryButtonTextLength;
+}, devices.mobile, getButtonsMinHeight, function (_ref7) {
+  var fullWidth = _ref7.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, function (_ref8) {
+  var fullWidth = _ref8.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, devices.tablet, getButtonsMinHeight, function (_ref9) {
+  var primaryButtonTextLength = _ref9.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref9.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -5147,7 +5158,8 @@ var Card = function Card(_ref) {
     size: size,
     primaryButtonTextLength: firstButtonText.length,
     tertiaryButtonTextLength: secondButtonText.length,
-    onlyShowButtonsOnHover: onlyShowButtonsOnHover
+    onlyShowButtonsOnHover: onlyShowButtonsOnHover,
+    fullWidth: fullWidth
   }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
 };
 
@@ -5186,7 +5198,8 @@ var Cards = function Cards(_ref) {
       links: card.links,
       tags: card.tags,
       withContinueWatching: card.withContinueWatching,
-      onlyShowButtonsOnHover: card.onlyShowButtonsOnHover
+      onlyShowButtonsOnHover: card.onlyShowButtonsOnHover,
+      fullWidth: card.fullWidth
     }));
   }));
 };