@royaloperahouse/chord 2.1.2-b-RD-11510-snapshot → 2.1.2-test-rollback-dev-reset-test

package/CHANGELOG.md

@@ -42,6 +42,10 @@
 ## [1.24.0]
 - Implement Upsell Section & Upsell Cards
 
+## [1.23.2-b]
+- Add Stepper component
+- Fix solo negative sign NaN bug
+- 
 ## [1.23.2]
 - Fix BrandingStyle not showing bug
 
@@ -56,12 +60,15 @@
 - TickBox: Added disabled and error states
 
 ## [1.21.1]
-- Made select state reset behaviour opt-in
+- Compact PageHeading: Refactored to support iOS devices
 
 ## [1.21.0]
 - TextLogo: add new component
 - Compact PageHeading: swap logo with TextLogo to fix iOS issues
 
+## [1.20.2-a]
+- Made select state reset behaviour opt-in
+
 ## [1.20.2]
 - Card: change cursor to default for cards without buttons
 - HighlightsCarousel: hide button in case there are no text for them
@@ -97,7 +104,7 @@
 - Change to pagination component to align page numbers with URL numbers.
 
 ## [1.15.0]
-- Implemented a new Select component
+- Add Compact PageHeading component
 
 ## [1.14.0]
 - Added standfirst functionality to Accordion/ Accordions component and theme for Schools Platform
@@ -117,21 +124,55 @@
 ## [1.12.0]
 - Search: Extend ContentSummary and SearchBar components to support new search results
 
+## [1.11.0-a]
+- Pagination: add new component
+
 ## [1.11.0]
 - Carousels: Rewrite logic that cuts description, to support older browsers
 
+## [1.10.0-a]
+- ContentSummary: make image clickable
+
 ## [1.10.0]
 - PageHeadingImpact: Replace CSS background-image with HTML image element
 
 ## [1.9.0]
 - Card: Add a new prop for the hover line color
+## [1.9.0-c]
+- ContentSummary: make image clickable
+
+## [1.9.0-b]
+- ContentSummary: change image size
+- SearchBar: Export component
+
+## [1.9.0-a]
+- ContentSummary: change image props
+
+## [1.9.0]
+- Card: Add a new prop for the hover line color
+
+## [1.8.1-h]
+- ContentSummary: add exports
+
+## [1.8.1-g]
+- ContentSummary: refactor
+
+## [1.8.1-f]
+- ContentSummary: update conditional rendering
+
+## [1.8.1-c]
+- ContentSummary: update for Search results
+- ContentSummarySection: remove
+
+## [1.8.1-b]
+- Card: add new prop for the line color on hover
 
 ## [1.8.0]
 - SearchBar: Disable
 
 ## [1.7.2]
 - Add imageAltText to Card component
-
+ 
 ## [1.7.0]
 - Add new ContentSummary component
 - Add new ContentSummarySection component

package/dist/chord.cjs.development.js

@@ -2316,15 +2316,15 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
 
 var _templateObject$8, _templateObject2$2, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-black);\n  text-decoration: none;\n  text-transform: uppercase;\n  cursor: pointer;\n\n  &.active, :hover, :focus, :active {\n    border-bottom: 1px solid var(--base-color-", ");\n    color: var(--base-color-", ");\n    && svg path {\n      fill: var(--base-color-", ");\n    } \n  }\n"])), function (_ref) {
-  var activeColor = _ref.activeColor;
-  return activeColor;
-}, function (_ref2) {
-  var activeColor = _ref2.activeColor;
-  return activeColor;
-}, function (_ref3) {
-  var activeColor = _ref3.activeColor;
-  return activeColor;
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-black);\n  text-decoration: none;\n  text-transform: uppercase;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref) {
+  var active = _ref.active,
+      activeColor = _ref.activeColor;
+
+  if (active) {
+    return "\n      & {\n        border-bottom: 1px solid " + activeColor + ";\n        color: var(--base-color-" + activeColor + ");\n      }\n      && svg path {\n        fill: var(--base-color-" + activeColor + ");\n      } \n      ";
+  } else {
+    return '';
+  }
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
   as: 'a'
@@ -2420,8 +2420,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     activeColor: activeColor
   }, headerEvents, {
     tabIndex: 0,
-    "data-testid": "span-container",
-    className: active ? 'active' : ''
+    "data-testid": "span-container"
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -2442,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,
@@ -4142,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);
@@ -4583,8 +4579,7 @@ var Dropdown = function Dropdown(_ref) {
           return onKeyDownHandler(e, optionItem.optionLink);
         },
         colorPrimary: colorPrimary,
-        tabIndex: 0,
-        href: optionItem.optionLink
+        tabIndex: 0
       }, optionItem.option);
     })));
   };
@@ -5034,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,
@@ -5664,20 +5659,29 @@ var Accordion = function Accordion(_ref) {
     return visibleStandfirst ? /*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, visibleStandfirst)) : null;
   };
 
-  return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
+  var contentContainerId = title + "-accordion-content";
+  return /*#__PURE__*/React__default.createElement(AccordionContainer, {
+    tabIndex: 0,
+    onKeyDown: keyDown
+  }, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
     onClick: toggleAccordion,
-    onKeyDown: keyDown,
-    tabIndex: 0
+    tabIndex: -1,
+    role: "button",
+    "aria-label": title,
+    "aria-expanded": openAccordion,
+    "aria-controls": contentContainerId
   }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("a", {
     className: "accordion-title"
   }, title)), children && /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
-  })), /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
+  })), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
     ref: content,
     style: {
       maxHeight: "" + textHeight
-    }
+    },
+    id: contentContainerId,
+    "aria-live": "polite"
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
     style: childrenVisibility
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
@@ -6096,10 +6100,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());
   });
 };
@@ -6718,7 +6721,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) {
@@ -6732,6 +6735,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,
@@ -6755,17 +6765,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
@@ -6777,7 +6789,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   React.useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -6788,7 +6800,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
@@ -6889,8 +6901,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));
   }
@@ -6917,7 +6930,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,
@@ -6949,6 +6963,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,