@royaloperahouse/chord 2.3.1-b-chord-development → 2.3.2-a-chord-development

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.3.2]
+- AuxiliaryNav: onClick handler fixes
+
 ## [2.3.1]
 - AuxiliaryNav: accessibility improvements
 

package/dist/chord.cjs.development.js

@@ -2821,9 +2821,10 @@ var StyledTag = function StyledTag(_ref) {
   }, children);
 };
 var AltHeader = function AltHeader(_ref2) {
-  var level = _ref2.level,
+  var semanticLevel = _ref2.semanticLevel,
+      level = _ref2.level,
       children = _ref2.children;
-  var renderedTag = "h" + level;
+  var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
   return /*#__PURE__*/React__default.createElement(StyledTag, {
     tag: renderedTag,
     typography: "altHeader",
@@ -5091,6 +5092,16 @@ var VideoControls = function VideoControls(_ref2) {
       video.loop = loop;
     }
   }, [loop]);
+  React.useEffect(function () {
+    var handleFullscreenChange = function handleFullscreenChange() {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return function () {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
   var handleFullscreen = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
     var videoContainer;
     return runtime_1.wrap(function _callee$(_context) {
@@ -7871,14 +7882,20 @@ var PageHeading = function PageHeading(_ref) {
       link = _ref.link,
       _ref$sponsor = _ref.sponsor,
       sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$semanticLevel = _ref.semanticLevel,
+      semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
+      _ref$copyCharLimit = _ref.copyCharLimit,
+      copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
+      _ref$titleCharLimit = _ref.titleCharLimit,
+      titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
 
   var _ref2 = link || {},
       linkText = _ref2.text,
       restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
-  var truncatedText = text == null ? void 0 : text.substring(0, 250);
-  var truncatedTitle = title && title.substring(0, 40);
+  var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
+  var truncatedTitle = title && title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
     "data-testid": "page-heading-wrapper",
@@ -7889,7 +7906,8 @@ var PageHeading = function PageHeading(_ref) {
   }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
     isPageHeadingWithoutTitle: isTitleUnAvailable
   }, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
-    level: 2
+    level: 2,
+    semanticLevel: semanticLevel
   }, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"
   }, /*#__PURE__*/React__default.createElement(PageHeadingText, {
@@ -7956,7 +7974,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
       bgUrlDesktop = _ref.bgUrlDesktop,
       bgUrlDevice = _ref.bgUrlDevice,
       _ref$bgImageAltText = _ref.bgImageAltText,
-      bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText;
+      bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
+      _ref$semanticLevel = _ref.semanticLevel,
+      semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
   var truncatedText = text && text.substring(0, 75);
 
   var _ref2 = link || {},
@@ -7992,7 +8012,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
     "data-testid": "impact-text"
   }, /*#__PURE__*/React__default.createElement(Header, {
-    level: 3
+    level: 3,
+    semanticLevel: semanticLevel
   }, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
     "data-testid": "impact-link"
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
@@ -8362,7 +8383,9 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
       brandingText = _ref4.brandingText,
       brandingLink = _ref4.brandingLink,
       _ref4$showCopy = _ref4.showCopy,
-      showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
+      showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
+      _ref4$semanticLevel = _ref4.semanticLevel,
+      semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
 
   var _ref5 = link || {},
       linkText = _ref5.text,
@@ -8398,7 +8421,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     invert: invert
   }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
     level: titleSize,
-    semanticLevel: 1
+    semanticLevel: semanticLevel
   }, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
     invert: invert,
     className: "page-heading-compact__button"
@@ -8952,7 +8975,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
 });
 
 var _templateObject$16;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n"])), function (_ref) {
+var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
       aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8964,6 +8987,10 @@ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_te
   var _ref3$aspectRatio = _ref3.aspectRatio,
       aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
   return AspectRatioLegacy[aspectRatio];
+}, function (_ref4) {
+  var _ref4$aspectRatio = _ref4.aspectRatio,
+      aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
+  return aspectRatio;
 });
 
 var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
@@ -8980,9 +9007,14 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
 };
 
-// Generates a random string in the format XXX-XXX. Does not meet UUID standards.
-// To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
-var generateId = function generateId() {
+/**
+ * Generates a random string in the format XXX-XXX.
+ * Does not meet UUID standards.
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
+ *
+ * @return {string} A random string in the format XXX-XXX.
+ */
+var generateDomElementId = function generateDomElementId() {
   var randomPart = Math.floor(100 + Math.random() * 900).toString();
   var datePart = Date.now().toString().slice(-3);
   return randomPart + "-" + datePart;
@@ -9028,7 +9060,7 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
   };
 
   var videoElementId = React.useMemo(function () {
-    return "video-id-" + generateId();
+    return "video-id-" + generateDomElementId();
   }, []);
   var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({
     playsInline: true
@@ -9091,7 +9123,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
       text = _ref.text,
       links = _ref.links,
       children = _ref.children,
-      videoSettings = _ref.videoSettings;
+      videoSettings = _ref.videoSettings,
+      titleSemanticLevel = _ref.titleSemanticLevel;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -9132,7 +9165,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: titleLevel
+    level: titleLevel,
+    semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
     dangerouslySetInnerHTML: {
       __html: text
@@ -9365,7 +9399,8 @@ var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
-      description = _ref.description;
+      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, {
     columnStartDesktop: 3,
@@ -9373,7 +9408,8 @@ var SectionTitle = function SectionTitle(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(Header, {
-    level: headingLevel
+    level: headingLevel,
+    semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
   }, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 8,