@royaloperahouse/chord 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.4.0]
+- Added optional semantic level props to Page Heading, Alt Header, Promo With Title, and Section Title
+- Added optional character limit prop to Page Heading
+
 ## [2.3.3]
 - Reintroduced legacy behaviour of <TextField /> via opt-in component
 

package/dist/chord.cjs.development.js

@@ -2789,9 +2789,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",
@@ -4991,7 +4992,7 @@ var _templateObject$w, _templateObject2$j, _templateObject3$d, _templateObject4$
 var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background-color: #fff;\n  border: none;\n  padding: 12px;\n  cursor: pointer;\n"])));
 var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 56px;\n  height: 36px;\n  background-color: rgb(26, 26, 26, 0.6);\n  border-radius: 5px;\n  padding: 5px 14px;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
 var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n"])));
-var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 10px;\n"])));
+var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 40px 17px 30px;\n"])));
 var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100px;\n  margin-left: 24px;\n"])));
 var VideoMute = /*#__PURE__*/styled__default.button(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 17px;\n  height: 17px;\n  background: none;\n  border: none;\n  padding: 0;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n  cursor: pointer;\n"])));
@@ -5061,6 +5062,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) {
@@ -5159,7 +5170,9 @@ var VideoControls = function VideoControls(_ref2) {
       setVolume(newVolume);
     }
   }, [isMuted]);
-  return /*#__PURE__*/React__default.createElement(VideoControlsWrapper, null, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper, null, /*#__PURE__*/React__default.createElement(LeftWrapper, null, /*#__PURE__*/React__default.createElement(VideoPlayButton, {
+  return /*#__PURE__*/React__default.createElement(VideoControlsWrapper, {
+    className: "video-controls-container"
+  }, /*#__PURE__*/React__default.createElement(VideoControlsInnerWrapper, null, /*#__PURE__*/React__default.createElement(LeftWrapper, null, /*#__PURE__*/React__default.createElement(VideoPlayButton, {
     id: "play",
     onClick: handlePlay,
     className: "video-play-button",
@@ -7840,14 +7853,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",
@@ -7858,7 +7877,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, {
@@ -7925,7 +7945,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 || {},
@@ -7961,7 +7983,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, {
@@ -8329,7 +8352,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
       _ref4$brandingStyle = _ref4.brandingStyle,
       brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
       brandingText = _ref4.brandingText,
-      brandingLink = _ref4.brandingLink;
+      brandingLink = _ref4.brandingLink,
+      _ref4$showCopy = _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,
@@ -8355,7 +8382,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
     video: video,
     poster: poster
-  })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
+  })), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
     className: "page-heading-compact__background",
     invert: invert
   }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
@@ -8365,7 +8392,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"
@@ -8913,7 +8940,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
 });
 
 var _templateObject$15;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__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$15 || (_templateObject$15 = /*#__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;
@@ -8925,6 +8952,10 @@ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_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) {
@@ -8941,17 +8972,50 @@ 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.
+ *
+ * @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;
+};
+
 var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
       settings = _ref.settings;
-  var muted = settings.muted,
-      autoPlay = settings.autoPlay;
+  var videoRef = React.useRef(null);
 
   var _useState = React.useState(exports.AspectRatio['16:9']),
       aspectRatio = _useState[0],
       setAspectRatio = _useState[1];
 
-  var videoRef = React.useRef(null);
+  var _React$useState = React__default.useState(false),
+      isVideoReady = _React$useState[0],
+      setIsVideoReady = _React$useState[1];
+
+  var muted = settings.muted,
+      autoPlay = settings.autoPlay;
+  React__default.useEffect(function () {
+    var changeVideoReadiness = function changeVideoReadiness() {
+      setIsVideoReady(true);
+    };
+
+    if (videoRef.current) {
+      videoRef.current.addEventListener('canplay', changeVideoReadiness);
+      return function () {
+        var _videoRef$current;
+
+        return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
+      };
+    }
+
+    return undefined;
+  }, []);
 
   var handleMetadataLoaded = function handleMetadataLoaded() {
     if (videoRef.current) {
@@ -8960,18 +9024,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
     }
   };
 
-  var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({}, muted ? {
+  var videoElementId = React.useMemo(function () {
+    return "video-id-" + generateDomElementId();
+  }, []);
+  var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({
+    playsInline: true
+  }, muted ? {
     muted: true
   } : {}, autoPlay && muted ? {
     autoPlay: true
   } : {}, {
     height: '100%',
     width: '100%',
-    onLoadedMetadata: handleMetadataLoaded
+    onLoadedMetadata: handleMetadataLoaded,
+    id: videoElementId
   }, {
+    poster: autoPlay && isVideoReady ? undefined : video.props.poster,
     ref: videoRef
   }));
-  var videoElementId = clonedVideo.props.id;
   var videoContainerId = "video-container-for-" + videoElementId;
 
   var videoControlsProps = _extends({}, settings, {
@@ -8979,14 +9049,13 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
     videoContainerId: videoContainerId
   });
 
-  React.useEffect(function () {
-    setAspectRatio(exports.AspectRatio['16:9']);
-  }, [video.props.src]);
+  var showVideoControls = autoPlay ? isVideoReady : true;
   return /*#__PURE__*/React__default.createElement(VideoContainer, {
+    className: "video-with-controls-container",
     aspectRatio: aspectRatio,
     id: videoContainerId,
-    "data-testid": videoContainerId
-  }, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
+    "data-testid": 'video-container'
+  }, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
 };
 
 var PromoChild = function PromoChild(_ref) {
@@ -9020,7 +9089,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;
@@ -9061,7 +9131,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
@@ -9294,7 +9365,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,
@@ -9302,7 +9374,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,
@@ -11871,6 +11944,7 @@ exports.TypeTags = TypeTags;
 exports.UpsellCard = UpsellCard;
 exports.UpsellSection = UpsellSection;
 exports.VideoControls = VideoControls;
+exports.VideoWithControls = VideoWithControls$1;
 exports.breakpoints = breakpoints;
 exports.devices = devices;
 exports.zIndexes = zIndexes;