@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.71

package/build/MenuUser/MenuUser.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuItemBase = _interopRequireDefault(require("../MenuItemBase"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _idx = _interopRequireDefault(require("idx"));
+
+var _MenuListProvider = require("../Provider/MenuListProvider");
+
+var _excluded = ["classes", "disableText", "className", "title", "subtitle", "titleTextProps", "subtitleTextProps", "avatarProps", "dense", "children", "style", "component"];
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/** MenuItem component with Avatar and subtitle. */
+function MenuUser(_ref, ref) {
+  var classes = _ref.classes,
+      _ref$disableText = _ref.disableText,
+      disableText = _ref$disableText === void 0 ? false : _ref$disableText,
+      className = _ref.className,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      titleTextProps = _ref.titleTextProps,
+      subtitleTextProps = _ref.subtitleTextProps,
+      avatarProps = _ref.avatarProps,
+      dense = _ref.dense,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'div' : _ref$component,
+      menuItemprops = _objectWithoutProperties(_ref, _excluded);
+
+  var listContext = (0, _MenuListProvider.useMenuListContext)();
+  var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
+  var primary = title || children;
+  var titleText = !primary ? null : disableText ? primary : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+    className: classes.title + ((0, _idx["default"])(className, function (_) {
+      return _.title;
+    }) ? " ".concat(className.title) : ''),
+    tag: "span",
+    bodyLargeStrong: !isDense,
+    bodyRegularStrong: isDense
+  }, titleTextProps), primary);
+  var subtitleText = !subtitle ? null : disableText ? subtitle : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+    className: classes.subtitle + ((0, _idx["default"])(className, function (_) {
+      return _.subtitle;
+    }) ? " ".concat(className.subtitle) : ''),
+    tag: "span",
+    small: true,
+    corpSecondary: true
+  }, subtitleTextProps), subtitle);
+  return /*#__PURE__*/_react["default"].createElement(_MenuItemBase["default"], _extends({
+    className: className && className.root,
+    component: component,
+    ref: ref,
+    style: style && style.root
+  }, menuItemprops), avatarProps && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.avatarContainer + ((0, _idx["default"])(className, function (_) {
+      return _.avatarContainer;
+    }) ? " ".concat(className.avatarContainer) : ''),
+    style: style && style.avatarContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
+    size: isDense ? 40 : 56
+  }, avatarProps))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.textContainer + ((0, _idx["default"])(className, function (_) {
+      return _.textContainer;
+    }) ? " ".concat(className.textContainer) : ''),
+    style: style && style.textContainer
+  }, titleText, subtitleText));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuUser);
+
+exports["default"] = _default;
+MenuUser.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** Defines the align-items style property.  */
+  alignItems: _propTypes["default"].oneOf(['center', 'start']),
+
+  /** Adds classes to the root, text, iconRight, iconLeft containers.  */
+  className: _propTypes["default"].exact({
+    root: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    subtitle: _propTypes["default"].string,
+    avatarContainer: _propTypes["default"].string,
+    textContainer: _propTypes["default"].string
+  }),
+
+  /** Adds styles to the root, text, iconRight, iconLeft containers.  */
+  style: _propTypes["default"].exact({
+    root: _propTypes["default"].object,
+    textContainer: _propTypes["default"].object,
+    avatarContainer: _propTypes["default"].objects
+  }),
+
+  /** Use to remove hover, focus and active stylings. */
+  nonActivatable: _propTypes["default"].bool,
+
+  /** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.  */
+  dense: _propTypes["default"].bool,
+
+  /** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
+  disablePadding: _propTypes["default"].bool,
+
+  /** If true, the left and right padding is removed. */
+  disableGutters: _propTypes["default"].bool,
+
+  /** The content of the component.   */
+  children: _propTypes["default"].node,
+
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  selected: _propTypes["default"].bool,
+
+  /** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
+  component: _propTypes["default"].elementType,
+
+  /** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
+  disableText: _propTypes["default"].bool,
+
+  /** The title content element. */
+  title: _propTypes["default"].node,
+
+  /** These props will be forwarded to the title Text component (as long as disableText is not true). */
+  titleTextProps: _propTypes["default"].object,
+
+  /** The subtitle content element. */
+  subtitle: _propTypes["default"].node,
+
+  /** These props will be forwarded to the subtitle Text component (as long as disableText is not true). */
+  subtitleTextProps: _propTypes["default"].object,
+
+  /** These props will be forwarded to the Avatar component. */
+  avatarProps: _propTypes["default"].object
+};

package/build/MenuUser/index.js

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

package/build/MenuUser/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  avatarContainer: {
+    flexShrink: 0,
+    paddingRight: 12
+  },
+  title: {
+    display: 'block'
+  },
+  subtitle: {
+    display: 'block'
+  },
+  textContainer: {
+    flex: '1 1 auto'
+  }
+};
+exports["default"] = _default;

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

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