@royaloperahouse/chord 0.5.3 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## [0.5.4]
+- Fix Card typography
+- Fix Carousel title typography
+- Fix Image Carousel size
+- Fix focus style in rotator buttons (Safari)
+- Anchor tab links hover style only for desktop
+- Fix Anchor bar internal navigation
+
 ## [0.5.3]
 - Handle keyboard events using key attribute
 

package/dist/chord.cjs.development.js

@@ -2541,7 +2541,7 @@ var Tab = function Tab(_ref) {
 };
 
 var _templateObject$f, _templateObject2$3;
-var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  :hover {\n    color: var(--base-color-", ");\n    border-bottom: 1px solid var(--base-color-", ");\n\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--base-color-", ");\n      border-bottom: 1px solid var(--base-color-", ");\n\n      && svg path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
@@ -2557,7 +2557,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templ
   var selected = _ref4.selected,
       hoverColor = _ref4.hoverColor;
   return selected ? "&& svg path {\n    fill: var(--base-color-" + hoverColor + ");\n  }" : '';
-}, function (_ref5) {
+}, devices.desktop, devices.largeDesktop, function (_ref5) {
   var hoverColor = _ref5.hoverColor;
   return hoverColor;
 }, function (_ref6) {
@@ -2651,7 +2651,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: 'CarouselArrow',
-      direction: "left"
+      direction: "reverse"
     });
   };
 
@@ -3881,8 +3881,6 @@ var _excluded$7 = ["text"],
     _excluded3 = ["id", "text"];
 
 var AnchorTapBar = function AnchorTapBar(_ref) {
-  var _tabListRef$current, _tabListRef$current2;
-
   var tabs = _ref.tabs,
       title = _ref.title,
       links = _ref.links,
@@ -3898,13 +3896,15 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       tabsOverflow = _useState2[0],
       setTabsOverflow = _useState2[1];
 
-  var _useState3 = React.useState(0),
-      scroll = _useState3[0],
-      setScroll = _useState3[1];
+  var _useState3 = React.useState(false),
+      canScrollToLeft = _useState3[0],
+      setCanScrollToLeft = _useState3[1];
+
+  var _useState4 = React.useState(tabsOverflow),
+      canScrollToRight = _useState4[0],
+      setCanScrollToRight = _useState4[1];
 
   var hasTitleOrLinks = title || links;
-  var scrollStart = 0 === scroll;
-  var scrollEnd = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) - (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0) <= scroll;
 
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
@@ -3919,10 +3919,11 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   };
 
   React.useEffect(function () {
-    var _tabListRef$current3, _tabListRef$current4;
+    var _tabListRef$current, _tabListRef$current2;
 
-    var tabsIsOverflowed = (((_tabListRef$current3 = tabListRef.current) == null ? void 0 : _tabListRef$current3.scrollWidth) || 0) > (((_tabListRef$current4 = tabListRef.current) == null ? void 0 : _tabListRef$current4.clientWidth) || 0);
+    var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
     setTabsOverflow(tabsIsOverflowed);
+    setCanScrollToRight(tabsIsOverflowed);
   }, [tabListRef]);
   React.useEffect(function () {
     var scrollTriggerCheck = function scrollTriggerCheck() {
@@ -3937,6 +3938,24 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       if (window.scrollY === 0) {
         setSelectedItem(onTabClick ? selectedItem : '');
       } else if (reachedItem) {
+        var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+            _ref2$scrollLeft = _ref2.scrollLeft,
+            scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+            _ref2$clientWidth = _ref2.clientWidth,
+            clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
+
+        var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
+          offsetLeft: 0,
+          offsetWidth: 0
+        };
+        var offsetLeft = tabLinkElement.offsetLeft,
+            offsetWidth = tabLinkElement.offsetWidth;
+        var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
+
+        if (!isInView && tabListRef != null && tabListRef.current) {
+          tabListRef.current.scrollLeft = offsetLeft;
+        }
+
         setSelectedItem(reachedItem.id);
       }
     };
@@ -3945,34 +3964,47 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     return function () {
       return document.removeEventListener('scroll', scrollTriggerCheck);
     };
-  }, [tabs, selectedItem, hasTitleOrLinks]);
-  var tabsColumnStart = tabsOverflow ? scrollStart ? 2 : 1 : 3;
-  var tabsColumnSpan = tabsOverflow ? scrollStart ? 14 : 15 : 13;
+  }, [tabs, selectedItem, hasTitleOrLinks, tabListRef]);
+  var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
+  var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
 
-  var _ref2 = (links == null ? void 0 : links[0]) || {},
-      primaryButtonText = _ref2.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$7);
+  var _ref3 = (links == null ? void 0 : links[0]) || {},
+      primaryButtonText = _ref3.text,
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
 
-  var _ref3 = (links == null ? void 0 : links[1]) || {},
-      secondaryButtonText = _ref3.text,
-      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _ref4 = (links == null ? void 0 : links[1]) || {},
+      secondaryButtonText = _ref4.text,
+      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
 
   var scrollToRight = function scrollToRight() {
     if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
       var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
       tabListRef.current.scrollLeft += newScroll;
-      setScroll(tabListRef.current.scrollLeft + newScroll);
     }
   };
 
   var scrollToLeft = function scrollToLeft() {
     if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
       var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
       tabListRef.current.scrollLeft = newScroll;
-      setScroll(newScroll);
     }
   };
 
+  var onTabsScroll = function onTabsScroll() {
+    var _ref5 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+        _ref5$scrollLeft = _ref5.scrollLeft,
+        scrollLeft = _ref5$scrollLeft === void 0 ? 0 : _ref5$scrollLeft,
+        _ref5$clientWidth = _ref5.clientWidth,
+        clientWidth = _ref5$clientWidth === void 0 ? 0 : _ref5$clientWidth,
+        _ref5$scrollWidth = _ref5.scrollWidth,
+        scrollWidth = _ref5$scrollWidth === void 0 ? 0 : _ref5$scrollWidth;
+
+    setCanScrollToLeft(scrollLeft > 0);
+    setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
+  };
+
   return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, title || links ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 2,
     columnSpanDesktop: 9,
@@ -3997,27 +4029,29 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     "data-testid": "anchor-tabs"
   }, /*#__PURE__*/React__default.createElement(TabsList, {
     ref: tabListRef,
-    tabsOverflow: tabsOverflow
-  }, tabs.map(function (_ref4) {
-    var id = _ref4.id,
-        text = _ref4.text,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    tabsOverflow: tabsOverflow,
+    onScroll: onTabsScroll
+  }, tabs.map(function (_ref6) {
+    var id = _ref6.id,
+        text = _ref6.text,
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded3);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
       selected: isSelectedItem(id),
+      id: "tablink-" + id,
       onClick: function onClick(e) {
         return onClicktab(e, id);
       },
       tabIndex: 0
     }, rest), text));
-  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, !scrollStart ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
+  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, canScrollToLeft ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
     onClick: scrollToLeft
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow",
     direction: "reverse"
-  })) : null, !scrollEnd ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
+  })) : null, canScrollToRight ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
     onClick: scrollToRight
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow"
@@ -4043,7 +4077,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
     var calcColumns = "calc(calc(80% - " + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
     return "\n      & {\n        .swiper-slide {\n          width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n        }\n      }\n    ";
   } else {
-    return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: " + imagesHeightDesktop + "px;\n          }\n        }\n      }\n    ";
+    return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: calc(" + imagesHeightDesktop + "px + var(--line-height-body-2) + 12px);\n          }\n        }\n      }\n    ";
   }
 }, devices.mobile, function (_ref2) {
   var active = _ref2.active,
@@ -4060,11 +4094,11 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
     var marginRight = active ? "calc(calc(var(--grid-column-gap) * 2) + " + columnWidth + ")" : "calc(calc(" + columnWidth + " * 2) + var(--grid-column-gap))";
     return "\n        && {\n          .swiper-slide {\n            width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n            margin-right: " + marginRight + ";\n            -webkit-transform: translate3d(0, 0, 0);\n          }\n        }";
   } else {
-    return "\n        &&& {\n          .swiper-slide > div{\n            height: " + imagesHeightDevice + "px;\n          }\n        }";
+    return "\n        &&& {\n          .swiper-slide > div{\n            height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n          }\n        }";
   }
 });
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
-var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h3 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h4 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
 var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var Carousel = function Carousel(_ref) {
@@ -4144,7 +4178,7 @@ var Carousel = function Carousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(TitleWrapper, {
     "data-testid": "carousel-title-wrapper"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 3
+    level: 4
   }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 14,
     columnSpanDesktop: 2,
@@ -4468,7 +4502,7 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$B, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4;
+var _templateObject$B, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -4482,10 +4516,11 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$b ||
   var fullWidth = _ref2.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n"])));
-var TextContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
+var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
+var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
   var size = _ref3.size,
       primaryButtonTextLength = _ref3.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
@@ -4624,6 +4659,8 @@ var Card = function Card(_ref) {
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
   }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
+    level: size === 'small' ? 6 : 5
+  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
     level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {