@occmundial/occ-atomic 3.0.0-beta.66 → 3.0.0-beta.68

package/build/NavAside/NavAside.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,118 +15,62 @@ var _Card = _interopRequireDefault(require("../Card"));
 
 var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var NavAside = /*#__PURE__*/function (_React$Component) {
-  _inherits(NavAside, _React$Component);
-
-  var _super = _createSuper(NavAside);
-
-  function NavAside(props) {
-    var _this;
-
-    _classCallCheck(this, NavAside);
-
-    _this = _super.call(this, props);
-    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(NavAside, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('keydown', this.onKeyDown);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('keydown', this.onKeyDown);
-    }
-  }, {
-    key: "onKeyDown",
-    value: function onKeyDown(_ref) {
-      var which = _ref.which;
-
-      if (which == 27) {
-        this.props.onClose();
-      }
-    }
-  }, {
-    key: "avoidClose",
-    value: function avoidClose(e) {
-      e.stopPropagation();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          top = _this$props.top,
-          children = _this$props.children,
-          onClose = _this$props.onClose,
-          show = _this$props.show,
-          width = _this$props.width,
-          onTransitionEnd = _this$props.onTransitionEnd,
-          right = _this$props.right;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(show ? " ".concat(classes.overlay, " ").concat(classes.overlayShow) : " ".concat(classes.overlay)),
-        onClick: onClose,
-        onTransitionEnd: onTransitionEnd
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(show ? right ? "".concat(classes.ShowElement, " ").concat(classes.OpenElementRight) : "".concat(classes.ShowElement, " ").concat(classes.OpenElement) : "".concat(classes.ShowElement)).concat(width && right ? " ".concat(classes.customeWidthRight) : " ".concat(classes.customeWidth)).concat(right ? " ".concat(classes.showRight) : ''),
-        onClick: this.avoidClose
-      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        shadow: 5,
-        className: "".concat(classes.card)
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        justifyContent: "end",
-        alignItems: "start",
-        className: classes.top
-      }, top && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        flex: "1",
-        className: classes.topContent
-      }, top), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.closeIcon
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "close",
-        width: 24,
-        height: 24,
-        colors: [_colors["default"].grey900],
-        onClick: onClose,
-        testId: "navaside__close-icon"
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.content
-      }, children))));
-    }
-  }]);
-
-  return NavAside;
-}(_react["default"].Component);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavAside = function NavAside(_ref) {
+  var classes = _ref.classes,
+      top = _ref.top,
+      children = _ref.children,
+      onClose = _ref.onClose,
+      show = _ref.show,
+      onTransitionEnd = _ref.onTransitionEnd,
+      right = _ref.right;
+  (0, _react.useEffect)(function () {
+    window.addEventListener('keydown', onKeyDown);
+    return function () {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onClose]);
+  var onKeyDown = (0, _react.useCallback)(function (_ref2) {
+    var code = _ref2.code;
+    if (code == ESCAPE) onClose();
+  }, [onClose]);
+  var avoidClose = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.overlay, " ").concat(show ? classes.overlayShow : classes.overlayHide),
+    onClick: onClose,
+    onTransitionEnd: onTransitionEnd
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.block, " ").concat(show ? right ? classes.showRight : classes.showLeft : right ? classes.hideRight : classes.hideLeft),
+    onClick: avoidClose
+  }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+    raised: true,
+    className: classes.card
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    justifyContent: "end",
+    alignItems: "start",
+    className: classes.top
+  }, top && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    flex: "1",
+    className: classes.topContent
+  }, top), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    theme: "ghostGrey",
+    icon: "x",
+    size: "md",
+    onClick: onClose
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, children))));
+};
 
 NavAside.propTypes = {
   classes: _propTypes["default"].object.isRequired,
@@ -137,9 +81,6 @@ NavAside.propTypes = {
   /** Will display any element in the bottom position */
   children: _propTypes["default"].node,
 
-  /** Custome width for aside */
-  width: _propTypes["default"].number,
-
   /** Custome function for closing aside */
   onClose: _propTypes["default"].func,
 

package/build/NavAside/NavAside.test.js

@@ -37,32 +37,6 @@ describe("NavAside", function () {
     wrapper.find('.overlay').simulate('click');
     expect(onClose.mock.calls.length).toBe(1);
   });
-  it('calls the onClose function when clicking the close icon', function () {
-    var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
-      classes: classes,
-      onClose: onClose
-    }));
-    wrapper.find({
-      "data-testid": "navaside__close-icon"
-    }).simulate('click');
-    expect(onClose.mock.calls.length).toBe(1);
-  });
-  it('calls the onClose function when pressing the Esc key', function () {
-    var onClose = jest.fn();
-    var map = {};
-    window.addEventListener = jest.fn(function (event, cb) {
-      map[event] = cb;
-    });
-    (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
-      classes: classes,
-      onClose: onClose
-    }));
-    map.keydown({
-      which: 27
-    });
-    expect(onClose.mock.calls.length).toBe(1);
-  });
   it('toggles between show and hide', function () {
     var onClose = jest.fn();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
@@ -76,16 +50,6 @@ describe("NavAside", function () {
     });
     expect(wrapper.find('.overlayShow').length).toBe(0);
   });
-  it('renders different width', function () {
-    var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
-      classes: classes,
-      onClose: onClose,
-      width: 600
-    }));
-    expect(wrapper.find('.customeWidth').length).toBe(1);
-    expect(wrapper.prop('width')).toBe(600);
-  });
   it('renders the content', function () {
     var onClose = jest.fn();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
@@ -103,27 +67,6 @@ describe("NavAside", function () {
     }));
     expect(wrapper.find('.top').at(0).text()).toBe('Content');
   });
-  it('renders on the right', function () {
-    var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
-      classes: classes,
-      onClose: onClose,
-      right: true
-    }));
-    expect(wrapper.find('.showRight').length).toBe(1);
-  });
-  it('renders on the right with width', function () {
-    var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_NavAside["default"], {
-      classes: classes,
-      onClose: onClose,
-      right: true,
-      width: 600
-    }));
-    expect(wrapper.find('.showRight').length).toBe(1);
-    expect(wrapper.find('.customeWidthRight').length).toBe(1);
-    expect(wrapper.prop('width')).toBe(600);
-  });
 });
 describe("ModalPortal", function () {
   it('matches the snapshot', function () {

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

@@ -11,49 +11,39 @@ Object {
       "overflow": "hidden",
     },
   },
-  "@keyframes asideShow": Object {
+  "@keyframes overlayFadeIn": Object {
     "from": Object {
-      "left": [Function],
+      "opacity": 0,
     },
     "to": Object {
-      "left": "0px",
+      "opacity": 1,
     },
   },
-  "@keyframes asideShowRight": Object {
+  "@keyframes showFromLeft": Object {
     "from": Object {
-      "right": [Function],
+      "left": -320,
     },
     "to": Object {
-      "right": "0px",
+      "left": 0,
     },
   },
-  "@keyframes overlayFadeIn": Object {
+  "@keyframes showFromRight": Object {
     "from": Object {
-      "opacity": 0,
+      "right": -320,
     },
     "to": Object {
-      "opacity": 1,
+      "right": 0,
     },
   },
-  "OpenElement": Object {
-    "animation": "0.3s asideShow ease-out",
-    "left": "0px !important",
-  },
-  "OpenElementRight": Object {
-    "animation": "0.3s asideShowRight ease-out",
-    "right": "0px !important",
-  },
-  "ShowElement": Object {
-    "backgroundColor": "#ffffff",
+  "block": Object {
+    "backgroundColor": "#fff",
     "height": "100%",
-    "left": "-320px",
     "maxWidth": "calc(100% - 32px)",
-    "opacity": "1 !important",
     "overflow": "hidden",
     "position": "fixed",
-    "top": "0",
-    "transition": "0.4s all",
-    "width": "320px",
+    "top": 0,
+    "transition": "0.3s left, 0.3s right",
+    "width": 320,
   },
   "card": Object {
     "cursor": "auto",
@@ -64,50 +54,52 @@ Object {
   "closeIcon": Object {
     "alignItems": "center",
     "display": "flex",
-    "height": 32,
+    "height": "32px",
   },
   "content": Object {
     "@media screen and (min-width:768px)": Object {
-      "padding": 32,
+      "padding": "32px",
     },
-    "backgroundColor": "#ffffff",
-    "padding": 16,
+    "backgroundColor": "#fff",
+    "padding": "16px",
   },
-  "customeWidth": Object {
-    "left": [Function],
-    "width": [Function],
+  "hideLeft": Object {
+    "left": -320,
   },
-  "customeWidthRight": Object {
-    "right": [Function],
-    "width": [Function],
+  "hideRight": Object {
+    "right": -320,
   },
   "overlay": Object {
-    "background": "rgba(0, 0, 5, 0.85)",
+    "background": "rgba(0,0,0,0.8)",
     "cursor": "pointer",
     "height": "100%",
     "left": 0,
-    "opacity": 0,
     "position": "fixed",
     "top": 0,
     "transition": "0.3s opacity",
-    "transitionDelay": "0.2s",
     "width": "100%",
     "zIndex": 1000,
   },
+  "overlayHide": Object {
+    "opacity": 0,
+  },
   "overlayShow": Object {
     "animation": "0.3s overlayFadeIn linear",
-    "opacity": 1,
+  },
+  "showLeft": Object {
+    "animation": "0.3s showFromLeft ease-out",
+    "left": 0,
   },
   "showRight": Object {
-    "left": "auto",
-    "right": "-320px",
+    "animation": "0.3s showFromRight ease-out",
+    "right": 0,
   },
   "top": Object {
     "@media screen and (min-width:768px)": Object {
-      "padding": 32,
+      "padding": "32px",
     },
-    "backgroundColor": "#f5f5f8",
-    "padding": 16,
+    "backgroundColor": "#F8FAFD",
+    "padding": "16px",
   },
   "topContent": Object {
     "minWidth": 0,

package/build/NavAside/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
@@ -100,5 +102,9 @@ var NavAsidePortal = /*#__PURE__*/function (_React$Component) {
   return NavAsidePortal;
 }(_react["default"].Component);
 
+NavAsidePortal.propTypes = {
+  show: _propTypes["default"].bool,
+  container: _propTypes["default"].object
+};
 var _default = NavAsidePortal;
 exports["default"] = _default;

package/build/NavAside/styles.js

@@ -5,17 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 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 = {
+var ASIDE_SIZE = 320;
+var styles = {
   '@global': {
     body: {
       overflow: 'hidden'
@@ -29,108 +30,89 @@ var _default = {
       opacity: 1
     }
   },
-  '@keyframes asideShow': {
+  '@keyframes showFromLeft': {
     from: {
-      left: function left(props) {
-        return props.width ? "-".concat(props.width, "px") : '-320px';
-      }
+      left: -ASIDE_SIZE
     },
     to: {
-      left: '0px'
+      left: 0
     }
   },
-  '@keyframes asideShowRight': {
+  '@keyframes showFromRight': {
     from: {
-      right: function right(props) {
-        return props.width ? "-".concat(props.width, "px") : '-320px';
-      }
+      right: -ASIDE_SIZE
     },
     to: {
-      right: '0px'
+      right: 0
     }
   },
   overlay: {
     position: 'fixed',
     width: '100%',
     height: '100%',
-    background: 'rgba(0, 0, 5, 0.85)',
+    background: _colors["default"].bg.overlay,
     top: 0,
     left: 0,
     zIndex: 1000,
     cursor: 'pointer',
-    opacity: 0,
-    transition: '0.3s opacity',
-    transitionDelay: '0.2s'
+    transition: '0.3s opacity'
   },
   overlayShow: {
-    animation: '0.3s overlayFadeIn linear',
-    opacity: 1
+    animation: '0.3s overlayFadeIn linear'
   },
-  card: {
-    cursor: 'auto',
-    height: '100%',
-    padding: 0,
-    overflow: 'auto'
+  overlayHide: {
+    opacity: 0
   },
-  ShowElement: {
+  block: {
     height: '100%',
-    width: '320px',
-    maxWidth: 'calc(100% - 32px)',
+    width: ASIDE_SIZE,
+    maxWidth: "calc(100% - ".concat(_spacing["default"]['size-6'], ")"),
     position: 'fixed',
-    top: '0',
-    backgroundColor: _colors["default"].bgWhite,
+    top: 0,
+    backgroundColor: _colors["default"].bg.surface["default"],
     overflow: 'hidden',
-    left: '-320px',
-    transition: '0.4s all',
-    opacity: '1 !important'
+    transition: '0.3s left, 0.3s right'
   },
-  customeWidth: {
-    width: function width(props) {
-      return "".concat(props.width, "px !important");
-    },
-    left: function left(props) {
-      return "-".concat(props.width, "px");
-    }
-  },
-  customeWidthRight: {
-    width: function width(props) {
-      return "".concat(props.width, "px !important");
-    },
-    right: function right(props) {
-      return "-".concat(props.width, "px");
-    }
+  showLeft: {
+    animation: '0.3s showFromLeft ease-out',
+    left: 0
   },
   showRight: {
-    left: 'auto',
-    right: '-320px'
+    animation: '0.3s showFromRight ease-out',
+    right: 0
   },
-  OpenElement: {
-    animation: '0.3s asideShow ease-out',
-    left: '0px !important'
+  hideLeft: {
+    left: -ASIDE_SIZE
   },
-  OpenElementRight: {
-    animation: '0.3s asideShowRight ease-out',
-    right: '0px !important'
+  hideRight: {
+    right: -ASIDE_SIZE
+  },
+  card: {
+    cursor: 'auto',
+    height: '100%',
+    padding: 0,
+    overflow: 'auto'
   },
   content: _defineProperty({
-    backgroundColor: _colors["default"].bgWhite,
-    padding: _spacing["default"].small
+    backgroundColor: _colors["default"].bg.surface["default"],
+    padding: _spacing["default"]['size-4']
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }),
   top: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: _spacing["default"].small
+    backgroundColor: _colors["default"].bg["default"],
+    padding: _spacing["default"]['size-4']
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }),
   topContent: {
     minWidth: 0
   },
   closeIcon: {
-    height: _spacing["default"].medium,
+    height: _spacing["default"]['size-6'],
     display: 'flex',
     alignItems: 'center'
   }
 };
+var _default = styles;
 exports["default"] = _default;