@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/GlobalNavigationBar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\n\r\nconst LinkStyling = css`\r\n  &:focus {\r\n    background: ${COLORS.primary_500};\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n  }\r\n`;\r\n\r\nconst ImageStyling = css`\r\n  &:hover {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active {\r\n    background: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\r\n  text-decoration: none;\r\n\r\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  &:focus-within {\r\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\r\n  }\r\n`;\r\n\r\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\r\n  background-color: ${(props) => props.$color};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\r\n  height: ${(props) => (props.size ? props.size : 48)}px;\r\n  width: ${(props) => (props.size ? props.size : 48)}px;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\r\n`;\r\n\r\nconst AvatarLetter = styled.div<{ size: number }>`\r\n  font-size: ${(props) => props.size / 2 - 2}px;\r\n  color: white;\r\n  font-weight: bold;\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\r\n`;\r\n\r\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\r\n  flex-direction: column;\r\n  align-self: center;\r\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\r\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\r\n  }\r\n`;\r\n\r\ninterface AvatarProps {\r\n  firstName: string;\r\n  lastName: string;\r\n  size: number;\r\n  color: string;\r\n  profileMenuLink: string;\r\n  useInteractionStyling?: boolean;\r\n}\r\n\r\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\r\n  return (\r\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\r\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\r\n        <AvatarLetter data-hj-suppress size={size}>\r\n          {firstName[0]}\r\n          {lastName[0]}\r\n        </AvatarLetter>\r\n      </AvatarImage>\r\n    </AvatarLink>\r\n  );\r\n};\r\n\r\nexport default Avatar;\r\n"],"file":"Avatar.js"}

package/dist/js/GlobalNavigationBar/ExtendedMainMenu.d.ts

@@ -0,0 +1,7 @@
+import { NavOption } from '../types';
+declare type Props = {
+    clickMenuAction: () => void;
+    navigationOptions: NavOption[];
+};
+declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => JSX.Element;
+export default ExtendedMainMenu;

package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Tabs = require("../Tabs");
+
+var _ = require("..");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var flowDown = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+
+var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n"])), _styles.COLORS.white, flowDown, flowDown, _zIndexes.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+
+var MenuSection = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), _styles.COLORS.neutral_100);
+
+var MenuSectionList = _styledComponents.default.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0 2px;\n"])));
+
+var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      entries = _React$useState2[0],
+      setEntries = _React$useState2[1];
+
+  React.useEffect(function () {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  React.useEffect(function () {
+    var list = navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (n) {
+      return {
+        requiredLine: n.label,
+        to: n.to,
+        disabled: n.disabled,
+        onClick: n.onClick,
+        exact: n.exact
+      };
+    });
+    setEntries(list);
+  }, [navigationOptions]);
+  return /*#__PURE__*/React.createElement(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton"
+  }, /*#__PURE__*/React.createElement(MenuSection, null, /*#__PURE__*/React.createElement(MenuSectionList, null, /*#__PURE__*/React.createElement(_Tabs.VerticalTabs, {
+    key: "ExtendedMenu",
+    entries: entries,
+    size: _.Size.Medium
+  }))));
+};
+
+ExtendedMainMenu.propTypes = {
+  clickMenuAction: _propTypes.default.func.isRequired,
+  navigationOptions: _propTypes.default.array.isRequired
+};
+var _default = ExtendedMainMenu;
+exports.default = _default;
+//# sourceMappingURL=ExtendedMainMenu.js.map

package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Size","Medium"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,QAAQ,OAAGC,2BAAH,sMAAd;;AAWA,IAAMC,IAAI,GAAGC,0BAAOC,EAAV,kiBAIYC,eAAOC,KAJnB,EASaN,QATb,EAUKA,QAVL,EAcGO,oBAAUC,QAdb,EAiBNC,oBAAYC,KAjBN,EAoBND,oBAAYE,MApBN,CAAV;;AA6BA,IAAMC,WAAW,GAAGT,0BAAOU,EAAV,sYAOCR,eAAOS,WAPR,CAAjB;;AAqBA,IAAMC,eAAe,GAAGZ,0BAAOC,EAAV,+HAArB;;AAWA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BC,KAAK,CAACC,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaAE,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGZ,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEa,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACZ,iBAAD,CALH;AAOA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB;AAA5D,kBACE,oBAAC,WAAD,qBACE,oBAAC,eAAD,qBACE,oBAAC,kBAAD;AAAc,IAAA,GAAG,EAAC,cAAlB;AAAiC,IAAA,OAAO,EAAEI,OAA1C;AAAmD,IAAA,IAAI,EAAEkB,OAAKC;AAA9D,IADF,CADF,CADF,CADF;AASD,CA/BD;;;AAJEvB,EAAAA,e;AACAC,EAAAA,iB;;eAoCaF,gB","sourcesContent":["import * as React from 'react';\r\nimport styled, { keyframes } from 'styled-components';\r\n\r\nimport { NavOption } from '../types';\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { VerticalTabs } from '../Tabs';\r\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\r\nimport { Size } from '..';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nconst Menu = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  display: none;\r\n  right: -8px;\r\n  min-width: 300px;\r\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\r\n  animation: ${flowDown} 0.2s ease-in-out;\r\n  position: absolute;\r\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  z-index: ${Z_INDEXES.dropdown};\r\n\r\n  top: 12px;\r\n  ${BREAKPOINTS.SMALL} {\r\n    top: 18px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    top: 24px;\r\n  }\r\n\r\n  .open & {\r\n    display: block;\r\n  }\r\n`;\r\n\r\nconst MenuSection = styled.li`\r\n  padding: 8px 0;\r\n  position: relative;\r\n\r\n  &:not(:first-of-type)::before {\r\n    content: '';\r\n    position: absolute;\r\n    background: ${COLORS.neutral_100};\r\n    height: 1px;\r\n    top: 0;\r\n    left: 16px;\r\n    right: 16px;\r\n  }\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nconst MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0 2px;\r\n`;\r\n\r\ntype Props = {\r\n  clickMenuAction: () => void;\r\n  navigationOptions: NavOption[];\r\n};\r\n\r\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\r\n  const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\r\n  React.useEffect(() => {\r\n    function handleKeyPress(e: any) {\r\n      if (e.keyCode === 27) {\r\n        clickMenuAction();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyPress, false);\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyPress, false);\r\n    };\r\n  }, [clickMenuAction]);\r\n\r\n  React.useEffect(() => {\r\n    const list = navigationOptions?.map(n => {\r\n      return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\r\n    }) as VerticalTabEntry[];\r\n    setEntries(list);\r\n  }, [navigationOptions]);\r\n\r\n  return (\r\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n      <MenuSection>\r\n        <MenuSectionList>\r\n          <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\r\n        </MenuSectionList>\r\n      </MenuSection>\r\n    </Menu>\r\n  );\r\n};\r\n\r\nexport default ExtendedMainMenu;\r\n"],"file":"ExtendedMainMenu.js"}

package/dist/js/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';
+declare type Props = {
+    name?: string;
+    mainNavigationOptions?: NavOption[];
+    secondaryNavigationOptions?: NavOption[];
+    secondaryButton?: NavButton;
+    actions?: ActionOptions;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    organizationName?: string;
+    signout?: (e: any) => void;
+    isAuthenticated?: boolean;
+    mobileActions?: ActionOptions;
+    notifications?: NavOption[];
+    switcherAction?: () => void;
+    reverseRightSideOrder?: boolean;
+    showBetaTag?: boolean;
+    accountSection?: UserMenuItem[];
+    organizationSection?: UserMenuItem[];
+    supportSection?: UserMenuItem[];
+    accountMenuHeader?: string;
+    signOutLabel?: string;
+    useUserMenu?: boolean;
+    trackLogoClick?: () => void;
+    mainLogoTo?: string;
+    testId?: string;
+    useMaxWidth?: boolean;
+};
+/**
+ * @param props
+ * @constructor
+ * @description This component is a global navigation header bar
+ */
+declare const GlobalNavigationBar: ({ name, mainNavigationOptions, secondaryNavigationOptions, secondaryButton, actions, firstName, lastName, email, organizationName, signout, isAuthenticated, mobileActions, notifications, switcherAction, reverseRightSideOrder, showBetaTag, accountSection, organizationSection, supportSection, accountMenuHeader, signOutLabel, useUserMenu, mainLogoTo, trackLogoClick, testId, useMaxWidth, }: Props) => React.ReactElement<Props>;
+export default GlobalNavigationBar;

package/dist/js/GlobalNavigationBar/GlobalNavigationBar.js

@@ -0,0 +1,296 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Logo = _interopRequireDefault(require("./Logo"));
+
+var _MainMenu = _interopRequireDefault(require("./MainMenu"));
+
+var _Actions = _interopRequireDefault(require("./Actions"));
+
+var _Layouts = require("../Layouts");
+
+var _styles = require("../styles");
+
+var _RightSideNav = _interopRequireDefault(require("./RightSideNav"));
+
+var _MobileMenu = _interopRequireDefault(require("./mobile/MobileMenu"));
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _UserMenu = _interopRequireDefault(require("./UserMenu/UserMenu"));
+
+var _useClickOutside = _interopRequireDefault(require("../hooks/useClickOutside"));
+
+var _CommonStyles = require("./mobile/CommonStyles");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  border-bottom: 1px solid ", ";\n  \n  z-index: ", ";\n  position: relative;\n  \n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), _styles.COLORS.neutral_200, _zIndexes.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+
+var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+
+var RightSide = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: 0 0 0 auto;\n"])));
+
+var MenuWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: ", ";\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow-y: hidden;\n  bottom: 0;\n  right: 0;\n  z-index: ", ";\n"])), function (props) {
+  return props.isVisible ? 'flex' : 'none';
+}, _zIndexes.Z_INDEXES.backdrop);
+
+var UserMenuWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  margin-left: ", ";\n  position: absolute;\n  right: ", ";\n  top: 56px;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
+  return props.floatRight ? 'auto' : 'unset';
+}, function (props) {
+  return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
+}, _styles.COLORS.white);
+
+var HamburgerButton = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border-width: 0;\n  background-color: ", ";\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n  ", " {\n    height: 64px;\n  }\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.MEDIUM);
+
+/**
+ * @param props
+ * @constructor
+ * @description This component is a global navigation header bar
+ */
+var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
+  var _document2, _document2$getElement, _document2$getElement2;
+
+  var name = _ref.name,
+      mainNavigationOptions = _ref.mainNavigationOptions,
+      secondaryNavigationOptions = _ref.secondaryNavigationOptions,
+      secondaryButton = _ref.secondaryButton,
+      actions = _ref.actions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      organizationName = _ref.organizationName,
+      signout = _ref.signout,
+      isAuthenticated = _ref.isAuthenticated,
+      mobileActions = _ref.mobileActions,
+      notifications = _ref.notifications,
+      switcherAction = _ref.switcherAction,
+      _ref$reverseRightSide = _ref.reverseRightSideOrder,
+      reverseRightSideOrder = _ref$reverseRightSide === void 0 ? false : _ref$reverseRightSide,
+      showBetaTag = _ref.showBetaTag,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      accountMenuHeader = _ref.accountMenuHeader,
+      signOutLabel = _ref.signOutLabel,
+      useUserMenu = _ref.useUserMenu,
+      mainLogoTo = _ref.mainLogoTo,
+      trackLogoClick = _ref.trackLogoClick,
+      testId = _ref.testId,
+      _ref$useMaxWidth = _ref.useMaxWidth,
+      useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showMenu = _React$useState2[0],
+      setShowMenu = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      showUserMenu = _React$useState4[0],
+      setShowUserMenu = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      showMobileUserMenu = _React$useState6[0],
+      setShowMobileUserMenu = _React$useState6[1];
+
+  var menuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var rightSideRef = React.useRef(null);
+
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      avatarRight = _React$useState8[0],
+      setAvatarRight = _React$useState8[1];
+
+  var handleClickMenuAction = function handleClickMenuAction() {
+    setShowMenu(false);
+  };
+
+  (0, _useClickOutside.default)(userMenuRef, function () {
+    return showUserMenu ? setShowUserMenu(false) : null;
+  });
+  (0, _useClickOutside.default)(menuRef, function () {
+    if (showMenu) {
+      setShowMobileUserMenu(false);
+      setShowMenu(false);
+    }
+  });
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      var _document, _document$getElementB, _document$getElementB2;
+
+      var right = (_document = document) === null || _document === void 0 ? void 0 : (_document$getElementB = _document.getElementById('avatarContainer')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.getBoundingClientRect()) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.right;
+
+      if (right) {
+        setAvatarRight(right);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_document2 = document) === null || _document2 === void 0 ? void 0 : (_document2$getElement = _document2.getElementById('avatarContainer')) === null || _document2$getElement === void 0 ? void 0 : (_document2$getElement2 = _document2$getElement.getBoundingClientRect()) === null || _document2$getElement2 === void 0 ? void 0 : _document2$getElement2.right]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(_Layouts.PageWidth, {
+    useMaxWidth: useMaxWidth
+  }, /*#__PURE__*/React.createElement(RowLayout, null, /*#__PURE__*/React.createElement(_Logo.default, {
+    name: name || '',
+    showBetaTag: showBetaTag,
+    onClick: trackLogoClick,
+    to: mainLogoTo
+  }), isAuthenticated && /*#__PURE__*/React.createElement(_MainMenu.default, {
+    navigationOptions: mainNavigationOptions || [],
+    rightSideRef: rightSideRef
+  }), /*#__PURE__*/React.createElement(RightSide, {
+    className: "GlobalNavigationRightSide",
+    ref: rightSideRef
+  }, reverseRightSideOrder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Actions.default, {
+    actions: actions,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    hideOnLowWidth: true,
+    useUserMenu: useUserMenu,
+    setShowUserMenu: setShowUserMenu
+  }), /*#__PURE__*/React.createElement(_RightSideNav.default, {
+    navigationOptions: secondaryNavigationOptions,
+    secondaryButton: secondaryButton
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_RightSideNav.default, {
+    navigationOptions: secondaryNavigationOptions,
+    secondaryButton: secondaryButton
+  }), /*#__PURE__*/React.createElement(_Actions.default, {
+    actions: actions,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    hideOnLowWidth: true,
+    useUserMenu: useUserMenu,
+    setShowUserMenu: setShowUserMenu
+  })), /*#__PURE__*/React.createElement(HamburgerButton, {
+    onClick: function onClick() {
+      return setShowMenu(!showMenu);
+    },
+    hidden: !isAuthenticated
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Menu, {
+    size: "24px"
+  })))))), /*#__PURE__*/React.createElement(MenuWrapper, {
+    className: showMenu ? 'open' : 'closed',
+    isVisible: showMenu
+  }, /*#__PURE__*/React.createElement(_CommonStyles.Menu, {
+    ref: menuRef,
+    onClick: function onClick() {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton"
+  }, /*#__PURE__*/React.createElement(_MobileMenu.default, {
+    name: name || '',
+    clickMenuAction: function clickMenuAction() {
+      setShowMobileUserMenu(false);
+      handleClickMenuAction();
+    },
+    navigationOptions: mainNavigationOptions || [],
+    secondaryNavigationOptions: secondaryNavigationOptions,
+    secondaryButton: secondaryButton,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    email: email || '',
+    signout: signout,
+    notifications: notifications,
+    actions: mobileActions,
+    switcherAction: switcherAction,
+    isAuthenticated: isAuthenticated,
+    accountSection: accountSection || [],
+    organizationSection: organizationSection || [],
+    supportSection: supportSection || [],
+    accountMenuHeader: accountMenuHeader || '',
+    signOutLabel: signOutLabel || '',
+    organizationName: organizationName || '',
+    useUserMenu: useUserMenu,
+    showUserMenu: showMobileUserMenu,
+    setShowUserMenu: setShowMobileUserMenu
+  }))), useUserMenu && /*#__PURE__*/React.createElement(UserMenuWrapper, {
+    ref: userMenuRef,
+    className: showUserMenu ? 'open' : 'closed',
+    floatRight: false,
+    offsetRight: avatarRight,
+    "data-testid": "testUserMenuWrapper"
+  }, /*#__PURE__*/React.createElement(_UserMenu.default, {
+    firstName: firstName || '',
+    lastName: lastName || '',
+    email: email || '',
+    organizationName: organizationName || '',
+    clickMenuAction: function clickMenuAction() {
+      return setShowUserMenu(false);
+    },
+    accountSection: accountSection,
+    organizationSection: organizationSection,
+    supportSection: supportSection,
+    signOut: signout,
+    signOutLabel: signOutLabel || ''
+  })));
+};
+
+GlobalNavigationBar.propTypes = {
+  name: _propTypes.default.string,
+  mainNavigationOptions: _propTypes.default.array,
+  secondaryNavigationOptions: _propTypes.default.array,
+  firstName: _propTypes.default.string,
+  lastName: _propTypes.default.string,
+  email: _propTypes.default.string,
+  organizationName: _propTypes.default.string,
+  signout: _propTypes.default.func,
+  isAuthenticated: _propTypes.default.bool,
+  notifications: _propTypes.default.array,
+  switcherAction: _propTypes.default.func,
+  reverseRightSideOrder: _propTypes.default.bool,
+  showBetaTag: _propTypes.default.bool,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  accountMenuHeader: _propTypes.default.string,
+  signOutLabel: _propTypes.default.string,
+  useUserMenu: _propTypes.default.bool,
+  trackLogoClick: _propTypes.default.func,
+  mainLogoTo: _propTypes.default.string,
+  testId: _propTypes.default.string,
+  useMaxWidth: _propTypes.default.bool
+};
+var _default = GlobalNavigationBar;
+exports.default = _default;
+//# sourceMappingURL=GlobalNavigationBar.js.map

package/dist/js/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","MEDIUM","RowLayout","div","RightSide","MenuWrapper","props","isVisible","backdrop","UserMenuWrapper","white","floatRight","offsetRight","window","innerWidth","HamburgerButton","button","GlobalNavigationBar","name","mainNavigationOptions","secondaryNavigationOptions","secondaryButton","actions","firstName","lastName","email","organizationName","signout","isAuthenticated","mobileActions","notifications","switcherAction","reverseRightSideOrder","showBetaTag","accountSection","organizationSection","supportSection","accountMenuHeader","signOutLabel","useUserMenu","mainLogoTo","trackLogoClick","testId","useMaxWidth","React","useState","showMenu","setShowMenu","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,MAAV,mYAEUC,eAAOC,WAFjB,EAINC,oBAAUC,WAJJ,EASfC,oBAAYC,KATG,EAYfD,oBAAYE,MAZG,CAAnB;;AAyBA,IAAMC,SAAS,GAAGT,0BAAOU,GAAV,2FAAf;;AAIA,IAAMC,SAAS,GAAGX,0BAAOU,GAAV,kHAAf;;AAKA,IAAME,WAAW,GAAGZ,0BAAOU,GAAV,+QAEJ,UAACG,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFI,EAWJV,oBAAUW,QAXN,CAAjB;;AAcA,IAAMC,eAAe,GAAGhB,0BAAOU,GAAV,2QACCR,eAAOe,KADR,EAGJ,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACK,UAAN,GAAmB,MAAnB,GAA4B,OAAxC;AAAA,CAHI,EAKV,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACM,WAAN,aAAuBC,MAAM,CAACC,UAAP,GAAoBR,KAAK,CAACM,WAA1B,GAAwC,GAA/D,UAAyE,KAArF;AAAA,CALU,EAWHjB,eAAOe,KAXJ,CAArB;;AAoBA,IAAMK,eAAe,GAAGtB,0BAAOuB,MAAV,6RAECrB,eAAOe,KAFR,EAKjBX,oBAAYC,KALK,EAQjBD,oBAAYE,MARK,EAejBF,oBAAYE,MAfK,CAArB;;AAqDA;AACA;AACA;AACA;AACA;AACA,IAAMgB,mBAAmB,GAAG,SAAtBA,mBAAsB,OA2BY;AAAA;;AAAA,MA1BtCC,IA0BsC,QA1BtCA,IA0BsC;AAAA,MAzBtCC,qBAyBsC,QAzBtCA,qBAyBsC;AAAA,MAxBtCC,0BAwBsC,QAxBtCA,0BAwBsC;AAAA,MAvBtCC,eAuBsC,QAvBtCA,eAuBsC;AAAA,MAtBtCC,OAsBsC,QAtBtCA,OAsBsC;AAAA,MArBtCC,SAqBsC,QArBtCA,SAqBsC;AAAA,MApBtCC,QAoBsC,QApBtCA,QAoBsC;AAAA,MAnBtCC,KAmBsC,QAnBtCA,KAmBsC;AAAA,MAlBtCC,gBAkBsC,QAlBtCA,gBAkBsC;AAAA,MAjBtCC,OAiBsC,QAjBtCA,OAiBsC;AAAA,MAhBtCC,eAgBsC,QAhBtCA,eAgBsC;AAAA,MAftCC,aAesC,QAftCA,aAesC;AAAA,MAdtCC,aAcsC,QAdtCA,aAcsC;AAAA,MAbtCC,cAasC,QAbtCA,cAasC;AAAA,mCAZtCC,qBAYsC;AAAA,MAZtCA,qBAYsC,sCAZd,KAYc;AAAA,MAXtCC,WAWsC,QAXtCA,WAWsC;AAAA,MAVtCC,cAUsC,QAVtCA,cAUsC;AAAA,MATtCC,mBASsC,QATtCA,mBASsC;AAAA,MARtCC,cAQsC,QARtCA,cAQsC;AAAA,MAPtCC,iBAOsC,QAPtCA,iBAOsC;AAAA,MANtCC,YAMsC,QANtCA,YAMsC;AAAA,MALtCC,WAKsC,QALtCA,WAKsC;AAAA,MAJtCC,UAIsC,QAJtCA,UAIsC;AAAA,MAHtCC,cAGsC,QAHtCA,cAGsC;AAAA,MAFtCC,MAEsC,QAFtCA,MAEsC;AAAA,8BADtCC,WACsC;AAAA,MADtCA,WACsC,iCADxB,IACwB;;AACtC,wBAAgCC,KAAK,CAACC,QAAN,CAAe,KAAf,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAAwCH,KAAK,CAACC,QAAN,CAAe,KAAf,CAAxC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAoDL,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAApD;AAAA;AAAA,MAAOK,kBAAP;AAAA,MAA2BC,qBAA3B;;AACA,MAAMC,OAAO,GAAGR,KAAK,CAACS,MAAN,CAAa,IAAb,CAAhB;AACA,MAAMC,WAAW,GAAGV,KAAK,CAACS,MAAN,CAA6B,IAA7B,CAApB;AACA,MAAME,YAAY,GAAGX,KAAK,CAACS,MAAN,CAAa,IAAb,CAArB;;AACA,yBAAsCT,KAAK,CAACC,QAAN,CAAuB,CAAvB,CAAtC;AAAA;AAAA,MAAOW,WAAP;AAAA,MAAoBC,cAApB;;AAEA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClCX,IAAAA,WAAW,CAAC,KAAD,CAAX;AACD,GAFD;;AAIA,gCAAgBO,WAAhB,EAA6B;AAAA,WAAON,YAAY,GAAGC,eAAe,CAAC,KAAD,CAAlB,GAA4B,IAA/C;AAAA,GAA7B;AACA,gCAAgBG,OAAhB,EAAyB,YAAM;AAC7B,QAAIN,QAAJ,EAAc;AACZK,MAAAA,qBAAqB,CAAC,KAAD,CAArB;AACAJ,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GALD;AAOAH,EAAAA,KAAK,CAACe,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAAA;;AACzB,UAAMC,KAAK,gBAAGC,QAAH,uEAAG,UAAUC,cAAV,CAAyB,iBAAzB,CAAH,oFAAG,sBAA6CC,qBAA7C,EAAH,2DAAG,uBAAsEH,KAApF;;AACA,UAAIA,KAAJ,EAAW;AACTJ,QAAAA,cAAc,CAACI,KAAD,CAAd;AACD;AACF,KALD;;AAOAD,IAAAA,YAAY;AACZ/C,IAAAA,MAAM,CAACoD,gBAAP,CAAwB,QAAxB,EAAkCL,YAAlC;AACA,WAAO;AAAA,aAAM/C,MAAM,CAACqD,mBAAP,CAA2B,QAA3B,EAAqCN,YAArC,CAAN;AAAA,KAAP,CAVoB,CAWpB;AACD,GAZD,EAYG,eAACE,QAAD,wEAAC,WAAUC,cAAV,CAAyB,iBAAzB,CAAD,oFAAC,sBAA6CC,qBAA7C,EAAD,2DAAC,uBAAsEH,KAAvE,CAZH;AAcA,sBACE,uDACE,oBAAC,aAAD;AAAe,mBAAanB;AAA5B,kBACE,oBAAC,kBAAD;AAAW,IAAA,WAAW,EAAEC;AAAxB,kBACE,oBAAC,SAAD,qBACE,oBAAC,aAAD;AAAM,IAAA,IAAI,EAAEzB,IAAI,IAAI,EAApB;AAAwB,IAAA,WAAW,EAAEe,WAArC;AAAkD,IAAA,OAAO,EAAEQ,cAA3D;AAA2E,IAAA,EAAE,EAAED;AAA/E,IADF,EAEGZ,eAAe,iBAAI,oBAAC,iBAAD;AAAU,IAAA,iBAAiB,EAAET,qBAAqB,IAAI,EAAtD;AAA0D,IAAA,YAAY,EAAEoC;AAAxE,IAFtB,eAGE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAC,2BAArB;AAAiD,IAAA,GAAG,EAAEA;AAAtD,KACGvB,qBAAqB,gBACpB,uDACE,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAEV,OADX;AAEE,IAAA,SAAS,EAAEC,SAAS,IAAI,EAF1B;AAGE,IAAA,QAAQ,EAAEC,QAAQ,IAAI,EAHxB;AAIE,IAAA,cAAc,EAAE,IAJlB;AAKE,IAAA,WAAW,EAAEe,WALf;AAME,IAAA,eAAe,EAAEU;AANnB,IADF,eASE,oBAAC,qBAAD;AAAc,IAAA,iBAAiB,EAAE7B,0BAAjC;AAA6D,IAAA,eAAe,EAAEC;AAA9E,IATF,CADoB,gBAapB,uDACE,oBAAC,qBAAD;AAAc,IAAA,iBAAiB,EAAED,0BAAjC;AAA6D,IAAA,eAAe,EAAEC;AAA9E,IADF,eAEE,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAEC,OADX;AAEE,IAAA,SAAS,EAAEC,SAAS,IAAI,EAF1B;AAGE,IAAA,QAAQ,EAAEC,QAAQ,IAAI,EAHxB;AAIE,IAAA,cAAc,EAAE,IAJlB;AAKE,IAAA,WAAW,EAAEe,WALf;AAME,IAAA,eAAe,EAAEU;AANnB,IAFF,CAdJ,eA0BE,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAE;AAAA,aAAMF,WAAW,CAAC,CAACD,QAAF,CAAjB;AAAA,KAA1B;AAAwD,IAAA,MAAM,EAAE,CAAClB;AAAjE,kBACE,oBAAC,iBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IADF,CA1BF,CAHF,CADF,CADF,CADF,eAuCE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAEkB,QAAQ,GAAG,MAAH,GAAY,QAA5C;AAAsD,IAAA,SAAS,EAAEA;AAAjE,kBACE,oBAAC,kBAAD;AAAmB,IAAA,GAAG,EAAEM,OAAxB;AAAiC,IAAA,OAAO,EAAE,mBAAM,CAAE,CAAlD;AAAoD,IAAA,IAAI,EAAC,MAAzD;AAAgE,uBAAgB;AAAhF,kBACE,oBAAC,mBAAD;AACE,IAAA,IAAI,EAAElC,IAAI,IAAI,EADhB;AAEE,IAAA,eAAe,EAAE,2BAAM;AACrBiC,MAAAA,qBAAqB,CAAC,KAAD,CAArB;AACAO,MAAAA,qBAAqB;AACtB,KALH;AAME,IAAA,iBAAiB,EAAEvC,qBAAqB,IAAI,EAN9C;AAOE,IAAA,0BAA0B,EAAEC,0BAP9B;AAQE,IAAA,eAAe,EAAEC,eARnB;AASE,IAAA,SAAS,EAAEE,SAAS,IAAI,EAT1B;AAUE,IAAA,QAAQ,EAAEC,QAAQ,IAAI,EAVxB;AAWE,IAAA,KAAK,EAAEC,KAAK,IAAI,EAXlB;AAYE,IAAA,OAAO,EAAEE,OAZX;AAaE,IAAA,aAAa,EAAEG,aAbjB;AAcE,IAAA,OAAO,EAAED,aAdX;AAeE,IAAA,cAAc,EAAEE,cAflB;AAgBE,IAAA,eAAe,EAAEH,eAhBnB;AAiBE,IAAA,cAAc,EAAEM,cAAc,IAAI,EAjBpC;AAkBE,IAAA,mBAAmB,EAAEC,mBAAmB,IAAI,EAlB9C;AAmBE,IAAA,cAAc,EAAEC,cAAc,IAAI,EAnBpC;AAoBE,IAAA,iBAAiB,EAAEC,iBAAiB,IAAI,EApB1C;AAqBE,IAAA,YAAY,EAAEC,YAAY,IAAI,EArBhC;AAsBE,IAAA,gBAAgB,EAAEZ,gBAAgB,IAAI,EAtBxC;AAuBE,IAAA,WAAW,EAAEa,WAvBf;AAwBE,IAAA,YAAY,EAAEW,kBAxBhB;AAyBE,IAAA,eAAe,EAAEC;AAzBnB,IADF,CADF,CAvCF,EAsEGZ,WAAW,iBACV,oBAAC,eAAD;AAAiB,IAAA,GAAG,EAAEe,WAAtB;AAAmC,IAAA,SAAS,EAAEN,YAAY,GAAG,MAAH,GAAY,QAAtE;AAAgF,IAAA,UAAU,EAAE,KAA5F;AAAmG,IAAA,WAAW,EAAEQ,WAAhH;AAA6H,mBAAY;AAAzI,kBACE,oBAAC,iBAAD;AACE,IAAA,SAAS,EAAEjC,SAAS,IAAI,EAD1B;AAEE,IAAA,QAAQ,EAAEC,QAAQ,IAAI,EAFxB;AAGE,IAAA,KAAK,EAAEC,KAAK,IAAI,EAHlB;AAIE,IAAA,gBAAgB,EAAEC,gBAAgB,IAAI,EAJxC;AAKE,IAAA,eAAe,EAAE;AAAA,aAAMuB,eAAe,CAAC,KAAD,CAArB;AAAA,KALnB;AAME,IAAA,cAAc,EAAEf,cANlB;AAOE,IAAA,mBAAmB,EAAEC,mBAPvB;AAQE,IAAA,cAAc,EAAEC,cARlB;AASE,IAAA,OAAO,EAAET,OATX;AAUE,IAAA,YAAY,EAAEW,YAAY,IAAI;AAVhC,IADF,CAvEJ,CADF;AAyFD,CAvJD;;;AAjCEpB,EAAAA,I;AACAC,EAAAA,qB;AACAC,EAAAA,0B;AAGAG,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,O;AACAC,EAAAA,e;AAEAE,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,qB;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,iB;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAE,EAAAA,c;AACAD,EAAAA,U;AACAE,EAAAA,M;AACAC,EAAAA,W;;eAiKa1B,mB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport Logo from './Logo';\r\nimport MainMenu from './MainMenu';\r\nimport Actions from './Actions';\r\nimport { PageWidth } from '../Layouts';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport RightSideNav from './RightSideNav';\r\nimport { NavOption, NavButton, ActionOptions, UserMenuItem } from '../types';\r\nimport MobileMenu from './mobile/MobileMenu';\r\nimport { Menu } from '../icons/systemicons/SystemIcons';\r\nimport UserMenu from './UserMenu/UserMenu';\r\nimport useClickOutside from '../hooks/useClickOutside';\r\nimport { Menu as MobileMenuWrapper } from './mobile/CommonStyles';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst HeaderWrapper = styled.header`\r\n  background: white;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  \r\n  z-index: ${Z_INDEXES.sticky_menu};\r\n  position: relative;\r\n  \r\n  height: 48px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: 64px;\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none) {\r\n    height: auto;\r\n  }\r\n\r\n  @media print {\r\n    border-bottom: none;\r\n  }\r\n`;\r\n\r\nconst RowLayout = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nconst RightSide = styled.div`\r\n  display: flex;\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nconst MenuWrapper = styled.div<MenuWrapperProps>`\r\n  background: rgba(0, 0, 0, 0.5);\r\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow-y: hidden;\r\n  bottom: 0;\r\n  right: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n`;\r\n\r\nconst UserMenuWrapper = styled.div<UserMenuWrapperProps>`\r\n  background-color: ${COLORS.white};\r\n  display: flex;\r\n  margin-left: ${(props) => (props.floatRight ? 'auto' : 'unset')};\r\n  position: absolute;\r\n  right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\r\n  top: 56px;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\ninterface UserMenuWrapperProps {\r\n  floatRight: boolean;\r\n  offsetRight: number | null | undefined;\r\n}\r\n\r\nconst HamburgerButton = styled.button`\r\n  border-width: 0;\r\n  background-color: ${COLORS.white};\r\n  height: 48px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: 64px;\r\n  }\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: none;\r\n  }\r\n`;\r\n\r\ninterface MenuWrapperProps {\r\n  isVisible: boolean;\r\n}\r\n\r\ntype Props = {\r\n  name?: string;\r\n  mainNavigationOptions?: NavOption[];\r\n  secondaryNavigationOptions?: NavOption[];\r\n  secondaryButton?: NavButton;\r\n  actions?: ActionOptions;\r\n  firstName?: string;\r\n  lastName?: string;\r\n  email?: string;\r\n  organizationName?: string;\r\n  signout?: (e: any) => void;\r\n  isAuthenticated?: boolean;\r\n  mobileActions?: ActionOptions;\r\n  notifications?: NavOption[];\r\n  switcherAction?: () => void;\r\n  reverseRightSideOrder?: boolean;\r\n  showBetaTag?: boolean;\r\n  accountSection?: UserMenuItem[];\r\n  organizationSection?: UserMenuItem[];\r\n  supportSection?: UserMenuItem[];\r\n  accountMenuHeader?: string;\r\n  signOutLabel?: string;\r\n  useUserMenu?: boolean;\r\n  trackLogoClick?: () => void;\r\n  mainLogoTo?: string;\r\n  testId?: string;\r\n  useMaxWidth?: boolean;\r\n};\r\n\r\n/**\r\n * @param props\r\n * @constructor\r\n * @description This component is a global navigation header bar\r\n */\r\nconst GlobalNavigationBar = ({\r\n  name,\r\n  mainNavigationOptions,\r\n  secondaryNavigationOptions,\r\n  secondaryButton,\r\n  actions,\r\n  firstName,\r\n  lastName,\r\n  email,\r\n  organizationName,\r\n  signout,\r\n  isAuthenticated,\r\n  mobileActions,\r\n  notifications,\r\n  switcherAction,\r\n  reverseRightSideOrder = false,\r\n  showBetaTag,\r\n  accountSection,\r\n  organizationSection,\r\n  supportSection,\r\n  accountMenuHeader,\r\n  signOutLabel,\r\n  useUserMenu,\r\n  mainLogoTo,\r\n  trackLogoClick,\r\n  testId,\r\n  useMaxWidth = true,\r\n}: Props): React.ReactElement<Props> => {\r\n  const [showMenu, setShowMenu] = React.useState(false);\r\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\r\n  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState<boolean>(false);\r\n  const menuRef = React.useRef(null);\r\n  const userMenuRef = React.useRef<HTMLDivElement>(null);\r\n  const rightSideRef = React.useRef(null);\r\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\r\n\r\n  const handleClickMenuAction = () => {\r\n    setShowMenu(false);\r\n  };\r\n\r\n  useClickOutside(userMenuRef, () => (showUserMenu ? setShowUserMenu(false) : null));\r\n  useClickOutside(menuRef, () => {\r\n    if (showMenu) {\r\n      setShowMobileUserMenu(false);\r\n      setShowMenu(false);\r\n    }\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;\r\n      if (right) {\r\n        setAvatarRight(right);\r\n      }\r\n    };\r\n\r\n    handleResize();\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);\r\n\r\n  return (\r\n    <>\r\n      <HeaderWrapper data-testid={testId}>\r\n        <PageWidth useMaxWidth={useMaxWidth}>\r\n          <RowLayout>\r\n            <Logo name={name || ''} showBetaTag={showBetaTag} onClick={trackLogoClick} to={mainLogoTo} />\r\n            {isAuthenticated && <MainMenu navigationOptions={mainNavigationOptions || []} rightSideRef={rightSideRef} />}\r\n            <RightSide className=\"GlobalNavigationRightSide\" ref={rightSideRef}>\r\n              {reverseRightSideOrder ? (\r\n                <>\r\n                  <Actions\r\n                    actions={actions}\r\n                    firstName={firstName || ''}\r\n                    lastName={lastName || ''}\r\n                    hideOnLowWidth={true}\r\n                    useUserMenu={useUserMenu}\r\n                    setShowUserMenu={setShowUserMenu}\r\n                  />\r\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\r\n                </>\r\n              ) : (\r\n                <>\r\n                  <RightSideNav navigationOptions={secondaryNavigationOptions} secondaryButton={secondaryButton} />\r\n                  <Actions\r\n                    actions={actions}\r\n                    firstName={firstName || ''}\r\n                    lastName={lastName || ''}\r\n                    hideOnLowWidth={true}\r\n                    useUserMenu={useUserMenu}\r\n                    setShowUserMenu={setShowUserMenu}\r\n                  />\r\n                </>\r\n              )}\r\n              <HamburgerButton onClick={() => setShowMenu(!showMenu)} hidden={!isAuthenticated}>\r\n                <Menu size=\"24px\" />\r\n              </HamburgerButton>\r\n            </RightSide>\r\n          </RowLayout>\r\n        </PageWidth>\r\n      </HeaderWrapper>\r\n      <MenuWrapper className={showMenu ? 'open' : 'closed'} isVisible={showMenu}>\r\n        <MobileMenuWrapper ref={menuRef} onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\r\n          <MobileMenu\r\n            name={name || ''}\r\n            clickMenuAction={() => {\r\n              setShowMobileUserMenu(false);\r\n              handleClickMenuAction();\r\n            }}\r\n            navigationOptions={mainNavigationOptions || []}\r\n            secondaryNavigationOptions={secondaryNavigationOptions}\r\n            secondaryButton={secondaryButton}\r\n            firstName={firstName || ''}\r\n            lastName={lastName || ''}\r\n            email={email || ''}\r\n            signout={signout}\r\n            notifications={notifications}\r\n            actions={mobileActions}\r\n            switcherAction={switcherAction}\r\n            isAuthenticated={isAuthenticated}\r\n            accountSection={accountSection || []}\r\n            organizationSection={organizationSection || []}\r\n            supportSection={supportSection || []}\r\n            accountMenuHeader={accountMenuHeader || ''}\r\n            signOutLabel={signOutLabel || ''}\r\n            organizationName={organizationName || ''}\r\n            useUserMenu={useUserMenu}\r\n            showUserMenu={showMobileUserMenu}\r\n            setShowUserMenu={setShowMobileUserMenu}\r\n          />\r\n        </MobileMenuWrapper>\r\n      </MenuWrapper>\r\n      {useUserMenu && (\r\n        <UserMenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : 'closed'} floatRight={false} offsetRight={avatarRight} data-testid=\"testUserMenuWrapper\">\r\n          <UserMenu\r\n            firstName={firstName || ''}\r\n            lastName={lastName || ''}\r\n            email={email || ''}\r\n            organizationName={organizationName || ''}\r\n            clickMenuAction={() => setShowUserMenu(false)}\r\n            accountSection={accountSection}\r\n            organizationSection={organizationSection}\r\n            supportSection={supportSection}\r\n            signOut={signout}\r\n            signOutLabel={signOutLabel || ''}\r\n          />\r\n        </UserMenuWrapper>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default GlobalNavigationBar;\r\n"],"file":"GlobalNavigationBar.js"}

package/dist/js/GlobalNavigationBar/Logo.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare type LogoProps = {
+    name: string;
+    showBetaTag?: boolean;
+    onClick?: () => void;
+    to?: string;
+    color?: string;
+    noSizeChangeOnMobile?: boolean;
+    betaTagBackgroundColor?: string;
+    betaTagColor?: string;
+};
+declare const Logo: ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps) => React.ReactElement<LogoProps>;
+export default Logo;

package/dist/js/GlobalNavigationBar/Logo.js

@@ -0,0 +1,95 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _assets = require("../assets");
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
+  return props.$color;
+}, _styles.BREAKPOINTS.MEDIUM);
+
+var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n    ", "\n  }\n"])), function (props) {
+  return props.$color || _styles.COLORS.black;
+}, function (props) {
+  return props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
+}, _styles.BREAKPOINTS.MEDIUM, function (props) {
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
+});
+
+var BetaTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ", "\n"])), function (props) {
+  return props.backgroundColor || _styles.COLORS.accent2_500;
+}, function (props) {
+  return (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white);
+});
+
+var Logo = function Logo(_ref) {
+  var name = _ref.name,
+      showBetaTag = _ref.showBetaTag,
+      _onClick = _ref.onClick,
+      to = _ref.to,
+      color = _ref.color,
+      noSizeChangeOnMobile = _ref.noSizeChangeOnMobile,
+      betaTagBackgroundColor = _ref.betaTagBackgroundColor,
+      betaTagColor = _ref.betaTagColor;
+  return /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(StyledLink, {
+    to: to || '/',
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onClick: function onClick() {
+      if (_onClick) {
+        _onClick();
+      }
+    },
+    $color: color
+  }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
+    $color: color,
+    noSizeChangeOnMobile: noSizeChangeOnMobile || false
+  }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
+    backgroundColor: betaTagBackgroundColor,
+    $color: betaTagColor
+  }, "BETA")));
+};
+
+Logo.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  showBetaTag: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  to: _propTypes.default.string,
+  color: _propTypes.default.string,
+  noSizeChangeOnMobile: _propTypes.default.bool,
+  betaTagBackgroundColor: _propTypes.default.string,
+  betaTagColor: _propTypes.default.string
+};
+var _default = Logo;
+exports.default = _default;
+//# sourceMappingURL=Logo.js.map