@occmundial/occ-atomic 3.0.0-beta.5 → 3.0.0-beta.50

package/build/Grid/Col/styles.js

@@ -7,18 +7,25 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _col;
 
 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 styles = {
-  col: {
+  col: (_col = {
     boxSizing: 'border-box',
     position: 'relative',
     minHeight: '1px',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter
-  }
+    padding: [0, 6]
+  }, _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    padding: [0, _spacing["default"]['size-2']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _col)
 };
 
 var pushGrid = function pushGrid() {
@@ -44,7 +51,6 @@ var pushGrid = function pushGrid() {
     };
   }
 
-  ;
   styles[xs] = {};
   styles[sm] = {};
   styles[md] = {};

package/build/Grid/Row/__snapshots__/Row.test.js.snap

@@ -12,9 +12,25 @@ Object {
       "content": "\\"\\"",
       "display": "table",
     },
+    "@media (min-width: 0px)": Object {
+      "margin": Array [
+        0,
+        "-6px",
+      ],
+    },
+    "@media (min-width: 576px)": Object {
+      "margin": Array [
+        0,
+        "-8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
     "boxSizing": "border-box",
-    "marginLeft": -12,
-    "marginRight": -12,
   },
 }
 `;

package/build/Grid/Row/styles.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _grid = _interopRequireDefault(require("../../subatomic/grid"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _row;
 
 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 _default = {
-  row: {
+  row: (_row = {
     boxSizing: 'border-box',
-    marginRight: -_spacing["default"].gutter,
-    marginLeft: -_spacing["default"].gutter,
     '&:before, &:after': {
       display: 'table',
       content: '""'
@@ -21,6 +25,12 @@ var _default = {
     '&:after': {
       clear: 'both'
     }
-  }
+  }, _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xxs, "px)"), {
+    margin: [0, '-6px']
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-2"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _row)
 };
 exports["default"] = _default;

package/build/Grid/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _conFluid$con$Media;
 
@@ -18,8 +18,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var _default = (_conFluid$con$Media = {
   conFluid: {
     boxSizing: 'border-box',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter,
+    paddingRight: _spacing["default"]['size-3'],
+    paddingLeft: _spacing["default"]['size-3'],
     marginRight: 'auto',
     marginLeft: 'auto',
     '&:before, &:after': {
@@ -31,24 +31,41 @@ var _default = (_conFluid$con$Media = {
     }
   },
   con: {
-    extend: 'conFluid',
-    margin: '0 auto'
+    width: _grid["default"].full,
+    margin: 'auto',
+    padding: [0, _spacing["default"]['size-3']]
   }
 }, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
   con: {
-    width: _grid["default"].xsGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-4']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-4']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
   con: {
-    width: _grid["default"].smGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-5']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-5']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
   con: {
-    width: _grid["default"].mdGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-7']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-7']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
   con: {
-    width: _grid["default"].lgGrid
+    width: _grid["default"].lgGrid,
+    padding: 0
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
   con: {

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);
   });
 });