@royaloperahouse/chord 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,11 +1,15 @@
 # CHANGELOG
 
+## [0.5.0]
+- Highlights Carousel: new slides props (breaking change)
+- Fix in PageHeadingImpact image
+
 ## [0.4.4]
 - AnchorTapBar a11y: added tabIndex to links
-  
+
 ## [0.4.3]
 - Prevent focus when navigation tab is clicked
-  
+
 ## [0.4.2]
 - Highlights Carousel Components
 - Keyboard navigation fix for Navigation Component

package/dist/chord.cjs.development.js

@@ -4226,24 +4226,36 @@ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_t
 var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
 var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 6 / 3 / 15;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobile);
-var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n    }\n  }\n"])), devices.mobile);
+var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
 
 var _excluded$8 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
-  var children = _ref.children,
-      logo = _ref.logo,
+  var logo = _ref.logo,
       carouselTitle = _ref.carouselTitle,
-      infoTitle = _ref.infoTitle,
-      infoTimeframe = _ref.infoTimeframe,
-      infoSubtitle = _ref.infoSubtitle,
-      infoText = _ref.infoText,
-      link = _ref.link;
+      slides = _ref.slides;
+  var images = React.useMemo(function () {
+    return slides.map(function (_ref2) {
+      var image = _ref2.image;
+      return image;
+    });
+  }, []);
 
   var _useState = React.useState(),
       swiper = _useState[0],
       setSwiper = _useState[1];
 
+  var _useState2 = React.useState(0),
+      currentSlide = _useState2[0],
+      setCurrentSlide = _useState2[1];
+
+  var _slides$currentSlide = slides[currentSlide],
+      link = _slides$currentSlide.link,
+      infoText = _slides$currentSlide.infoText,
+      infoTitle = _slides$currentSlide.infoTitle,
+      infoTimeframe = _slides$currentSlide.infoTimeframe,
+      infoSubtitle = _slides$currentSlide.infoSubtitle;
+
   var linkText = link.text,
       restLink = _objectWithoutPropertiesLoose(link, _excluded$8);
 
@@ -4256,12 +4268,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var onNext = function onNext() {
     if (swiper && !swiper.animating) {
       swiper.slideNext();
+      setCurrentSlide(swiper.realIndex);
     }
   };
 
   var onPrev = function onPrev() {
     if (swiper && !swiper.animating) {
       swiper.slidePrev();
+      setCurrentSlide(swiper.realIndex);
     }
   };
 
@@ -4300,12 +4314,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })), /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
     slidesPerView: "auto",
     loop: true,
-    loopedSlides: React__default.Children.count(children),
+    loopedSlides: images.length,
     onSwiper: onSwiper
-  }, React__default.Children.map(children, function (child) {
-    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  }, images.map(function (image) {
+    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, {
+      key: image.key
+    }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: AspectRatio['4:3']
-    }, child));
+    }, /*#__PURE__*/React__default.createElement("img", Object.assign({}, image))));
   }))));
 };
 
@@ -4318,50 +4334,47 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _excluded$9 = ["children", "link", "logo"];
+var _excluded$9 = ["logo", "slides"];
 
 var HighlightsCinema = function HighlightsCinema(_ref) {
-  var children = _ref.children,
-      link = _ref.link,
-      logo = _ref.logo,
+  var logo = _ref.logo,
+      slides = _ref.slides,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  var cinemaLink = _extends({}, link, {
+  var cinemaLink = {
     color: exports.Colors.Cinema,
     bgColor: exports.Colors.White
+  };
+  var newSlides = slides.map(function (slide) {
+    return _extends({}, slide, {
+      link: _extends({}, slide.link, cinemaLink)
+    });
   });
-
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Cinema
   }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
-    link: cinemaLink,
+    slides: newSlides,
     logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, null) : null
-  }), children));
+  })));
 };
 
-var _excluded$a = ["children"];
-
-var HighlightsCore = function HighlightsCore(_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
+var HighlightsCore = function HighlightsCore(props) {
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Core
-  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest), children));
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, props)));
 };
 
-var _excluded$b = ["children", "logo"];
+var _excluded$a = ["logo"];
 
 var HighlightsStream = function HighlightsStream(_ref) {
-  var children = _ref.children,
-      logo = _ref.logo,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var logo = _ref.logo,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Stream
   }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
     logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, null) : null
-  }), children));
+  })));
 };
 
 var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6;
@@ -4494,7 +4507,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 
-var _excluded$c = ["text"],
+var _excluded$b = ["text"],
     _excluded2$1 = ["text"];
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
@@ -4533,7 +4546,7 @@ var Card = function Card(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -4697,7 +4710,7 @@ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templ
 var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$d = ["text"];
+var _excluded$c = ["text"];
 
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
@@ -4709,7 +4722,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title.substring(0, 40);
@@ -4728,11 +4741,11 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
 };
 
-var _excluded$e = ["link"];
+var _excluded$d = ["link"];
 
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var coreLink = link && _extends({}, link, {
     color: exports.Colors.White,
@@ -4746,11 +4759,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$f = ["link"];
+var _excluded$e = ["link"];
 
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var cinemaLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -4765,7 +4778,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
 };
 
 var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-size: 100% 100%;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
   var bgUrlDesktop = _ref.bgUrlDesktop;
   return bgUrlDesktop;
 }, zIndexes.content, devices.mobile, function (_ref2) {
@@ -4780,7 +4793,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$g = ["text"];
+var _excluded$f = ["text"];
 
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
@@ -4795,7 +4808,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -4822,11 +4835,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _excluded$h = ["link"];
+var _excluded$g = ["link"];
 
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var streamLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -4927,7 +4940,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   return '';
 });
 
-var _excluded$i = ["text"],
+var _excluded$h = ["text"],
     _excluded2$2 = ["text"];
 var LENGTH_TEXT$1 = 28;
 
@@ -4954,7 +4967,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];