@royaloperahouse/harmonic 0.4.1-e → 0.4.1-g

package/dist/components/atoms/Tab/Tab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, withIcon, withTextInMobile, className, role, ariaLabel, tabLinkId, }: ITabProps) => React.JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, className, role, ariaLabel, tabLinkId, color, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/harmonic.cjs.development.js

@@ -3696,7 +3696,10 @@ var Sponsorship = function Sponsorship(_ref) {
 };
 
 var _templateObject$k, _templateObject2$c;
-var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(9ch + 1px);\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (props) {
+var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n  color: ", ";\n\n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (_ref) {
+  var color = _ref.color;
+  return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
+}, function (props) {
   if (props.withIcon === 'left') {
     return "margin-left: 5px;";
   }
@@ -3707,8 +3710,8 @@ var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_te
     return "\n      flex-direction: row-reverse;\n      svg {\n        margin-right: 6px;\n      }";
   }
   return "\n      svg {\n          margin-left: 6px;\n      }";
-}, function (_ref) {
-  var selected = _ref.selected;
+}, function (_ref2) {
+  var selected = _ref2.selected;
   if (selected) {
     return "\n        cursor: pointer;\n        && a {\n          color: var(--color-primary-red);\n        } \n        && svg path {\n          fill: var(--color-primary-red);\n        } \n      ";
   }
@@ -3731,6 +3734,8 @@ var Tab = function Tab(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     _ref$iconName = _ref.iconName,
     iconName = _ref$iconName === void 0 ? 'DropdownArrow' : _ref$iconName,
+    _ref$iconDirection = _ref.iconDirection,
+    iconDirection = _ref$iconDirection === void 0 ? 'down' : _ref$iconDirection,
     _ref$withIcon = _ref.withIcon,
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     _ref$withTextInMobile = _ref.withTextInMobile,
@@ -3738,7 +3743,8 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId;
+    tabLinkId = _ref.tabLinkId,
+    color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
       onClick(titleLink);
@@ -3769,31 +3775,34 @@ var Tab = function Tab(_ref) {
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
     id: tabLinkId,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
+    direction: iconDirection,
     iconName: iconName,
     "aria-hidden": "true"
   }));
 };
 
 var _templateObject$l, _templateObject2$d;
-var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-sans);\n  font-size: var(--harmonic-font-size-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation)\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--base-color-", ");\n      border-bottom: 1px solid var(--base-color-", ");\n\n      && svg path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
+var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n\n  && svg path {\n    fill: ", ";\n  }\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--color-", ");\n      border-bottom: 1px solid var(--color-", ");\n\n      && svg path {\n        fill: var(--color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
   var selected = _ref2.selected,
     color = _ref2.color,
     hoverColor = _ref2.hoverColor;
-  return selected ? "var(--base-color-" + hoverColor + ")" : "var(--base-color-" + color + ")";
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, function (_ref3) {
   var selected = _ref3.selected,
     hoverColor = _ref3.hoverColor;
-  return selected ? "1px solid var(--base-color-" + hoverColor + ")" : '1px solid transparent';
+  return selected ? "1px solid var(--color-" + hoverColor + ")" : '1px solid transparent';
 }, function (_ref4) {
   var selected = _ref4.selected,
-    hoverColor = _ref4.hoverColor;
-  return selected ? "&& svg path {\n    fill: var(--base-color-" + hoverColor + ");\n  }" : '';
+    hoverColor = _ref4.hoverColor,
+    color = _ref4.color;
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, devices.desktop, devices.largeDesktop, function (_ref5) {
   var hoverColor = _ref5.hoverColor;
   return hoverColor;
@@ -3812,9 +3821,9 @@ var TabLink = function TabLink(_ref) {
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
+    color = _ref$color === void 0 ? ThemeColor['base-dark-grey'] : _ref$color,
     _ref$hoverColor = _ref.hoverColor,
-    hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
@@ -4297,9 +4306,8 @@ var Tickbox = function Tickbox(_ref) {
     role: "checkbox",
     "aria-checked": selected ? 'true' : 'false',
     "aria-labelledby": dataLabel
-  }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "medium"
   }, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
     type: "checkbox",
     checked: selected,
@@ -5010,14 +5018,17 @@ var useMobile = function useMobile() {
   return mobile;
 };
 var useViewport = function useViewport() {
-  var _useState3 = React.useState({
-      width: typeof window !== 'undefined' ? window.innerWidth : 0,
-      isMobile: typeof window !== 'undefined' ? window.innerWidth < breakpoints.sm : false,
-      isTablet: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md : false,
-      isDesktop: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.md : false
+  var _useState3 = React.useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = React.useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
     }),
-    viewport = _useState3[0],
-    setViewport = _useState3[1];
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
   React.useEffect(function () {
     if (typeof window === 'undefined') return undefined;
     var handleResize = function handleResize() {
@@ -5029,12 +5040,15 @@ var useViewport = function useViewport() {
       });
     };
     handleResize();
+    setHydrated(true);
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return viewport;
+  return _extends({}, viewport, {
+    hydrated: hydrated
+  });
 };
 
 var SocialLinks = function SocialLinks(_ref) {
@@ -8980,8 +8994,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollHref,
-    color: exports.Colors.White,
-    hoverColor: exports.Colors.White
+    color: ThemeColor['base-white'],
+    hoverColor: ThemeColor['base-white']
   }, "Scroll Down"))) : null);
 };
 
@@ -9019,8 +9033,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollTo,
-    color: color === exports.Colors.White ? exports.Colors.Black : exports.Colors.White,
-    hoverColor: color === exports.Colors.White ? exports.Colors.Black : exports.Colors.White
+    color: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white'],
+    hoverColor: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white']
   }, "Scroll Down")))), hasImage && (/*#__PURE__*/React__default.createElement(RightPanel, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
@@ -9184,10 +9198,12 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
     additionalLink = _ref.additionalLink,
     image = _ref.image;
   var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile;
+    isMobile = _useViewport.isMobile,
+    hydrated = _useViewport.hydrated;
   var showImageButton = !title && !badge && !additionalLink && !isMobile;
   var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
   var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  if (!hydrated) return null;
   return /*#__PURE__*/React__default.createElement(Wrapper$5, {
     className: className
   }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {