@royaloperahouse/harmonic 0.19.2-a → 0.19.2-b

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.19.3]
+- Carousel title realignment following font change
+
+## [0.19.2]
+- Migrated from moment.js 2.29.4 to date-fn 4.1.0
+
 ## [0.19.1]
 - CastFilter: fix the focus behavior of the rotator button
 

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);
@@ -4638,6 +4638,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,
@@ -4646,43 +4671,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) {
@@ -4690,19 +4694,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);
@@ -4714,7 +4720,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
@@ -12161,7 +12167,7 @@ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$f || (_t
   var withShadow = _ref7.withShadow;
   return withShadow && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pointer-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
+var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pinter-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
   var disabled = _ref8.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref9) {
@@ -12207,7 +12213,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       onTabClick(e, id);
     }
     setSelectedItem(id);
-    var clickedTab = document.getElementById("tablink-" + id);
+    var clickedTab = document.getElementById("tablink-" + selectedItem);
     if (clickedTab) {
       clickedTab.focus();
     }