@royaloperahouse/harmonic 0.11.0-e → 0.11.0-g

package/dist/components/atoms/SectionSplitter/SectionSplitter.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISectionSplitterProps } from '../../../types/types';
-declare const SectionSplitter: ({ fullWidth }: ISectionSplitterProps) => React.JSX.Element;
+declare const SectionSplitter: ({ fullWidth, className }: ISectionSplitterProps) => React.JSX.Element;
 export default SectionSplitter;

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

@@ -3539,12 +3539,15 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
 
 var _templateObject$h, _templateObject2$a;
 var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n"])));
-var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 4px;\n  background: var(--base-color-light-grey);\n"])));
+var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 4px;\n  background: var(--color-base-light-grey);\n"])));
 
 var SectionSplitter = function SectionSplitter(_ref) {
   var _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth;
-  return /*#__PURE__*/React__default.createElement(SectionSplitterContainer, null, fullWidth ? (/*#__PURE__*/React__default.createElement(GridItem, {
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(SectionSplitterContainer, {
+    className: className
+  }, fullWidth ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 1,
     columnSpanDesktop: 16,
     columnStartDevice: 1,
@@ -10600,31 +10603,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)))));
 };
 
@@ -13561,13 +13578,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;