@royaloperahouse/harmonic 0.7.1-d → 0.7.1-f

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IContentSummaryProps } from '../../../types/editorial';
-declare const ContentSummary: ({ title, subtitle, bodyText, link, image, largeTitle, showImage, truncate, fullyClickable, baseSemanticLevel, }: IContentSummaryProps) => React.JSX.Element;
+declare const ContentSummary: ({ title, subtitle, bodyText, link, image, largeTitle, showImage, truncate, fullyClickable, headerSemanticLevel, className, }: IContentSummaryProps) => React.JSX.Element;
 export default ContentSummary;

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

@@ -7,7 +7,7 @@ interface ContentSummaryProps {
 interface Clickable {
     clickable?: boolean;
 }
-export declare const BodyTextRelative: import("styled-components").StyledComponent<({ level, children, tag }: import("../../../types/typography").IBodyTextProps) => import("react").JSX.Element, any, {}, never>;
+export declare const BodyTextRelative: import("styled-components").StyledComponent<({ children, size, color, className, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {}, never>;
 export declare const ContentSummaryWrapper: import("styled-components").StyledComponent<"article", any, Clickable, never>;
 export declare const ContentSummaryImageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentSummaryTextWrapper: import("styled-components").StyledComponent<"div", any, ContentSummaryProps, never>;

package/dist/harmonic.cjs.development.js

@@ -2703,15 +2703,16 @@ var Button = function Button(_ref) {
     onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var truncatedString = children.substring(0, 30);
-  var handleClick = function handleClick(e) {
-    if (href) return;
-    e.preventDefault();
+  var handleClick = React.useCallback(function (e) {
+    if (!href) e.preventDefault();
     onClick == null || onClick(e);
-  };
-  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
+  }, [href, onClick]);
+  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({
+    role: href ? undefined : 'button',
+    tabIndex: href ? undefined : 0
+  }, rest, {
     href: href != null ? href : '#',
     onClick: handleClick,
-    color: color,
     iconName: iconName,
     className: className
   }), iconName ? (/*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
@@ -8634,21 +8635,20 @@ var ContactCard = function ContactCard(_ref) {
 };
 
 var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$g, _templateObject7$b;
-var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
+var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 36px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
 var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 22px;\n\n  & > * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n    gap: 12px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
+var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 20px;\n\n  & * {\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  @media ", " {\n    margin: 0 20px;\n  }\n\n  & .content-summary-text-link {\n    height: unset;\n  }\n"])), function (props) {
   return props.showImage ? 2 : '1 / span 4';
 }, devices.mobile);
-var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
+var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
 var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
   return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
 });
 
-var MAX_HEADER_LEVEL = 6;
 var clickHandler = function clickHandler(link) {
   if (link != null && link.href && document) {
     document.location.href = link.href;
@@ -8668,9 +8668,11 @@ var ContentSummary = function ContentSummary(_ref) {
     truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
     _ref$fullyClickable = _ref.fullyClickable,
     fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
-    _ref$baseSemanticLeve = _ref.baseSemanticLevel,
-    baseSemanticLevel = _ref$baseSemanticLeve === void 0 ? 3 : _ref$baseSemanticLeve;
+    _ref$headerSemanticLe = _ref.headerSemanticLevel,
+    headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
+    className = _ref.className;
   return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
+    className: className,
     onClick: function onClick() {
       if (fullyClickable) {
         clickHandler(link);
@@ -8694,17 +8696,16 @@ var ContentSummary = function ContentSummary(_ref) {
     showImage: showImage
   }, title && (/*#__PURE__*/React__default.createElement(ContentSummaryTitleWrapper, {
     "data-testid": largeTitle ? 'large-title' : 'default-title'
-  }, largeTitle ? (/*#__PURE__*/React__default.createElement(Header, {
-    level: 5,
-    semanticLevel: baseSemanticLevel
-  }, title)) : (/*#__PURE__*/React__default.createElement(Subtitle, {
-    level: 1,
-    semanticLevel: baseSemanticLevel
-  }, title)))), subtitle && (/*#__PURE__*/React__default.createElement(Subtitle, {
-    level: 2,
-    semanticLevel: title ? Math.min(MAX_HEADER_LEVEL, baseSemanticLevel + 1) : baseSemanticLevel
-  }, subtitle)), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
-    level: 1
+  }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: headerSemanticLevel
+  }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "medium",
+    hierarchy: headerSemanticLevel
+  }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    size: "large"
+  }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
     truncate: truncate,
     dangerouslySetInnerHTML: {