@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/umd/Modals/ModalStyles.js

@@ -0,0 +1,188 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "..", "../types"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require(".."), require("../types"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global._, global.types);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _, _types) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getNoteMessageColor = exports.getBackgroundColor = exports.ModalFooter = exports.ModalBody = exports.ModalNoteSection = exports.ModalTitle = exports.BackButtonWrapper = exports.CloseButtonWrapper = exports.ModalHoverModifier = exports.FlexContainer = exports.ModalHeaderActions = exports.ModalHeaderActionsWithImage = exports.ModalTitleSection = exports.Column = exports.StyledModalHeader = exports.ModalHeader = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Modal styles
+   */
+  const ModalHeader = exports.ModalHeader = _styledComponents2.default.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${props => props.marginBottom || '24px'};
+`;
+  const StyledModalHeader = exports.StyledModalHeader = (0, _styledComponents2.default)(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;
+  }
+`;
+  const Column = exports.Column = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+`;
+  const ModalTitleSection = exports.ModalTitleSection = _styledComponents2.default.section`
+  word-break: break-word;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+  const ModalHeaderActionsWithImage = exports.ModalHeaderActionsWithImage = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: ${props => !props.hasBackButton ? 'row-reverse' : 'row'};
+  justify-content: space-between;
+  width: 100%;
+  z-index: 1;
+`;
+  const ModalHeaderActions = exports.ModalHeaderActions = _styledComponents2.default.div`
+  display: flex;
+  margin: -12px -12px 0 0;
+`;
+  const FlexContainer = exports.FlexContainer = _styledComponents2.default.div`
+  display: flex;
+`;
+  const ModalHoverModifier = exports.ModalHoverModifier = _styledComponents2.default.div`
+  button:hover {
+    cursor: help !important;
+  }
+`;
+  const CloseButtonWrapper = exports.CloseButtonWrapper = _styledComponents2.default.div`
+  button {
+    ${props => props.hasImage ? _styledComponents.css`
+            margin: -12px -12px 0 0 !important;
+          ` : _styledComponents.css`
+            left: unset;
+          `}
+  }
+`;
+  const BackButtonWrapper = exports.BackButtonWrapper = _styledComponents2.default.div`
+  button {
+    margin: -12px 0 0 -12px !important;
+  }
+`;
+  const ModalTitle = exports.ModalTitle = _styledComponents2.default.h5`
+  margin: 0;
+  font-size: ${props => props.fontSize || '1.25em'};
+  font-weight: bold;
+`;
+  const ModalNoteSection = exports.ModalNoteSection = _styledComponents2.default.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)};
+  }
+`;
+  const ModalBody = exports.ModalBody = _styledComponents2.default.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'};
+  }
+`;
+  const ModalFooter = exports.ModalFooter = _styledComponents2.default.section`
+  margin-top: ${props => props?.size === _types.Size.Small ? `20px` : props?.size === _types.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 === _types.Size.Large ? `8px` : props?.size === _types.Size.Small ? '4px' : '6px'};
+  }
+
+  .footer-action.note {
+    color: ${_.COLORS.neutral_600};
+  }
+`;
+
+  const getBackgroundColor = exports.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;
+    }
+  };
+
+  const getNoteMessageColor = exports.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/umd/Modals/ModalStyles.js.map

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

package/dist/umd/Modals/ModalTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=ModalTypes.js.map

package/dist/umd/Modals/ModalTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ModalTypes.js"}

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

@@ -0,0 +1,173 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "..", "../..", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../.."), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global._, global._, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _, _2) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {},
+        tooltip: 'some test tooltip',
+        leftFooterAction: {
+          id: 'test-link',
+          actionType: 'hyperlink',
+          text: 'Link',
+          href: 'http://test.com',
+          icon: /*#__PURE__*/_react2.default.createElement(_react2.default.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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {},
+        leftFooterAction: {
+          id: 'test-note',
+          actionType: 'note',
+          text: 'Test note',
+          icon: /*#__PURE__*/_react2.default.createElement(_2.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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.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
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {}
+      }, /*#__PURE__*/_react2.default.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/umd/Modals/__tests__/Modal.test.js.map

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

package/dist/umd/Modals/index.js

@@ -0,0 +1,42 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./Modal", "./ModalContainer", "./ModalStyles", "./ModalDialog"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./Modal"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalDialog"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.Modal, global.ModalContainer, global.ModalStyles, global.ModalDialog);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _Modal, _ModalContainer, _ModalStyles, _ModalDialog) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ModalDialog = exports.ModalCloseButton = exports.ModalTitle = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.ModalContainer = exports.Modal = undefined;
+
+  var _Modal2 = _interopRequireDefault(_Modal);
+
+  var _ModalContainer2 = _interopRequireDefault(_ModalContainer);
+
+  var _ModalDialog2 = _interopRequireDefault(_ModalDialog);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  exports.Modal = _Modal2.default;
+  exports.ModalContainer = _ModalContainer2.default;
+  exports.ModalHeader = _ModalStyles.ModalHeader;
+  exports.ModalBody = _ModalStyles.ModalBody;
+  exports.ModalFooter = _ModalStyles.ModalFooter;
+  exports.ModalTitle = _ModalStyles.ModalTitle;
+  exports.ModalCloseButton = _Modal.ModalCloseButton;
+  exports.ModalDialog = _ModalDialog2.default;
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAKA,K,GAAA,e;UAAA,c,GAAA,wB;UAAA,W,GAAA,wB;UAAA,S,GAAA,sB;UAAA,W,GAAA,wB;UAAA,U,GAAA,uB;UAAA,gB,GAAA,uB;UAAA,W,GAAA,qB","sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\r\nimport ModalContainer from './ModalContainer';\r\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\r\nimport ModalDialog from './ModalDialog';\r\n\r\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog };\r\n"],"file":"index.js"}

package/dist/umd/NavItem/NavItem.js

@@ -0,0 +1,88 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles, global.typography, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles, _typography, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const NavItem = _styledComponents2.default.div`
+  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.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: ${_zIndexes.Z_INDEXES.active};
+    background-color: ${_styles.COLORS.neutral_20};
+    color: ${_styles.COLORS.neutral_800};
+    &:after {
+      background-color: ${_styles.COLORS.primary_600};
+    }
+  }
+
+  &.disabled {
+    color: ${_styles.COLORS.neutral_300};
+    background-color: ${_styles.COLORS.neutral_100};
+    &:after {
+      background-color: ${_styles.COLORS.neutral_100};
+    }
+  }
+
+  &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+    background-color: ${_styles.COLORS.primary_20};
+    color: ${_styles.COLORS.primary_700};
+    &:after {
+      background-color: ${_styles.COLORS.primary_600};
+    }
+  }
+
+  &:focus:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+    box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+    outline: none;
+    &:after {
+      background-color: ${_styles.COLORS.primary_600};
+    }
+  }
+`;
+  exports.default = NavItem;
+});
+//# sourceMappingURL=NavItem.js.map

package/dist/umd/NavItem/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeG,oBAAUC,MAAO;AAChC,wBAAwBF,eAAOG,UAAW;AAC1C,aAAaH,eAAOI,WAAY;AAChC;AACA,0BAA0BJ,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC,wBAAwBN,eAAOO,WAAY;AAC3C;AACA,0BAA0BP,eAAOO,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeN,oBAAUO,KAAM;AAC/B,wBAAwBR,eAAOS,UAAW;AAC1C,aAAaT,eAAOU,WAAY;AAChC;AACA,0BAA0BV,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeJ,oBAAUU,KAAM;AAC/B,8BAA8BX,eAAOY,WAAY;AACjD;AACA;AACA,0BAA0BZ,eAAOK,WAAY;AAC7C;AACA;AAxDA,CAAA;oBA2DA,O","sourcesContent":["import styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst NavItem = styled.div`\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 3px;\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${COLORS.neutral_20};\r\n    color: ${COLORS.neutral_800};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background-color: ${COLORS.neutral_100};\r\n    &:after {\r\n      background-color: ${COLORS.neutral_100};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n    outline: none;\r\n    &:after {\r\n      background-color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nexport default NavItem;\r\n"],"file":"NavItem.js"}

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

@@ -0,0 +1,23 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  test('it works', () => {
+    expect(true).toBe(true);
+  });
+});
+//# sourceMappingURL=NavItem.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/NavItem/__tests__/NavItem.test.ts"],"names":["test","expect"],"mappings":";;;;;;;;;;;;;;;;;;AAGAA,EAAAA,IAAI,CAAA,UAAA,EAAa,MAAM;AACrBC,IAAAA,MAAM,CAANA,IAAM,CAANA,CAAAA,IAAAA,CAAAA,IAAAA;AADFD,GAAI,CAAJA","sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ntest('it works', () => {\r\n  expect(true).toBe(true);\r\n});\r\n"],"file":"NavItem.test.js"}

package/dist/umd/NavItem/index.js

@@ -0,0 +1,32 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./NavItem"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./NavItem"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.NavItem);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _NavItem) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "NavItem", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_NavItem).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NavItem/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;8CAAA,O","sourcesContent":["export { default as NavItem } from './NavItem';\r\n"],"file":"index.js"}