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

package/dist/js/Modals/Modal.js

@@ -0,0 +1,81 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalCloseButton = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _ModalStyles = require("./ModalStyles");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+/**
+ * Modal styles
+ */
+var Column = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n"])));
+
+var StyledButton = (0, _styledComponents.default)(_Button.IconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+
+var ModalCloseButton = function ModalCloseButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(StyledButton, {
+    variant: "secondary",
+    shape: "square",
+    action: onClick
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+    size: "24px",
+    color: _styles.COLORS.black
+  }));
+};
+
+exports.ModalCloseButton = ModalCloseButton;
+
+var Modal = function Modal(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Column, null, children);
+};
+
+Modal.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+
+Modal.Header = function (_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(_ModalStyles.ModalHeader, null, children);
+};
+
+Modal.Body = function (_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, null, children);
+};
+
+Modal.Footer = function (_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, null, children);
+};
+
+var _default = Modal;
+exports.default = _default;
+//# sourceMappingURL=Modal.js.map

package/dist/js/Modals/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","IconButton","ModalCloseButton","onClick","COLORS","black","Modal","children","Header","Body","Footer"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA,IAAMA,MAAM,GAAGC,0BAAOC,GAAV,kKAAZ;;AAOA,IAAMC,YAAY,GAAG,+BAAOC,kBAAP,CAAH,2FAAlB;;AAIO,IAAMC,gBAAkE,GAAG,SAArEA,gBAAqE,OAAiB;AAAA,MAAdC,OAAc,QAAdA,OAAc;AACjG,sBACE,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAC,WAAtB;AAAkC,IAAA,KAAK,EAAC,QAAxC;AAAiD,IAAA,MAAM,EAAEA;AAAzD,kBACE,oBAAC,kBAAD;AAAO,IAAA,IAAI,EAAC,MAAZ;AAAmB,IAAA,KAAK,EAAEC,eAAOC;AAAjC,IADF,CADF;AAKD,CANM;;;;AAYP,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,MAAD,QAASA,QAAT,CAA9B;AAAA,CAAd;;;AAHEA,EAAAA,Q;;;AAKFD,KAAK,CAACE,MAAN,GAAe;AAAA,MAAGD,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;AAEAD,KAAK,CAACG,IAAN,GAAa;AAAA,MAAGF,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,sBAAD,QAAYA,QAAZ,CAA9B;AAAA,CAAb;;AAEAD,KAAK,CAACI,MAAN,GAAe;AAAA,MAAGH,QAAH,SAAGA,QAAH;AAAA,sBAA8B,oBAAC,wBAAD,QAAcA,QAAd,CAA9B;AAAA,CAAf;;eAEeD,K","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\n\n/**\n * Modal styles\n */\nconst Column = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: stretch;\n  height: 100%;\n`;\n\nconst StyledButton = styled(IconButton)`\n  display: flex;\n`;\n\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\n  return (\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\n      <Close size=\"24px\" color={COLORS.black} />\n    </StyledButton>\n  );\n};\n\ntype ModalProps = {\n  children: any;\n};\n\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\n\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\n\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\n\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\n\nexport default Modal;\n"],"file":"Modal.js"}

package/dist/js/Modals/ModalContainer.js

@@ -0,0 +1,182 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactModal = _interopRequireDefault(require("react-modal"));
+
+var _styles = require("../styles");
+
+var _zIndexes = require("../styles/z-indexes");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ModalContainerStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    width: '640px',
+    height: '320px',
+    borderRadius: '8px',
+    boxSizing: 'border-box',
+    margin: 0,
+    overflow: 'auto',
+    boxShadow: _styles.BOXSHADOWS.BOXSHADOW_L3
+  }
+}; //override modal classes to define the animations
+
+var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ".concat(_zIndexes.Z_INDEXES.backdrop, ";\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ").concat(_zIndexes.Z_INDEXES.modal, ";\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n");
+
+var ModalContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalContainer, _React$Component);
+
+  var _super = _createSuper(ModalContainer);
+
+  function ModalContainer() {
+    var _this;
+
+    _classCallCheck(this, ModalContainer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "GetSize", function () {
+      var modalHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'auto';
+      var modalWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      return {
+        height: modalHeight,
+        width: modalWidth
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "GetOverflow", function () {
+      var modalOverflow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'visible';
+      return modalOverflow;
+    });
+
+    return _this;
+  }
+
+  _createClass(ModalContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (_reactModal.default.defaultStyles.overlay) {
+        _reactModal.default.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+      } //append style node to override modal transition classes
+
+
+      if (!document.querySelector('[modal-custom-styling="active"]')) {
+        var head = document.head || document.getElementsByTagName('head')[0];
+        var style = document.createElement('style');
+        style.setAttribute('modal-custom-styling', 'active');
+        head.appendChild(style);
+        style.appendChild(document.createTextNode(modalTransitions));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          showModal = _this$props.showModal,
+          closeModal = _this$props.closeModal,
+          children = _this$props.children,
+          modalHeight = _this$props.modalHeight,
+          modalWidth = _this$props.modalWidth,
+          modalOverflow = _this$props.modalOverflow,
+          padding = _this$props.padding,
+          _this$props$minWidth = _this$props.minWidth,
+          minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
+          _this$props$maxWidth = _this$props.maxWidth,
+          maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth;
+      var sizes = this.GetSize(modalHeight, modalWidth);
+      var height = sizes.height,
+          width = sizes.width;
+      var overflow = this.GetOverflow(modalOverflow);
+      var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+        height: height,
+        width: width,
+        padding: padding,
+        overflow: overflow,
+        minWidth: minWidth,
+        maxWidth: maxWidth
+      });
+      var styles = {
+        content: stylesConfiguration
+      };
+      return /*#__PURE__*/React.createElement(_reactModal.default, {
+        id: id,
+        isOpen: showModal,
+        closeTimeoutMS: 120,
+        onRequestClose: function onRequestClose() {
+          return closeModal();
+        },
+        style: styles,
+        appElement: document.getElementById('root') || ''
+      }, children);
+    }
+  }]);
+
+  return ModalContainer;
+}(React.Component);
+
+_defineProperty(ModalContainer, "propTypes", {
+  id: _propTypes.default.string,
+  showModal: _propTypes.default.bool.isRequired,
+  closeModal: _propTypes.default.func.isRequired,
+  children: _propTypes.default.any.isRequired,
+  modalHeight: _propTypes.default.any,
+  modalWidth: _propTypes.default.any,
+  modalOverflow: _propTypes.default.string,
+  padding: _propTypes.default.string,
+  minWidth: _propTypes.default.string,
+  maxWidth: _propTypes.default.string
+});
+
+var _default = ModalContainer;
+exports.default = _default;
+//# sourceMappingURL=ModalContainer.js.map

package/dist/js/Modals/ModalContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/js/Modals/ModalDialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Size } from '../types';
+import { ButtonAction, LeftFooterAction } from './ModalTypes';
+interface NewModalProps {
+    size?: Size;
+    isModalOpen: boolean;
+    closeModalAndClearInput: any;
+    title?: string;
+    topImage?: any;
+    buttons?: ButtonAction[];
+    leftFooterAction?: LeftFooterAction;
+    tooltip?: string;
+    backButton?: () => void;
+    closeAction: () => void;
+    submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;
+    note?: string | React.ReactNode;
+    state?: string;
+    icon?: React.ReactNode;
+}
+export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
+export default ModalDialog;

package/dist/js/Modals/ModalDialog.js

@@ -0,0 +1,321 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalDialog = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _ModalContainer = _interopRequireDefault(require("./ModalContainer"));
+
+var _ModalStyles = require("./ModalStyles");
+
+var _ModalNote = require("./ModalNote");
+
+var _Tooltips = require("../Tooltips");
+
+var _ = require("..");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
+
+var ModalDialog = function ModalDialog(_ref) {
+  var size = _ref.size,
+      isModalOpen = _ref.isModalOpen,
+      closeModalAndClearInput = _ref.closeModalAndClearInput,
+      title = _ref.title,
+      topImage = _ref.topImage,
+      buttons = _ref.buttons,
+      leftFooterAction = _ref.leftFooterAction,
+      backButton = _ref.backButton,
+      closeAction = _ref.closeAction,
+      submitAction = _ref.submitAction,
+      tooltip = _ref.tooltip,
+      children = _ref.children,
+      note = _ref.note,
+      state = _ref.state,
+      icon = _ref.icon;
+
+  var getMinWidth = function getMinWidth() {
+    switch (size) {
+      case _types.Size.Small:
+        return '320px';
+
+      case _types.Size.Large:
+        return '640px';
+
+      case _types.Size.Medium:
+      default:
+        return '480px';
+    }
+  };
+
+  var getMaxWidth = function getMaxWidth() {
+    switch (size) {
+      case _types.Size.Small:
+        return '480px';
+
+      case _types.Size.Large:
+        return '720px';
+
+      case _types.Size.Medium:
+      default:
+        return '640px';
+    }
+  };
+
+  var getImageHeight = function getImageHeight() {
+    switch (size) {
+      case _types.Size.Small:
+        return 160;
+
+      case _types.Size.Medium:
+        return 200;
+
+      case _types.Size.Large:
+        return 240;
+
+      default:
+        return 200;
+    }
+  };
+
+  var getMarginBottom = function getMarginBottom() {
+    switch (size) {
+      case _types.Size.Small:
+        return '16px';
+
+      case _types.Size.Medium:
+        return '24px';
+
+      case _types.Size.Large:
+        return '32px';
+
+      default:
+        return '24px';
+    }
+  };
+
+  var getPadding = function getPadding() {
+    switch (size) {
+      case _types.Size.Small:
+        return '16px 16px 8px';
+
+      case _types.Size.Medium:
+        return '24px 24px 20px';
+
+      case _types.Size.Large:
+        return '32px';
+
+      default:
+        return '24px 24px 16px';
+    }
+  };
+
+  var ModalTitle = function ModalTitle(title, size) {
+    switch (size) {
+      case _types.Size.Small:
+        return /*#__PURE__*/React.createElement(_styles.ComponentM, {
+          textStyle: _styles.ComponentTextStyle.Bold
+        }, title);
+
+      case _types.Size.Medium:
+        return /*#__PURE__*/React.createElement(_styles.ComponentL, {
+          textStyle: _styles.ComponentTextStyle.Bold
+        }, title);
+
+      case _types.Size.Large:
+        return /*#__PURE__*/React.createElement(_styles.ComponentXL, {
+          textStyle: _styles.ComponentTextStyle.Bold
+        }, title);
+
+      default:
+        return /*#__PURE__*/React.createElement(_styles.ComponentL, {
+          textStyle: _styles.ComponentTextStyle.Bold
+        }, title);
+    }
+  };
+
+  var ModalTootip = function ModalTootip(tooltip) {
+    return /*#__PURE__*/React.createElement(_ModalStyles.ModalHoverModifier, null, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: function action() {}
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+      size: "24px",
+      color: _styles.COLORS.neutral_600
+    }))));
+  };
+
+  var ModalCloseButton = function ModalCloseButton(onClick) {
+    return /*#__PURE__*/React.createElement(_ModalStyles.CloseButtonWrapper, {
+      hasImage: !!topImage,
+      size: size
+    }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: function action() {
+        return onClick();
+      },
+      borderRadius: 48
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+      size: "24px",
+      color: _styles.COLORS.black
+    })));
+  };
+
+  var ModalBackButton = function ModalBackButton() {
+    if (backButton) {
+      return /*#__PURE__*/React.createElement(_ModalStyles.BackButtonWrapper, {
+        hasImage: !!topImage,
+        size: size
+      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        action: function action() {
+          return backButton();
+        },
+        borderRadius: 48
+      }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
+        size: "24px",
+        color: _styles.COLORS.black
+      })));
+    }
+  };
+
+  var getLeftActionIconElement = function getLeftActionIconElement(icon) {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
+    });
+  };
+
+  var LeftFooterAction = function LeftFooterAction(leftFooterAction) {
+    var _variant;
+
+    var text = leftFooterAction.text,
+        actionType = leftFooterAction.actionType,
+        disabled = leftFooterAction.disabled,
+        icon = leftFooterAction.icon,
+        action = leftFooterAction.action;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(_Button.Button, {
+          id: 'left-action-button',
+          type: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.type,
+          disabled: disabled,
+          loading: leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: (_variant = leftFooterAction === null || leftFooterAction === void 0 ? void 0 : leftFooterAction.variant) !== null && _variant !== void 0 ? _variant : 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(_.HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default",
+          onClick: function onClick(e) {
+            if (action) {
+              e.preventDefault();
+              action(e);
+            }
+          }
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(_ModalContainer.default, {
+    showModal: isModalOpen,
+    closeModal: closeModalAndClearInput,
+    minWidth: getMinWidth(),
+    maxWidth: getMaxWidth(),
+    modalHeight: "auto",
+    padding: getPadding()
+  }, /*#__PURE__*/React.createElement(_ModalStyles.Column, null, /*#__PURE__*/React.createElement("form", {
+    onSubmit: submitAction
+  }, topImage && /*#__PURE__*/React.createElement(_ModalStyles.StyledModalHeader, {
+    size: size,
+    height: getImageHeight(),
+    marginBottom: getMarginBottom()
+  }, /*#__PURE__*/React.createElement("img", {
+    src: topImage,
+    alt: "Modal top"
+  }), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, /*#__PURE__*/React.createElement(_ModalStyles.FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
+    size: size
+  }, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
+    note: note,
+    state: state,
+    size: size,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
+    size: size
+  }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
+    return /*#__PURE__*/React.createElement(_Button.Button, {
+      key: b.id || i,
+      id: b.id,
+      disabled: b.disabled,
+      loading: b.loading,
+      size: size,
+      onClick: b.action,
+      type: b.type,
+      variant: b.variant
+    }, b.text);
+  })))));
+};
+
+exports.ModalDialog = ModalDialog;
+ModalDialog.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  closeModalAndClearInput: _propTypes.default.any.isRequired,
+  title: _propTypes.default.string,
+  topImage: _propTypes.default.any,
+  buttons: _propTypes.default.array,
+  tooltip: _propTypes.default.string,
+  backButton: _propTypes.default.func,
+  closeAction: _propTypes.default.func.isRequired,
+  submitAction: _propTypes.default.func.isRequired,
+  note: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  state: _propTypes.default.string,
+  icon: _propTypes.default.node
+};
+var _default = ModalDialog;
+exports.default = _default;
+//# sourceMappingURL=ModalDialog.js.map