@royaloperahouse/harmonic 0.12.0-c → 0.12.0-e

package/dist/harmonic.esm.js

@@ -7049,7 +7049,7 @@ var Theme = function Theme(_ref) {
 };
 
 var _templateObject$I;
-var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    line-height: var(--line-height-listing);\n    position: relative;\n    padding-left: 32px;\n\n    @media ", " {\n      padding-left: 28px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
+var TextContainer$1 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--color-rbo-black-hovered);\n    }\n\n    &:active {\n      color: var(--color-rbo-black-pressed);\n    }\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  p:has(+ ul),\n  p:has(+ ol) {\n    margin-bottom: 12px;\n  }\n\n  & ul,\n  & ol {\n    padding: 0;\n    list-style: none;\n    margin-block-start: 0;\n    margin-block-end: 0;\n  }\n\n  & ul li,\n  & ol li {\n    line-height: var(--line-height-listing);\n    position: relative;\n    padding-left: 32px;\n\n    @media ", " {\n      padding-left: 28px;\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    position: absolute;\n    left: 0;\n    width: 20px;\n    text-align: right;\n    margin-right: 12px;\n\n    @media ", " {\n      width: 16px;\n      margin-right: 12px;\n    }\n  }\n\n  & ol {\n    counter-reset: custom-ol;\n  }\n\n  & ol > li {\n    counter-increment: custom-ol;\n  }\n\n  & ol > li::before {\n    content: counter(custom-ol, decimal-leading-zero) '';\n    position: absolute;\n    left: 0;\n    min-width: 20px;\n    text-align: right;\n    margin-right: 12px;\n    display: inline-block;\n\n    @media ", " {\n      min-width: 16px;\n      margin-right: 12px;\n    }\n  }\n"])), devices.mobile, devices.mobile, devices.mobile);
 
 var addTypographyClasses = function addTypographyClasses(html) {
   return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -7074,8 +7074,9 @@ var BodyContent = function BodyContent(_ref) {
     columnStartDevice: columnStartDevice,
     columnSpanDevice: columnSpanDevice
   }, /*#__PURE__*/React__default.createElement(TextContainer$1, {
+    tag: "div",
+    size: "large",
     "data-testid": "text-container",
-    className: typographyStyles.bodycopy + " " + typographyStyles['bodycopy--large'],
     dangerouslySetInnerHTML: {
       __html: addTypographyClasses(text)
     }
@@ -8166,15 +8167,21 @@ var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_template
   var isVisible = _ref3.isVisible;
   return isVisible ? 'auto' : 'none';
 }, devices.mobile);
-var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: ", ";\n    pointer-events: ", ";\n  }\n\n  @media ", " {\n    padding-top: 16px;\n    padding-bottom: 16px;\n  }\n"])), function (_ref4) {
+  var hasChildren = _ref4.hasChildren;
+  return hasChildren ? 'pointer' : 'default';
+}, function (_ref5) {
+  var hasChildren = _ref5.hasChildren;
+  return hasChildren ? 'auto' : 'none';
+}, devices.mobile);
 var TitleText$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 32px);\n"])));
 var ExtendedBodyCopyHarmonic = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n"])));
 var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'textHeight';
   }
-})(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref4) {
-  var textHeight = _ref4.textHeight;
+})(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n\n  @media print {\n    max-height: max-content;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref6) {
+  var textHeight = _ref6.textHeight;
   return textHeight;
 }, devices.mobile);
 var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
@@ -8232,7 +8239,8 @@ var Accordion = function Accordion(_ref) {
     role: "button",
     "aria-label": title,
     "aria-expanded": openAccordion,
-    "aria-controls": contentContainerId
+    "aria-controls": contentContainerId,
+    hasChildren: !!children
   }, /*#__PURE__*/React__default.createElement(TitleText$1, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
   })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
@@ -8241,7 +8249,8 @@ var Accordion = function Accordion(_ref) {
     textHeight: textHeight,
     id: contentContainerId,
     "aria-live": "polite",
-    tag: "div"
+    tag: "div",
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
     isVisible: childrenVisibility
   }, children)));
@@ -8822,6 +8831,7 @@ var Editorial = function Editorial(_ref) {
     tag: "span"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
     tag: "div",
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -9103,10 +9113,6 @@ var PageHeading = function PageHeading(_ref) {
     _ref$sponsor = _ref.sponsor,
     sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
     children = _ref.children,
-    _ref$copyCharLimit = _ref.copyCharLimit,
-    copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
-    _ref$titleCharLimit = _ref.titleCharLimit,
-    titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit,
     className = _ref.className,
     showBadge = _ref.showBadge,
     theme = _ref.theme;
@@ -9117,8 +9123,6 @@ var PageHeading = function PageHeading(_ref) {
     pressedColor: ThemeColor['white-pressed']
   });
   var linkText = themedLink == null ? void 0 : themedLink.text;
-  var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
-  var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
   var renderBadge = function renderBadge(currentTheme) {
     if (!showBadge) return null;
@@ -9152,13 +9156,14 @@ var PageHeading = function PageHeading(_ref) {
     color: "white",
     size: "large",
     hierarchy: hierarchy
-  }, truncatedTitle))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
+  }, title))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    tag: "div",
     color: "white",
     size: "large",
     dangerouslySetInnerHTML: {
-      __html: truncatedText
+      __html: text
     }
   }))) : null, sponsor ? (/*#__PURE__*/React__default.createElement(LogoWrapper, {
     "data-testid": "page-heading-sponsor",