@occmundial/occ-atomic 3.0.0-beta.39 → 3.0.0-beta.40

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.40](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.39...v3.0.0-beta.40) (2024-08-05)
+
+
+### Features
+
+* Update the Modal component ([b10976b](https://github.com/occmundial/occ-atomic/commit/b10976b0a7e2020d714f2097b3fb6b4f12aadb6e))
+
 # [3.0.0-beta.39](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.38...v3.0.0-beta.39) (2024-07-31)
 
 

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,

package/build/Modal/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
@@ -11,12 +11,27 @@ var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
-var _card, _content;
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing2 = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _fullSize;
 
 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 objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   '@global': {
     body: {
@@ -46,7 +61,6 @@ var _default = {
     width: '100%',
     height: '100%',
     background: 'rgba(0, 0, 5, 0.85)',
-    overflow: 'auto',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -56,65 +70,53 @@ var _default = {
     transition: '0.3s all',
     cursor: 'pointer'
   },
-  overlayShow: {
-    animation: '0.3s modalFadeIn linear'
+  show: {
+    animation: '0.3s modalFadeIn linear',
+    '& $card': {
+      animation: '0.3s modalFadeDown ease-out'
+    }
   },
-  overlayHide: {
-    opacity: 0
+  hide: {
+    opacity: 0,
+    '& $card': {
+      opacity: 0,
+      marginTop: -_spacing["default"].xLarge
+    }
   },
   noClose: {
     cursor: 'default'
   },
-  cardWrapper: _defineProperty({
+  cardWrapper: {
     position: 'relative',
-    maxWidth: '100%',
-    maxHeight: '100%'
-  }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    height: function height(_ref) {
-      var fullSize = _ref.fullSize;
-      return fullSize && '100%';
-    }
-  }),
+    maxWidth: '100vw',
+    maxHeight: '100vh'
+  },
   cardBlock: _defineProperty({
     margin: _spacing["default"].gutter
   }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    margin: function margin(_ref2) {
-      var fullSize = _ref2.fullSize;
+    margin: function margin(_ref) {
+      var fullSize = _ref.fullSize;
       return fullSize && 0;
-    },
-    height: function height(_ref3) {
-      var fullSize = _ref3.fullSize;
-      return fullSize && '100%';
     }
   }),
-  card: (_card = {
+  card: _defineProperty({
     maxWidth: '100%',
     cursor: 'auto',
+    overflow: 'hidden',
     transition: '0.3s opacity, 0.3s margin-top',
-    padding: _spacing["default"].small
-  }, _defineProperty(_card, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
-  }), _defineProperty(_card, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    padding: function padding(_ref4) {
-      var fullSize = _ref4.fullSize;
-      return fullSize && _spacing["default"].base;
-    },
-    minHeight: function minHeight(_ref5) {
-      var fullSize = _ref5.fullSize;
-      return fullSize && '100%';
+    borderRadius: _borderRadius["default"]['br-sm'],
+    border: "1px solid ".concat(_colors2["default"].border["default"]["default"]),
+    background: _colors2["default"].bg.surface["default"]
+  }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+    minHeight: function minHeight(_ref2) {
+      var fullSize = _ref2.fullSize;
+      return fullSize && '100vh';
     },
-    borderRadius: function borderRadius(_ref6) {
-      var fullSize = _ref6.fullSize;
+    borderRadius: function borderRadius(_ref3) {
+      var fullSize = _ref3.fullSize;
       return fullSize && 0;
     }
-  }), _card),
-  cardShow: {
-    animation: '0.3s modalFadeDown ease-out'
-  },
-  cardHide: {
-    opacity: 0,
-    marginTop: -_spacing["default"].xLarge
-  },
+  }),
   xl: {
     width: 1024
   },
@@ -122,116 +124,133 @@ var _default = {
     width: 820
   },
   md: _defineProperty({
-    width: 520
+    width: 600
   }, "@media screen and (max-width:".concat(_grid["default"].sm - 1, "px)"), {
-    width: 322,
     maxWidth: '100%'
   }),
   sm: {
-    width: 322,
-    maxWidth: '100%'
+    width: 320,
+    maxWidth: '100%',
+    '& $header': {
+      height: 56,
+      padding: [_spacing2["default"]['size-2'], _spacing2["default"]['size-3']]
+    },
+    '& $title': {
+      font: objectToFontValue(_fonts2["default"]['mobile-h4-m'])
+    },
+    '& $contentChild': {
+      padding: _spacing2["default"]['size-3']
+    },
+    '& $footer': {
+      flexDirection: 'column-reverse',
+      gap: _spacing2["default"]['size-1'],
+      padding: _spacing2["default"]['size-3']
+    }
   },
-  top: {
-    marginBottom: _spacing["default"].small
+  fullSize: (_fullSize = {}, _defineProperty(_fullSize, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+    width: '100% !important',
+    border: 0
+  }), _defineProperty(_fullSize, '& $contentWrapper', _defineProperty({
+    height: '100vh',
+    maxHeight: '100vh',
+    overflow: 'auto'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    height: 'auto',
+    maxHeight: '85vh'
+  })), _fullSize),
+  contentWrapper: {
+    flex: 1,
+    height: 'auto',
+    maxHeight: '85vh'
   },
-  title: {},
-  closeIcon: {
-    height: _spacing["default"].medium,
+  header: _defineProperty({
+    height: 56,
+    flexGrow: 0,
+    padding: [_spacing2["default"]['size-2'], _spacing2["default"]['size-3']],
     display: 'flex',
-    alignItems: 'center'
-  },
-  content: (_content = {
-    marginLeft: -_spacing["default"].small,
-    marginRight: -_spacing["default"].small,
-    paddingLeft: _spacing["default"].small,
-    paddingRight: _spacing["default"].small,
-    transition: '0.1s height'
-  }, _defineProperty(_content, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginRight: -_spacing["default"].medium,
-    paddingLeft: _spacing["default"].medium,
-    paddingRight: _spacing["default"].medium
-  }), _defineProperty(_content, '&::-webkit-scrollbar', {
-    width: 6
-  }), _defineProperty(_content, '&::-webkit-scrollbar-thumb', {
-    background: _colors["default"].grey200,
-    borderRadius: 3
-  }), _content),
-  bottom: {
-    textAlign: 'right',
-    marginTop: _spacing["default"].tiny
+    alignItems: 'center',
+    zIndex: 1,
+    background: 'transparent',
+    border: '1px solid transparent',
+    transition: '0.2s all'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    height: 72,
+    padding: [_spacing2["default"]['size-4'], _spacing2["default"]['size-4'], _spacing2["default"]['size-4'], _spacing2["default"]['size-7']]
+  }),
+  stickyHeader: _defineProperty({
+    marginBottom: -56
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    marginBottom: -72
+  }),
+  solidHeader: {
+    background: _colors2["default"].bg.surface["default"]
   },
-  secBtn: {
-    marginTop: _spacing["default"].small
+  title: _defineProperty({
+    margin: 0,
+    font: objectToFontValue(_fonts2["default"]['mobile-h4-m'])
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    font: objectToFontValue(_fonts2["default"]['heading-h4'])
+  }),
+  content: {
+    transition: '0.1s height',
+    overflow: 'auto',
+    flex: 1,
+    '&::-webkit-scrollbar': {
+      width: 6
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: _colors["default"].grey200,
+      borderRadius: 3
+    }
   },
-  mainBtn: {
-    marginLeft: _spacing["default"].base,
-    marginTop: _spacing["default"].small
+  contentChild: _defineProperty({
+    padding: _spacing2["default"]['size-3'],
+    borderBottom: '1px solid transparent'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing2["default"]['size-3'], _spacing2["default"]['size-7']]
+  }),
+  noHeader: _defineProperty({}, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    paddingTop: _spacing2["default"]['size-7']
+  }),
+  noFooter: {
+    paddingBottom: _spacing2["default"]['size-7']
   },
-  imgLeft: _defineProperty({
-    width: 200,
-    backgroundImage: function backgroundImage(_ref7) {
-      var imgLeft = _ref7.imgLeft;
-      return "url(".concat(imgLeft.img, ")");
-    },
-    backgroundPosition: function backgroundPosition(_ref8) {
-      var imgLeft = _ref8.imgLeft;
-      return "center ".concat(imgLeft.position || 'center');
-    },
-    backgroundSize: function backgroundSize(_ref9) {
-      var imgLeft = _ref9.imgLeft;
-      return imgLeft.size === 'contain' ? '100% auto' : 'cover';
-    },
-    backgroundColor: function backgroundColor(_ref10) {
-      var imgLeft = _ref10.imgLeft;
-      return imgLeft.color || null;
-    },
-    backgroundRepeat: 'no-repeat',
-    borderRadius: [_spacing["default"].radius, 0, 0, _spacing["default"].radius],
-    marginLeft: -_spacing["default"].small,
-    marginTop: -_spacing["default"].small,
-    marginBottom: -_spacing["default"].small,
-    marginRight: _spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginTop: -_spacing["default"].medium,
-    marginBottom: -_spacing["default"].medium,
-    marginRight: _spacing["default"].medium
+  headerBorder: {
+    borderBottom: "1px solid ".concat(_colors2["default"].border["default"].subtle)
+  },
+  footer: _defineProperty({
+    flexGrow: 0,
+    textAlign: 'right',
+    padding: _spacing2["default"]['size-3'],
+    borderTop: '1px solid transparent',
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    gap: _spacing2["default"]['size-1']
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing2["default"]['size-4'], _spacing2["default"]['size-7']],
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: _spacing2["default"]['size-2']
   }),
-  imgTop: _defineProperty({
-    position: 'relative',
-    height: function height(_ref11) {
-      var imgTop = _ref11.imgTop;
-      return imgTop.height || 128;
-    },
-    backgroundImage: function backgroundImage(_ref12) {
-      var imgTop = _ref12.imgTop;
-      return "url(".concat(imgTop.img, ")");
-    },
-    backgroundPosition: function backgroundPosition(_ref13) {
-      var imgTop = _ref13.imgTop;
-      return "".concat(imgTop.position || 'center', " center");
-    },
-    backgroundSize: function backgroundSize(_ref14) {
-      var imgTop = _ref14.imgTop;
-      return imgTop.size === 'contain' ? 'auto 100%' : imgTop.size || 'cover';
-    },
-    backgroundColor: function backgroundColor(_ref15) {
-      var imgTop = _ref15.imgTop;
-      return imgTop.color || null;
-    },
-    backgroundRepeat: 'no-repeat',
-    borderRadius: [_spacing["default"].radius, _spacing["default"].radius, 0, 0],
-    marginLeft: -_spacing["default"].small,
-    marginTop: -_spacing["default"].small,
-    marginBottom: _spacing["default"].small,
-    marginRight: -_spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginTop: -_spacing["default"].medium,
-    marginBottom: _spacing["default"].medium,
-    marginRight: -_spacing["default"].medium
+  footerBorder: {
+    borderTop: "1px solid ".concat(_colors2["default"].border["default"].subtle)
+  },
+  split: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  imgLeft: _defineProperty({
+    display: 'none'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    display: 'block',
+    width: 200
   }),
+  imgTop: {
+    width: '100%',
+    aspectRatio: '21 / 9',
+    maxHeight: 200,
+    objectFit: 'cover'
+  },
   closePosition: _defineProperty({
     position: 'absolute',
     top: _spacing["default"].small,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.39",
+  "version": "3.0.0-beta.40",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",