@royaloperahouse/harmonic 0.2.3-c → 0.2.3-e

package/dist/components/Typography/Typography.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
-import './styles.css';
 export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
 export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;

package/dist/components/molecules/Swipe/helper.d.ts

@@ -1,2 +1,4 @@
+export declare const disableTabbingInside: (element: HTMLElement | null, shouldDisable: boolean) => void;
+export declare const isCloneSlide: (index: number, clonesCount: number, childrenLength: number, infinite: boolean) => boolean;
 export declare const getVisibleIndexes: (currentIndex: number, slideWidths: number[], containerWidth: number, slidesLength: number) => number[];
 export declare const getMovedSlides: (delta: number, slideWidths: number[]) => number;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
     carouselRef: React.RefObject<SwipeRef>;
     hasMultipleSlides: boolean;
+    carouselTitle: string | undefined;
 };
 declare const SwipeCarousel: FunctionComponent<Props>;
 export default SwipeCarousel;

package/dist/harmonic.cjs.development.css

@@ -1,192 +1,234 @@
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
 /* ~~~~~ General Styling Classes ~~~~~ */
-.styles_color-primary__UYod1 {
+.typography_color-primary__LOfDi {
   color: var(--color-primary);
 }
 
-.styles_color-black__a05Fo {
+.typography_color-black__6MHRL {
   color: var(--color-base-black);
 }
 
-.styles_color-white__HiYDT {
+.typography_color-white__PfW5s {
   color: var(--color-base-white);
 }
 
-.styles_color-red__zwTZW {
+.typography_color-red__iPlbG {
   color: var(--color-primary-red);
 }
 
-.styles_color-grey__Gc0wv {
+.typography_color-grey__GA1c2 {
   color: var(--color-base-dark-grey);
 }
 
-.styles_color-inherit__Y12df {
+.typography_color-inherit__RDd0Y {
   color: inherit;
 }
 
-.styles_em__v4FoO {
+.typography_em__E6tX- {
   font-style: italic;
 }
 /* ~~~ */
 
 /* Display Headers */
-.styles_display__VgnTB {
+.typography_display__-F3p4 {
   margin: 0;
   font-family: var(--font-family-sans);
   line-height: 100%;
 
-  &.styles_large__vqVxY {
+  &.typography_large__uq0zC {
     font-size: 96px;
     font-weight: 700;
     letter-spacing: -5px;
   }
 
-  &.styles_small__e7YDe {
+  &.typography_small__wfQ0K {
     font-size: 68px;
     font-weight: 500;
     letter-spacing: -3px;
   }
 
   /* Serif and Italic styles */
-  &.styles_serif__b-ZjM,
-  &.styles_em__v4FoO {
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
 
   /* Serif and Italic adjustments */
-  &.styles_large__vqVxY.styles_serif__b-ZjM,
-  &.styles_large__vqVxY.styles_em__v4FoO {
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
     letter-spacing: -3px;
   }
 
-  &.styles_small__e7YDe.styles_serif__b-ZjM,
-  &.styles_small__e7YDe.styles_em__v4FoO {
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
     letter-spacing: -2px;
   }
 
   @media (max-width: 699px) {
-    &.styles_large__vqVxY {
+    &.typography_large__uq0zC {
       font-size: 38px;
       letter-spacing: -1.5px;
     }
 
-    &.styles_small__e7YDe {
+    &.typography_small__wfQ0K {
       font-size: 32px;
       letter-spacing: -1.5px;
     }
 
-    &.styles_large__vqVxY.styles_serif__b-ZjM,
-    &.styles_large__vqVxY.styles_em__v4FoO,
-    &.styles_small__e7YDe.styles_serif__b-ZjM,
-    &.styles_small__e7YDe.styles_em__v4FoO {
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Headers */
-.styles_header__UDH-H {
+.typography_header__BexiD {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.styles_large__vqVxY {
+  &.typography_large__uq0zC {
     font-size: 44px;
     line-height: 48px;
     letter-spacing: -1.5px;
   }
 
-  &.styles_medium__WQPZj {
+  &.typography_medium__K0uZD {
     font-size: 34px;
     line-height: 40px;
     letter-spacing: -1px;
   }
 
-  &.styles_small__e7YDe {
+  &.typography_small__wfQ0K {
     font-size: 26px;
     line-height: 32px;
     letter-spacing: -0.5px;
   }
 
   /* Serif and Italic styles */
-  &.styles_serif__b-ZjM,
-  &.styles_em__v4FoO {
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
     font-family: var(--font-family-serif);
   }
 
   /* Serif and Italic letter-spacing overrides */
-  &.styles_large__vqVxY.styles_serif__b-ZjM,
-  &.styles_large__vqVxY.styles_em__v4FoO {
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
     letter-spacing: -0.5px;
   }
 
-  &.styles_medium__WQPZj.styles_serif__b-ZjM,
-  &.styles_medium__WQPZj.styles_em__v4FoO {
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
     letter-spacing: -0.5px;
   }
 
-  &.styles_small__e7YDe.styles_serif__b-ZjM,
-  &.styles_small__e7YDe.styles_em__v4FoO {
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.styles_large__vqVxY {
+    &.typography_large__uq0zC {
       font-size: 28px;
       line-height: 34px;
       letter-spacing: -1.5px;
     }
 
-    &.styles_medium__WQPZj {
+    &.typography_medium__K0uZD {
       font-size: 24px;
       line-height: 28px;
       letter-spacing: -1px;
     }
 
-    &.styles_small__e7YDe {
+    &.typography_small__wfQ0K {
       font-size: 20px;
       line-height: 26px;
       letter-spacing: -0.75px;
     }
 
     /* Mobile overrides for serif/italic letter-spacing */
-    &.styles_large__vqVxY.styles_serif__b-ZjM,
-    &.styles_large__vqVxY.styles_em__v4FoO,
-    &.styles_medium__WQPZj.styles_serif__b-ZjM,
-    &.styles_medium__WQPZj.styles_em__v4FoO,
-    &.styles_small__e7YDe.styles_serif__b-ZjM,
-    &.styles_small__e7YDe.styles_em__v4FoO {
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_medium__K0uZD.typography_serif__VSO38,
+    &.typography_medium__K0uZD.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Subtitle */
-.styles_subtitle__os3DH {
+.typography_subtitle__aoFTV {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.styles_large__vqVxY {
+  &.typography_large__uq0zC {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.styles_small__e7YDe {
+  &.typography_small__wfQ0K {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.styles_large__vqVxY {
+    &.typography_large__uq0zC {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.styles_small__e7YDe {
+    &.typography_small__wfQ0K {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
@@ -195,43 +237,43 @@
 }
 
 /* Body Copy */
-.styles_bodycopy__uEx9r {
+.typography_bodycopy__vYtQ8 {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
 
-  &.styles_large__vqVxY {
+  &.typography_large__uq0zC {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.styles_medium__WQPZj {
+  &.typography_medium__K0uZD {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
-  &.styles_small__e7YDe {
+  &.typography_small__wfQ0K {
     font-size: 14px;
     line-height: 20px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.styles_large__vqVxY {
+    &.typography_large__uq0zC {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.styles_medium__WQPZj {
+    &.typography_medium__K0uZD {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
     }
 
-    &.styles_small__e7YDe {
+    &.typography_small__wfQ0K {
       font-size: 11px;
       line-height: 16px;
       letter-spacing: -0.2px;
@@ -240,31 +282,31 @@
 }
 
 /* Overline */
-.styles_overline__5xGDa {
+.typography_overline__EnUK3 {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
 
-  &.styles_large__vqVxY {
+  &.typography_large__uq0zC {
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0.3px;
   }
 
-  &.styles_small__e7YDe {
+  &.typography_small__wfQ0K {
     font-size: 12px;
     line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   @media (max-width: 699px) {
-    &.styles_large__vqVxY {
+    &.typography_large__uq0zC {
       line-height: 17px;
       letter-spacing: 0.3px; /* Added to ensure it stays */
     }
 
-    &.styles_small__e7YDe {
+    &.typography_small__wfQ0K {
       line-height: 14px;
       letter-spacing: 0.3px;
     }
@@ -272,7 +314,7 @@
 }
 
 /* Button Text */
-.styles_buttontext__UPumF {
+.typography_buttontext__vcxNi {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 17px;
@@ -287,7 +329,7 @@
 }
 
 /* Caption Text */
-.styles_captiontext__-TA6x {
+.typography_captiontext__91UFb {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
@@ -303,7 +345,7 @@
 }
 
 /* Navigation Text */
-.styles_navigationtext__qnnIo {
+.typography_navigationtext__YfGf7 {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 19px;
@@ -317,48 +359,6 @@
   }
 }
 
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */

package/dist/harmonic.cjs.development.js

@@ -7449,6 +7449,17 @@ var generateDomElementId = function generateDomElementId() {
   return randomPart + "-" + datePart;
 };
 
+var DISABLED_TABBING_TAGS = 'a, button';
+var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
+  if (!element) return;
+  var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
+  focusables.forEach(function (el) {
+    if (shouldDisable) el.setAttribute('tabindex', '-1');
+  });
+};
+var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
+  return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
+};
 var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
   var widthSoFar = 0;
   var visible = [];
@@ -7712,11 +7723,13 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
   return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
     ref: containerRef,
+    className: "swipe",
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd,
     onMouseDown: handleMouseDown,
-    className: "swipe"
+    "aria-roledescription": "carousel",
+    role: "list"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
     translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
@@ -7724,17 +7737,21 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
-    return /*#__PURE__*/React__default.cloneElement(child, {
+    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
+    return /*#__PURE__*/React__default.createElement("div", {
       key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
-      ariaHidden: !isVisible,
       className: SWIPE_SLIDE_CLASS_NAME,
+      "aria-hidden": !isVisible,
+      "aria-roledescription": "slide",
+      role: "listitem",
       ref: function ref(el) {
         childRefs.current[index] = el;
+        disableTabbingInside(el, isClone);
       },
       onFocus: function onFocus() {
         return onSlideFocus(isVisible, index);
       }
-    });
+    }, child);
   })));
 });
 Swipe.displayName = 'Swipe';
@@ -7849,15 +7866,8 @@ var Carousel = function Carousel(_ref) {
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
-    slidesOffsetBefore: slidesOffsetBefore,
-    role: "list",
-    "aria-roledescription": "carousel"
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "carousel-slide-" + index,
-      "aria-roledescription": "slide"
-    }, child);
-  })))));
+    slidesOffsetBefore: slidesOffsetBefore
+  }, children))));
 };
 
 var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
@@ -9194,7 +9204,7 @@ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject10$5 || (_t
   var isButtonPresent = _ref6.isButtonPresent;
   return isButtonPresent ? '20px' : '0';
 });
-var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    min-height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
 
 var PageHeadingPromoBadge;
 (function (PageHeadingPromoBadge) {
@@ -10323,9 +10333,6 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
-  var correctTitleSize = function correctTitleSize(size) {
-    return size === 'small' ? 'medium' : 'large';
-  };
   var imageToLeft = imagePosition === 'left';
   var primaryButton = links == null ? void 0 : links[0];
   var _ref2 = primaryButton || {},
@@ -10357,12 +10364,12 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
-    size: correctTitleSize(titleSize),
+    size: titleSize,
     hierarchy: titleHierarchy
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
     size: "medium"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
-    size: "large",
+    size: "medium",
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -10370,11 +10377,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton ? (/*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
-    target: "_blank"
-  }, restPrimaryButton), primaryButtonTextTruncate)) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({
-    target: "_blank"
-  }, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
+  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
 
 var _templateObject$1a;
@@ -12238,21 +12241,18 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
     currentSlide = _ref2.currentSlide,
     carouselRef = _ref2.carouselRef,
     hasMultipleSlides = _ref2.hasMultipleSlides,
-    setCurrentSlide = _ref2.setCurrentSlide;
+    setCurrentSlide = _ref2.setCurrentSlide,
+    carouselTitle = _ref2.carouselTitle;
   var hasOnlyImageSlides = slidesMedia.every(function (slide) {
     return !isVideoSlide(slide);
   });
   return /*#__PURE__*/React__default.createElement(Swipe, {
     ref: carouselRef,
     infinite: hasMultipleSlides && hasOnlyImageSlides,
-    onIndexChange: setCurrentSlide,
-    "aria-roledescription": "carousel"
+    onIndexChange: setCurrentSlide
   }, slidesMedia.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "swiper-slide",
-      key: mediaContent.key,
-      "aria-hidden": index !== currentSlide,
-      "aria-roledescription": "slide"
+      key: mediaContent.key + "-" + carouselTitle
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: exports.AspectRatio['4:3']
     }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
@@ -12336,6 +12336,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     availablePrev: hasOnlyImageSlides || currentSlide !== 0,
     availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
   }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
+    carouselTitle: carouselTitle,
     slidesMedia: slidesMedia,
     hasMultipleSlides: hasMultipleSlides,
     carouselRef: carouselRef,