@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/esm/GlobalNavigationBar/GlobalNavigationBar.js

@@ -0,0 +1,279 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import Logo from './Logo';
+import MainMenu from './MainMenu';
+import Actions from './Actions';
+import { PageWidth } from '../Layouts';
+import { COLORS, BREAKPOINTS } from '../styles';
+import RightSideNav from './RightSideNav';
+import MobileMenu from './mobile/MobileMenu';
+import { Menu } from '../icons/systemicons/SystemIcons';
+import UserMenu from './UserMenu/UserMenu';
+import useClickOutside from '../hooks/useClickOutside';
+import { Menu as MobileMenuWrapper } from './mobile/CommonStyles';
+import { Z_INDEXES } from '../styles/z-indexes';
+const HeaderWrapper = styled.header`
+  background: white;
+  border-bottom: 1px solid ${COLORS.neutral_200};
+  
+  z-index: ${Z_INDEXES.sticky_menu};
+  position: relative;
+  
+  height: 48px;
+
+  ${BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  @media all and (-ms-high-contrast: none) {
+    height: auto;
+  }
+
+  @media print {
+    border-bottom: none;
+  }
+`;
+const RowLayout = styled.div`
+  display: flex;
+`;
+const RightSide = styled.div`
+  display: flex;
+  margin: 0 0 0 auto;
+`;
+const MenuWrapper = styled.div`
+  background: rgba(0, 0, 0, 0.5);
+  display: ${props => props.isVisible ? 'flex' : 'none'};
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+  bottom: 0;
+  right: 0;
+  z-index: ${Z_INDEXES.backdrop};
+`;
+const UserMenuWrapper = styled.div`
+  background-color: ${COLORS.white};
+  display: flex;
+  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
+  position: absolute;
+  right: ${props => props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%'};
+  top: 56px;
+
+  &:focus-within,
+  &:hover,
+  &.open {
+    background: ${COLORS.white};
+  }
+`;
+const HamburgerButton = styled.button`
+  border-width: 0;
+  background-color: ${COLORS.white};
+  height: 48px;
+
+  ${BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${BREAKPOINTS.MEDIUM} {
+    display: none;
+  }
+`;
+
+/**
+ * @param props
+ * @constructor
+ * @description This component is a global navigation header bar
+ */
+const GlobalNavigationBar = ({
+  name,
+  mainNavigationOptions,
+  secondaryNavigationOptions,
+  secondaryButton,
+  actions,
+  firstName,
+  lastName,
+  email,
+  organizationName,
+  signout,
+  isAuthenticated,
+  mobileActions,
+  notifications,
+  switcherAction,
+  reverseRightSideOrder = false,
+  showBetaTag,
+  accountSection,
+  organizationSection,
+  supportSection,
+  accountMenuHeader,
+  signOutLabel,
+  useUserMenu,
+  mainLogoTo,
+  trackLogoClick,
+  testId,
+  useMaxWidth = true
+}) => {
+  const [showMenu, setShowMenu] = React.useState(false);
+  const [showUserMenu, setShowUserMenu] = React.useState(false);
+  const [showMobileUserMenu, setShowMobileUserMenu] = React.useState(false);
+  const menuRef = React.useRef(null);
+  const userMenuRef = React.useRef(null);
+  const rightSideRef = React.useRef(null);
+  const [avatarRight, setAvatarRight] = React.useState(0);
+
+  const handleClickMenuAction = () => {
+    setShowMenu(false);
+  };
+
+  useClickOutside(userMenuRef, () => showUserMenu ? setShowUserMenu(false) : null);
+  useClickOutside(menuRef, () => {
+    if (showMenu) {
+      setShowMobileUserMenu(false);
+      setShowMenu(false);
+    }
+  });
+  React.useEffect(() => {
+    const handleResize = () => {
+      const right = document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right;
+
+      if (right) {
+        setAvatarRight(right);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document?.getElementById('avatarContainer')?.getBoundingClientRect()?.right]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(PageWidth, {
+    useMaxWidth: useMaxWidth
+  }, /*#__PURE__*/React.createElement(RowLayout, null, /*#__PURE__*/React.createElement(Logo, {
+    name: name || '',
+    showBetaTag: showBetaTag,
+    onClick: trackLogoClick,
+    to: mainLogoTo
+  }), isAuthenticated && /*#__PURE__*/React.createElement(MainMenu, {
+    navigationOptions: mainNavigationOptions || [],
+    rightSideRef: rightSideRef
+  }), /*#__PURE__*/React.createElement(RightSide, {
+    className: "GlobalNavigationRightSide",
+    ref: rightSideRef
+  }, reverseRightSideOrder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Actions, {
+    actions: actions,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    hideOnLowWidth: true,
+    useUserMenu: useUserMenu,
+    setShowUserMenu: setShowUserMenu
+  }), /*#__PURE__*/React.createElement(RightSideNav, {
+    navigationOptions: secondaryNavigationOptions,
+    secondaryButton: secondaryButton
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RightSideNav, {
+    navigationOptions: secondaryNavigationOptions,
+    secondaryButton: secondaryButton
+  }), /*#__PURE__*/React.createElement(Actions, {
+    actions: actions,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    hideOnLowWidth: true,
+    useUserMenu: useUserMenu,
+    setShowUserMenu: setShowUserMenu
+  })), /*#__PURE__*/React.createElement(HamburgerButton, {
+    onClick: () => setShowMenu(!showMenu),
+    hidden: !isAuthenticated
+  }, /*#__PURE__*/React.createElement(Menu, {
+    size: "24px"
+  })))))), /*#__PURE__*/React.createElement(MenuWrapper, {
+    className: showMenu ? 'open' : 'closed',
+    isVisible: showMenu
+  }, /*#__PURE__*/React.createElement(MobileMenuWrapper, {
+    ref: menuRef,
+    onClick: () => {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton"
+  }, /*#__PURE__*/React.createElement(MobileMenu, {
+    name: name || '',
+    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, {
+    firstName: firstName || '',
+    lastName: lastName || '',
+    email: email || '',
+    organizationName: organizationName || '',
+    clickMenuAction: () => setShowUserMenu(false),
+    accountSection: accountSection,
+    organizationSection: organizationSection,
+    supportSection: supportSection,
+    signOut: signout,
+    signOutLabel: signOutLabel || ''
+  })));
+};
+
+GlobalNavigationBar.propTypes = {
+  name: _pt.string,
+  mainNavigationOptions: _pt.array,
+  secondaryNavigationOptions: _pt.array,
+  firstName: _pt.string,
+  lastName: _pt.string,
+  email: _pt.string,
+  organizationName: _pt.string,
+  signout: _pt.func,
+  isAuthenticated: _pt.bool,
+  notifications: _pt.array,
+  switcherAction: _pt.func,
+  reverseRightSideOrder: _pt.bool,
+  showBetaTag: _pt.bool,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  accountMenuHeader: _pt.string,
+  signOutLabel: _pt.string,
+  useUserMenu: _pt.bool,
+  trackLogoClick: _pt.func,
+  mainLogoTo: _pt.string,
+  testId: _pt.string,
+  useMaxWidth: _pt.bool
+};
+export default GlobalNavigationBar;
+//# sourceMappingURL=GlobalNavigationBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"names":["React","styled","Logo","MainMenu","Actions","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","useClickOutside","MobileMenuWrapper","Z_INDEXES","HeaderWrapper","header","neutral_200","sticky_menu","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","showMenu","setShowMenu","useState","showUserMenu","setShowUserMenu","showMobileUserMenu","setShowMobileUserMenu","menuRef","useRef","userMenuRef","rightSideRef","avatarRight","setAvatarRight","handleClickMenuAction","useEffect","handleResize","right","document","getElementById","getBoundingClientRect","addEventListener","removeEventListener"],"mappings":"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","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/esm/GlobalNavigationBar/Logo.js

@@ -0,0 +1,111 @@
+import _pt from "prop-types";
+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 } from '../styles';
+import { ComponentMStyling, ComponentXSStyling } from '../styles/typography';
+const StyledLink = styled(Link)`
+  text-align: center;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  &:focus-within {
+    outline: none;
+  }
+  svg {
+    width: 66px;
+    height: 36px;
+    color: ${props => props.$color};
+    ${BREAKPOINTS.MEDIUM} {
+      width: 88px;
+      height: 48px;
+    }
+  }
+`;
+const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-right: 16px;
+  box-sizing: border-box;
+  padding: 24px 0;
+
+  ${BREAKPOINTS.MEDIUM} {
+    margin-top: 8px;
+    margin-bottom: 7px;
+  }
+
+  &:focus-within {
+    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);
+    outline: none;
+  }
+`;
+const Name = styled.span`
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid ${props => props.$color || COLORS.black};
+  letter-spacing: -0.02em;
+
+  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
+
+  font-weight: 300 !important;
+  line-height: 24px !important;
+
+  ${BREAKPOINTS.MEDIUM} {
+    margin-left: 12px;
+    padding-left: 12px;
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
+  }
+`;
+const BetaTag = styled.span`
+  background-color: ${props => props.backgroundColor || COLORS.accent2_500};
+  padding: 4px 8px;
+  margin-left: 8px;
+  margin-top: 2px;
+  border-left: none;
+  border-radius: 2px;
+
+  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}
+`;
+
+const Logo = ({
+  name,
+  showBetaTag,
+  onClick,
+  to,
+  color,
+  noSizeChangeOnMobile,
+  betaTagBackgroundColor,
+  betaTagColor
+}) => {
+  return /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(StyledLink, {
+    to: to || '/',
+    onMouseDown: e => e.preventDefault(),
+    onClick: () => {
+      if (onClick) {
+        onClick();
+      }
+    },
+    $color: color
+  }, color === COLORS.white ? /*#__PURE__*/React.createElement(LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(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: _pt.string.isRequired,
+  showBetaTag: _pt.bool,
+  onClick: _pt.func,
+  to: _pt.string,
+  color: _pt.string,
+  noSizeChangeOnMobile: _pt.bool,
+  betaTagBackgroundColor: _pt.string,
+  betaTagColor: _pt.string
+};
+export default Logo;
+//# sourceMappingURL=Logo.js.map

package/dist/esm/GlobalNavigationBar/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\n\r\nconst StyledLink = styled(Link)<{ $color?: string }>`\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  &:focus-within {\r\n    outline: none;\r\n  }\r\n  svg {\r\n    width: 66px;\r\n    height: 36px;\r\n    color: ${(props) => props.$color};\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: 88px;\r\n      height: 48px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 40px;\r\n  margin-right: 16px;\r\n  box-sizing: border-box;\r\n  padding: 24px 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-top: 8px;\r\n    margin-bottom: 7px;\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n    outline: none;\r\n  }\r\n`;\r\n\r\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\r\n  margin-left: 8px;\r\n  padding-left: 8px;\r\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\r\n  letter-spacing: -0.02em;\r\n\r\n  ${(props) =>\r\n    props.noSizeChangeOnMobile\r\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\r\n\r\n  font-weight: 300 !important;\r\n  line-height: 24px !important;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-left: 12px;\r\n    padding-left: 12px;\r\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\r\n  }\r\n`;\r\n\r\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\r\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\r\n  padding: 4px 8px;\r\n  margin-left: 8px;\r\n  margin-top: 2px;\r\n  border-left: none;\r\n  border-radius: 2px;\r\n\r\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\r\n`;\r\n\r\ntype LogoProps = {\r\n  name: string;\r\n  showBetaTag?: boolean;\r\n  onClick?: () => void;\r\n  to?: string;\r\n  color?: string;\r\n  noSizeChangeOnMobile?: boolean;\r\n  betaTagBackgroundColor?: string;\r\n  betaTagColor?: string;\r\n};\r\n\r\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\r\n  return (\r\n    <LogoContainer>\r\n      <StyledLink\r\n        to={to || '/'}\r\n        onMouseDown={(e: any) => e.preventDefault()}\r\n        onClick={() => {\r\n          if (onClick) {\r\n            onClick();\r\n          }\r\n        }}\r\n        $color={color}>\r\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\r\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\r\n          {name}\r\n        </Name>\r\n        {showBetaTag && (\r\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\r\n            BETA\r\n          </BetaTag>\r\n        )}\r\n      </StyledLink>\r\n    </LogoContainer>\r\n  );\r\n};\r\n\r\nexport default Logo;\r\n"],"file":"Logo.js"}

package/dist/esm/GlobalNavigationBar/MainMenu.js

@@ -0,0 +1,143 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NavItem } from '../NavItem';
+import { MoreHorizontal } from '../icons/systemicons/SystemIcons';
+import { COLORS, BREAKPOINTS } from '../styles';
+import ExtendedMainMenu from './ExtendedMainMenu';
+import { IconButton } from '../Button';
+const NavContainer = styled.div`
+  display: none;
+  justify-content: center;
+  align-items: center;
+
+  ${BREAKPOINTS.MEDIUM} {
+    display: flex;
+  }
+
+  a {
+    text-decoration: none;
+  }
+`;
+const NavButton = styled.button`
+  background: ${COLORS.white};
+  border: 0;
+`;
+const ExtendedMenuWrapper = styled.div`
+  display: flex;
+  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
+
+  position: absolute;
+  flex-direction: column;
+  left: 290px;
+  top: 22px;
+
+  height: 0;
+  width: 0;
+
+  &:focus-within,
+  &:hover,
+  &.open {
+    background: ${COLORS.white};
+  }
+`;
+const ExtendedSection = styled.div`
+  position: relative;
+`;
+
+const MainMenu = ({
+  navigationOptions,
+  rightSideRef
+}) => {
+  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);
+  const extendedMenuRef = React.useRef(null);
+  const mainMenuRef = React.useRef(null);
+  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState(1);
+  const widthOfItem = 150;
+
+  const recalculateNumberOfItemsAllowed = () => {
+    if (rightSideRef?.current && mainMenuRef?.current) {
+      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);
+
+      if (number !== numberOfItemsAllowed) {
+        setNumberOfItemsAllowed(number);
+      }
+    }
+  };
+
+  const handleClickExtendedMenuAction = () => {
+    setShowExtendedMenu(false);
+  };
+
+  const handleClickOutside = e => {
+    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {
+      if (showExtendedMenu) {
+        setShowExtendedMenu(false);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    recalculateNumberOfItemsAllowed(); // Bind the event listener
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('resize', recalculateNumberOfItemsAllowed);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
+    };
+  });
+
+  const preventFocusOnClick = e => {
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/React.createElement(NavContainer, {
+    className: "GlobalNavigationMainMenu",
+    ref: mainMenuRef,
+    open: showExtendedMenu
+  }, navigationOptions?.map((no, index) => index > numberOfItemsAllowed - 2 ? null : no?.disabled ? /*#__PURE__*/React.createElement(NavItem, {
+    as: NavButton,
+    exact: no?.exact,
+    className: "disabled",
+    key: no?.label,
+    onMouseDown: preventFocusOnClick,
+    onClick: () => {
+      if (no?.onClick) {
+        no?.onClick();
+      }
+    }
+  }, no?.label) : /*#__PURE__*/React.createElement(NavItem, {
+    as: NavLink,
+    exact: no?.exact,
+    to: no?.to || '',
+    key: no?.label,
+    onMouseDown: preventFocusOnClick,
+    onClick: () => {
+      if (no?.onClick) {
+        no?.onClick();
+      }
+    }
+  }, no?.label)), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/React.createElement(ExtendedSection, null, /*#__PURE__*/React.createElement(IconButton, {
+    variant: 'secondary',
+    shape: 'circular',
+    action: () => setShowExtendedMenu(true)
+  }, /*#__PURE__*/React.createElement(MoreHorizontal, {
+    size: "24px"
+  })), /*#__PURE__*/React.createElement(ExtendedMenuWrapper, {
+    ref: extendedMenuRef,
+    className: showExtendedMenu ? 'open' : '',
+    floatRight: false
+  }, /*#__PURE__*/React.createElement(ExtendedMainMenu, {
+    clickMenuAction: handleClickExtendedMenuAction,
+    navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
+  }))));
+};
+
+MainMenu.propTypes = {
+  navigationOptions: _pt.array.isRequired
+};
+export default MainMenu;
+//# sourceMappingURL=MainMenu.js.map

package/dist/esm/GlobalNavigationBar/MainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["React","NavLink","styled","NavItem","MoreHorizontal","COLORS","BREAKPOINTS","ExtendedMainMenu","IconButton","NavContainer","div","MEDIUM","NavButton","button","white","ExtendedMenuWrapper","props","floatRight","ExtendedSection","MainMenu","navigationOptions","rightSideRef","showExtendedMenu","setShowExtendedMenu","useState","extendedMenuRef","useRef","mainMenuRef","numberOfItemsAllowed","setNumberOfItemsAllowed","widthOfItem","recalculateNumberOfItemsAllowed","current","number","Math","floor","offsetLeft","handleClickExtendedMenuAction","handleClickOutside","e","contains","target","useEffect","document","addEventListener","window","removeEventListener","preventFocusOnClick","preventDefault","map","no","index","disabled","exact","label","onClick","to","length","slice"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nimport { NavItem } from '../NavItem';\r\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport { NavOption } from '../types';\r\nimport ExtendedMainMenu from './ExtendedMainMenu';\r\nimport {IconButton} from '../Button';\r\n\r\nconst NavContainer = styled.div<{ open: boolean }>`\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n  }\r\n\r\n  a {\r\n    text-decoration: none;\r\n  }\r\n`;\r\n\r\nconst NavButton = styled.button`\r\n  background: ${COLORS.white};\r\n  border: 0;\r\n`;\r\n\r\ninterface ExtendedMenuWrapperProps {\r\n  floatRight: boolean;\r\n}\r\n\r\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\r\n  display: flex;\r\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\r\n\r\n  position: absolute;\r\n  flex-direction: column;\r\n  left: 290px;\r\n  top: 22px;\r\n\r\n  height: 0;\r\n  width: 0;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst ExtendedSection = styled.div`\r\n  position: relative;\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions: NavOption[];\r\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\r\n};\r\n\r\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\r\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\r\n  const extendedMenuRef = React.useRef<any>(null);\r\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\r\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\r\n\r\n  const widthOfItem = 150;\r\n  const recalculateNumberOfItemsAllowed = () => {\r\n    if (rightSideRef?.current && mainMenuRef?.current) {\r\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\r\n      if (number !== numberOfItemsAllowed) {\r\n        setNumberOfItemsAllowed(number);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickExtendedMenuAction = () => {\r\n    setShowExtendedMenu(false);\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\r\n      if (showExtendedMenu) {\r\n        setShowExtendedMenu(false);\r\n      }\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    recalculateNumberOfItemsAllowed();\r\n    // Bind the event listener\r\n    document.addEventListener('click', handleClickOutside);\r\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    return () => {\r\n      // Unbind the event listener on clean up\r\n      document.removeEventListener('click', handleClickOutside);\r\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    };\r\n  });\r\n\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n\r\n  return (\r\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\r\n      {navigationOptions?.map((no: NavOption, index: number) =>\r\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\r\n          <NavItem\r\n            as={NavButton}\r\n            exact={no?.exact}\r\n            className=\"disabled\"\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ) : (\r\n          <NavItem\r\n            as={NavLink}\r\n            exact={no?.exact}\r\n            to={no?.to || ''}\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ),\r\n      )}\r\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\r\n        <ExtendedSection>\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            action={() => setShowExtendedMenu(true)}>\r\n            <MoreHorizontal size=\"24px\" />\r\n          </IconButton>\r\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\r\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\r\n          </ExtendedMenuWrapper>\r\n        </ExtendedSection>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default MainMenu;\r\n"],"file":"MainMenu.js"}