@royaloperahouse/harmonic 0.4.1-d → 0.4.1-f

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDropdownProps } from '../../../types/types';
-declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, }: IDropdownProps) => React.JSX.Element;
+declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, tabLinkId, }: IDropdownProps) => React.JSX.Element;
 export default Dropdown;

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, }: 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,13 +3734,17 @@ 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,
     withTextInMobile = _ref$withTextInMobile === void 0 ? true : _ref$withTextInMobile,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
+    color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
       onClick(titleLink);
@@ -3767,31 +3774,35 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     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;
@@ -3810,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,
@@ -4295,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,
@@ -5321,7 +5331,8 @@ var Dropdown = function Dropdown(_ref) {
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId;
   var node = React.useRef();
   var _useState = React.useState(false),
     open = _useState[0],
@@ -5417,6 +5428,7 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
       title: title,
       titleLink: titleLink,
       selected: titleSelected,
@@ -5494,7 +5506,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -8975,8 +8988,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);
 };
 
@@ -9014,8 +9027,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", {