@royaloperahouse/chord 1.4.0 → 1.6.0

package/dist/chord.esm.js

@@ -3162,14 +3162,16 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onClick: onClickLeftHandler,
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
-    "data-testid": "iconprev"
+    "data-testid": "iconprev",
+    className: "carousel-icon-wrapper-left"
   }, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconprevnoavailable"
   }, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
     onClick: onClickRightHandler,
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
-    "data-testid": "iconnext"
+    "data-testid": "iconnext",
+    className: "carousel-icon-wrapper-right"
   }, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconnextnoavailable"
   }, renderNextIcon()));
@@ -4050,7 +4052,7 @@ var Footer = function Footer(_ref) {
 };
 
 var _templateObject$x, _templateObject2$i, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4;
-var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
+var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
 var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
 var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var TabsList = /*#__PURE__*/styled.ul(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: 32px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref) {
@@ -4181,7 +4183,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
     setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
   };
 
-  return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+  return /*#__PURE__*/React__default.createElement(AnchorTabbarWrapper, null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: tabsColumnStart,
     columnSpanDesktop: tabsColumnSpan,
     columnStartDevice: 2,
@@ -5492,13 +5494,22 @@ var Information = function Information(_ref) {
 };
 
 var _templateObject$L, _templateObject2$v, _templateObject3$m, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$5, _templateObject8$5;
-var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
+}, function (_ref2) {
+  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
 var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
+var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
+  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
+}, devices.mobile);
+var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), function (_ref4) {
+  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
+}, devices.mobile);
 var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
 var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
@@ -5519,12 +5530,17 @@ var PageHeading = function PageHeading(_ref) {
       restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
-  var truncatedTitle = title.substring(0, 40);
+  var truncatedTitle = title && title.substring(0, 40);
+  var isTitleUnAvailable = !title;
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
-    "data-testid": "page-heading-wrapper"
+    "data-testid": "page-heading-wrapper",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
   }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
-    "data-testid": "page-heading-title"
-  }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, null, children) : null, /*#__PURE__*/React__default.createElement(Header, {
+    "data-testid": "page-heading-title",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
     level: 2
   }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"