@royaloperahouse/harmonic 0.2.3-d → 0.2.3-e

package/dist/harmonic.cjs.development.js

@@ -7449,6 +7449,17 @@ var generateDomElementId = function generateDomElementId() {
   return randomPart + "-" + datePart;
 };
 
+var DISABLED_TABBING_TAGS = 'a, button';
+var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
+  if (!element) return;
+  var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
+  focusables.forEach(function (el) {
+    if (shouldDisable) el.setAttribute('tabindex', '-1');
+  });
+};
+var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
+  return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
+};
 var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
   var widthSoFar = 0;
   var visible = [];
@@ -7712,11 +7723,13 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
   return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
     ref: containerRef,
+    className: "swipe",
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd,
     onMouseDown: handleMouseDown,
-    className: "swipe"
+    "aria-roledescription": "carousel",
+    role: "list"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
     translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
@@ -7724,17 +7737,21 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
-    return /*#__PURE__*/React__default.cloneElement(child, {
+    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
+    return /*#__PURE__*/React__default.createElement("div", {
       key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
-      ariaHidden: !isVisible,
       className: SWIPE_SLIDE_CLASS_NAME,
+      "aria-hidden": !isVisible,
+      "aria-roledescription": "slide",
+      role: "listitem",
       ref: function ref(el) {
         childRefs.current[index] = el;
+        disableTabbingInside(el, isClone);
       },
       onFocus: function onFocus() {
         return onSlideFocus(isVisible, index);
       }
-    });
+    }, child);
   })));
 });
 Swipe.displayName = 'Swipe';
@@ -7849,15 +7866,8 @@ var Carousel = function Carousel(_ref) {
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
-    slidesOffsetBefore: slidesOffsetBefore,
-    role: "list",
-    "aria-roledescription": "carousel"
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "carousel-slide-" + index,
-      "aria-roledescription": "slide"
-    }, child);
-  })))));
+    slidesOffsetBefore: slidesOffsetBefore
+  }, children))));
 };
 
 var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
@@ -8333,55 +8343,11 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$2 ||
   return '';
 });
 
-// Function to check if a URL is from the same site
-// NOTE: This function is not SSR compatible
-var isSameSiteUrl = function isSameSiteUrl(url) {
-  var _window;
-  if (url[0] === '/') return true; // URL is relative (e.g. /about)
-  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
-  var currentPageURL = window.location.href || '';
-  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
-  var match = url.match(regexPattern);
-  if (match != null && match[3] && currentPageURL) {
-    var urlDomain = match[3]; // Extract the domain from the third capture group
-    var currentMatch = currentPageURL.match(regexPattern);
-    if (currentMatch) {
-      var currentDomain = currentMatch[3];
-      return urlDomain === currentDomain;
-    }
-  }
-  return false; // URL didn't match the pattern
-};
-// Hook to check if a URL is from the same site - use for SSR
-var useSameSiteUrl = function useSameSiteUrl(url) {
-  var _useState = React.useState(false),
-    hasSameSiteUrl = _useState[0],
-    setSameSiteUrl = _useState[1];
-  React.useEffect(function () {
-    setSameSiteUrl(isSameSiteUrl(url));
-  }, [url]);
-  return hasSameSiteUrl;
-};
-var limitImageUrlDimension = function limitImageUrlDimension(imageUrl, widthLimit) {
-  try {
-    var url = new URL(imageUrl);
-    var widthParam = url.searchParams.get('w') || url.searchParams.get('width');
-    if (widthParam) {
-      return imageUrl.replace(/(w|width)=\d+/, "$1=" + widthLimit);
-    }
-    var separator = url.search.includes('?') ? '&' : '?';
-    return "" + imageUrl + separator + "w=" + widthLimit;
-  } catch (error) {
-    return imageUrl;
-  }
-};
-
 var _excluded$k = ["text"],
   _excluded2$3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$2 = 19;
-var IMAGE_WIDTH_LIMIT = 600;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var Card = function Card(_ref) {
   var _labelParams$color;
@@ -8447,7 +8413,6 @@ var Card = function Card(_ref) {
   };
   var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
   var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
-  var limitedImage = image ? limitImageUrlDimension(image, IMAGE_WIDTH_LIMIT) : image;
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -8487,7 +8452,7 @@ var Card = function Card(_ref) {
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: limitedImage,
+    src: image,
     alt: imageAltText || title
   })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress,
@@ -9239,7 +9204,7 @@ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_t
   var isButtonPresent = _ref6.isButtonPresent;
   return isButtonPresent ? '20px' : '0';
 });
-var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    min-height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
 
 var PageHeadingPromoBadge;
 (function (PageHeadingPromoBadge) {
@@ -9461,6 +9426,36 @@ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_te
   return invert ? theme.colors.white : theme.colors.black;
 });
 
+// Function to check if a URL is from the same site
+// NOTE: This function is not SSR compatible
+var isSameSiteUrl = function isSameSiteUrl(url) {
+  var _window;
+  if (url[0] === '/') return true; // URL is relative (e.g. /about)
+  if (!((_window = window) != null && _window.location)) return false; // window.location is not available (e.g. in SSR)
+  var currentPageURL = window.location.href || '';
+  var regexPattern = /^(https?:\/\/)?(www\d?\.)?([\w.-]+)\.\w+.*$/;
+  var match = url.match(regexPattern);
+  if (match != null && match[3] && currentPageURL) {
+    var urlDomain = match[3]; // Extract the domain from the third capture group
+    var currentMatch = currentPageURL.match(regexPattern);
+    if (currentMatch) {
+      var currentDomain = currentMatch[3];
+      return urlDomain === currentDomain;
+    }
+  }
+  return false; // URL didn't match the pattern
+};
+// Hook to check if a URL is from the same site - use for SSR
+var useSameSiteUrl = function useSameSiteUrl(url) {
+  var _useState = React.useState(false),
+    hasSameSiteUrl = _useState[0],
+    setSameSiteUrl = _useState[1];
+  React.useEffect(function () {
+    setSameSiteUrl(isSameSiteUrl(url));
+  }, [url]);
+  return hasSameSiteUrl;
+};
+
 var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
@@ -10176,13 +10171,13 @@ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObjec
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$t || (_templateObject5$t = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
+var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
+var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  overflow-wrap: break-word;\n  margin-bottom: 16px;\n"])));
+var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: 32px;\n  whiete-space: break-spaces;\n  overflow-wrap: break-word;\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobile);
 var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
     primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
@@ -10328,18 +10323,17 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
+    titleHierarchy = _ref.titleHierarchy,
     subtitle = _ref.subtitle,
     text = _ref.text,
     links = _ref.links,
     children = _ref.children,
     videoSettings = _ref.videoSettings,
-    titleSemanticLevel = _ref.titleSemanticLevel,
     className = _ref.className;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
   var imageToLeft = imagePosition === 'left';
-  var titleLevel = titleSize === 'large' ? 2 : 3;
   var primaryButton = links == null ? void 0 : links[0];
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
@@ -10363,20 +10357,19 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     imageToLeft: imageToLeft,
     className: className,
     "data-testid": "promo-with-title"
-  }, /*#__PURE__*/React__default.createElement(PromoChild
-  // eslint-disable-next-line react/no-children-prop
-  , {
-    // eslint-disable-next-line react/no-children-prop
-    children: children,
+  }, /*#__PURE__*/React__default.createElement(PromoChild, {
     videoSettings: _extends({}, defaultVideoSettings, videoSettings),
     imageToLeft: imageToLeft
-  }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
+  }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: titleLevel,
-    semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
-  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
+    size: titleSize,
+    hierarchy: titleHierarchy
+  }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
+    size: "medium"
+  }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
+    size: "medium",
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -12222,7 +12215,6 @@ var isVideoSlide = function isVideoSlide(slideMedia) {
   return slideMedia.video !== undefined;
 };
 
-var IMAGE_WIDTH_LIMIT$1 = 800;
 var VideoSlide = function VideoSlide(_ref) {
   var index = _ref.index,
     settings = _ref.settings,
@@ -12249,27 +12241,18 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
     currentSlide = _ref2.currentSlide,
     carouselRef = _ref2.carouselRef,
     hasMultipleSlides = _ref2.hasMultipleSlides,
-    setCurrentSlide = _ref2.setCurrentSlide;
+    setCurrentSlide = _ref2.setCurrentSlide,
+    carouselTitle = _ref2.carouselTitle;
   var hasOnlyImageSlides = slidesMedia.every(function (slide) {
     return !isVideoSlide(slide);
   });
-  var limitedMediaContent = slidesMedia.map(function (slide) {
-    if (isVideoSlide(slide)) return slide;
-    return _extends({}, slide, {
-      src: slide.src ? limitImageUrlDimension(slide.src, IMAGE_WIDTH_LIMIT$1) : undefined
-    });
-  });
   return /*#__PURE__*/React__default.createElement(Swipe, {
     ref: carouselRef,
     infinite: hasMultipleSlides && hasOnlyImageSlides,
-    onIndexChange: setCurrentSlide,
-    "aria-roledescription": "carousel"
-  }, limitedMediaContent.map(function (mediaContent, index) {
+    onIndexChange: setCurrentSlide
+  }, slidesMedia.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "swiper-slide",
-      key: mediaContent.key,
-      "aria-hidden": index !== currentSlide,
-      "aria-roledescription": "slide"
+      key: mediaContent.key + "-" + carouselTitle
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: exports.AspectRatio['4:3']
     }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
@@ -12353,6 +12336,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     availablePrev: hasOnlyImageSlides || currentSlide !== 0,
     availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
   }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
+    carouselTitle: carouselTitle,
     slidesMedia: slidesMedia,
     hasMultipleSlides: hasMultipleSlides,
     carouselRef: carouselRef,