@royaloperahouse/harmonic 0.2.3-e → 0.2.3-g

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

@@ -1,5 +1,6 @@
 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,4 +1,2 @@
-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,7 +7,6 @@ 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,234 +1,192 @@
-@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 ~~~~~ */
-.typography_color-primary__LOfDi {
+.styles_color-primary__UYod1 {
   color: var(--color-primary);
 }
 
-.typography_color-black__6MHRL {
+.styles_color-black__a05Fo {
   color: var(--color-base-black);
 }
 
-.typography_color-white__PfW5s {
+.styles_color-white__HiYDT {
   color: var(--color-base-white);
 }
 
-.typography_color-red__iPlbG {
+.styles_color-red__zwTZW {
   color: var(--color-primary-red);
 }
 
-.typography_color-grey__GA1c2 {
+.styles_color-grey__Gc0wv {
   color: var(--color-base-dark-grey);
 }
 
-.typography_color-inherit__RDd0Y {
+.styles_color-inherit__Y12df {
   color: inherit;
 }
 
-.typography_em__E6tX- {
+.styles_em__v4FoO {
   font-style: italic;
 }
 /* ~~~ */
 
 /* Display Headers */
-.typography_display__-F3p4 {
+.styles_display__VgnTB {
   margin: 0;
   font-family: var(--font-family-sans);
   line-height: 100%;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 96px;
     font-weight: 700;
     letter-spacing: -5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 68px;
     font-weight: 500;
     letter-spacing: -3px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
 
   /* Serif and Italic adjustments */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -3px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 38px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 32px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
+    &.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 {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Headers */
-.typography_header__BexiD {
+.styles_header__UDH-H {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 44px;
     line-height: 48px;
     letter-spacing: -1.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 34px;
     line-height: 40px;
     letter-spacing: -1px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 26px;
     line-height: 32px;
     letter-spacing: -0.5px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
   }
 
   /* Serif and Italic letter-spacing overrides */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD.typography_serif__VSO38,
-  &.typography_medium__K0uZD.typography_em__E6tX- {
+  &.styles_medium__WQPZj.styles_serif__b-ZjM,
+  &.styles_medium__WQPZj.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 28px;
       line-height: 34px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 24px;
       line-height: 28px;
       letter-spacing: -1px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 20px;
       line-height: 26px;
       letter-spacing: -0.75px;
     }
 
     /* Mobile overrides for serif/italic letter-spacing */
-    &.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- {
+    &.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 {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Subtitle */
-.typography_subtitle__aoFTV {
+.styles_subtitle__os3DH {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
@@ -237,43 +195,43 @@
 }
 
 /* Body Copy */
-.typography_bodycopy__vYtQ8 {
+.styles_bodycopy__uEx9r {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 14px;
     line-height: 20px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 11px;
       line-height: 16px;
       letter-spacing: -0.2px;
@@ -282,31 +240,31 @@
 }
 
 /* Overline */
-.typography_overline__EnUK3 {
+.styles_overline__5xGDa {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0.3px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 12px;
     line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       line-height: 17px;
       letter-spacing: 0.3px; /* Added to ensure it stays */
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       line-height: 14px;
       letter-spacing: 0.3px;
     }
@@ -314,7 +272,7 @@
 }
 
 /* Button Text */
-.typography_buttontext__vcxNi {
+.styles_buttontext__UPumF {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 17px;
@@ -329,7 +287,7 @@
 }
 
 /* Caption Text */
-.typography_captiontext__91UFb {
+.styles_captiontext__-TA6x {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
@@ -345,7 +303,7 @@
 }
 
 /* Navigation Text */
-.typography_navigationtext__YfGf7 {
+.styles_navigationtext__qnnIo {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 19px;
@@ -359,6 +317,48 @@
   }
 }
 
+@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,17 +7449,6 @@ 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 = [];
@@ -7723,13 +7712,11 @@ 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,
-    "aria-roledescription": "carousel",
-    role: "list"
+    className: "swipe"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
     translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
@@ -7737,21 +7724,17 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
-    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.cloneElement(child, {
       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';
@@ -7866,8 +7849,15 @@ var Carousel = function Carousel(_ref) {
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
-    slidesOffsetBefore: slidesOffsetBefore
-  }, children))));
+    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);
+  })))));
 };
 
 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;
@@ -9204,7 +9194,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    min-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    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
 
 var PageHeadingPromoBadge;
 (function (PageHeadingPromoBadge) {
@@ -10369,7 +10359,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
     size: "medium"
   }, subtitle) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
-    size: "medium",
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: text
     }
@@ -10377,7 +10367,11 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "buttons-wrapper",
     primaryButtonTextLength: primaryButtonText.length,
     tertiaryButtonTextLength: tertiaryButtonText.length
-  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
+  }, 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));
 };
 
 var _templateObject$1a;
@@ -12241,18 +12235,21 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
     currentSlide = _ref2.currentSlide,
     carouselRef = _ref2.carouselRef,
     hasMultipleSlides = _ref2.hasMultipleSlides,
-    setCurrentSlide = _ref2.setCurrentSlide,
-    carouselTitle = _ref2.carouselTitle;
+    setCurrentSlide = _ref2.setCurrentSlide;
   var hasOnlyImageSlides = slidesMedia.every(function (slide) {
     return !isVideoSlide(slide);
   });
   return /*#__PURE__*/React__default.createElement(Swipe, {
     ref: carouselRef,
     infinite: hasMultipleSlides && hasOnlyImageSlides,
-    onIndexChange: setCurrentSlide
+    onIndexChange: setCurrentSlide,
+    "aria-roledescription": "carousel"
   }, slidesMedia.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: mediaContent.key + "-" + carouselTitle
+      className: "swiper-slide",
+      key: mediaContent.key,
+      "aria-hidden": index !== currentSlide,
+      "aria-roledescription": "slide"
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: exports.AspectRatio['4:3']
     }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
@@ -12336,7 +12333,6 @@ 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,
@@ -13437,7 +13433,7 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (
 }, devices.desktop, devices.largeDesktop);
 
 /* ~~~~~~~ new harmonic types ~~~~~~~ */
-var HarmonicSizes = {
+var HarmonicSize = {
   Small: 'small',
   Medium: 'medium',
   Large: 'large'
@@ -13464,7 +13460,7 @@ exports.Footer = Footer;
 exports.GlobalStyles = GlobalStyles;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
-exports.HarmonicSizes = HarmonicSizes;
+exports.HarmonicSize = HarmonicSize;
 exports.HarmonicThemeProvider = HarmonicThemeProvider;
 exports.Header = Header;
 exports.HighlightsCarousel = HighlightsCarousel;