@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/esm/GlobalNavigationBar/RightSideNav.js

@@ -0,0 +1,81 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from '../NavItem';
+import { BREAKPOINTS, ComponentTextStyle } from '../styles';
+import { Button } from '../Button';
+import { ComponentMStyling } from '../styles/typography';
+const NavContainer = styled.div`
+  display: flex;
+  margin: auto 0 auto auto;
+  align-items: center;
+  height: 48px;
+  
+  a {
+    text-decoration: none;
+  }
+
+  ${BREAKPOINTS.SMALL} {
+    height: 56px;
+  }
+  ${BREAKPOINTS.MEDIUM} {
+    height: 64px;
+  }
+
+  button,
+  div {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+const SecondaryButton = styled(Button)`
+  height: 40px;
+  margin: 0 8px;
+
+  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}
+`;
+
+const RightSideNav = ({
+  navigationOptions,
+  secondaryButton
+}) => {
+  const preventFocusOnClick = e => {
+    e.preventDefault();
+  };
+
+  const getNavItem = navOption => {
+    if (navOption?.disabled) {
+      return /*#__PURE__*/React.createElement(NavItem, {
+        as: Button,
+        className: "disabled",
+        key: navOption?.label
+      }, navOption?.label);
+    } else {
+      return /*#__PURE__*/React.createElement(NavItem, {
+        as: NavLink,
+        exact: navOption?.exact,
+        to: navOption?.to || '',
+        key: navOption?.label,
+        onMouseDown: preventFocusOnClick,
+        onClick: () => {
+          if (navOption?.onClick) {
+            navOption?.onClick();
+          }
+        }
+      }, navOption?.label);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(NavContainer, null, navigationOptions?.reverse().map(no => getNavItem(no)), secondaryButton && /*#__PURE__*/React.createElement(SecondaryButton, {
+    variant: "secondary",
+    onClick: secondaryButton?.action
+  }, secondaryButton.label));
+};
+
+RightSideNav.propTypes = {
+  navigationOptions: _pt.array
+};
+export default RightSideNav;
+//# sourceMappingURL=RightSideNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","NavContainer","div","SMALL","MEDIUM","SecondaryButton","Bold","RightSideNav","navigationOptions","secondaryButton","preventFocusOnClick","e","preventDefault","getNavItem","navOption","disabled","label","exact","to","onClick","reverse","map","no","action"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AAEA,SAAQC,OAAR,QAAsB,YAAtB;AAEA,SAAQC,WAAR,EAAqBC,kBAArB,QAA8C,WAA9C;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,YAAY,GAAGP,MAAM,CAACQ,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIL,WAAW,CAACM,KAAM;AACtB;AACA;AACA,IAAIN,WAAW,CAACO,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMC,eAAe,GAAGX,MAAM,CAACK,MAAD,CAAS;AACvC;AACA;AACA;AACA,IAAIC,iBAAiB,CAACF,kBAAkB,CAACQ,IAApB,EAA0B,OAA1B,CAAmC;AACxD,CALA;;AAYA,MAAMC,YAAY,GAAG,CAAC;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,CAAD,KAA8E;AACjG,QAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,QAAIA,SAAS,EAAEC,QAAf,EAAyB;AACvB,0BACE,oBAAC,OAAD;AAAS,QAAA,EAAE,EAAEhB,MAAb;AAAqB,QAAA,SAAS,EAAC,UAA/B;AAA0C,QAAA,GAAG,EAAEe,SAAS,EAAEE;AAA1D,SACGF,SAAS,EAAEE,KADd,CADF;AAKD,KAND,MAMO;AACL,0BACE,oBAAC,OAAD;AACE,QAAA,EAAE,EAAErB,OADN;AAEE,QAAA,KAAK,EAAEmB,SAAS,EAAEG,KAFpB;AAGE,QAAA,EAAE,EAAEH,SAAS,EAAEI,EAAX,IAAiB,EAHvB;AAIE,QAAA,GAAG,EAAEJ,SAAS,EAAEE,KAJlB;AAKE,QAAA,WAAW,EAAEN,mBALf;AAME,QAAA,OAAO,EAAE,MAAM;AACb,cAAII,SAAS,EAAEK,OAAf,EAAwB;AACtBL,YAAAA,SAAS,EAAEK,OAAX;AACD;AACF;AAVH,SAWGL,SAAS,EAAEE,KAXd,CADF;AAeD;AACF,GAxBD;;AAyBA,sBACE,oBAAC,YAAD,QACGR,iBAAiB,EAAEY,OAAnB,GAA6BC,GAA7B,CAAiCC,EAAE,IAAIT,UAAU,CAACS,EAAD,CAAjD,CADH,EAGGb,eAAe,iBACd,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAC,WAAzB;AAAqC,IAAA,OAAO,EAAEA,eAAe,EAAEc;AAA/D,KACGd,eAAe,CAACO,KADnB,CAJJ,CADF;AAWD,CAxCD;;;AAJER,EAAAA,iB;;AA8CF,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../NavItem';\nimport {NavButton, NavOption} from '../types';\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\nimport {Button} from '../Button';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst NavContainer = styled.div`\n  display: flex;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 48px;\n  \n  a {\n    text-decoration: none;\n  }\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nconst SecondaryButton = styled(Button)`\n  height: 40px;\n  margin: 0 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n  navigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n};\n\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\n  const preventFocusOnClick = (e: any) => {\n    e.preventDefault();\n  };\n  const getNavItem = (navOption: NavOption) => {\n    if (navOption?.disabled) {\n      return (\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\n          {navOption?.label}\n        </NavItem>\n      );\n    } else {\n      return (\n        <NavItem\n          as={NavLink}\n          exact={navOption?.exact}\n          to={navOption?.to || ''}\n          key={navOption?.label}\n          onMouseDown={preventFocusOnClick}\n          onClick={() => {\n            if (navOption?.onClick) {\n              navOption?.onClick();\n            }\n          }}>\n          {navOption?.label}\n        </NavItem>\n      );\n    }\n  };\n  return (\n    <NavContainer>\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\n\n      {secondaryButton && (\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\n          {secondaryButton.label}\n        </SecondaryButton>\n      )}\n    </NavContainer>\n  );\n};\n\nexport default RightSideNav;\n"],"file":"RightSideNav.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js

@@ -0,0 +1,92 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { COLORS, ComponentTextStyle } from '../../styles';
+import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
+import { ComponentMStyling } from '../../styles/typography';
+const LinkStyles = css`
+  border: none;
+  background: transparent;
+  padding: 16px 25px;
+
+  text-decoration: none;
+  text-align: left;
+  align-items: center;
+  display: flex;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+  svg {
+    margin-right: 15px;
+    color: ${COLORS.neutral_600};
+  }
+`;
+const InternalLink = styled(NavLink)`
+  ${LinkStyles};
+`;
+const ExternalLink = styled.a`
+  ${LinkStyles};
+`;
+const IconsRightSide = styled.div`
+  margin: 0 0 0 auto;
+  align-items: center;
+  svg {
+    margin-right: 0;
+  }
+`;
+
+const MenuLink = ({
+  to,
+  isExternal,
+  menuText,
+  Icon,
+  notification,
+  extendedMenu,
+  onClick
+}) => {
+  const getRightSide = () => /*#__PURE__*/React.createElement(IconsRightSide, null, notification ? /*#__PURE__*/React.createElement(Bullet, {
+    size: "24px",
+    color: COLORS.critical_500
+  }) : null, extendedMenu ? /*#__PURE__*/React.createElement(ChevronRight, {
+    size: "24px",
+    color: COLORS.neutral_600
+  }) : null);
+
+  return /*#__PURE__*/React.createElement("li", null, isExternal ? /*#__PURE__*/React.createElement(ExternalLink, {
+    key: `ExternalLink_${to}`,
+    href: to,
+    role: "menuitem",
+    className: "UserMenuLink",
+    onClick: () => {
+      if (onClick) {
+        onClick();
+      }
+    }
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    size: "24px"
+  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()) : /*#__PURE__*/React.createElement(InternalLink, {
+    key: `InternalLink_${to}`,
+    to: to,
+    role: "menuitem",
+    className: "UserMenuLink",
+    onClick: () => {
+      if (onClick) {
+        onClick();
+      }
+    }
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    size: "24px"
+  }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()));
+};
+
+MenuLink.propTypes = {
+  to: _pt.string.isRequired,
+  menuText: _pt.string.isRequired,
+  isExternal: _pt.bool,
+  Icon: _pt.any,
+  notification: _pt.bool,
+  extendedMenu: _pt.bool,
+  onClick: _pt.func
+};
+export default MenuLink;
+//# sourceMappingURL=MenuLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AAEA,MAAMC,UAAU,GAAGP,GAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA,aAAaP,MAAM,CAACO,WAAY;AAChC;AACA,CAfA;AAiBA,MAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAU;AACrC,IAAIM,UAAW;AACf,CAFA;AAIA,MAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAE;AAC9B,IAAIL,UAAW;AACf,CAFA;AAIA,MAAMM,cAAc,GAAGd,MAAM,CAACe,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA,CANA;;AAkBA,MAAMC,QAAQ,GAAG,CAAC;AAAEC,EAAAA,EAAF;AAAMC,EAAAA,UAAN;AAAkBC,EAAAA,QAAlB;AAA4BC,EAAAA,IAA5B;AAAkCC,EAAAA,YAAlC;AAAgDC,EAAAA,YAAhD;AAA8DC,EAAAA;AAA9D,CAAD,KAA4F;AAC3G,QAAMC,YAAY,GAAG,mBACnB,oBAAC,cAAD,QACGH,YAAY,gBAAG,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,IAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,IAAH,GAA6D,IAF5E,CADF;;AAMA,sBACE,gCACGQ,UAAU,gBACT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeD,EAAG,EAD1B;AAEE,IAAA,IAAI,EAAEA,EAFR;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CADS,gBAgBT,oBAAC,YAAD;AACE,IAAA,GAAG,EAAG,gBAAeP,EAAG,EAD1B;AAEE,IAAA,EAAE,EAAEA,EAFN;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAC,cAJZ;AAKE,IAAA,OAAO,EAAE,MAAM;AACb,UAAIM,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF;AATH,KAUGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,IAVX,eAWE,kCAAOD,QAAP,CAXF,EAYGK,YAAY,EAZf,CAjBJ,CADF;AAmCD,CA1CD;;;AATEP,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -0,0 +1,197 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../../styles';
+import MenuLink from './MenuLink';
+import { Button, IconButton } from '../../Button';
+import { ArrowLineLeft, Close } from '../../icons/systemicons/SystemIcons';
+import { flowDown, Right, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
+const Menu = styled.ul`
+  list-style: none;
+  margin: 0;
+  background-color: ${COLORS.white};
+  box-sizing: border-box;
+  display: none;
+  -webkit-animation: ${flowDown} 0.2s ease-in-out;
+  animation: ${flowDown} 0.2s ease-in-out;
+  position: absolute;
+  border-radius: 4px;
+  z-index: ${Z_INDEXES.fixed_menu};
+  height: 100%;
+  width: 320px;
+  padding-inline-start: 0;
+  overflow-y: scroll;
+  ${BREAKPOINTS.SMALL} {
+    min-width: 360px;
+  }
+
+  .open & {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .signOutButton {
+    height: 40px !important;
+    width: 288px !important;
+
+    ${BREAKPOINTS.SMALL} {
+      width: 328px !important;
+    }
+  }
+
+  ${scrollBarStyling};
+`;
+const MenuSection = styled.li`
+  padding: 8px 0;
+  position: relative;
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+const MenuSectionList = styled.ul`
+  list-style: none;
+  margin: 0;
+  overflow-y: unset !important;
+  padding-inline-start: 0;
+  ${UserMenuSectionListStyling};
+`;
+const Top = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 22px 12px 0 12px;
+  color: ${COLORS.neutral_600};
+
+  h3 {
+    margin-block-start: 0 !important;
+    margin-block-end: 0 !important;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    margin-left: 24px;
+
+    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
+  }
+`;
+const LabelLine = styled.span`
+  height: 32px;
+  background-color: ${COLORS.neutral_20};
+  padding-left: 24px;
+  display: flex;
+  line-height: 32px;
+`;
+const StyledMenulink = styled(MenuLink)`
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  
+  & a {
+    height: 100%;
+  }
+`;
+
+const MobileUserMenu = ({
+  accountMenuHeader,
+  firstName,
+  lastName,
+  email,
+  organizationName,
+  clickMenuAction,
+  accountSection,
+  organizationSection,
+  supportSection,
+  signOut,
+  signOutLabel
+}) => {
+  React.useEffect(() => {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/React.createElement(Menu, {
+    onClick: () => {},
+    role: "menu",
+    "aria-labelledby": "UserMenuButton"
+  }, /*#__PURE__*/React.createElement(Top, {
+    key: "MobileUserMenuTopSection"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    action: clickMenuAction,
+    isInMobileMenu: true
+  }, /*#__PURE__*/React.createElement(ArrowLineLeft, {
+    size: "24px",
+    color: COLORS.neutral_600
+  })), /*#__PURE__*/React.createElement("h3", null, accountMenuHeader), /*#__PURE__*/React.createElement(Right, null, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    action: clickMenuAction,
+    isInMobileMenu: true
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: "24px"
+  })))), accountSection && accountSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MobileAccountSection"
+  }, /*#__PURE__*/React.createElement(LabelLine, {
+    "data-hj-suppress": true
+  }, `${firstName} ${lastName}`), /*#__PURE__*/React.createElement(MenuSectionList, null, accountSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+    key: element?.to,
+    to: element?.to,
+    menuText: element?.label
+  })))), organizationSection && organizationSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MObileOrganizationSection"
+  }, /*#__PURE__*/React.createElement(LabelLine, null, organizationName || ''), /*#__PURE__*/React.createElement(MenuSectionList, null, organizationSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+    key: element?.to,
+    to: element?.to,
+    menuText: element?.label
+  })))), supportSection && supportSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MobileSupportSection"
+  }, /*#__PURE__*/React.createElement(LabelLine, null, ''), /*#__PURE__*/React.createElement(MenuSectionList, null, supportSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+    key: element?.to,
+    isExternal: element.isExternal,
+    to: element?.to,
+    menuText: element?.label
+  })))), signOut && /*#__PURE__*/React.createElement("div", {
+    key: "SignoutButton",
+    style: {
+      display: 'flex',
+      margin: 'auto 0 12px 0'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: '90%',
+      margin: '0 auto'
+    },
+    variant: "secondary",
+    onClick: e => {
+      e.preventDefault();
+      signOut(e);
+    }
+  }, signOutLabel)));
+};
+
+MobileUserMenu.propTypes = {
+  accountMenuHeader: _pt.string.isRequired,
+  firstName: _pt.string.isRequired,
+  lastName: _pt.string.isRequired,
+  email: _pt.string.isRequired,
+  organizationName: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  signOut: _pt.func,
+  signOutLabel: _pt.string
+};
+export default MobileUserMenu;
+//# sourceMappingURL=MobileUserMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","MenuLink","Button","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","ComponentSStyling","Z_INDEXES","Menu","ul","white","fixed_menu","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","StyledMenulink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","isExternal","display","margin","width","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.fixed_menu};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ${BREAKPOINTS.SMALL} {\n      width: 328px !important;\n    }\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ${UserMenuSectionListStyling};\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\nconst StyledMenulink = styled(MenuLink)`\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n`;\n\ninterface Props {\n  accountMenuHeader: string;\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n  accountMenuHeader,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  clickMenuAction,\n  accountSection,\n  organizationSection,\n  supportSection,\n  signOut,\n  signOutLabel,\n}: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top key=\"MobileUserMenuTopSection\">\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n          <MenuSectionList>\n            {accountSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MObileOrganizationSection\">\n          <LabelLine>{organizationName || ''}</LabelLine>\n          <MenuSectionList>\n            {organizationSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {supportSection && supportSection?.length > 0 && (\n        <MenuSection key=\"MobileSupportSection\">\n          <LabelLine>{''}</LabelLine>\n          <MenuSectionList>\n            {supportSection?.map((element) => (\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {signOut && (\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n          <Button\n            style={{ width: '90%', margin: '0 auto' }}\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.preventDefault();\n              signOut(e);\n            }}>\n            {signOutLabel}\n          </Button>\n        </div>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js

@@ -0,0 +1,186 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { COLORS, ComponentTextStyle } from '../../styles';
+import Avatar, { AvatarContainer } from '../Avatar';
+import MenuLink from './MenuLink';
+import { Size } from '../../types';
+import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
+import { Z_INDEXES } from '../../styles/z-indexes';
+const Menu = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: ${COLORS.white};
+  box-sizing: border-box;
+  display: none;
+  min-width: 312px;
+  -webkit-animation: ${flowDown} 0.2s ease-in-out;
+  animation: ${flowDown} 0.2s ease-in-out;
+  position: absolute;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid ${COLORS.neutral_200};
+  z-index: ${Z_INDEXES.fixed_menu};
+
+  .open & {
+    display: block;
+  }
+  
+  .sign-out{
+    width: 90%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 8px auto 12px auto;
+  }
+`;
+const MenuSection = styled.li`
+  padding: 8px 0;
+  position: relative;
+
+  &:not(:first-of-type)::before {
+    content: '';
+    position: absolute;
+    background: ${COLORS.neutral_100};
+    height: 1px;
+    top: 0;
+    left: 16px;
+    right: 16px;
+  }
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+const MenuSectionList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  ${UserMenuSectionListStyling};
+`;
+const StyledAvatarContainer = styled(AvatarContainer)`
+  margin: 25px 0 0 25px;
+  pointer-events: none;
+`;
+const AvatarAndName = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  h5 {
+    margin: 28px 0 0 20px;
+    ${HeadlineXXSStyling(COLORS.neutral_600)}
+  }
+  span {
+    margin: 0 0 0 20px;
+    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+  }
+`;
+const NameAndEmail = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const OrganizationName = styled.span`
+  margin-left: 25px;
+  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}
+`;
+
+const UserMenu = ({
+  firstName,
+  lastName,
+  email,
+  organizationName,
+  clickMenuAction,
+  accountSection,
+  organizationSection,
+  supportSection,
+  signOut,
+  signOutLabel
+}) => {
+  React.useEffect(() => {
+    function handleKeyPress(e) {
+      if (e.keyCode === 27) {
+        clickMenuAction();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [clickMenuAction]);
+  return /*#__PURE__*/React.createElement(Menu, {
+    onClick: clickMenuAction,
+    role: "menu",
+    "aria-labelledby": "UserMenuButton"
+  }, /*#__PURE__*/React.createElement(AvatarAndName, {
+    key: "AvatarAndNameSection"
+  }, /*#__PURE__*/React.createElement(StyledAvatarContainer, {
+    hidePadding: true
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: 48,
+    firstName: firstName,
+    lastName: lastName,
+    color: COLORS.primary_500,
+    profileMenuLink: "#TODO"
+  })), /*#__PURE__*/React.createElement(NameAndEmail, null, /*#__PURE__*/React.createElement("h5", {
+    "data-hj-suppress": true
+  }, `${firstName} ${lastName}`), /*#__PURE__*/React.createElement("span", {
+    "data-hj-suppress": true
+  }, email))), accountSection && accountSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MobileAccountSection"
+  }, /*#__PURE__*/React.createElement(MenuSectionList, null, accountSection?.map(element => /*#__PURE__*/React.createElement(MenuLink, {
+    key: element?.to,
+    to: element?.to,
+    menuText: element?.label,
+    Icon: element?.icon,
+    onClick: element?.onClick
+  })))), organizationSection && organizationSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MobileOrganizationSection"
+  }, /*#__PURE__*/React.createElement(OrganizationName, null, organizationName || ''), /*#__PURE__*/React.createElement(MenuSectionList, null, organizationSection?.map(element => /*#__PURE__*/React.createElement(MenuLink, {
+    key: element?.to,
+    to: element?.to,
+    menuText: element?.label,
+    Icon: element?.icon,
+    onClick: element?.onClick
+  })))), /*#__PURE__*/React.createElement(MenuSection, {
+    key: "MobileSupportSection"
+  }, /*#__PURE__*/React.createElement(MenuSectionList, null, supportSection?.map(element => /*#__PURE__*/React.createElement(MenuLink, {
+    key: element?.to,
+    isExternal: element.isExternal,
+    to: element?.to,
+    menuText: element?.label,
+    Icon: element?.icon,
+    onClick: element?.onClick
+  })), signOut && /*#__PURE__*/React.createElement(Button, {
+    width: "90%",
+    className: "UserMenuLink sign-out",
+    variant: "secondary",
+    size: Size.Large,
+    onClick: e => {
+      e.preventDefault();
+      signOut(e);
+    }
+  }, signOutLabel))));
+};
+
+UserMenu.propTypes = {
+  firstName: _pt.string.isRequired,
+  lastName: _pt.string.isRequired,
+  email: _pt.string.isRequired,
+  organizationName: _pt.string.isRequired,
+  clickMenuAction: _pt.func.isRequired,
+  accountSection: _pt.array,
+  organizationSection: _pt.array,
+  supportSection: _pt.array,
+  signOut: _pt.func,
+  signOutLabel: _pt.string
+};
+export default UserMenu;
+//# sourceMappingURL=UserMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","Size","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Z_INDEXES","Menu","ul","white","neutral_200","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ${COLORS.neutral_200};\n  z-index: ${Z_INDEXES.fixed_menu};\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ${COLORS.neutral_100};\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n  margin: 25px 0 0 25px;\n  pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  h5 {\n    margin: 28px 0 0 20px;\n    ${HeadlineXXSStyling(COLORS.neutral_600)}\n  }\n  span {\n    margin: 0 0 0 20px;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\n\nconst NameAndEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n  margin-left: 25px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <AvatarAndName key=\"AvatarAndNameSection\">\n        <StyledAvatarContainer hidePadding={true}>\n          <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n        </StyledAvatarContainer>\n        <NameAndEmail>\n          <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n          <span data-hj-suppress>{email}</span>\n        </NameAndEmail>\n      </AvatarAndName>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <MenuSectionList>\n            {accountSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MobileOrganizationSection\">\n          <OrganizationName>{organizationName || ''}</OrganizationName>\n          <MenuSectionList>\n            {organizationSection?.map(element => (\n              <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      <MenuSection key=\"MobileSupportSection\">\n        <MenuSectionList>\n          {supportSection?.map(element => (\n            <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n          ))}\n          {signOut && (\n            <Button\n              width=\"90%\"\n              className=\"UserMenuLink sign-out\"\n              variant=\"secondary\"\n              size={Size.Large}\n              onClick={e => {\n                e.preventDefault();\n                signOut(e);\n              }}>\n              {signOutLabel}\n            </Button>\n          )}\n        </MenuSectionList>\n      </MenuSection>\n    </Menu>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}