@occmundial/occ-atomic 2.0.0-beta.0 → 2.0.0-beta.10

package/build/LayerApp/LayerApp.js

@@ -0,0 +1,113 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _SubHeader = _interopRequireDefault(require("../SubHeader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+/**
+* The LayerApp component is a wrapper for the SubHeader component that also includes a content block.
+* It is meant to be used as an overlay screen, in front of the main content.
+* There are no examples included, since the LayerApp component occupies the whole screen in first plane.
+*/
+var LayerApp = /*#__PURE__*/function (_React$Component) {
+  _inherits(LayerApp, _React$Component);
+
+  var _super = _createSuper(LayerApp);
+
+  function LayerApp() {
+    _classCallCheck(this, LayerApp);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LayerApp, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('DEPRECATED: The LayerApp component will be removed soon. Use the NavTab component instead.');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          theme = _this$props.theme,
+          fixed = _this$props.fixed,
+          left = _this$props.left,
+          right = _this$props.right,
+          center = _this$props.center;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.layerApp, " ").concat(classes[theme])
+      }, /*#__PURE__*/_react["default"].createElement(_SubHeader["default"], {
+        theme: theme,
+        left: left,
+        right: right,
+        center: center,
+        fixed: fixed
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.content
+      }, children));
+    }
+  }]);
+
+  return LayerApp;
+}(_react["default"].Component);
+
+LayerApp.defaultProps = {
+  fixed: false,
+  theme: "blue"
+};
+LayerApp.propTypes = {
+  classes: _propTypes["default"].object,
+  children: _propTypes["default"].node,
+
+  /** The theme to use in the LayerApp. The options are blue and white. */
+  theme: _propTypes["default"].string,
+
+  /** This property fixes the LayerApp's header to the top of the screen. */
+  fixed: _propTypes["default"].bool,
+
+  /** Content to display on the left of the header. */
+  left: _propTypes["default"].node,
+
+  /** Content to display on the right of the header. */
+  right: _propTypes["default"].node,
+
+  /** Content to display on the center of the header. */
+  center: _propTypes["default"].node
+};
+var _default = LayerApp;
+exports["default"] = _default;

package/build/LayerApp/LayerApp.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _LayerApp = _interopRequireDefault(require("./LayerApp"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe("LayerApp", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_LayerApp["default"], {
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('renders the LayerApp with the right theme', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_LayerApp["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.layerApp').hasClass('blue')).toEqual(true);
+    wrapper.setProps({
+      theme: 'white'
+    });
+    expect(wrapper.find('.layerApp').hasClass('white')).toEqual(true);
+  });
+  it('renders the child content', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_LayerApp["default"], {
+      classes: classes
+    }, "Child content"));
+    expect(wrapper.find('.content').text()).toEqual('Child content');
+  });
+});
+describe("LayerAppJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("LayerApp styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

package/build/LayerApp/__snapshots__/LayerApp.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LayerApp matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`LayerApp styles matches the snapshot 1`] = `
+Object {
+  "blue": Object {
+    "background": "#ffffff",
+  },
+  "content": Object {
+    "boxSizing": "border-box",
+    "height": "calc(100% - 60px)",
+    "left": "0",
+    "paddingBottom": "50px",
+    "paddingTop": "30px",
+    "position": "absolute",
+    "top": "60px",
+    "width": "100%",
+    "zIndex": "1",
+  },
+  "layerApp": Object {
+    "boxSizing": "border-box",
+    "fontFamily": "'OccText', sans-serif",
+    "height": "100%",
+    "left": "0",
+    "overflow": "auto",
+    "position": "fixed",
+    "top": "0",
+    "width": "100%",
+  },
+  "white": Object {
+    "background": "#f7f7f7",
+  },
+}
+`;
+
+exports[`LayerAppJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/LayerApp/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _LayerApp = _interopRequireDefault(require("./LayerApp"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_LayerApp["default"]);
+
+exports["default"] = _default;

package/build/LayerApp/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  layerApp: {
+    boxSizing: 'border-box',
+    position: 'fixed',
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+    top: '0',
+    left: '0',
+    fontFamily: _fonts["default"].body
+  },
+  content: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    zIndex: '1',
+    top: '60px',
+    left: '0',
+    width: '100%',
+    height: 'calc(100% - 60px)',
+    paddingTop: '30px',
+    paddingBottom: '50px'
+  },
+  blue: {
+    background: _colors["default"].white
+  },
+  white: {
+    background: _colors["default"].white2
+  }
+};
+exports["default"] = _default;

package/build/Modal/Modal.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -25,7 +27,7 @@ var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { 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); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -33,32 +35,36 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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; }
 
-/**
-* The Modal component is rendered in any given container, avoiding z-index an position conflicts. Your application must have the logic to show or hide the Modal component.
-*/
-var Modal =
-/*#__PURE__*/
-function (_React$Component) {
+/**
+ * The Modal component is rendered in any given container, avoiding z-index an position conflicts. Your application must have the logic to show or hide the Modal component.
+ */
+var Modal = /*#__PURE__*/function (_React$Component) {
   _inherits(Modal, _React$Component);
 
+  var _super = _createSuper(Modal);
+
   function Modal(props) {
     var _this;
 
     _classCallCheck(this, Modal);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, props));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "resize", function () {
       _this.setState({
@@ -114,62 +120,66 @@ function (_React$Component) {
           imgTop = _this$props.imgTop,
           imgLeft = _this$props.imgLeft,
           onTransitionEnd = _this$props.onTransitionEnd,
-          fullSize = _this$props.fullSize;
+          fullSize = _this$props.fullSize,
+          testId = _this$props.testId;
 
-      var closeButton = _react["default"].createElement("div", {
+      var closeButton = /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.closeIcon
-      }, _react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
         iconName: "close",
         width: 24,
         height: 24,
         colors: [_colors["default"].grey900],
         onClick: onClose
-      }));
+      }, testId && {
+        testId: "".concat(testId, "__close-icon")
+      })));
 
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": testId,
         className: "".concat(classes.overlay, " ").concat(show ? classes.overlayShow : classes.overlayHide).concat(!onClose ? " ".concat(classes.noClose) : ''),
         onClick: onClose,
         onTransitionEnd: onTransitionEnd
-      }, _react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cardWrapper
-      }, _react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cardBlock,
         onClick: this.avoidClose
-      }, _react["default"].createElement(_Card["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         shadow: 5,
         className: "".concat(classes.card).concat(size ? " ".concat(classes[size]) : '').concat(show ? " ".concat(classes.cardShow) : " ".concat(classes.cardHide))
-      }, _react["default"].createElement(_Flexbox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         direction: imgLeft.img ? 'row' : 'col'
-      }, (imgLeft.img || imgTop.img) && _react["default"].createElement("div", {
+      }, (imgLeft.img || imgTop.img) && /*#__PURE__*/_react["default"].createElement("div", {
         className: imgLeft.img ? classes.imgLeft : classes.imgTop
-      }, imgTop.img && onClose && _react["default"].createElement("div", {
+      }, imgTop.img && onClose && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.closePosition
-      }, closeButton)), _react["default"].createElement(_Flexbox["default"], {
+      }, closeButton)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         flex: imgLeft.img ? '1' : null
-      }, fullSize && mobile ? _react["default"].createElement("div", {
+      }, fullSize && mobile ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
-      }, _react["default"].createElement(_Flexbox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         alignItems: "end",
         className: classes.top
-      }, !imgTop.img && onClose && closeButton), title && _react["default"].createElement(_Text["default"], {
+      }, !imgTop.img && onClose && closeButton), title && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         heading: true,
         className: classes.title
-      }, title)) : _react["default"].createElement(_Flexbox["default"], {
+      }, title)) : /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         justifyContent: "end",
         alignItems: "start",
         className: classes.top
-      }, title && _react["default"].createElement(_Flexbox["default"], {
+      }, title && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         flex: "1"
-      }, _react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         heading: true,
         className: classes.title
-      }, title)), !imgTop.img && onClose && closeButton), _react["default"].createElement("div", {
+      }, title)), !imgTop.img && onClose && closeButton), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.content
-      }, children), mainBtn && _react["default"].createElement("div", {
+      }, children), mainBtn && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
-      }, secBtn && _react["default"].createElement(_Button["default"], {
+      }, secBtn && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         theme: "ghostGrey",
         className: classes.secBtn,
         onClick: secBtn.onClick,
@@ -178,7 +188,9 @@ function (_React$Component) {
         loading: secBtn.loading,
         disabled: secBtn.disabled,
         id: secBtn.id
-      }, secBtn.text), _react["default"].createElement(_Button["default"], {
+      }, testId && {
+        testId: "".concat(testId, "__button_secondary")
+      }), secBtn.text), /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         className: classes.mainBtn,
         onClick: mainBtn.onClick,
         href: mainBtn.href,
@@ -186,7 +198,9 @@ function (_React$Component) {
         loading: mainBtn.loading,
         disabled: mainBtn.disabled,
         id: mainBtn.id
-      }, mainBtn.text))))))));
+      }, testId && {
+        testId: "".concat(testId, "__button_main")
+      }), mainBtn.text))))))));
     }
   }]);
 
@@ -243,7 +257,8 @@ Modal.propTypes = {
     img: _propTypes["default"].string,
     color: _propTypes["default"].string,
     position: _propTypes["default"].oneOf(['left', 'center', 'right']),
-    size: _propTypes["default"].oneOf(['contain', 'cover'])
+    size: _propTypes["default"].oneOf(['contain', 'cover', _propTypes["default"].string]),
+    height: _propTypes["default"].number
   }),
 
   /** Image url to render it on the left of the modal dialog. */
@@ -258,7 +273,10 @@ Modal.propTypes = {
   onTransitionEnd: _propTypes["default"].func,
 
   /** Boolean value to make full size the Modal component in mobile size. */
-  fullSize: _propTypes["default"].bool
+  fullSize: _propTypes["default"].bool,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Modal;
 exports["default"] = _default;

package/build/Modal/Modal.test.js

@@ -22,7 +22,7 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Modal", function () {
   it('matches the snapshot', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose
     }));
@@ -30,7 +30,7 @@ describe("Modal", function () {
   });
   it('calls the onClose function when clicking the overlay', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose
     }));
@@ -39,11 +39,14 @@ describe("Modal", function () {
   });
   it('calls the onClose function when clicking the close icon', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
-      onClose: onClose
+      onClose: onClose,
+      testId: "modal-test"
     }));
-    wrapper.find('.closeIcon button').simulate('click');
+    wrapper.find({
+      "data-testid": 'modal-test__close-icon'
+    }).simulate('click');
     expect(onClose.mock.calls.length).toBe(1);
   });
   it('calls the onClose function when pressing the Esc key', function () {
@@ -52,7 +55,7 @@ describe("Modal", function () {
     window.addEventListener = jest.fn(function (event, cb) {
       map[event] = cb;
     });
-    (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose
     }));
@@ -63,7 +66,7 @@ describe("Modal", function () {
   });
   it('toggles between show and hide', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose,
       show: true
@@ -76,7 +79,7 @@ describe("Modal", function () {
   });
   it('renders the title', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose,
       title: "Modal title"
@@ -85,7 +88,7 @@ describe("Modal", function () {
   });
   it('renders the content', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose
     }, "Content"));
@@ -93,7 +96,7 @@ describe("Modal", function () {
   });
   it('renders functional main and secondary buttons', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Modal["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
       onClose: onClose,
       mainBtn: {
@@ -115,7 +118,7 @@ describe("Modal", function () {
 describe("ModalPortal", function () {
   it('matches the snapshot', function () {
     var modalRoot = global.document.createElement('div');
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       container: modalRoot
     }));
     expect(wrapper).toMatchSnapshot();
@@ -126,7 +129,7 @@ describe("ModalPortal", function () {
     modalRoot.setAttribute('id', 'modal-root');
     var body = global.document.querySelector('body');
     body.appendChild(modalRoot);
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       container: modalRoot,
       onClose: onClose
     }));