@royaloperahouse/harmonic 0.2.3-c → 0.2.3-d

package/CHANGELOG.md

@@ -1,6 +1,3 @@
-## [0.2.3]
-- Restyle PromoWithTitle component
-
 ## [0.2.0]
 - PeopleListing: Add variable column span based on people names length
 

package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts

@@ -2,7 +2,7 @@ import { IEditorialGridProps } from '../../../types/editorial';
 export declare const PromoWithTitleGrid: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTitleImageWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
 export declare const PromoWithTitleContentWrapper: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;
-export declare const HarmonicHeaderWithWrapper: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy: Tag, className, }: import("../../../types/typography").IHarmonicHeaderProps) => import("react").JSX.Element, any, {}, never>;
-export declare const HarmonicSubtitleWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
-export declare const BodyCopyHarmonicWithWrapper: import("styled-components").StyledComponent<({ children, size, color, className, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
+export declare const PromoWithTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromoWithTitleSubtitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const PromoWithTitleText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;

package/dist/harmonic.cjs.development.js

@@ -8333,11 +8333,55 @@ 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;
@@ -8403,6 +8447,7 @@ 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;
@@ -8442,7 +8487,7 @@ var Card = function Card(_ref) {
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: image,
+    src: limitedImage,
     alt: imageAltText || title
   })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress,
@@ -9416,36 +9461,6 @@ 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);
@@ -10161,13 +10176,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\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  @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 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 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 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,
@@ -10313,20 +10328,18 @@ 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 correctTitleSize = function correctTitleSize(size) {
-    return size === 'small' ? 'medium' : 'large';
-  };
   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,
@@ -10350,19 +10363,20 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     imageToLeft: imageToLeft,
     className: className,
     "data-testid": "promo-with-title"
-  }, /*#__PURE__*/React__default.createElement(PromoChild, {
+  }, /*#__PURE__*/React__default.createElement(PromoChild
+  // eslint-disable-next-line react/no-children-prop
+  , {
+    // eslint-disable-next-line react/no-children-prop
+    children: children,
     videoSettings: _extends({}, defaultVideoSettings, videoSettings),
     imageToLeft: imageToLeft
-  }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
+  }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
-    size: correctTitleSize(titleSize),
-    hierarchy: titleHierarchy
-  }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
-    size: "medium"
-  }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
-    size: "large",
+  }, /*#__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, {
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -10370,11 +10384,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton ? (/*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
-    target: "_blank"
-  }, restPrimaryButton), primaryButtonTextTruncate)) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({
-    target: "_blank"
-  }, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
+  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
 
 var _templateObject$1a;
@@ -12212,6 +12222,7 @@ 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,
@@ -12242,12 +12253,18 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
   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"
-  }, slidesMedia.map(function (mediaContent, index) {
+  }, limitedMediaContent.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "swiper-slide",
       key: mediaContent.key,