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

package/dist/umd/Modals/ModalNote.js

@@ -0,0 +1,133 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "..", "../icons/systemicons/SystemIcons", "./ModalStyles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require(".."), require("../icons/systemicons/SystemIcons"), require("./ModalStyles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global._, global.SystemIcons, global.ModalStyles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _, _SystemIcons, _ModalStyles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ModalNote = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const ModalNote = exports.ModalNote = ({
+    note,
+    icon,
+    size,
+    state = 'neutral'
+  }) => {
+    const stateVal = state.toLowerCase();
+
+    switch (stateVal) {
+      case 'positive':
+        return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+          state: stateVal,
+          size: size
+        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.CheckComplete, {
+          color: _.COLORS.correct_500
+        }), /*#__PURE__*/React.createElement("span", null, note));
+
+      case 'warning':
+        return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+          state: stateVal,
+          size: size
+        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+          color: _.COLORS.warning_500
+        }), /*#__PURE__*/React.createElement("span", null, note));
+
+      case 'critical':
+        return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+          state: stateVal,
+          size: size
+        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+          color: _.COLORS.warning_500
+        }), /*#__PURE__*/React.createElement("span", null, note));
+
+      default:
+        return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+          state: stateVal,
+          size: size
+        }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Information, {
+          color: _.COLORS.primary_500,
+          className: size
+        }), /*#__PURE__*/React.createElement("span", null, note));
+    }
+  };
+
+  ModalNote.propTypes = {
+    note: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]).isRequired,
+    icon: _propTypes2.default.node,
+    state: _propTypes2.default.string,
+    size: _propTypes2.default.string
+  };
+  exports.default = ModalNote;
+});
+//# sourceMappingURL=ModalNote.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["note","icon","state","size","ModalNote","stateVal","COLORS","correct_500","warning_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,QAAMI,SAA6C,WAA7CA,SAA6C,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAoBF,IAAAA,KAAK,GAAG;AAA5B,GAAD,KAA6C;AACxG,UAAMG,QAAQ,GAAGH,KAAK,CAAtB,WAAiBA,EAAjB;;AAEA,YAAA,QAAA;AACE,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEC;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,UAAA,KAAK,EAAEK,SAAOC;AAA7B,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF,WAAA,SAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEJ;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF,WAAA,UAAA;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;;AAOF;AACE,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,UAAA,KAAK,EAAvB,QAAA;AAAmC,UAAA,IAAI,EAAEL;AAAzC,SAAA,EACGF,IAAI,GAAA,IAAA,GAAA,aAAU,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,UAAA,KAAK,EAAEK,SAApB,WAAA;AAAwC,UAAA,SAAS,EAAEH;AAAnD,SAAA,CADjB,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAHJ,IAGI,CAFF,CADF;AA1BJ;AAHK,GAAA;;;AANLH,IAAAA,I;AACAC,IAAAA,I;AACAC,IAAAA,K;AACAC,IAAAA,I;;oBAyCF,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}

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';\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/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';\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/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';\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"}