@royaloperahouse/harmonic 0.7.1-c → 0.7.1-e

package/dist/harmonic.esm.js

@@ -2726,15 +2726,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 = 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, {
@@ -8661,21 +8662,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(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var BodyTextRelative = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ContentSummaryWrapper = /*#__PURE__*/styled.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) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
 var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
-var ContentSummaryTextWrapper = /*#__PURE__*/styled.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.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.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.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
 var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.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;
@@ -8695,9 +8695,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);
@@ -8721,17 +8723,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
+  }, 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, {
-    level: 1
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
     truncate: truncate,
     dangerouslySetInnerHTML: {
@@ -9719,9 +9720,12 @@ var PaginationLink = /*#__PURE__*/styled.a(_templateObject2$R || (_templateObjec
 var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    margin-left: 24px;\n    color: var(--color-base-black);\n    display: flex;\n    align-items: center;\n  }\n  li:first-child {\n    margin-left: 0px;\n  }\n"])));
 var LastPageItem = /*#__PURE__*/styled.li(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
 var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    margin-left: 12px;\n  }\n"])));
-var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  :hover {\n    cursor: pointer;\n    color: var(--color-primary-red);\n    border-bottom: 1px solid var(--color-primary-red);\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
+var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: ", ";\n    border-bottom: ", ";\n  }\n\n  :hover {\n    cursor: pointer;\n    color: var(--color-primary-red);\n    border-bottom: 1px solid var(--color-primary-red);\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n"])), function (_ref) {
   var active = _ref.active;
-  return active === 'true' && " \n    border-bottom: 1px solid var(--color-primary-red);\n      color: var(--color-primary-red);\n    ";
+  return active ? "var(--color-primary-red)" : 'inherit';
+}, function (_ref2) {
+  var active = _ref2.active;
+  return "1px solid " + (active ? 'var(--color-primary-red)' : 'transparent');
 });
 var PageNav = /*#__PURE__*/styled.a(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--color-base-black);\n    }\n  }\n"])));
 
@@ -9780,7 +9784,7 @@ var Pagination = function Pagination(_ref) {
       "data-testid": "page-number"
     }, /*#__PURE__*/React__default.createElement(TextLinkPagination, {
       size: "large",
-      active: "" + (page === currentPage)
+      active: page === currentPage
     }, page.toString())));
   }), currentPage < pageCount && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
     key: "next-page",