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

package/dist/esm/Modals/ModalStyles.js

@@ -0,0 +1,161 @@
+import styled, { css } from 'styled-components';
+import { COLORS } from '..';
+import { Size } from '../types';
+/**
+ * Modal styles
+ */
+
+export const ModalHeader = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${props => props.marginBottom || '24px'};
+`;
+export const StyledModalHeader = styled(ModalHeader)`
+  flex: 0 calc(50% - 5px);
+  flex-direction: column;
+  position: relative;
+  text-align: left;
+  height: ${props => props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : ''};
+  img {
+    width: 100%;
+    height: ${props => `${props.height}px`};
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 8px 8px 0 0;
+    object-fit: cover;
+  }
+`;
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+`;
+export const ModalTitleSection = styled.section`
+  word-break: break-word;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+export const ModalHeaderActionsWithImage = styled.div`
+  display: flex;
+  flex-direction: ${props => !props.hasBackButton ? 'row-reverse' : 'row'};
+  justify-content: space-between;
+  width: 100%;
+  z-index: 1;
+`;
+export const ModalHeaderActions = styled.div`
+  display: flex;
+  margin: -12px -12px 0 0;
+`;
+export const FlexContainer = styled.div`
+  display: flex;
+`;
+export const ModalHoverModifier = styled.div`
+  button:hover {
+    cursor: help !important;
+  }
+`;
+export const CloseButtonWrapper = styled.div`
+  button {
+    ${props => props.hasImage ? css`
+            margin: -12px -12px 0 0 !important;
+          ` : css`
+            left: unset;
+          `}
+  }
+`;
+export const BackButtonWrapper = styled.div`
+  button {
+    margin: -12px 0 0 -12px !important;
+  }
+`;
+export const ModalTitle = styled.h5`
+  margin: 0;
+  font-size: ${props => props.fontSize || '1.25em'};
+  font-weight: bold;
+`;
+export const ModalNoteSection = styled.section`
+  background-color: ${props => getBackgroundColor(props.state)};
+  font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+  margin-top: ${props => props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px'};
+  margin-bottom: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
+  display: flex;
+  flex-direction: row;
+  padding: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px'};
+  border-radius: 2px;
+
+  span {
+    display: block;
+    width: 80%;
+    margin-left: 8px;
+    color: ${props => getNoteMessageColor(props.state)};
+  }
+`;
+export const ModalBody = styled.section`
+  > :first-child {
+    margin-top: 24px;
+  }
+
+  > :last-child {
+    margin-bottom: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
+  }
+
+  p: first-of-type {
+    padding-bottom: ${props => props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px'};
+  }
+`;
+export const ModalFooter = styled.section`
+  margin-top: ${props => props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px'};
+  display: flex;
+  justify-content: flex-end;
+
+  gap: ${props => props?.size === 'large' ? `16px` : '8px'};
+
+  .footer-action {
+    order: -1;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    font-size: ${props => props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px'};
+    gap: ${props => props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${COLORS.neutral_600};
+  }
+`;
+export const getBackgroundColor = state => {
+  switch (state) {
+    case 'positive':
+      return COLORS.correct_100;
+
+    case 'warning':
+      return COLORS.warning_100;
+
+    case 'critical':
+      return COLORS.critical_100;
+
+    default:
+      return COLORS.primary_100;
+  }
+};
+export const getNoteMessageColor = state => {
+  switch (state) {
+    case 'positive':
+      return COLORS.correct_700;
+
+    case 'warning':
+      return COLORS.warning_700;
+
+    case 'critical':
+      return COLORS.critical_700;
+
+    default:
+      return COLORS.primary_700;
+  }
+};
+//# sourceMappingURL=ModalStyles.js.map

package/dist/esm/Modals/ModalStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Small","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n  flex: 0 calc(50% - 5px);\n  flex-direction: column;\n  position: relative;\n  text-align: left;\n  height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n  img {\n    width: 100%;\n    height: ${(props) => `${props.height}px`};\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px 8px 0 0;\n    object-fit: cover;\n  }\n`;\n\nexport const Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n  word-break: break-word;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n  display: flex;\n  flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n  justify-content: space-between;\n  width: 100%;\n  z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n  display: flex;\n  margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n  display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n  button:hover {\n    cursor: help !important;\n  }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    ${(props) =>\n      props.hasImage\n        ? css`\n            margin: -12px -12px 0 0 !important;\n          `\n        : css`\n            left: unset;\n          `}\n  }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n  button {\n    margin: -12px 0 0 -12px !important;\n  }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n  margin: 0;\n  font-size: ${(props) => props.fontSize || '1.25em'};\n  font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n  background-color: ${(props) => getBackgroundColor(props.state)};\n  font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n  margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n  margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  display: flex;\n  flex-direction: row;\n  padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n  border-radius: 2px;\n\n  span {\n    display: block;\n    width: 80%;\n    margin-left: 8px;\n    color: ${(props) => getNoteMessageColor(props.state)};\n  }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n  > :first-child {\n    margin-top: 24px;\n  }\n\n  > :last-child {\n    margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n\n  p: first-of-type {\n    padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n  }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n  margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n  display: flex;\n  justify-content: flex-end;\n\n  gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n  .footer-action {\n    order: -1;\n    margin-right: auto;\n    display: flex;\n    align-items: center;\n    font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n    gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n  }\n\n  .footer-action.note {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_100;\n    case 'warning':\n      return COLORS.warning_100;\n    case 'critical':\n      return COLORS.critical_100;\n    default:\n      return COLORS.primary_100;\n  }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n  switch (state) {\n    case 'positive':\n      return COLORS.correct_700;\n    case 'warning':\n      return COLORS.warning_700;\n    case 'critical':\n      return COLORS.critical_700;\n    default:\n      return COLORS.primary_700;\n  }\n};\n"],"file":"ModalStyles.js"}

package/dist/esm/Modals/__tests__/Modal.test.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { ModalDialog } from '..';
+import { Size, SystemIcons } from '../..';
+describe('<ModalDialog />', () => {
+  let mountingDiv;
+  beforeEach(() => {
+    //being rendered as a React.Portal we need to have the 'root' div defined
+    mountingDiv = document.createElement('div');
+    mountingDiv.id = 'root';
+    document.body.appendChild(mountingDiv);
+  });
+  afterEach(() => {
+    document.body.removeChild(mountingDiv);
+  });
+  it('Check modal not rendered when isModalOpen is false', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: false,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //check modal portal not exists when modal not opened
+
+    expect(container.querySelector('.ReactModalPortal')).toBeNull();
+  });
+  it('Check modal visible, title and footer buttons displayed correctly', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      buttons: [{
+        action: () => {},
+        text: 'Close',
+        variant: 'tertiary'
+      }, {
+        action: () => {},
+        text: 'Save'
+      }]
+    })); //check modal portal defined
+
+    expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
+
+    expect(getByText('Header')).toBeDefined();
+    expect(getByText('Close')).toBeDefined();
+    expect(getByText('Save')).toBeDefined();
+  });
+  it('Check tooltip, and link displayed without right footer buttons', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      tooltip: 'some test tooltip',
+      leftFooterAction: {
+        id: 'test-link',
+        actionType: 'hyperlink',
+        text: 'Link',
+        href: 'http://test.com',
+        icon: /*#__PURE__*/React.createElement(React.Fragment, null),
+        variant: 'default'
+      }
+    })); //check tooltip displayed
+
+    expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
+
+    expect(getByText('Link').children).toBeDefined();
+  });
+  it('Check note and footer note displayed', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      leftFooterAction: {
+        id: 'test-note',
+        actionType: 'note',
+        text: 'Test note',
+        icon: /*#__PURE__*/React.createElement(SystemIcons.Information, null)
+      },
+      note: 'Message text',
+      state: 'critical'
+    })); //check footer note text displayed
+
+    expect(getByText('Test note').textContent).toBeDefined(); //check note section added
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(4); //check note message displayed
+
+    expect(getByText('Message text').children).toBeDefined();
+  });
+  it('Check back button and close icon displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      backButton: () => {},
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //only 2 svg elements should be found in the header of the modal
+
+    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
+  });
+  it('Check modal body displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    }, /*#__PURE__*/React.createElement("span", null, "Inner modal text"))); //Check all dialog sections are displayed
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(3); //Check that the second section (modal body) has the correct text
+
+    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
+  });
+});
+//# sourceMappingURL=Modal.test.js.map

package/dist/esm/Modals/__tests__/Modal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["React","render","ModalDialog","Size","SystemIcons","describe","mountingDiv","beforeEach","document","createElement","id","body","appendChild","afterEach","removeChild","it","container","getByText","Small","expect","querySelector","toBeNull","action","text","variant","toBeDefined","baseElement","actionType","href","icon","textContent","children","querySelectorAll","length","toEqual"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n  let mountingDiv: HTMLElement;\n\n  beforeEach(() => {\n    //being rendered as a React.Portal we need to have the 'root' div defined\n    mountingDiv = document.createElement('div');\n    mountingDiv.id = 'root';\n    document.body.appendChild(mountingDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(mountingDiv);\n  });\n\n  it('Check modal not rendered when isModalOpen is false', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={false}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //check modal portal not exists when modal not opened\n    expect(container.querySelector('.ReactModalPortal')).toBeNull();\n  });\n\n  it('Check modal visible, title and footer buttons displayed correctly', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        buttons={[\n          {\n            action: () => {},\n            text: 'Close',\n            variant: 'tertiary',\n          },\n          {\n            action: () => {},\n            text: 'Save',\n          },\n        ]}\n      />,\n    );\n    //check modal portal defined\n    expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n    //Check header and footer buttons\n    expect(getByText('Header')).toBeDefined();\n    expect(getByText('Close')).toBeDefined();\n    expect(getByText('Save')).toBeDefined();\n  });\n\n  it('Check tooltip, and link displayed without right footer buttons', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        tooltip={'some test tooltip'}\n        leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n      />,\n    );\n    //check tooltip displayed\n    expect(getByText('some test tooltip').textContent).toBeDefined();\n    //check footer link displayed\n    expect(getByText('Link').children).toBeDefined();\n  });\n\n  it('Check note and footer note displayed', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n        note={'Message text'}\n        state={'critical'}\n      />,\n    );\n    //check footer note text displayed\n    expect(getByText('Test note').textContent).toBeDefined();\n    //check note section added\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n    //check note message displayed\n    expect(getByText('Message text').children).toBeDefined();\n  });\n\n  it('Check back button and close icon displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        backButton={() => {}}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //only 2 svg elements should be found in the header of the modal\n    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n  });\n\n  it('Check modal body displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}>\n        <span>Inner modal text</span>\n      </ModalDialog>,\n    );\n    //Check all dialog sections are displayed\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n    //Check that the second section (modal body) has the correct text\n    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n  });\n});\n"],"file":"Modal.test.js"}

package/dist/esm/Modals/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/index.tsx"],"names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,gBAAhB,QAAwC,SAAxC;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SAASC,WAAT,EAAsBC,UAAtB,EAAkCC,SAAlC,EAA6CC,WAA7C,QAAgE,eAAhE;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAASP,KAAT,EAAgBE,cAAhB,EAAgCC,WAAhC,EAA6CE,SAA7C,EAAwDC,WAAxD,EAAqEF,UAArE,EAAiFH,gBAAjF,EAAmGM,WAAnG","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog };\n"],"file":"index.js"}

package/dist/esm/NavItem/NavItem.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+const NavItem = styled.div`
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+
+  margin: 0;
+  padding: 0 21px 0 21px;
+  height: 64px;
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: transparent;
+  }
+
+  &.active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    background-color: ${COLORS.neutral_20};
+    color: ${COLORS.neutral_800};
+    &:after {
+      background-color: ${COLORS.primary_600};
+    }
+  }
+
+  &.disabled {
+    color: ${COLORS.neutral_300};
+    background-color: ${COLORS.neutral_100};
+    &:after {
+      background-color: ${COLORS.neutral_100};
+    }
+  }
+
+  &:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
+    background-color: ${COLORS.primary_20};
+    color: ${COLORS.primary_700};
+    &:after {
+      background-color: ${COLORS.primary_600};
+    }
+  }
+
+  &:focus:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
+    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+    outline: none;
+    &:after {
+      background-color: ${COLORS.primary_600};
+    }
+  }
+`;
+export default NavItem;
+//# sourceMappingURL=NavItem.js.map

package/dist/esm/NavItem/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItem","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,OAAO,GAAGL,MAAM,CAACM,GAAI;AAC3B,IAAIJ,iBAAiB,CAACC,kBAAkB,CAACI,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACK,MAAO;AAChC,wBAAwBR,MAAM,CAACS,UAAW;AAC1C,aAAaT,MAAM,CAACU,WAAY;AAChC;AACA,0BAA0BV,MAAM,CAACW,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaX,MAAM,CAACY,WAAY;AAChC,wBAAwBZ,MAAM,CAACa,WAAY;AAC3C;AACA,0BAA0Bb,MAAM,CAACa,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeV,SAAS,CAACW,KAAM;AAC/B,wBAAwBd,MAAM,CAACe,UAAW;AAC1C,aAAaf,MAAM,CAACgB,WAAY;AAChC;AACA,0BAA0BhB,MAAM,CAACW,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeR,SAAS,CAACc,KAAM;AAC/B,8BAA8BjB,MAAM,CAACkB,WAAY;AACjD;AACA;AACA,0BAA0BlB,MAAM,CAACW,WAAY;AAC7C;AACA;AACA,CAzDA;AA2DA,eAAeP,OAAf","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}

package/dist/esm/NavItem/__tests__/NavItem.test.js

@@ -0,0 +1,5 @@
+test('it works', () => {
+  expect(true).toBe(true);
+});
+export {};
+//# sourceMappingURL=NavItem.test.js.map

package/dist/esm/NavItem/__tests__/NavItem.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NavItem/__tests__/NavItem.test.ts"],"names":["test","expect","toBe"],"mappings":"AAGAA,IAAI,CAAC,UAAD,EAAa,MAAM;AACrBC,EAAAA,MAAM,CAAC,IAAD,CAAN,CAAaC,IAAb,CAAkB,IAAlB;AACD,CAFG,CAAJ","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\ntest('it works', () => {\n  expect(true).toBe(true);\n});\n"],"file":"NavItem.test.js"}

package/dist/esm/NavItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavItem/index.ts"],"names":["default","NavItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as NavItem } from './NavItem';\n"],"file":"index.js"}

package/dist/esm/NotificationDot/NotificationDot.js

@@ -0,0 +1,41 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { COLORS } from '..';
+const ContentWrapper = styled.div`
+  width: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px'};
+  height: ${props => props.size === Size.Small ? '16px' : props.size === Size.Large ? '24px' : '20px'};
+  padding: ${props => props.size === Size.Small ? '3px' : props.size === Size.Large ? '4px' : '4px'};
+  box-sizing: border-box;
+`;
+const Content = styled.div`
+  background-color: ${props => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};
+  height: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  width: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  border-radius: ${props => props.size === Size.Small ? '10px' : props.size === Size.Large ? '16px' : '12px'};
+  border: ${props => props.size === Size.Small ? '2px solid ' + COLORS.white : props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white};
+  box-sizing: border-box;
+`;
+
+const NotificationDot = ({
+  size = Size.Medium,
+  variant,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(ContentWrapper, {
+    size: size,
+    variant: variant
+  }, /*#__PURE__*/React.createElement(Content, {
+    size: size,
+    variant: variant,
+    "data-testid": testId
+  }));
+};
+
+NotificationDot.propTypes = {
+  variant: _pt.oneOf(['critical', 'positive']).isRequired,
+  testId: _pt.string
+};
+export default NotificationDot;
+//# sourceMappingURL=NotificationDot.js.map

package/dist/esm/NotificationDot/NotificationDot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationDot/NotificationDot.tsx"],"names":["React","styled","Size","COLORS","ContentWrapper","div","props","size","Small","Large","Content","variant","correct_500","critical_500","white","NotificationDot","Medium","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,MAAR,QAAqB,IAArB;AAQA,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAuB;AACrD,WAAYC,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACzG,YAAaH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AAC1G,aAAcH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,KAA5B,GAAqCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,KAA5B,GAAoC,KAAO;AACxG;AACA,CALA;AAOA,MAAMC,OAAO,GAAGT,MAAM,CAACI,GAAuB;AAC9C,sBAAuBC,KAAD,IAAWA,KAAK,CAACK,OAAN,KAAkB,UAAlB,GAA+BR,MAAM,CAACS,WAAtC,GAAoDT,MAAM,CAACU,YAAa;AACzG,YAAaP,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AAC1G,WAAYH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACzG,mBAAoBH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,MAA5B,GAAsCF,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,MAA5B,GAAqC,MAAQ;AACjH,YAAaH,KAAD,IAAWA,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACM,KAApB,GAA4B,eAAeL,MAAM,CAACW,KAAlD,GAA2DR,KAAK,CAACC,IAAN,KAAeL,IAAI,CAACO,KAApB,GAA4B,eAAeN,MAAM,CAACW,KAAlD,GAA0D,eAAeX,MAAM,CAACW,KAAO;AACzK;AACA,CAPA;;AASA,MAAMC,eAA2D,GAAG,CAAC;AAACR,EAAAA,IAAI,GAAGL,IAAI,CAACc,MAAb;AAAqBL,EAAAA,OAArB;AAA8BM,EAAAA;AAA9B,CAAD,KAA2C;AAC7G,sBACE,oBAAC,cAAD;AAAgB,IAAA,IAAI,EAAEV,IAAtB;AAA4B,IAAA,OAAO,EAAEI;AAArC,kBACE,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEJ,IAAf;AAAqB,IAAA,OAAO,EAAEI,OAA9B;AAAuC,mBAAaM;AAApD,IADF,CADF;AAKD,CAND;;;AApBEN,EAAAA,O,aAAS,U,EAAa,U;AACtBM,EAAAA,M;;AA2BF,eAAeF,eAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport {COLORS} from '..';\n\nexport interface NotificationProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant: 'critical' | 'positive';\n  testId?: string;\n}\n\nconst ContentWrapper = styled.div<NotificationProps>`\n  width: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  height: ${(props) => props.size === Size.Small ? '16px' : (props.size === Size.Large ? '24px' : '20px')};\n  padding: ${(props) => props.size === Size.Small ? '3px' : (props.size === Size.Large ? '4px' : '4px')};\n  box-sizing: border-box;\n`;\n\nconst Content = styled.div<NotificationProps>`\n  background-color: ${(props) => props.variant === 'positive' ? COLORS.correct_500 : COLORS.critical_500};\n  height: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  width: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border-radius: ${(props) => props.size === Size.Small ? '10px' : (props.size === Size.Large ? '16px' : '12px')};\n  border: ${(props) => props.size === Size.Small ? '2px solid ' + COLORS.white : (props.size === Size.Large ? '3px solid ' + COLORS.white : '2px solid ' + COLORS.white)};\n  box-sizing: border-box;\n`;\n\nconst NotificationDot: React.FunctionComponent<NotificationProps> = ({size = Size.Medium, variant, testId}) => {\n  return (\n    <ContentWrapper size={size} variant={variant}>\n      <Content size={size} variant={variant} data-testid={testId}/>\n    </ContentWrapper>\n  );\n};\n\nexport default NotificationDot;\n"],"file":"NotificationDot.js"}

package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { NotificationDot } from '..';
+import { Size } from '../../types';
+import COLORS from '../../styles/colors';
+describe('<NotificationDot />', () => {
+  it('renders positive small notification dot', async () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(NotificationDot, {
+      variant: "positive",
+      size: Size.Small,
+      testId: "testId"
+    }));
+    expect(getByTestId('testId')).toHaveStyleRule('background-color', COLORS.correct_500);
+    expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);
+  });
+  it('renders critical large notification dot', async () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(NotificationDot, {
+      variant: "critical",
+      size: Size.Large,
+      testId: "testId"
+    }));
+    expect(getByTestId('testId')).toHaveStyleRule('background-color', COLORS.critical_500);
+    expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);
+  });
+  it('renders critical medium notification dot', async () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(NotificationDot, {
+      variant: "critical",
+      testId: "testId"
+    }));
+    expect(getByTestId('testId')).toHaveStyleRule('background-color', COLORS.critical_500);
+    expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);
+  });
+});
+//# sourceMappingURL=NotificationDot.test.js.map

package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NotificationDot/__tests__/NotificationDot.test.tsx"],"names":["React","render","NotificationDot","Size","COLORS","describe","it","getByTestId","Small","expect","toHaveStyleRule","correct_500","white","Large","critical_500"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,eAAT,QAAgC,IAAhC;AACA,SAASC,IAAT,QAAqB,aAArB;AACA,OAAOC,MAAP,MAAmB,qBAAnB;AAEAC,QAAQ,CAAC,qBAAD,EAAuB,MAAI;AAC/BC,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAEE,IAAI,CAACK,KAA/C;AAAsD,MAAA,MAAM,EAAC;AAA7D,MADuB,CAA3B;AAGAC,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACO,WAAxE;AACAF,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAQAN,EAAAA,EAAE,CAAC,yCAAD,EAA4C,YAAY;AACtD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,IAAI,EAAEE,IAAI,CAACU,KAA/C;AAAsD,MAAA,MAAM,EAAC;AAA7D,MADuB,CAA3B;AAGAJ,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACU,YAAxE;AACAL,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAQAN,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAY;AACvD,UAAK;AAACC,MAAAA;AAAD,QAAgBN,MAAM,eACvB,oBAAC,eAAD;AAAiB,MAAA,OAAO,EAAC,UAAzB;AAAoC,MAAA,MAAM,EAAC;AAA3C,MADuB,CAA3B;AAGAQ,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,kBAA9C,EAAiEN,MAAM,CAACU,YAAxE;AACAL,IAAAA,MAAM,CAACF,WAAW,CAAC,QAAD,CAAZ,CAAN,CAA8BG,eAA9B,CAA8C,QAA9C,EAAwD,eAAeN,MAAM,CAACQ,KAA9E;AACH,GANC,CAAF;AAOH,CAxBO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { NotificationDot } from '..';\nimport { Size } from '../../types';\nimport COLORS from '../../styles/colors';\n\ndescribe('<NotificationDot />',()=>{\n    it('renders positive small notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='positive' size={Size.Small} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.correct_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n\n    it('renders critical large notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' size={Size.Large} testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '3px solid ' + COLORS.white);\n    });\n\n    it('renders critical medium notification dot', async () => {\n        const{getByTestId} = render(\n            <NotificationDot variant='critical' testId='testId'/>\n        );\n        expect(getByTestId('testId')).toHaveStyleRule('background-color',COLORS.critical_500);\n        expect(getByTestId('testId')).toHaveStyleRule('border', '2px solid ' + COLORS.white);\n    });\n});"],"file":"NotificationDot.test.js"}

package/dist/esm/NotificationDot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationDot/index.ts"],"names":["default","NotificationDot"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C","sourcesContent":["export { default as NotificationDot } from './NotificationDot';"],"file":"index.js"}