@royaloperahouse/harmonic 0.4.1-c → 0.4.1-e

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, withIcon, withTextInMobile, className, role, ariaLabel, tabLinkId, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/harmonic.cjs.development.js

@@ -3737,7 +3737,8 @@ var Tab = function Tab(_ref) {
     withTextInMobile = _ref$withTextInMobile === void 0 ? true : _ref$withTextInMobile,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId;
   var clickHandler = function clickHandler() {
     if (onClick) {
       onClick(titleLink);
@@ -3767,6 +3768,7 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
+    id: tabLinkId,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -5321,7 +5323,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 +5420,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 +5498,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -9047,7 +9052,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
 var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    \n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n"])), zIndexes.sponsorship, devices.mobileAndTablet, devices.tablet);
+var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
 var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
 var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;