@royaloperahouse/chord 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## [0.4.1]
+- Swiper included as dependency
+- Fix for italics in Editorial, Card and PromoWithTitle components
+- Extra Props for AnchorTapBar
+
 ## [0.4.0]
 - Navigation Logo breaking change
 - Colors enum exported as in types

package/README.md

@@ -55,7 +55,7 @@ const App = ({ children }: InnerProps): React.ReactElement => (
 
 ## Components
 
-Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CinemaBadge, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, ImageWithCaption, Header, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags
+Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CinemaBadge, Colors, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, ImageWithCaption, Header, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags
 
 ## Types
 

package/dist/chord.cjs.development.js

@@ -98,7 +98,7 @@ var commonColors = {
 };
 var fontFamilies = {
   adobeGaramondPro: 'adobe-garamond-pro',
-  adobeGaramondProItalics: 'adobe-garamond-pro-italics',
+  adobeGaramondProItalics: 'adobe-garamond-pro',
   gothamSSmMedium: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
   gothamSSm: '"Gotham SSm A","Gotham SSm B","Montserrat",sans-serif',
   sabonNextLTProRegular: 'Sabon Next LT Pro Regular',
@@ -1990,8 +1990,6 @@ var Button = function Button(_ref) {
   })) : null, truncatedString);
 };
 
-var Colors;
-
 (function (Colors) {
   Colors["White"] = "white";
   Colors["Black"] = "black";
@@ -2006,7 +2004,7 @@ var Colors;
   Colors["Core"] = "core";
   Colors["Stream"] = "stream";
   Colors["Cinema"] = "cinema";
-})(Colors || (Colors = {}));
+})(exports.Colors || (exports.Colors = {}));
 
 (function (ThemeType) {
   ThemeType["Core"] = "core";
@@ -2017,11 +2015,11 @@ var Colors;
 var _templateObject$3;
 var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-", ");\n  border-color: var(--base-color-", ");\n"])), function (_ref) {
   var _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? Colors.Primary : _ref$bgColor;
+      bgColor = _ref$bgColor === void 0 ? exports.Colors.Primary : _ref$bgColor;
   return bgColor;
 }, function (_ref2) {
   var _ref2$bgColor = _ref2.bgColor,
-      bgColor = _ref2$bgColor === void 0 ? Colors.Primary : _ref2$bgColor;
+      bgColor = _ref2$bgColor === void 0 ? exports.Colors.Primary : _ref2$bgColor;
   return bgColor;
 });
 
@@ -2032,14 +2030,14 @@ var PrimaryButton = function PrimaryButton(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
-    color: Colors.White
+    color: exports.Colors.White
   }, props), children);
 };
 
 var _templateObject$4;
 var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-transparent);\n  border-color: var(--base-color-", ");\n"])), function (_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? Colors.Primary : _ref$color;
+      color = _ref$color === void 0 ? exports.Colors.Primary : _ref$color;
   return color;
 });
 
@@ -2050,7 +2048,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
-    color: Colors.Primary
+    color: exports.Colors.Primary
   }, props), children);
 };
 
@@ -2114,7 +2112,7 @@ var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject$8 || (_templ
 
 var StreamBadge = function StreamBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
-      fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor;
+      fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
     fillColor: fillColor,
     width: "100%",
@@ -2132,7 +2130,7 @@ var StreamBadge = function StreamBadge(_ref) {
 
 var CinemaBadge = function CinemaBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
-      fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor;
+      fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
     fillColor: fillColor,
     width: "100%",
@@ -2156,7 +2154,7 @@ var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$9 ||
 
 var SecondaryLogo = function SecondaryLogo(_ref) {
   var _ref$fillColor = _ref.fillColor,
-      fillColor = _ref$fillColor === void 0 ? Colors.White : _ref$fillColor;
+      fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor;
   return /*#__PURE__*/React__default.createElement(SecondaryLogoWrapper, {
     fillColor: fillColor,
     width: "100%",
@@ -2561,9 +2559,9 @@ var TabLink = function TabLink(_ref) {
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? Colors.DarkGrey : _ref$color,
+      color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
       _ref$hoverColor = _ref.hoverColor,
-      hoverColor = _ref$hoverColor === void 0 ? Colors.Primary : _ref$hoverColor,
+      hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
@@ -3425,7 +3423,7 @@ var SearchBar = function SearchBar(_ref) {
   })), showSearchLink && /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(SearchLinkContainer, {
     "data-testid": "search-button"
   }, /*#__PURE__*/React__default.createElement(TextLink, {
-    color: Colors.Core,
+    color: exports.Colors.Core,
     onClick: function onClick() {
       return onSearchHandler(searchValue);
     }
@@ -3436,7 +3434,7 @@ var SearchBar = function SearchBar(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow",
-    color: Colors.Core
+    color: exports.Colors.Core
   }))), /*#__PURE__*/React__default.createElement(SvgContainerClose, {
     onClick: onCloseHandler,
     "data-testid": "close-icon"
@@ -3703,10 +3701,12 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
 
   var tabs = _ref.tabs,
       title = _ref.title,
-      links = _ref.links;
+      links = _ref.links,
+      onTabClick = _ref.onTabClick,
+      activeTab = _ref.activeTab;
   var tabListRef = React.useRef(null);
 
-  var _useState = React.useState(''),
+  var _useState = React.useState(activeTab || ''),
       selectedItem = _useState[0],
       setSelectedItem = _useState[1];
 
@@ -3726,8 +3726,12 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     return id === selectedItem;
   };
 
-  var onClicktab = function onClicktab(id) {
-    return setSelectedItem(id);
+  var onClicktab = function onClicktab(e, id) {
+    if (onTabClick) {
+      onTabClick(e, id);
+    }
+
+    setSelectedItem(id);
   };
 
   React.useEffect(function () {
@@ -3747,7 +3751,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       });
 
       if (window.scrollY === 0) {
-        setSelectedItem('');
+        setSelectedItem(onTabClick ? selectedItem : '');
       } else if (reachedItem) {
         setSelectedItem(reachedItem.id);
       }
@@ -3819,8 +3823,8 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
       selected: isSelectedItem(id),
-      onClick: function onClick() {
-        return onClicktab(id);
+      onClick: function onClick(e) {
+        return onClicktab(e, id);
       }
     }, rest), text));
   })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, !scrollStart ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
@@ -4067,7 +4071,7 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$9 ||
   return fullWidth ? '0' : '20px';
 });
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__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$5 || (_templateObject6$5 = /*#__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    font-style: normal;\n  }\n"])));
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__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$3 || (_templateObject7$3 = /*#__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$3 || (_templateObject8$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,
@@ -4275,7 +4279,7 @@ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$f |
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
 var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$a || (_templateObject4$a = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__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: 0;\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    font-style: normal;\n  }\n"])));
+var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__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: 0;\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 Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -4365,8 +4369,8 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var coreLink = link && _extends({}, link, {
-    color: Colors.White,
-    bgColor: Colors.Black
+    color: exports.Colors.White,
+    bgColor: exports.Colors.Black
   });
 
   return /*#__PURE__*/React__default.createElement(Theme, {
@@ -4383,8 +4387,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   var cinemaLink = link && _extends({}, link, {
-    color: Colors.Black,
-    bgColor: Colors.White
+    color: exports.Colors.Black,
+    bgColor: exports.Colors.White
   });
 
   return /*#__PURE__*/React__default.createElement(Theme, {
@@ -4447,8 +4451,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollHref,
-    color: Colors.White,
-    hoverColor: Colors.White
+    color: exports.Colors.White,
+    hoverColor: exports.Colors.White
   }, "Scroll Down")) : null);
 };
 
@@ -4459,8 +4463,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var streamLink = link && _extends({}, link, {
-    color: Colors.Black,
-    bgColor: Colors.White
+    color: exports.Colors.Black,
+    bgColor: exports.Colors.White
   });
 
   return /*#__PURE__*/React__default.createElement(Theme, {
@@ -4530,7 +4534,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$a || (_templateObject5$a = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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: 0;\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    font-style: normal;\n  }\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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: 0;\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 ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
       primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,