@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/src/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, invertedFocusStyles } from '../../styles';
+import { TextField } from '../../InputFields';
+import { SystemIcons } from '../../icons';
+import { IconButton } from '../../Button';
+import { ComponentLStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../../styles';
+import { InputFieldStyling } from '../../InputFields';
+var NewsletterAndSocial = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ", " {\n    flex-direction: row;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var NewsletterEmailSection = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"], ["\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ", " {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ", "\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ", " {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n"])), BREAKPOINTS.MEDIUM, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white), BREAKPOINTS.MEDIUM);
+var NewsletterEmail = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ", " {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ", " {\n    &.focus-visible {\n      ", "\n    }\n  }\n"])), BREAKPOINTS.MEDIUM, InputFieldStyling, invertedFocusStyles);
+var NewsletterButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"], ["\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ", "\n\n  ", " {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ", "\n  }\n"])), COLORS.white, ComponentLStyling(ComponentTextStyle.Bold, COLORS.white), BREAKPOINTS.MEDIUM, invertedFocusStyles);
+var SocialMedia = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"], ["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ", "\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), COLORS.white, ComponentXSStyling(ComponentTextStyle.Regular, 'inherit'), BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      ", "\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.neutral_600, COLORS.primary_800, COLORS.primary_100, invertedFocusStyles, BREAKPOINTS.MEDIUM);
+var FooterNewsletterAndSocialSection = function (_a) {
+    var actionOnNewsletterSignup = _a.actionOnNewsletterSignup, newsletterLabel = _a.newsletterLabel, placeholderEmail = _a.placeholderEmail;
+    var _b = React.useState(''), emailInput = _b[0], setEmailInput = _b[1];
+    return (React.createElement(NewsletterAndSocial, null,
+        React.createElement(NewsletterEmailSection, null,
+            React.createElement("label", null, newsletterLabel),
+            React.createElement(NewsletterEmail, null,
+                React.createElement(TextField, { id: "NewsletterEmail", withoutBorder: true, placeholder: placeholderEmail, value: emailInput, onChange: function (value) { return setEmailInput(value); } }),
+                React.createElement(NewsletterButton, { "data-testid": 'newsBtn', onClick: function (e) { return actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value); } }, "Sign up"))),
+        React.createElement(SocialMedia, null,
+            React.createElement("h4", null, "Follow us on social media"),
+            React.createElement(SocialMediaButtons, null,
+                React.createElement("a", { href: "https://www.facebook.com/LaerdalMedical/", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Facebook, null))),
+                React.createElement("a", { href: "https://twitter.com/laerdalmedical", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Twitter, null))),
+                React.createElement("a", { href: "https://www.youtube.com/user/LaerdalMedical", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(IconButton, { variant: "secondary", action: function () { }, tabIndex: -1 },
+                        React.createElement(SystemIcons.Youtube, null)))))));
+};
+export default FooterNewsletterAndSocialSection;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/Footer/Components/FooterTop.js

@@ -0,0 +1,34 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import animateScrollTo from 'animated-scroll-to';
+import { COLORS, invertedFocusStyles } from '../../styles';
+import Logo from '../../GlobalNavigationBar/Logo';
+import { SystemIcons } from '../../icons';
+import { ComponentTextStyle, ComponentXSStyling } from '../../styles';
+var FooterTopSection = styled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"], ["\n  min-height: 8px;\n  color: white;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 16px;\n"])));
+var ToTop = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin: auto 0 auto auto;\n  border-radius: 4px;\n  height: 48px;\n  width: 48px;\n  padding: 8px;\n\n  svg {\n    margin: 0 auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  span {\n    margin: 14px auto 0 auto;\n    ", "\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    ", "\n  }\n\n  &:active:not(:disabled) {\n    background: ", ";\n    svg path,\n    svg {\n      fill: ", ";\n    }\n    span {\n      color: ", ";\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.UppercaseBold, 'inherit'), COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, invertedFocusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800);
+var FooterTop = function (_a) {
+    var sitename = _a.sitename, showBetaTag = _a.showBetaTag, toTopText = _a.toTopText;
+    var isPressingEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    var action = function () {
+        animateScrollTo(0);
+    };
+    return (React.createElement(FooterTopSection, null,
+        React.createElement(Logo, { name: sitename || '', showBetaTag: showBetaTag, color: COLORS.white, inverted: true, betaTagBackgroundColor: COLORS.white, betaTagColor: COLORS.neutral_800 }),
+        React.createElement(ToTop, { "data-testid": 'toTopNavigation', tabIndex: 0, onKeyDown: function (e) { return (isPressingEnter(e) ? action() : null); }, onClick: action },
+            React.createElement(SystemIcons.ArrowLineUp, { size: "24px", color: COLORS.white }),
+            React.createElement("span", null, toTopText))));
+};
+export default FooterTop;
+var templateObject_1, templateObject_2;

package/dist/src/Footer/Footer.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+var FooterContainer = styled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
+var FooterGlobalContent = styled.section(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"], ["\n  min-height: 8px;\n  background-color: ", ";\n  color: white;\n"])), COLORS.primary_700);
+var Footer = function (_a) {
+    var children = _a.children;
+    return (React.createElement(FooterContainer, { role: "contentinfo" },
+        children,
+        React.createElement(FooterGlobalContent, { "data-testid": 'footer-content' })));
+};
+export default Footer;
+var templateObject_1, templateObject_2;

package/dist/src/Footer/SiteFooter.js

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+/**
+ * Import custom components.
+ */
+import FooterBottomLinks from './Components/FooterBottomLinks';
+import FooterTop from './Components/FooterTop';
+import FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';
+import FooterNavSection from './Components/FooterNavSection';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { PageWidth } from "../Layouts";
+var FooterContainer = styled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"], ["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var FooterLine = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"], ["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
+var SiteFooter = function (_a) {
+    var id = _a.id, sitename = _a.sitename, bottomLinks = _a.bottomLinks, showBetaTag = _a.showBetaTag, copyrightText = _a.copyrightText, toTopText = _a.toTopText, placeholderEmailField = _a.placeholderEmailField, includeNewsletterAndSocialSection = _a.includeNewsletterAndSocialSection, newsletterLabel = _a.newsletterLabel, navOptions = _a.navOptions, onNewsletterSignup = _a.onNewsletterSignup, _b = _a.useMaxWidth, useMaxWidth = _b === void 0 ? true : _b, maxWidth = _a.maxWidth, rest = __rest(_a, ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup", "useMaxWidth", "maxWidth"]);
+    return (React.createElement(FooterContainer, __assign({ id: id, "data-testid": 'footer-container' }, rest),
+        React.createElement(PageWidth, { unsetMargin: true, useMaxWidth: useMaxWidth, maxWidth: maxWidth },
+            React.createElement(FooterTop, { sitename: sitename, showBetaTag: showBetaTag, toTopText: toTopText }),
+            navOptions && React.createElement(FooterNavSection, { mainId: id, navOptions: navOptions }),
+            React.createElement(FooterLine, null),
+            includeNewsletterAndSocialSection && (React.createElement(FooterNewsletterAndSocialSection, { placeholderEmail: placeholderEmailField, actionOnNewsletterSignup: onNewsletterSignup, newsletterLabel: newsletterLabel || '' })),
+            React.createElement(FooterBottomLinks, { bottomLinks: bottomLinks, copyrightText: copyrightText }))));
+};
+export default SiteFooter;
+var templateObject_1, templateObject_2;

package/dist/src/Footer/index.js

@@ -0,0 +1,2 @@
+export { default as Footer } from './Footer';
+export { default as SiteFooter } from './SiteFooter';

package/dist/src/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } from './types';
-type GlobalNavigationBarProps = {
+declare type GlobalNavigationBarProps = {
     isAuthenticated?: boolean;
     useMaxWidth?: boolean;
     maxWidth?: number;

package/dist/src/GlobalNavigationBar/GlobalNavigationBar.js

@@ -0,0 +1,93 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import Logo from './Logo';
+import MainMenu from './desktop/MainMenu';
+import { PageWidth } from '../Layouts';
+import { COLORS, BREAKPOINTS } from '../styles';
+import RightSideNav from './desktop/RightSideNav';
+import MobileMenu from './mobile/MobileMenu';
+import { SystemIcons } from '../icons';
+import UserMenu from './desktop/UserMenu';
+import { fadeIn, fadeOut, Menu as MobileMenuWrapper } from './mobile/CommonStyles';
+import { Z_INDEXES } from '../styles';
+import { IconButton } from '../Button';
+import DesktopActions from './desktop/DesktopActions';
+import { usePreviousImmediate } from 'rooks';
+import { useClickOutsideRef } from '../common';
+import { hasWindow } from '../utils/utils';
+var HeaderWrapper = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"], ["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+var RowLayout = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var HamburgerButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    display: none;\n  }\n"], ["\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
+var MobileMenuBackdrop = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"], ["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
+var MobileWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", " {\n    display: none !important;\n  }\n"], ["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var UserMenuWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) { return (props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%'); });
+/**
+ * @param props
+ * @constructor
+ * @description This component is a global navigation header bar
+ */
+var GlobalNavigationBar = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var name = _a.name, isAuthenticated = _a.isAuthenticated, logo = _a.logo, profile = _a.profile, mobile = _a.mobile, desktop = _a.desktop, testId = _a.testId, _h = _a.useMaxWidth, useMaxWidth = _h === void 0 ? true : _h, maxWidth = _a.maxWidth, profileComponent = _a.profileComponent, _j = _a.border, border = _j === void 0 ? true : _j;
+    var _k = React.useState(false), showMobileMenu = _k[0], setShowMobileMenu = _k[1];
+    var wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);
+    var _l = React.useState(false), showUserMenu = _l[0], setShowUserMenu = _l[1];
+    var actionsRef = React.useRef(null);
+    var profileButtonRef = React.useRef();
+    profileButtonRef.current = (_e = (_d = (_c = (_b = actionsRef === null || actionsRef === void 0 ? void 0 : actionsRef.current) === null || _b === void 0 ? void 0 : _b.buttons) === null || _c === void 0 ? void 0 : _c.find(function (a) { return a.type === 'profile'; })) === null || _d === void 0 ? void 0 : _d.ref) === null || _e === void 0 ? void 0 : _e.current;
+    var mobileMenuButtonRef = React.useRef(null);
+    var rightSideRef = React.useRef(null);
+    var _m = React.useState(0), avatarRight = _m[0], setAvatarRight = _m[1];
+    var userMenuRef = useClickOutsideRef(function () { return setShowUserMenu(false); }, [profileButtonRef]);
+    var mobileMenuRef = useClickOutsideRef(function () { return setShowMobileMenu(false); }, [mobileMenuButtonRef]);
+    React.useEffect(function () {
+        if (!profileButtonRef.current)
+            return;
+        var handleResize = function () {
+            var _a, _b;
+            var profileRightOffset = (_b = (_a = profileButtonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.right;
+            setAvatarRight(profileRightOffset || 0);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [profileButtonRef.current]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderWrapper, { "data-testid": testId, className: border ? 'border' : '' },
+            React.createElement(PageWidth, { useMaxWidth: useMaxWidth, maxWidth: maxWidth, unsetMargin: true },
+                React.createElement(RowLayout, null,
+                    React.createElement(Logo, { name: name || '', showBetaTag: logo === null || logo === void 0 ? void 0 : logo.showBetaTag, onClick: logo === null || logo === void 0 ? void 0 : logo.onClick, to: logo === null || logo === void 0 ? void 0 : logo.to }),
+                    isAuthenticated &&
+                        React.createElement(MainMenu, { items: (desktop === null || desktop === void 0 ? void 0 : desktop.items.filter(function (a) { return !a.pinned; })) || [], rightSideRef: rightSideRef }),
+                    React.createElement(RightSide, { className: "".concat((desktop === null || desktop === void 0 ? void 0 : desktop.reverseRightSideOrder) ? 'reverse' : ''), ref: rightSideRef },
+                        React.createElement(RightSideNav, { items: (_f = desktop === null || desktop === void 0 ? void 0 : desktop.items) === null || _f === void 0 ? void 0 : _f.filter(function (a) { return a.pinned && a.type == 'item'; }).map(function (x) { return x; }), action: desktop === null || desktop === void 0 ? void 0 : desktop.action }),
+                        React.createElement(MobileWrapper, null, !!profileComponent && profileComponent),
+                        React.createElement(DesktopActions, { ref: actionsRef, buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons, onShowUserMenu: function () { return setShowUserMenu(!showUserMenu); }, user: profile === null || profile === void 0 ? void 0 : profile.user, profileComponent: profileComponent }),
+                        React.createElement(HamburgerButton, { hidden: !isAuthenticated },
+                            React.createElement(IconButton, { action: function () { return setShowMobileMenu(!showMobileMenu); }, ref: mobileMenuButtonRef, shape: 'circular', variant: 'secondary' },
+                                React.createElement(SystemIcons.Menu, { size: "24px" }))))))),
+        React.createElement(MobileMenuBackdrop, { className: showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : '' },
+            React.createElement(MobileMenuWrapper, { ref: mobileMenuRef, role: "menu", "aria-labelledby": "UserMenuButton" },
+                React.createElement(MobileMenu, __assign({}, mobile, { show: showMobileMenu, onClose: function () { return setShowMobileMenu(false); }, profile: !profileComponent ? profile : undefined })))),
+        ((_g = desktop === null || desktop === void 0 ? void 0 : desktop.buttons) === null || _g === void 0 ? void 0 : _g.some(function (a) { return a.type === 'profile'; })) && !!profile &&
+            React.createElement(UserMenuWrapper, { ref: userMenuRef, offsetRight: avatarRight, "data-testid": "testUserMenuWrapper" },
+                React.createElement(UserMenu, __assign({}, profile, { show: showUserMenu, onHideUserMenu: function () { return setShowUserMenu(false); } })))));
+};
+export default GlobalNavigationBar;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-type LogoProps = {
+declare type LogoProps = {
     name: string;
     showBetaTag?: boolean;
     onClick?: () => void;

package/dist/src/GlobalNavigationBar/Logo.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { LaerdalLogo, LaerdalWhiteLogo } from '../assets';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles } from '../styles';
+import { ComponentMStyling, ComponentXSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+var StyledLink = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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; }, BREAKPOINTS.MEDIUM);
+var LogoContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"], ["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\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    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), BREAKPOINTS.LARGE, focusStyles, invertedFocusStyles);
+var Name = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"], ["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) { return props.$color || COLORS.black; }, function (props) {
+    return props.noSizeChangeOnMobile
+        ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)
+        : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black);
+}, BREAKPOINTS.MEDIUM, function (props) { return ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black); }, BREAKPOINTS.LARGE);
+var BetaTag = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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 || COLORS.accent2_500; }, function (props) { return ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white); });
+var Logo = function (_a) {
+    var name = _a.name, showBetaTag = _a.showBetaTag, onClick = _a.onClick, to = _a.to, color = _a.color, noSizeChangeOnMobile = _a.noSizeChangeOnMobile, betaTagBackgroundColor = _a.betaTagBackgroundColor, betaTagColor = _a.betaTagColor, inverted = _a.inverted;
+    return (React.createElement(LogoContainer, { className: inverted ? 'inverted' : '' },
+        React.createElement(StyledLink, { to: to || '/', onMouseDown: defaultOnMouseDownHandler, onClick: function () {
+                if (onClick) {
+                    onClick();
+                }
+            }, "$color": color },
+            color === COLORS.white ? React.createElement(LaerdalWhiteLogo, null) : React.createElement(LaerdalLogo, null),
+            React.createElement(Name, { "$color": color, noSizeChangeOnMobile: noSizeChangeOnMobile || false }, name),
+            showBetaTag && (React.createElement(BetaTag, { backgroundColor: betaTagBackgroundColor, "$color": betaTagColor }, "BETA")))));
+};
+export default Logo;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/GlobalNavigationBar/__tests__/GlobalNavigationBar.tests.js

@@ -0,0 +1,299 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import GlobalNavigationBar from '../GlobalNavigationBar';
+import { createMemoryHistory } from 'history';
+import { SystemIcons } from '../../icons';
+import { Router } from 'react-router-dom';
+jest.mock('rooks', function () { return (__assign(__assign({}, jest.requireActual('rooks')), { useDimensionsRef: function () { return []; }, useMediaMatch: function () { return true; } })); });
+jest.mock('react-router-dom', function () { return (__assign(__assign({}, jest.requireActual('react-router-dom')), { useLocation: function () { return 'location'; } })); });
+jest.mock('react-router', function () { return (__assign(__assign({}, jest.requireActual('react-router')), { useHistory: function () { return ({ push: jest.fn() }); } })); });
+describe('GlobalNavigationBar', function () {
+    var mainNavigationOptions = [
+        {
+            label: 'Overview',
+            to: '/',
+            exact: true,
+            onClick: function () {
+                console.log('Clicked on overview page');
+            },
+        },
+        {
+            label: 'Services',
+            to: '/services',
+        },
+        {
+            label: 'Products',
+            to: '/products',
+        },
+    ];
+    var secondaryNavigationOptions = [
+        {
+            label: 'Pinned Tab',
+            to: 'pinned',
+            pinned: true
+        },
+    ];
+    var headerActions = [
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('search');
+            },
+            icon: React.createElement(SystemIcons.Search, null),
+        },
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('notifications');
+            },
+            icon: React.createElement(SystemIcons.Notification, null),
+        },
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('language');
+            },
+            icon: React.createElement(SystemIcons.Language, null),
+        },
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('settings');
+            },
+            icon: React.createElement(SystemIcons.GearSettings, null),
+        },
+        {
+            type: 'profile',
+        },
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('shop');
+            },
+            icon: React.createElement(SystemIcons.ShoppingCart, null),
+        },
+        {
+            type: 'switcher',
+            action: function (e) {
+                // @ts-ignore
+                window.portalNav.toggle();
+                console.log('switcher');
+            },
+        }
+    ];
+    var notifications = [
+        {
+            label: 'First',
+            note: 'This is a note',
+            to: '/n7',
+        },
+        {
+            label: 'Second',
+            note: 'This is a note',
+            to: '/n6',
+        },
+        {
+            label: 'Third',
+            note: 'This is a note',
+            to: '/n5',
+        },
+        {
+            label: 'Fourth',
+            note: 'This is a note',
+            to: '/n4',
+        },
+        {
+            label: 'Fifth',
+            note: 'This is a note',
+            to: '/n3',
+        },
+        {
+            label: 'Sixth',
+            note: 'This is a note',
+            to: '/n2',
+        },
+        {
+            label: 'Seventh',
+            note: 'This is a note',
+            to: '/n1',
+        },
+    ];
+    var mobileActions = [
+        {
+            type: 'submenu',
+            menu: {
+                type: 'custom',
+                label: 'Search',
+                custom: function () { return 'custom'; }
+            },
+            icon: React.createElement(SystemIcons.Search, null),
+        },
+        {
+            type: 'submenu',
+            menu: {
+                type: 'group',
+                label: 'Notifications',
+                items: notifications
+            },
+            icon: React.createElement(SystemIcons.Notification, null),
+        },
+        {
+            type: 'action',
+            action: function (e) {
+                console.log('language');
+                return true;
+            },
+            icon: React.createElement(SystemIcons.Language, null),
+        },
+        {
+            type: 'profile',
+            placement: 'left'
+        },
+        {
+            type: 'switcher',
+            action: function (e) {
+                // @ts-ignore
+                window.portalNav.toggle();
+                console.log('switcher');
+            },
+        }
+    ];
+    var mobileStickyNav = [
+        {
+            label: 'Help',
+            to: '/help',
+            pinned: true,
+            icon: React.createElement(SystemIcons.Help, null),
+        },
+        {
+            label: 'Support',
+            to: '/support',
+            pinned: true,
+            icon: React.createElement(SystemIcons.Support, null),
+        },
+    ];
+    var accountSection = [
+        { label: 'My Account', to: '/account/myaccount', icon: React.createElement(SystemIcons.User, null), external: false },
+        { label: 'Language & Region', to: '/account/language', icon: React.createElement(SystemIcons.Language, null), external: false },
+        { label: 'Settings', to: '/account/settings', icon: React.createElement(SystemIcons.GearSettings, null), external: false },
+    ];
+    var organizationSection = [
+        {
+            label: 'Organization details',
+            to: '/organization/myorganization',
+            icon: React.createElement(SystemIcons.Institute, null),
+            external: false
+        },
+        { label: 'People', to: '/organization/user-management', icon: React.createElement(SystemIcons.Team, null), external: false },
+    ];
+    var supportSection = [
+        {
+            label: 'Help',
+            to: 'https://laerdal.force.com/HelpCenter',
+            icon: React.createElement(SystemIcons.Help, null),
+            external: true,
+            pinned: true
+        },
+        {
+            label: 'Support',
+            to: 'https://www.laerdal.com/support/',
+            icon: React.createElement(SystemIcons.Support, null),
+            external: true,
+            pinned: true
+        },
+    ];
+    var mobileNavigationSubGroup = {
+        type: 'group',
+        items: __spreadArray(__spreadArray([], organizationSection, true), supportSection, true),
+        note: 'This is a note',
+        header: {
+            header: 'Title',
+            note: 'Note Text'
+        },
+        footer: {
+            header: 'Title',
+            note: 'Note text',
+            link: {
+                label: 'Link text',
+                href: '#',
+                external: false
+            }
+        },
+        action: {
+            label: 'Sign out',
+            action: function () {
+                console.log('Sign out');
+            },
+            icon: React.createElement(SystemIcons.Logout, null)
+        },
+        label: 'Organization',
+        icon: React.createElement(SystemIcons.Institute, null),
+    };
+    it('should render', function () {
+        var history = createMemoryHistory();
+        var wrapper = render(React.createElement(Router, { navigator: history, location: "/" },
+            React.createElement(GlobalNavigationBar, { name: "Home", logo: {
+                    showBetaTag: true,
+                    to: '/main'
+                }, desktop: {
+                    buttons: headerActions,
+                    items: __spreadArray([], mainNavigationOptions, true),
+                }, profile: {
+                    label: 'Account',
+                    user: {
+                        firstName: 'John',
+                        lastName: 'Doe',
+                        email: 'email@email.com',
+                        link: {
+                            label: 'Manage your account',
+                            icon: React.createElement(SystemIcons.OpenNewWindow, null),
+                            href: '/account/myaccount',
+                        }
+                    },
+                    signOut: {
+                        label: 'Sign out',
+                        action: function () {
+                            console.log('Sign out');
+                        },
+                    },
+                    sections: [{
+                            items: __spreadArray([], accountSection, true),
+                        },
+                        {
+                            label: 'Laerdal Medical AS',
+                            items: __spreadArray([], organizationSection, true),
+                        },
+                        {
+                            items: __spreadArray([], supportSection, true),
+                            pinned: true,
+                        }]
+                }, mobile: {
+                    buttons: mobileActions,
+                    items: __spreadArray(__spreadArray(__spreadArray([], mainNavigationOptions, true), [mobileNavigationSubGroup], false), mobileStickyNav, true),
+                }, isAuthenticated: true })));
+        expect(wrapper.getByText('Home')).toBeDefined();
+        __spreadArray([], mainNavigationOptions, true).forEach(function (item) {
+            expect(wrapper.findByText(item.label)).toBeDefined();
+        });
+    });
+});