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

package/build/Footer/styles.js

@@ -5,78 +5,144 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _styles = require("../Text/styles");
+
+var _footerContainer, _column, _listContainer;
+
 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 = {
-  footer: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: [_spacing["default"].base, 0, _spacing["default"].medium]
-  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
-    padding: [_spacing["default"].medium, 0, _spacing["default"].medium]
-  }),
-  footerWithoutColumns: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: [0, 0, _spacing["default"].medium]
-  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
-    padding: [0, 0, _spacing["default"].medium]
-  }),
-  column: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter,
-    paddingBottom: _spacing["default"].small
-  },
-  list: {
-    '&:not(:first-child)': {
-      marginLeft: _spacing["default"].small
-    }
+  footer: {
+    backgroundColor: _colors["default"].bg.surface["default"],
+    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle),
+    padding: [_spacing["default"]['size-7'], 0]
   },
+  footerContainer: (_footerContainer = {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-5']
+  }, _defineProperty(_footerContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    rowGap: _spacing["default"]['size-7']
+  }), _defineProperty(_footerContainer, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    rowGap: _spacing["default"]['size-8']
+  }), _footerContainer),
+  column: (_column = {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap'
+  }, _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row',
+    columnGap: _spacing["default"]['size-4'],
+    rowGap: _spacing["default"]['size-7']
+  }), _defineProperty(_column, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    columnGap: _spacing["default"]['size-5'],
+    rowGap: 0
+  }), _column),
   link: {
-    color: _colors["default"].grey600,
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.corp.secondary,
     textDecoration: 'none',
-    cursor: 'pointer',
-    '&:hover, &:focus, &:active': {
-      color: _colors["default"].grey600
-    }
-  },
-  listElement: {
-    paddingLeft: _spacing["default"].small,
-    paddingRight: _spacing["default"].small,
-    position: 'relative',
-    display: 'inline-block',
-    '&:first-child': {
-      paddingLeft: 0
+    transition: 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
+    '&:hover': {
+      color: _colors["default"].text.corp.primary
     },
-    '&:not(:last-child)': {
-      '&::after': {
-        content: '"|"',
-        position: 'absolute',
-        right: -2
-      }
+    '&:focus-visible': {
+      color: _colors["default"].text.corp.primary,
+      boxShadow: _shadows["default"]['focus-corp'],
+      borderRadius: _borderRadius["default"]['br-xs'],
+      outline: 0
     }
   },
-  mobileListElement: {
-    paddingLeft: 0,
+  listElement: _defineProperty({
     display: 'block',
-    paddingBottom: _spacing["default"].tiny
+    textAlign: 'center'
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    position: 'relative',
+    display: 'inline-block'
+  }),
+  listContainer: (_listContainer = {
+    flexBasis: '100%'
+  }, _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexBasis: "calc(50% - ".concat(_spacing["default"]['size-4'], ")")
+  }), _defineProperty(_listContainer, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    flexBasis: "calc(25% - ".concat(_spacing["default"]['size-5'], ")")
+  }), _listContainer),
+  bottomSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-7']
   },
-  footerBottom: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter
+  bottomLinksContainer: _defineProperty({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    columnGap: _spacing["default"]['size-5'],
+    rowGap: _spacing["default"]['size-4']
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  }),
+  linkDivider: _defineProperty({
+    width: 1,
+    margin: [_spacing["default"]['size-0'], 0],
+    backgroundColor: _colors["default"].border["default"].bold,
+    alignSelf: 'stretch',
+    display: 'none'
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    display: 'block'
+  }),
+  copyright: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.corp.secondary,
+    '& > p': {
+      margin: 0
+    }
   },
-  bottomWrap: {
-    paddingTop: _spacing["default"].base,
-    borderTop: "1px solid ".concat(_colors["default"].grey200)
+  bottomContainer: _defineProperty({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: _spacing["default"]['size-4']
+  }, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    rowGap: _spacing["default"]['size-5']
+  }),
+  divider: {
+    borderTop: "1px solid ".concat(_colors["default"].border["default"].subtle)
   },
-  buttonMobile: {
-    marginTop: _spacing["default"].small
+  auxContainer: _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: _spacing["default"]['size-5']
+  }, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
+    flexDirection: 'row',
+    gap: _spacing["default"]['size-9']
+  }),
+  badgesContainer: _defineProperty({
+    display: 'flex',
+    gap: _spacing["default"]['size-4'],
+    flexDirection: 'column'
+  }, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row'
+  }),
+  socialMediaContainer: {
+    display: 'flex',
+    direction: 'row',
+    columnGap: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

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

@@ -795,10 +795,24 @@ Object {
     },
   },
   "col": Object {
+    "@media (min-width: 576px)": Object {
+      "padding": Array [
+        0,
+        "8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
     "boxSizing": "border-box",
     "minHeight": "1px",
-    "paddingLeft": 12,
-    "paddingRight": 12,
+    "padding": Array [
+      0,
+      6,
+    ],
     "position": "relative",
   },
   "offset-xxs1": Object {

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: '0 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) : '').concat(imgTop && imgTop.img ? " ".concat(classes.imgTopPadding) : '')
+      }, 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))))))));
     }
   }]);