@laerdal/life-react-components 6.0.0-dev.2 → 6.0.0-dev.20.full

package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","Size","RowLayout","div","Button","button","props","getColor","theme","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","focus","active","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {StyledLink} from '../../HyperLink/HyperLink';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\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\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const 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\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","Size","RowLayout","div","Button","button","props","getColor","theme","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","focus","active","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\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\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const 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\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenu.test.tsx

@@ -0,0 +1,317 @@
+import * as React from 'react';
+import {act, render, waitFor} from '../../../test-utils';
+import {
+  DesktopMenuButtonTypes,
+  MenuNavigationItemTypeGroup,
+  MenuNavigationItemTypeItem,
+  MobileMenuButtonTypes
+} from '../../types';
+import {SystemIcons} from '../../../icons';
+import MobileMenu from '../MobileMenu';
+import { NavigationProvider } from '../../../Navigation';
+
+const navigateSpy = jest.fn();
+const isActiveRouteSpy = jest.fn();
+
+jest.mock('rooks', () => ({
+  useDimensionsRef: () => [],
+  useMediaMatch: () => true
+
+}));
+
+
+
+describe('MobileMenu', () => {
+
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+
+  const mainNavigationOptions = [
+    {
+      label: 'Overview',
+      to: '/',
+      exact: true,
+      onClick: () => {
+        console.log('Clicked on overview page');
+      },
+    },
+    {
+      label: 'Services',
+      to: '/services',
+    },
+    {
+      label: 'Products',
+      to: '/products',
+    },
+  ];
+
+  const secondaryNavigationOptions = [
+    {
+      label: 'Pinned Tab',
+      to: 'pinned',
+      pinned: true
+    },
+  ];
+
+  const headerActions: DesktopMenuButtonTypes[] = [
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('search');
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('notifications');
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('settings');
+      },
+      icon: <SystemIcons.GearSettings/>,
+    },
+    {
+      type: 'profile',
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('shop');
+      },
+      icon: <SystemIcons.ShoppingCart/>,
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const notifications: MenuNavigationItemTypeItem[] = [
+    {
+      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',
+    },
+  ];
+
+  const mobileActions: MobileMenuButtonTypes[] = [
+    {
+      type: 'submenu',
+      menu: {
+        type: 'custom',
+        label: 'Search',
+        custom: () => 'custom'
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'submenu',
+      menu: {
+        type: 'group',
+        label: 'Notifications',
+        items: notifications
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+        return true;
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'profile',
+      placement: 'left'
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const mobileStickyNav = [
+    {
+      label: 'Help',
+      to: '/help',
+      pinned: true,
+      icon: <SystemIcons.Help/>,
+    },
+    {
+      label: 'Support',
+      to: '/support',
+      pinned: true,
+      icon: <SystemIcons.Support/>,
+    },
+  ];
+
+  const accountSection = [
+    {label: 'My Account', to: '/account/myaccount', icon: <SystemIcons.User/>, external: false},
+    {label: 'Language & Region', to: '/account/language', icon: <SystemIcons.Language/>, external: false},
+    {label: 'Settings', to: '/account/settings', icon: <SystemIcons.GearSettings/>, external: false},
+  ];
+
+  const organizationSection = [
+    {
+      label: 'Organization details',
+      to: '/organization/myorganization',
+      icon: <SystemIcons.Institute/>,
+      external: false
+    },
+    {label: 'People', to: '/organization/user-management', icon: <SystemIcons.Team/>, external: false},
+  ];
+
+  const supportSection = [
+    {
+      label: 'Help',
+      to: 'https://laerdal.force.com/HelpCenter',
+      icon: <SystemIcons.Help/>,
+      external: true,
+      pinned: true
+    },
+    {
+      label: 'Support',
+      to: 'https://www.laerdal.com/support/',
+      icon: <SystemIcons.Support/>,
+      external: true,
+      pinned: true
+    },
+  ];
+
+  const mobileNavigationSubGroup = {
+    type: 'group',
+    items: [...organizationSection, ...supportSection],
+    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: () => {
+        console.log('Sign out');
+      },
+      icon: <SystemIcons.Logout/>
+    },
+    label: 'Organization',
+    icon: <SystemIcons.Institute/>,
+  } as MenuNavigationItemTypeGroup;
+
+  it('should render label', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} label={'label'} onClose={jest.fn()}/></NavigationProvider>)
+
+    expect(wrapper.findByText('label')).toBeDefined();
+  });
+
+  it('should render header', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} header={{header: 'header', note: 'note'}} onClose={jest.fn()}/></NavigationProvider>)
+
+    expect(wrapper.findByText('header')).toBeDefined();
+    expect(wrapper.findByText('note')).toBeDefined();
+  });
+
+  it('should render footer', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu
+      onClose={jest.fn()}
+      show={true}
+      footer={{header: 'header', note: 'note', link: {label: 'link', href: '#'}}}/></NavigationProvider>)
+
+    expect(wrapper.findByText('header')).toBeDefined();
+    expect(wrapper.findByText('note')).toBeDefined();
+    expect(wrapper.findByText('link')).toBeDefined();
+  });
+
+  it('should render action', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu
+      onClose={jest.fn()}
+      show={true}
+      action={{action: jest.fn(), label: 'action'}}/></NavigationProvider>)
+
+    expect(wrapper.findByText('action')).toBeDefined();
+  });
+
+  it('should render items', () => {
+    const items = [mobileNavigationSubGroup, ...mainNavigationOptions, ...mobileStickyNav]
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} onClose={jest.fn()} items={items}/></NavigationProvider>)
+
+    items.forEach(item => {
+      expect(wrapper.findByText(item.label)).toBeDefined();
+    });
+  });
+
+  it('should call on close when close button is clicked', () => {
+    const close = jest.fn();
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenu show={true} label={'label'} onClose={close}/></NavigationProvider>)
+
+    act(() => {
+      wrapper.container.querySelector('button')!.click();
+    });
+    expect(close).toHaveBeenCalled();
+  });
+
+});

package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenuContent.test.tsx

@@ -0,0 +1,294 @@
+import * as React from 'react';
+import {render} from '../../../test-utils';
+import MobileMenuContent from '../MobileMenuContent';
+import {
+  DesktopMenuButtonTypes,
+  MenuNavigationItemTypeGroup,
+  MenuNavigationItemTypeItem,
+  MobileMenuButtonTypes
+} from '../../types';
+import {SystemIcons} from '../../../icons';
+import { NavigationProvider } from '../../../Navigation';
+
+const navigateSpy = jest.fn();
+const isActiveRouteSpy = jest.fn();
+
+
+jest.mock('rooks', () => ({
+  useDimensionsRef: () => [],
+  useMediaMatch: () => true
+}));
+
+describe('MobileMenuContent', () => {
+
+  const navProps = {
+    currentPath: '',
+    isActiveRoute: () => false,
+    navigate: (path: string, isExternal: boolean) => {}
+  };
+
+  const mainNavigationOptions = [
+    {
+      label: 'Overview',
+      to: '/',
+      exact: true,
+      onClick: () => {
+        console.log('Clicked on overview page');
+      },
+    },
+    {
+      label: 'Services',
+      to: '/services',
+    },
+    {
+      label: 'Products',
+      to: '/products',
+    },
+  ];
+
+  const secondaryNavigationOptions = [
+    {
+      label: 'Pinned Tab',
+      to: 'pinned',
+      pinned: true
+    },
+  ];
+
+  const headerActions: DesktopMenuButtonTypes[] = [
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('search');
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('notifications');
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('settings');
+      },
+      icon: <SystemIcons.GearSettings/>,
+    },
+    {
+      type: 'profile',
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('shop');
+      },
+      icon: <SystemIcons.ShoppingCart/>,
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const notifications: MenuNavigationItemTypeItem[] = [
+    {
+      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',
+    },
+  ];
+
+  const mobileActions: MobileMenuButtonTypes[] = [
+    {
+      type: 'submenu',
+      menu: {
+        type: 'custom',
+        label: 'Search',
+        custom: () => 'custom'
+      },
+      icon: <SystemIcons.Search/>,
+    },
+    {
+      type: 'submenu',
+      menu: {
+        type: 'group',
+        label: 'Notifications',
+        items: notifications
+      },
+      icon: <SystemIcons.Notification/>,
+    },
+    {
+      type: 'action',
+      action: (e) => {
+        console.log('language');
+        return true;
+      },
+      icon: <SystemIcons.Language/>,
+    },
+    {
+      type: 'profile',
+      placement: 'left'
+    },
+    {
+      type: 'switcher',
+      action: (e) => {
+        // @ts-ignore
+        window.portalNav.toggle();
+        console.log('switcher')
+      },
+    }
+  ];
+
+  const mobileStickyNav = [
+    {
+      label: 'Help',
+      to: '/help',
+      pinned: true,
+      icon: <SystemIcons.Help/>,
+    },
+    {
+      label: 'Support',
+      to: '/support',
+      pinned: true,
+      icon: <SystemIcons.Support/>,
+    },
+  ];
+
+  const accountSection = [
+    {label: 'My Account', to: '/account/myaccount', icon: <SystemIcons.User/>, external: false},
+    {label: 'Language & Region', to: '/account/language', icon: <SystemIcons.Language/>, external: false},
+    {label: 'Settings', to: '/account/settings', icon: <SystemIcons.GearSettings/>, external: false},
+  ];
+
+  const organizationSection = [
+    {
+      label: 'Organization details',
+      to: '/organization/myorganization',
+      icon: <SystemIcons.Institute/>,
+      external: false
+    },
+    {label: 'People', to: '/organization/user-management', icon: <SystemIcons.Team/>, external: false},
+  ];
+
+  const supportSection = [
+    {
+      label: 'Help',
+      to: 'https://laerdal.force.com/HelpCenter',
+      icon: <SystemIcons.Help/>,
+      external: true,
+      pinned: true
+    },
+    {
+      label: 'Support',
+      to: 'https://www.laerdal.com/support/',
+      icon: <SystemIcons.Support/>,
+      external: true,
+      pinned: true
+    },
+  ];
+
+  const mobileNavigationSubGroup = {
+    type: 'group',
+    items: [...organizationSection, ...supportSection],
+    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: () => {
+        console.log('Sign out');
+      },
+      icon: <SystemIcons.Logout/>
+    },
+    label: 'Organization',
+    icon: <SystemIcons.Institute/>,
+  } as MenuNavigationItemTypeGroup;
+
+  it('should render header', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent header={{header: 'header', note: 'note'}}/> </NavigationProvider>)
+
+    expect(wrapper.getByText('header')).toBeDefined();
+    expect(wrapper.getByText('note')).toBeDefined();
+  });
+
+  it('should render footer', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
+      footer={{header: 'header', note: 'note', link: {label: 'link', href: '#'}}}/></NavigationProvider>)
+
+    expect(wrapper.getByText('header')).toBeDefined();
+    expect(wrapper.getByText('note')).toBeDefined();
+    expect(wrapper.getByText('link')).toBeDefined();
+  });
+
+  it('should render action', () => {
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
+      action={{action: jest.fn(), label: 'action'}}/></NavigationProvider>)
+
+    expect(wrapper.getByText('action')).toBeDefined();
+  });
+
+  it('should render items', () => {
+    const items = [mobileNavigationSubGroup, ...mainNavigationOptions, ...mobileStickyNav]
+    const wrapper = render(<NavigationProvider {...navProps}><MobileMenuContent
+      items={items}/></NavigationProvider>)
+
+    items.forEach(item => {
+      expect(wrapper.getByText(item.label)).toBeDefined();
+    });
+  });
+
+});