@royaloperahouse/harmonic 0.18.2-e → 0.18.3-a

package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/harmonic.cjs.development.js

@@ -8,7 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
-var moment = _interopDefault(require('moment'));
+var dateFns = require('date-fns');
 var server = require('react-dom/server');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
@@ -4546,6 +4546,31 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
+var pad = function pad(num) {
+  return String(num || 0).padStart(2, '0');
+};
+var renderTimerValue = function renderTimerValue(value, label, separator) {
+  if (separator === void 0) {
+    separator = true;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
+    className: "harmonic-timer-value"
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium",
+    "data-testid": label
+  }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    className: "harmonic-timer-label"
+  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    color: "inherit",
+    size: "large"
+  }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium"
+  }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
+};
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
     title = _ref.title,
@@ -4554,43 +4579,22 @@ var Timer = function Timer(_ref) {
     bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
-  var _React$useState = React__default.useState('00'),
-    seconds = _React$useState[0],
-    setSeconds = _React$useState[1];
-  var _React$useState2 = React__default.useState('00'),
-    minutes = _React$useState2[0],
-    setMinutes = _React$useState2[1];
-  var _React$useState3 = React__default.useState('00'),
-    hours = _React$useState3[0],
-    setHours = _React$useState3[1];
-  var _React$useState4 = React__default.useState('00'),
-    days = _React$useState4[0],
-    setDays = _React$useState4[1];
-  var _React$useState5 = React__default.useState(false),
-    isEndDateReached = _React$useState5[0],
-    setIsEndDateReached = _React$useState5[1];
-  var renderTimerValue = function renderTimerValue(value, label, separator) {
-    if (separator === void 0) {
-      separator = true;
-    }
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
-      className: "harmonic-timer-value"
-    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
-      className: "harmonic-timer-label"
-    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
-      color: "inherit",
-      size: "large"
-    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
-  };
-  React__default.useEffect(function () {
+  var _useState = React.useState('00'),
+    seconds = _useState[0],
+    setSeconds = _useState[1];
+  var _useState2 = React.useState('00'),
+    minutes = _useState2[0],
+    setMinutes = _useState2[1];
+  var _useState3 = React.useState('00'),
+    hours = _useState3[0],
+    setHours = _useState3[1];
+  var _useState4 = React.useState('00'),
+    days = _useState4[0],
+    setDays = _useState4[1];
+  var _useState5 = React.useState(false),
+    isEndDateReached = _useState5[0],
+    setIsEndDateReached = _useState5[1];
+  React.useEffect(function () {
     if (isEndDateReached) return undefined;
     // We use this to set values for the timer immediately
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4598,19 +4602,21 @@ var Timer = function Timer(_ref) {
       return setInterval(fn, delay);
     };
     var updateValues = function updateValues() {
-      var futureDate = moment(endDate);
-      var nowDate = moment();
-      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
-      var difference = moment(differenceInMilliseconds).utc();
-      if (differenceInMilliseconds < 0) {
+      var futureDate = new Date(endDate);
+      var nowDate = new Date();
+      var diffInMs = futureDate.getTime() - nowDate.getTime();
+      if (diffInMs < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
-        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
-        var hoursDiff = difference.format('HH');
-        var minutesDiff = difference.format('mm');
-        var secondsDiff = difference.format('ss');
+        var duration = dateFns.intervalToDuration({
+          start: nowDate,
+          end: futureDate
+        });
+        var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
+        var hoursDiff = pad(duration.hours);
+        var minutesDiff = pad(duration.minutes);
+        var secondsDiff = pad(duration.seconds);
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4622,7 +4628,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = moment(endDate).isBefore(moment());
+  var hideTimer = dateFns.isPast(new Date(endDate));
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color