@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.41

package/build/Modal/Modal.js

@@ -11,20 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Card = _interopRequireDefault(require("../Card"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _Text = _interopRequireDefault(require("../Text"));
 
 var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
@@ -49,8 +41,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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.
  */
@@ -65,17 +55,12 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, Modal);
 
     _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "resize", function () {
-      _this.setState({
-        mobile: window.innerWidth < _grid["default"].xs
-      });
-    });
-
     _this.state = {
-      mobile: false
+      headerBorder: false,
+      footerBorder: false
     };
     _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
+    _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -83,21 +68,53 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       window.addEventListener('keydown', this.onKeyDown);
-      window.addEventListener('resize', this.resize);
-      this.resize();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.removeEventListener('keydown', this.onKeyDown);
-      window.removeEventListener('resize', this.resize);
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll(e) {
+      var _e$currentTarget = e.currentTarget,
+          scrollTop = _e$currentTarget.scrollTop,
+          scrollHeight = _e$currentTarget.scrollHeight,
+          clientHeight = _e$currentTarget.clientHeight;
+
+      if (scrollHeight > clientHeight) {
+        if (scrollTop > 0) {
+          this.setState({
+            headerBorder: true
+          });
+        } else {
+          this.setState({
+            headerBorder: false
+          });
+        }
+
+        if (scrollTop + clientHeight + 1 < scrollHeight) {
+          this.setState({
+            footerBorder: true
+          });
+        } else {
+          this.setState({
+            footerBorder: false
+          });
+        }
+      } else {
+        this.setState({
+          headerBorder: false,
+          footerBorder: false
+        });
+      }
     }
   }, {
     key: "onKeyDown",
     value: function onKeyDown(_ref) {
       var which = _ref.which;
       var onClose = this.props.onClose;
-      if (onClose && which == 27) onClose();
+      if (onClose && which === 27) onClose();
     }
   }, {
     key: "avoidClose",
@@ -107,7 +124,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var mobile = this.state.mobile;
       var _this$props = this.props,
           classes = _this$props.classes,
           children = _this$props.children,
@@ -116,28 +132,31 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           mainBtn = _this$props.mainBtn,
           show = _this$props.show,
           secBtn = _this$props.secBtn,
-          size = _this$props.size,
-          imgTop = _this$props.imgTop,
-          imgLeft = _this$props.imgLeft,
+          _this$props$size = _this$props.size,
+          size = _this$props$size === void 0 ? 'md' : _this$props$size,
+          _this$props$imgTop = _this$props.imgTop,
+          imgTop = _this$props$imgTop === void 0 ? {} : _this$props$imgTop,
+          _this$props$imgLeft = _this$props.imgLeft,
+          imgLeft = _this$props$imgLeft === void 0 ? {} : _this$props$imgLeft,
           onTransitionEnd = _this$props.onTransitionEnd,
           fullSize = _this$props.fullSize,
           testId = _this$props.testId;
+      var _this$state = this.state,
+          headerBorder = _this$state.headerBorder,
+          footerBorder = _this$state.footerBorder;
 
-      var closeButton = /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.closeIcon
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
-        iconName: "close",
-        width: 24,
-        height: 24,
-        colors: [_colors["default"].grey900],
-        onClick: onClose
+      var closeButton = /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        theme: "ghostGrey",
+        onClick: onClose,
+        icon: "x",
+        size: "md"
       }, testId && {
         testId: "".concat(testId, "__close-icon")
-      })));
+      }));
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         "data-testid": testId,
-        className: "".concat(classes.overlay, " ").concat(show ? classes.overlayShow : classes.overlayHide).concat(!onClose ? " ".concat(classes.noClose) : ''),
+        className: "".concat(classes.overlay, " ").concat(show ? classes.show : classes.hide).concat(!onClose ? " ".concat(classes.noClose) : ''),
         onClick: onClose,
         onTransitionEnd: onTransitionEnd
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -145,43 +164,51 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cardBlock,
         onClick: this.avoidClose
-      }, /*#__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))
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.card).concat(size ? " ".concat(classes[size]) : '').concat(fullSize ? " ".concat(classes.fullSize) : '')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.split
+      }, imgLeft.img && /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          backgroundColor: imgLeft.color || 'transparent',
+          backgroundImage: "url(".concat(imgLeft.img, ")"),
+          backgroundSize: imgLeft.size || 'cover',
+          backgroundPosition: imgLeft.position || 'center'
+        },
+        className: classes.imgLeft
+      }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
-        direction: imgLeft.img ? 'row' : 'col'
-      }, (imgLeft.img || imgTop.img) && /*#__PURE__*/_react["default"].createElement("div", {
-        className: imgLeft.img ? classes.imgLeft : classes.imgTop
-      }, imgTop.img && onClose && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.closePosition
-      }, closeButton)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        flex: imgLeft.img ? '1' : null
-      }, fullSize && mobile ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.top
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        alignItems: "end",
-        className: classes.top
-      }, !imgTop.img && onClose && closeButton), title && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        heading: true,
-        className: classes.title
-      }, title)) : /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+        direction: "col",
+        className: classes.contentWrapper
+      }, title || onClose ? /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         justifyContent: "end",
         alignItems: "start",
-        className: classes.top
+        className: "".concat(classes.header).concat(headerBorder ? " ".concat(classes.headerBorder) : '').concat(imgTop.img ? " ".concat(classes.stickyHeader) : '').concat(imgTop.img && headerBorder ? " ".concat(classes.solidHeader) : '')
       }, title && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         flex: "1"
-      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        heading: true,
+      }, /*#__PURE__*/_react["default"].createElement("h4", {
         className: classes.title
-      }, title)), !imgTop.img && onClose && closeButton), /*#__PURE__*/_react["default"].createElement("div", {
+      }, title)), onClose && closeButton) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        onScroll: this.onScroll,
         className: classes.content
-      }, children), mainBtn && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.bottom
+      }, imgTop.img && /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          backgroundColor: imgTop.color || 'transparent',
+          backgroundImage: "url(".concat(imgTop.img, ")"),
+          backgroundSize: imgTop.size || 'cover',
+          backgroundPosition: imgTop.position || 'center'
+        },
+        className: classes.imgTop
+      }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+        tag: "div",
+        className: "".concat(classes.contentChild).concat(!title && !onClose ? " ".concat(classes.noHeader) : '').concat(!mainBtn ? " ".concat(classes.noFooter) : '')
+      }, children)), mainBtn && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.footer).concat(footerBorder ? " ".concat(classes.footerBorder) : '')
       }, secBtn && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        type: secBtn.type,
+        size: "lg",
         theme: "ghostGrey",
-        className: classes.secBtn,
         onClick: secBtn.onClick,
         href: secBtn.href,
         target: secBtn.target,
@@ -189,9 +216,10 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         disabled: secBtn.disabled,
         id: secBtn.id
       }, testId && {
-        testId: "".concat(testId, "__button_secondary")
+        testId: "".concat(testId, "__button-secondary")
       }), secBtn.text), /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
-        className: classes.mainBtn,
+        type: mainBtn.type,
+        size: "lg",
         onClick: mainBtn.onClick,
         href: mainBtn.href,
         target: mainBtn.target,
@@ -199,7 +227,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         disabled: mainBtn.disabled,
         id: mainBtn.id
       }, testId && {
-        testId: "".concat(testId, "__button_main")
+        testId: "".concat(testId, "__button-main")
       }), mainBtn.text))))))));
     }
   }]);

package/build/Modal/Modal.test.js

@@ -71,11 +71,11 @@ describe("Modal", function () {
       onClose: onClose,
       show: true
     }));
-    expect(wrapper.find('.overlayShow').length).toBe(1);
+    expect(wrapper.find('.show').length).toBe(1);
     wrapper.setProps({
       show: false
     });
-    expect(wrapper.find('.overlayHide').length).toBe(1);
+    expect(wrapper.find('.hide').length).toBe(1);
   });
   it('renders the title', function () {
     var onClose = jest.fn();
@@ -106,12 +106,19 @@ describe("Modal", function () {
       secBtn: {
         text: 'Secondary button',
         onClick: onClose
-      }
+      },
+      testId: "modal"
     }));
-    wrapper.find('.mainBtn').at(0).simulate('click');
-    wrapper.find('.secBtn').at(0).simulate('click');
-    expect(wrapper.find('.mainBtn').at(0).text()).toBe('Main button');
-    expect(wrapper.find('.secBtn').at(0).text()).toBe('Secondary button');
+    var mainBtn = wrapper.find({
+      'data-testid': 'modal__button-main'
+    }).at(0);
+    var secBtn = wrapper.find({
+      'data-testid': 'modal__button-secondary'
+    }).at(0);
+    mainBtn.simulate('click');
+    secBtn.simulate('click');
+    expect(mainBtn.text()).toBe('Main button');
+    expect(secBtn.text()).toBe('Secondary button');
     expect(onClose.mock.calls.length).toBe(2);
   });
 });

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

@@ -27,51 +27,30 @@ Object {
       "opacity": 1,
     },
   },
-  "bottom": Object {
-    "marginTop": 8,
-    "textAlign": "right",
-  },
   "card": Object {
     "@media screen and (max-width:575px)": Object {
       "borderRadius": [Function],
       "minHeight": [Function],
-      "padding": [Function],
-    },
-    "@media screen and (min-width:768px)": Object {
-      "padding": 32,
     },
+    "background": "#fff",
+    "border": "1px solid #D3D4DC",
+    "borderRadius": "8px",
     "cursor": "auto",
     "maxWidth": "100%",
-    "padding": 16,
+    "overflow": "hidden",
     "transition": "0.3s opacity, 0.3s margin-top",
   },
   "cardBlock": Object {
     "@media screen and (max-width:575px)": Object {
-      "height": [Function],
       "margin": [Function],
     },
     "margin": 12,
   },
-  "cardHide": Object {
-    "marginTop": -64,
-    "opacity": 0,
-  },
-  "cardShow": Object {
-    "animation": "0.3s modalFadeDown ease-out",
-  },
   "cardWrapper": Object {
-    "@media screen and (max-width:575px)": Object {
-      "height": [Function],
-    },
-    "maxHeight": "100%",
-    "maxWidth": "100%",
+    "maxHeight": "100vh",
+    "maxWidth": "100vw",
     "position": "relative",
   },
-  "closeIcon": Object {
-    "alignItems": "center",
-    "display": "flex",
-    "height": 32,
-  },
   "closePosition": Object {
     "@media screen and (min-width:768px)": Object {
       "right": 32,
@@ -89,84 +68,127 @@ Object {
       "background": "#dddddd",
       "borderRadius": 3,
     },
-    "@media screen and (min-width:768px)": Object {
-      "marginLeft": -32,
-      "marginRight": -32,
-      "paddingLeft": 32,
-      "paddingRight": 32,
-    },
-    "marginLeft": -16,
-    "marginRight": -16,
-    "paddingLeft": 16,
-    "paddingRight": 16,
+    "flex": 1,
+    "overflow": "auto",
     "transition": "0.1s height",
   },
-  "imgLeft": Object {
-    "@media screen and (min-width:768px)": Object {
-      "marginBottom": -32,
-      "marginLeft": -32,
-      "marginRight": 32,
-      "marginTop": -32,
-    },
-    "backgroundColor": [Function],
-    "backgroundImage": [Function],
-    "backgroundPosition": [Function],
-    "backgroundRepeat": "no-repeat",
-    "backgroundSize": [Function],
-    "borderRadius": Array [
-      6,
-      0,
-      0,
-      6,
+  "contentChild": Object {
+    "@media screen and (min-width:576px)": Object {
+      "padding": Array [
+        "12px",
+        "40px",
+      ],
+    },
+    "borderBottom": "1px solid transparent",
+    "padding": "12px",
+  },
+  "contentWrapper": Object {
+    "flex": 1,
+    "height": "auto",
+    "maxHeight": "85vh",
+  },
+  "footer": Object {
+    "@media screen and (min-width:576px)": Object {
+      "flexDirection": "row",
+      "gap": "8px",
+      "justifyContent": "flex-end",
+      "padding": Array [
+        "16px",
+        "40px",
+      ],
+    },
+    "borderTop": "1px solid transparent",
+    "display": "flex",
+    "flexDirection": "column-reverse",
+    "flexGrow": 0,
+    "gap": "4px",
+    "padding": "12px",
+    "textAlign": "right",
+  },
+  "footerBorder": Object {
+    "borderTop": "1px solid #EDEDF1",
+  },
+  "fullSize": Object {
+    "& $contentWrapper": Object {
+      "@media screen and (min-width:576px)": Object {
+        "height": "auto",
+        "maxHeight": "85vh",
+      },
+      "height": "100vh",
+      "maxHeight": "100vh",
+      "overflow": "auto",
+    },
+    "@media screen and (max-width:575px)": Object {
+      "border": 0,
+      "width": "100% !important",
+    },
+  },
+  "header": Object {
+    "@media screen and (min-width:576px)": Object {
+      "height": 72,
+      "padding": Array [
+        "16px",
+        "16px",
+        "16px",
+        "40px",
+      ],
+    },
+    "alignItems": "center",
+    "background": "transparent",
+    "border": "1px solid transparent",
+    "display": "flex",
+    "flexGrow": 0,
+    "height": 56,
+    "padding": Array [
+      "8px",
+      "12px",
     ],
-    "marginBottom": -16,
-    "marginLeft": -16,
-    "marginRight": 16,
-    "marginTop": -16,
-    "width": 200,
+    "transition": "0.2s all",
+    "zIndex": 1,
+  },
+  "headerBorder": Object {
+    "borderBottom": "1px solid #EDEDF1",
+  },
+  "hide": Object {
+    "& $card": Object {
+      "marginTop": -64,
+      "opacity": 0,
+    },
+    "opacity": 0,
+  },
+  "imgLeft": Object {
+    "@media screen and (min-width:576px)": Object {
+      "display": "block",
+      "width": 200,
+    },
+    "display": "none",
   },
   "imgTop": Object {
-    "@media screen and (min-width:768px)": Object {
-      "marginBottom": 32,
-      "marginLeft": -32,
-      "marginRight": -32,
-      "marginTop": -32,
-    },
-    "backgroundColor": [Function],
-    "backgroundImage": [Function],
-    "backgroundPosition": [Function],
-    "backgroundRepeat": "no-repeat",
-    "backgroundSize": [Function],
-    "borderRadius": Array [
-      6,
-      6,
-      0,
-      0,
-    ],
-    "height": [Function],
-    "marginBottom": 16,
-    "marginLeft": -16,
-    "marginRight": -16,
-    "marginTop": -16,
-    "position": "relative",
+    "aspectRatio": "21 / 9",
+    "maxHeight": 200,
+    "objectFit": "cover",
+    "width": "100%",
   },
   "lg": Object {
     "width": 820,
   },
-  "mainBtn": Object {
-    "marginLeft": 24,
-    "marginTop": 16,
-  },
   "md": Object {
     "@media screen and (max-width:767px)": Object {
       "maxWidth": "100%",
-      "width": 322,
     },
-    "width": 520,
+    "width": 600,
   },
   "noClose": Object {
     "cursor": "default",
   },
+  "noFooter": Object {
+    "paddingBottom": "40px",
+  },
+  "noHeader": Object {
+    "@media screen and (min-width:768px)": Object {
+      "paddingTop": "40px",
+    },
+  },
   "overlay": Object {
     "alignItems": "center",
     "background": "rgba(0, 0, 5, 0.85)",
@@ -175,29 +197,59 @@ Object {
     "height": "100%",
     "justifyContent": "center",
     "left": 0,
-    "overflow": "auto",
     "position": "fixed",
     "top": 0,
     "transition": "0.3s all",
     "width": "100%",
     "zIndex": 1000,
   },
-  "overlayHide": Object {
-    "opacity": 0,
-  },
-  "overlayShow": Object {
+  "show": Object {
+    "& $card": Object {
+      "animation": "0.3s modalFadeDown ease-out",
+    },
     "animation": "0.3s modalFadeIn linear",
   },
-  "secBtn": Object {
-    "marginTop": 16,
-  },
   "sm": Object {
+    "& $contentChild": Object {
+      "padding": "12px",
+    },
+    "& $footer": Object {
+      "flexDirection": "column-reverse",
+      "gap": "4px",
+      "padding": "12px",
+    },
+    "& $header": Object {
+      "height": 56,
+      "padding": Array [
+        "8px",
+        "12px",
+      ],
+    },
+    "& $title": Object {
+      "font": "400 20px/1.1 'OccText', sans-serif",
+    },
     "maxWidth": "100%",
-    "width": 322,
+    "width": 320,
+  },
+  "solidHeader": Object {
+    "background": "#fff",
+  },
+  "split": Object {
+    "display": "flex",
+    "flexDirection": "row",
+  },
+  "stickyHeader": Object {
+    "@media screen and (min-width:576px)": Object {
+      "marginBottom": -72,
+    },
+    "marginBottom": -56,
   },
-  "title": Object {},
-  "top": Object {
-    "marginBottom": 16,
+  "title": Object {
+    "@media screen and (min-width:576px)": Object {
+      "font": "400 24px/1.1 'OccText', sans-serif",
+    },
+    "font": "400 20px/1.1 'OccText', sans-serif",
+    "margin": 0,
   },
   "xl": Object {
     "width": 1024,