@royaloperahouse/chord 1.18.0 → 1.18.1-b-chord-development

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [1.18.1]
+- Fix iOS exception on VideoControls
+
 ## [1.18.0]
 - Add Compact PageHeading component
 
@@ -16,7 +19,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
@@ -36,21 +39,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

@@ -3500,8 +3500,28 @@ var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1
 }, trackStyles, trackStyles, trackStyles, trackStyles, trackStyles, thumbStyes, thumbStyes, thumbStyes);
 
 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;
+  try {
+    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.');
+    return false;
+  }
+}; // React hook version of isIOS
+
+
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+      IOS = _useState[0],
+      setIOS = _useState[1];
+
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
 };
 
 var VideoControls = function VideoControls(_ref) {
@@ -3523,12 +3543,12 @@ var VideoControls = function VideoControls(_ref) {
       volume = _React$useState3[0],
       setVolume = _React$useState3[1];
 
+  var isIOS = useIOS();
+
   var getVideoElement = function getVideoElement() {
     return document.querySelector("#" + videoElementId);
-  }; // iOS disables javacript manipulation of video volume so we need to hide the slider and tweak the UI to accomodate
-
+  };
 
-  var iOS = isIOS();
   var handlePlay = React.useCallback(function () {
     var video = getVideoElement();
     if (!video) return;
@@ -3581,7 +3601,7 @@ var VideoControls = function VideoControls(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: !playing ? 'Play' : 'Pause'
   })), /*#__PURE__*/React__default.createElement(VolumeControlsWrapper, {
-    volumeHidden: iOS
+    volumeHidden: isIOS
   }, /*#__PURE__*/React__default.createElement(VideoMute, {
     id: "mute",
     className: "video-mute-button",
@@ -3592,7 +3612,7 @@ var VideoControls = function VideoControls(_ref) {
     "data-testid": "mute-icon",
     iconName: muted ? 'Muted' : 'Volume',
     color: "white"
-  })), !iOS && /*#__PURE__*/React__default.createElement(VideoVolume, {
+  })), !isIOS && /*#__PURE__*/React__default.createElement(VideoVolume, {
     id: "vol-control",
     type: "range",
     min: "0",
@@ -3657,12 +3677,12 @@ var _templateObject$t;
 var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 16px;\n  justify-content: flex-end;\n  height: 26px;\n\n  @media ", " {\n    column-gap: 8px;\n  }\n"])), devices.mobile);
 
 var _templateObject$u, _templateObject2$f, _templateObject3$9, _templateObject4$5;
-var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
   if (selected) {
-    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }       \n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+    return "\n        border-bottom: 1px solid var(--base-color-" + colorPrimary + ");\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
   }
 
   return '';
@@ -3675,10 +3695,37 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_te
 }, function (_ref4) {
   var colorPrimary = _ref4.colorPrimary;
   return colorPrimary;
+}, function (_ref5) {
+  var isActive = _ref5.isActive,
+      colorPrimary = _ref5.colorPrimary;
+
+  if (isActive) {
+    return "\n        && a {\n          color: var(--base-color-" + colorPrimary + ");\n        }\n        && svg path {\n          fill: var(--base-color-" + colorPrimary + ");\n        }\n      ";
+  }
+
+  return '';
 });
 var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
-var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
+
+var checkTimeRed = function checkTimeRed(seconds) {
+  if (seconds <= 0) {
+    return false;
+  }
+
+  return seconds / 60 <= 5;
+};
+var formatTime = function formatTime(seconds) {
+  if (seconds > 60) {
+    return Math.ceil(seconds / 60) + " mins";
+  }
+
+  return seconds + " sec" + (seconds === 1 ? '' : 's');
+};
+var initSeconds = function initSeconds(expiryDate) {
+  return expiryDate ? Math.ceil((new Date(expiryDate).getTime() - new Date().getTime()) / 1000) : 0;
+};
 
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
@@ -3689,7 +3736,28 @@ var Basket$1 = function Basket(_ref) {
       numItems = _ref$numItems === void 0 ? 0 : _ref$numItems,
       onClick = _ref.onClick,
       _ref$colorPrimary = _ref.colorPrimary,
-      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
+      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary,
+      expiryDate = _ref.expiryDate;
+
+  var _useState = React.useState(numItems),
+      basketItems = _useState[0],
+      setBasketItems = _useState[1];
+
+  var _useState2 = React.useState(initSeconds(expiryDate)),
+      seconds = _useState2[0],
+      setSeconds = _useState2[1];
+
+  var _useState3 = React.useState(formatTime(seconds)),
+      countdownText = _useState3[0],
+      setCountdownText = _useState3[1];
+
+  var _useState4 = React.useState(),
+      timer = _useState4[0],
+      setTimer = _useState4[1];
+
+  var _useState5 = React.useState(checkTimeRed(seconds)),
+      isActive = _useState5[0],
+      setIsActive = _useState5[1];
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
@@ -3703,12 +3771,42 @@ var Basket$1 = function Basket(_ref) {
     }
   };
 
-  var empty = numItems <= 0;
+  React.useEffect(function () {
+    if (timer) {
+      clearInterval(timer); // clears the old timer before setting a new one
+    }
+
+    if (!expiryDate || !numItems) return;
+    var interval = setInterval(function () {
+      setSeconds(function (prev) {
+        return prev - 1;
+      });
+    }, 1000);
+    setTimer(interval);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [expiryDate]);
+  React.useEffect(function () {
+    if (!timer) return;
+
+    if (seconds > 0) {
+      setCountdownText(formatTime(seconds));
+      setIsActive(checkTimeRed(seconds));
+    } else {
+      clearInterval(timer);
+      setBasketItems(0);
+      setCountdownText('');
+      setIsActive(false);
+    }
+  }, [seconds, timer]);
+  var empty = basketItems <= 0;
   return /*#__PURE__*/React__default.createElement(BasketContainer, {
     selected: selected,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
     colorPrimary: colorPrimary,
+    isActive: isActive,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(SvgContainer, null, empty ? /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Basket"
@@ -3716,9 +3814,9 @@ var Basket$1 = function Basket(_ref) {
     iconName: "BasketFull"
   }), /*#__PURE__*/React__default.createElement(NumContainer, null, /*#__PURE__*/React__default.createElement("span", {
     className: "basket-num"
-  }, numItems)))), /*#__PURE__*/React__default.createElement("div", null, !empty ? /*#__PURE__*/React__default.createElement(BasketText, {
+  }, basketItems)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BasketText, {
     "data-testid": "baskettext"
-  }, text) : ''));
+  }, expiryDate ? countdownText : text)));
 };
 
 var _templateObject$v, _templateObject2$g;