@royaloperahouse/chord 2.1.5-a-chord-development → 2.1.5-b-chord-development

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.1.4]
+- Fix screenreader accessibility for accordions
+
+## [2.1.3]
+- Navigation: make links links
+- Clear testing errors
+
 ## [2.1.2]
 - TextField: include optional width param
 

package/README.md

@@ -1,6 +1,6 @@
 # Royal Opera House Chord - Front End Design System
 
-Welcome to the Royal Opera House Front End Design System, `@royaloperahouse/chord`
+Welcome to The Royal Opera House Front End Design System, `@royaloperahouse/chord`
 
 This package is a library of UI components intended to be used in the ROH website.
 

package/dist/chord.cjs.development.js

@@ -1581,6 +1581,21 @@ var Twitter = (function (_ref) {
   }));
 });
 
+var X = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.7124 10.6179L20.4133 3H18.8254L13.007 9.61448L8.35992 3H3L10.0274 13.0023L3 20.9908H4.58799L10.7324 14.0056L15.6401 20.9908H21L13.7124 10.6179ZM11.5375 13.0904L10.8255 12.0944L5.16016 4.16911H7.59922L12.1712 10.5651L12.8832 11.5611L18.8262 19.8748H16.3871L11.5375 13.0904Z",
+    fill: color
+  }));
+});
+
 var Youtube = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -2135,6 +2150,7 @@ var IconLibrary = {
   UserSignedIn: UserSignedIn,
   Volume: Volume,
   Watch: Watch,
+  X: X,
   Youtube: Youtube
 };
 
@@ -2441,7 +2457,8 @@ 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,
@@ -4140,14 +4157,16 @@ 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 (props) {
-  return props.visibility ? '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 (_ref2) {
+  var visible = _ref2.visible;
+  return visible ? '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 (props) {
-  return props.visibility ? '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 (_ref3) {
+  var visible = _ref3.visible;
+  return visible ? '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 (_ref2) {
-  var theme = _ref2.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 (_ref4) {
+  var theme = _ref4.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);
@@ -4579,7 +4598,8 @@ var Dropdown = function Dropdown(_ref) {
           return onKeyDownHandler(e, optionItem.optionLink);
         },
         colorPrimary: colorPrimary,
-        tabIndex: 0
+        tabIndex: 0,
+        href: optionItem.optionLink
       }, optionItem.option);
     })));
   };
@@ -5029,9 +5049,9 @@ var Navigation = function Navigation(_ref) {
     onShowMenu: onShowMenuHandler,
     colorPrimary: 'navigation'
   })))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
-    visibility: showSearch
+    visible: showSearch
   }), /*#__PURE__*/React__default.createElement(GridItemSearch, {
-    visibility: showSearch,
+    visible: showSearch,
     columnStartDesktop: 2,
     columnSpanDesktop: 14,
     columnStartDevice: 2,
@@ -6100,9 +6120,10 @@ 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) {
+  return address.split(',').map(function (chunk, i) {
     return /*#__PURE__*/React__default.createElement(BodyText, {
-      level: 1
+      level: 1,
+      key: i
     }, chunk.trim());
   });
 };
@@ -6777,10 +6798,10 @@ var isIOS = function isIOS() {
     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.');
+    console.warn('Error checking if device is iOS.', e);
     return false;
   }
-}; // React hook version of isIOS
+}; // React hook version of isIOS (for server side rendering)
 
 
 var useIOS = function useIOS() {
@@ -6797,13 +6818,14 @@ var useIOS = function useIOS() {
 
 var isMobile = function isMobile() {
   try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
     if (typeof window === undefined) return false;
     return window.innerWidth < breakpoints.sm;
   } catch (e) {
-    console.warn('Error checking if device is mobile.');
+    console.warn('Error checking if device is mobile.', e);
     return false;
   }
-}; // React hook version of isMobile
+}; // React hook version of isMobile (for server side rendering)
 
 var useMobile = function useMobile() {
   var _useState2 = React.useState(false),
@@ -6901,8 +6923,6 @@ 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));