@royaloperahouse/chord 2.3.3 → 2.4.0

package/dist/chord.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
+import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import { renderToString } from 'react-dom/server';
@@ -2792,9 +2792,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",
@@ -4994,7 +4995,7 @@ var _templateObject$w, _templateObject2$j, _templateObject3$d, _templateObject4$
 var VideoPlayButton = /*#__PURE__*/styled.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.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.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n"])));
-var VideoControlsInnerWrapper = /*#__PURE__*/styled.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.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.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
 var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100px;\n  margin-left: 24px;\n"])));
 var VideoMute = /*#__PURE__*/styled.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"])));
@@ -5064,6 +5065,16 @@ var VideoControls = function VideoControls(_ref2) {
       video.loop = loop;
     }
   }, [loop]);
+  useEffect(function () {
+    var handleFullscreenChange = function handleFullscreenChange() {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return function () {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
   var handleFullscreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
     var videoContainer;
     return runtime_1.wrap(function _callee$(_context) {
@@ -5162,7 +5173,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",
@@ -7843,14 +7856,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",
@@ -7861,7 +7880,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, {
@@ -7928,7 +7948,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 || {},
@@ -7964,7 +7986,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, {
@@ -8332,7 +8355,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,
@@ -8358,7 +8385,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, {
@@ -8368,7 +8395,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"
@@ -8916,7 +8943,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
 });
 
 var _templateObject$15;
-var VideoContainer = /*#__PURE__*/styled.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.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 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8928,6 +8955,10 @@ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObj
   var _ref3$aspectRatio = _ref3.aspectRatio,
       aspectRatio = _ref3$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref3$aspectRatio;
   return AspectRatioLegacy[aspectRatio];
+}, function (_ref4) {
+  var _ref4$aspectRatio = _ref4.aspectRatio,
+      aspectRatio = _ref4$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref4$aspectRatio;
+  return aspectRatio;
 });
 
 var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
@@ -8944,17 +8975,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return AspectRatio[aspectRatioKey] || 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 = useRef(null);
 
   var _useState = useState(AspectRatio['16:9']),
       aspectRatio = _useState[0],
       setAspectRatio = _useState[1];
 
-  var videoRef = 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) {
@@ -8963,18 +9027,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
     }
   };
 
-  var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({}, muted ? {
+  var videoElementId = useMemo(function () {
+    return "video-id-" + generateDomElementId();
+  }, []);
+  var clonedVideo = /*#__PURE__*/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, {
@@ -8982,14 +9052,13 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
     videoContainerId: videoContainerId
   });
 
-  useEffect(function () {
-    setAspectRatio(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) {
@@ -9023,7 +9092,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;
@@ -9064,7 +9134,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
@@ -9297,7 +9368,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,
@@ -9305,7 +9377,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,
@@ -11791,5 +11864,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1m || (_templa
   return theme.fonts.tablet.sizes.body[1];
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
+export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
 //# sourceMappingURL=chord.esm.js.map