@royaloperahouse/chord 2.1.3-chord-development → 2.1.4-a-chord-development

package/CHANGELOG.md

@@ -1,13 +1,3 @@
-## [2.1.3]
-- Navigation: make links links
-- Clear testing errors
-
-## [2.1.2]
-- TextField: include optional width param
-
-## [2.1.1]
-- AnchorTabBar: change grid, to move tabs to the center
-
 ## [2.1.0]
 - Convert Pagination to href instead of React Router Link
 

package/dist/chord.cjs.development.js

@@ -2441,8 +2441,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       tabIndex: 0,
       onBlur: function onBlur() {
         return handleOptionBlur(index);
-      },
-      href: optionItem.optionLink
+      }
     }, optionItem.option);
   })) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active,
@@ -4141,16 +4140,14 @@ var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_
 });
 var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
 var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
-var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), function (_ref2) {
-  var visibile = _ref2.visibile;
-  return visibile ? 'visible' : 'hidden';
+var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), function (props) {
+  return props.visibility ? 'visible' : 'hidden';
 }, zIndexes.search, devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), function (_ref3) {
-  var visibile = _ref3.visibile;
-  return visibile ? 'visible' : 'hidden';
+var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), function (props) {
+  return props.visibility ? 'visible' : 'hidden';
 }, zIndexes.search, devices.mobile);
-var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref4) {
-  var theme = _ref4.theme;
+var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref2) {
+  var theme = _ref2.theme;
   return theme.spacing[12];
 });
 var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 140px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 66px;\n  }\n\n  @media ", " {\n    height: 80px;\n\n    &&& .logoImg {\n      width: 100%;\n      height: 64px;\n    }\n  }\n"])), devices.mobile);
@@ -4582,8 +4579,7 @@ var Dropdown = function Dropdown(_ref) {
           return onKeyDownHandler(e, optionItem.optionLink);
         },
         colorPrimary: colorPrimary,
-        tabIndex: 0,
-        href: optionItem.optionLink
+        tabIndex: 0
       }, optionItem.option);
     })));
   };
@@ -5033,9 +5029,9 @@ var Navigation = function Navigation(_ref) {
     onShowMenu: onShowMenuHandler,
     colorPrimary: 'navigation'
   })))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
-    visibile: showSearch
+    visibility: showSearch
   }), /*#__PURE__*/React__default.createElement(GridItemSearch, {
-    visibile: showSearch,
+    visibility: showSearch,
     columnStartDesktop: 2,
     columnSpanDesktop: 14,
     columnStartDevice: 2,
@@ -6095,10 +6091,9 @@ var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$j |
 var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
-  return address.split(',').map(function (chunk, i) {
+  return address.split(',').map(function (chunk) {
     return /*#__PURE__*/React__default.createElement(BodyText, {
-      level: 1,
-      key: i
+      level: 1
     }, chunk.trim());
   });
 };
@@ -6717,7 +6712,7 @@ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_te
   return invert ? theme.colors.white : theme.colors.black;
 });
 
-var renderBranding = function renderBranding(brandingStyle, invert, brandingText) {
+var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
   var color = invert ? exports.Colors.Black : exports.Colors.White;
 
   switch (brandingStyle) {
@@ -6731,6 +6726,13 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
         }
       });
 
+    case 'TextLink':
+      return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(TextLink, {
+        target: 'blank',
+        href: brandingLink,
+        color: color
+      }, truncate(stripAllHtmlTags(brandingText), 25));
+
     case 'StreamLogo':
       return /*#__PURE__*/React__default.createElement(Logo, {
         color: color,
@@ -6754,17 +6756,19 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   var brandingStyle = _ref.brandingStyle,
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
-      brandingText = _ref.brandingText;
-  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText));
+      brandingText = _ref.brandingText,
+      brandingLink = _ref.brandingLink;
+  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
 var isIOS = function isIOS() {
   try {
-    if (typeof navigator === undefined) return false;
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === 'undefined') return false;
     return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
     navigator.userAgent.includes('Mac') && 'ontouchend' in document;
   } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
+    console.warn('Error checking if device is iOS.');
     return false;
   }
 }; // React hook version of isIOS
@@ -6787,7 +6791,7 @@ var isMobile = function isMobile() {
     if (typeof window === undefined) return false;
     return window.innerWidth < breakpoints.sm;
   } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
+    console.warn('Error checking if device is mobile.');
     return false;
   }
 }; // React hook version of isMobile
@@ -6888,8 +6892,9 @@ var CompactHeaderImage = function CompactHeaderImage(_ref2) {
 var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
   var video = _ref3.video,
       poster = _ref3.poster;
-
   // Renders fallback image if no video supplied
+  console.warn('video', video);
+
   if (!video.desktop && !video.mobile) {
     return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
   }
@@ -6916,7 +6921,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
       invert = _ref4$invert === void 0 ? false : _ref4$invert,
       _ref4$brandingStyle = _ref4.brandingStyle,
       brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
-      brandingText = _ref4.brandingText;
+      brandingText = _ref4.brandingText,
+      brandingLink = _ref4.brandingLink;
 
   var _ref5 = link || {},
       linkText = _ref5.text,
@@ -6948,6 +6954,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
     brandingStyle: brandingStyle,
     brandingText: brandingText,
+    brandingLink: brandingLink,
     invert: invert
   }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
     level: titleSize,