@royaloperahouse/harmonic 0.11.0-d → 0.11.0-f

package/dist/components/molecules/SectionTitle/SectionTitle.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISectionTitleProps } from '../../../types/types';
-declare const SectionTitle: ({ title, size, description, semanticLevel }: ISectionTitleProps) => React.JSX.Element;
+declare const SectionTitle: ({ title, size, description, className }: ISectionTitleProps) => React.JSX.Element;
 export default SectionTitle;

package/dist/harmonic.cjs.development.js

@@ -10344,6 +10344,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     children = _ref.children,
     videoSettings = _ref.videoSettings,
     className = _ref.className;
+  var _useViewport = useViewport(),
+    hydrated = _useViewport.hydrated;
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
@@ -10367,6 +10369,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     fullScreenOption: false,
     loop: true
   };
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
     imageToLeft: imageToLeft,
     className: className,
@@ -10383,12 +10386,11 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper$1, {
     size: "medium"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper$2, {
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement("span", {
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: text
     }
-  })), links ? (/*#__PURE__*/React__default.createElement(ButtonsContainer$3, {
+  }), links ? (/*#__PURE__*/React__default.createElement(ButtonsContainer$3, {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
@@ -10598,31 +10600,45 @@ var StatusBanner = function StatusBanner(_ref) {
 };
 
 var _templateObject$1d;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+
+/* ~~~~~~~ new harmonic types ~~~~~~~ */
+var HarmonicSize = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large'
+};
+var HeaderHierarchy = {
+  H1: 'h1',
+  H2: 'h2',
+  H3: 'h3'
+};
 
 var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     description = _ref.description,
-    semanticLevel = _ref.semanticLevel;
-  var headingLevel = size === 'large' ? 1 : 2;
-  return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    className = _ref.className;
+  var headingLevel = size === 'large' ? HeaderHierarchy.H1 : HeaderHierarchy.H2;
+  var headingSize = size === 'large' ? HarmonicSize.Large : HarmonicSize.Medium;
+  return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(Header, {
-    level: headingLevel,
-    semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: headingLevel,
+    size: headingSize
   }, title)), description && (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 8,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "div"
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
   }, description)))));
 };
 
@@ -13559,13 +13575,6 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-/* ~~~~~~~ new harmonic types ~~~~~~~ */
-var HarmonicSize = {
-  Small: 'small',
-  Medium: 'medium',
-  Large: 'large'
-};
-
 exports.Accordion = Accordion;
 exports.Accordions = Accordions;
 exports.AltHeader = AltHeader;