@royaloperahouse/harmonic 0.2.2-b → 0.2.3-a

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [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 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 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 ButtonsContainer: import("styled-components").StyledComponent<"div", any, IEditorialGridProps, never>;

package/dist/components/organisms/Navigation/Navigation.style.d.ts

@@ -1,6 +1,8 @@
 import { INavigationWrapperProps } from '../../../types/navigation';
 export declare const NavigationWrapper: import("styled-components").StyledComponent<"div", any, INavigationWrapperProps, never>;
-export declare const FullScreenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FullScreenContainer: import("styled-components").StyledComponent<"div", any, {
+    isMobile: boolean;
+}, never>;
 export declare const NavigationGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SearchBackground: import("styled-components").StyledComponent<"div", any, {
     visible?: boolean | undefined;

package/dist/harmonic.cjs.development.js

@@ -5204,31 +5204,34 @@ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--color-base-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
 });
-var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
+var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-white);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: ", ";\n  opacity: 0;\n  animation: fadeIn 0.3s ease forwards;\n\n  @media ", " {\n    top: 230px;\n    background-color: var(--color-base-black);\n  }\n\n  @keyframes fadeIn {\n    to {\n      opacity: 0.5;\n    }\n  }\n"])), function (_ref2) {
+  var isMobile = _ref2.isMobile;
+  return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
+}, devices.mobileAndTablet);
 var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--color-base-white);\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n  z-index: ", ";\n\n  @media ", " {\n    height: 60px;\n  }\n"])), zIndexes.navigation, devices.mobileAndTablet);
-var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref2) {
-  var visible = _ref2.visible;
-  return visible ? 'visible' : 'hidden';
-}, function (_ref3) {
+var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  height: 100px;\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref3) {
   var visible = _ref3.visible;
-  return visible ? 1 : 0;
+  return visible ? 'visible' : 'hidden';
 }, function (_ref4) {
   var visible = _ref4.visible;
+  return visible ? 1 : 0;
+}, function (_ref5) {
+  var visible = _ref5.visible;
   return visible ? 'translateY(0)' : 'translateY(-10px)';
 }, zIndexes.search, devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref5) {
-  var visible = _ref5.visible;
-  return visible ? 'visible' : 'hidden';
-}, function (_ref6) {
+var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease,\n    visibility 0.3s ease;\n  background-color: var(--color-base-white);\n  border-top: 1px solid var(--color-base-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 86px;\n    top: 144px;\n  }\n"])), function (_ref6) {
   var visible = _ref6.visible;
-  return visible ? 1 : 0;
+  return visible ? 'visible' : 'hidden';
 }, function (_ref7) {
   var visible = _ref7.visible;
+  return visible ? 1 : 0;
+}, function (_ref8) {
+  var visible = _ref8.visible;
   return visible ? 'translateY(0)' : 'translateY(-10px)';
 }, zIndexes.search, devices.mobile);
 var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    padding-top: 32px;\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet);
-var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-evenly;\n    transition: row-gap 0.3s ease;\n    row-gap: ", ";\n  }\n"])), devices.mobileAndTablet, function (_ref8) {
-  var showSearch = _ref8.showSearch;
+var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-evenly;\n    transition: row-gap 0.3s ease;\n    row-gap: ", ";\n  }\n"])), devices.mobileAndTablet, function (_ref9) {
+  var showSearch = _ref9.showSearch;
   return showSearch ? '110px' : '12px';
 });
 var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
@@ -5959,6 +5962,8 @@ var Navigation = function Navigation(_ref) {
   var onCloseSearchHandler = function onCloseSearchHandler() {
     setshowSearch(false);
   };
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
     isMenuOpen: showMenu,
     className: className,
@@ -5969,7 +5974,8 @@ var Navigation = function Navigation(_ref) {
     style: {
       height: "" + fullScreenHeight
     },
-    onClick: onCloseSearchHandler
+    onClick: onCloseSearchHandler,
+    isMobile: isMobile
   })), /*#__PURE__*/React__default.createElement(NavigationGrid, null, /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
     columnStartDesktop: 1,
     columnSpanDesktop: 18,
@@ -7658,7 +7664,11 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var handleTouchEnd = function handleTouchEnd() {
     isDragging.current = false;
-    navigateOnSwipeEnd();
+    if (isClickPrevented.current) {
+      navigateOnSwipeEnd();
+    } else {
+      setDragTranslateX(null);
+    }
   };
   var handleMouseMove = function handleMouseMove(e) {
     if (!isDragging.current || !isMouseDown.current || transitioning) return;
@@ -7789,6 +7799,7 @@ var Carousel = function Carousel(_ref) {
     }
   };
   var carouselTitleId = "carousel-title-" + title;
+  var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     className: className,
@@ -7809,9 +7820,9 @@ var Carousel = function Carousel(_ref) {
     id: carouselTitleId,
     isDescriptionPresent: !!description
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "small",
+    size: "medium",
     serif: true,
-    hierarchy: "h" + titleSemanticLevel
+    hierarchy: titleSemanticLevelValue
   }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "large"
   }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
@@ -10150,13 +10161,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,
@@ -10302,18 +10313,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,
@@ -10337,20 +10347,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
     }
@@ -12272,6 +12281,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     return !isVideoSlide(slide);
   });
   var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
+  var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
   var carouselRef = React.useRef(null);
   var onNext = function onNext() {
     var _carouselRef$current;
@@ -12294,9 +12304,9 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
     id: carouselTitleId
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    size: "small",
+    size: "medium",
     serif: true,
-    hierarchy: "h" + titleSemanticLevel
+    hierarchy: titleSemanticLevelValue
   }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
     onClickPrev: onPrev