@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

package/build/Autocomplete/Autocomplete.test.js

@@ -4,12 +4,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _enzyme = require("enzyme");
 
-var _reactJss = require("react-jss");
-
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
 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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 var items = [{
   text: 'Administrador',
   textRight: '(222)',
@@ -27,26 +36,18 @@ var items = [{
   textRight: '(6)',
   id: 4
 }];
-var sheets, classes;
 describe("Autocomplete", function () {
-  beforeEach(function () {
-    return sheets = new _reactJss.SheetsRegistry();
-  });
-  afterEach(function () {
-    return sheets = null;
-  });
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       droplistProps: {
         items: items
-      }
+      },
+      classes: classes
     }));
-    expect(wrapper.html()).toMatchSnapshot();
-    wrapper.find('input').simulate('focus');
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
   it('renders the input and droplist', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
         className: 'input'
@@ -54,14 +55,17 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
-    wrapper.find('input').simulate('focus');
+    wrapper.setState({
+      focus: true
+    });
     expect(wrapper.find('.input').at(0).length).toBe(1);
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
   });
   it('hides the droplist when there\'s no value or the input has no focus', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
         className: 'input'
@@ -69,51 +73,47 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
-    wrapper.find('input').simulate('focus');
+    wrapper.setState({
+      focus: true
+    });
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
-    wrapper.find('input').simulate('blur');
+    wrapper.setState({
+      focus: false
+    });
     expect(wrapper.find('.droplist').at(0).length).toBe(0);
-    wrapper.find('input').simulate('focus');
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: ''
-      }
+    wrapper.setState({
+      focus: true,
+      value: ''
     });
     expect(wrapper.find('.droplist').at(0).length).toBe(0);
   });
   it('filters the items of the droplist using the input value', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         className: 'input'
       },
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
-    })));
-    wrapper.find('input').simulate('focus');
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'a'
-      }
+      },
+      classes: classes
+    }));
+    wrapper.setState({
+      focus: true,
+      value: 'a'
     });
     expect(wrapper.find('.droplist').at(0).text()).toBe('Administrador(222)Administrador Sr(134)Administrador Jr(52)Administrar(6)');
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'administrador'
-      }
+    wrapper.setState({
+      value: 'administrador'
     });
-    wrapper.instance().forceUpdate();
-    wrapper.update();
     expect(wrapper.find('.droplist').at(0).text()).toBe('Administrador(222)Administrador Sr(134)Administrador Jr(52)');
   });
   it('returns the input value', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onChange: onChange,
       textfieldProps: {
         className: 'input'
@@ -121,7 +121,8 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
     wrapper.find('input').simulate('change', {
       target: {
@@ -138,10 +139,7 @@ describe("Autocomplete", function () {
   });
   it('returns the object of the selected item', function () {
     var onMouseDown = jest.fn();
-    var sheets = new _reactJss.SheetsRegistry();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onMouseDown: onMouseDown,
       textfieldProps: {
         valueProp: 'a',
@@ -150,24 +148,23 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
-    })));
-    wrapper.find('input').simulate('focus');
-    var classes2 = sheets.registry[2].classes;
-    var item = ".".concat(classes2.item);
-    wrapper.find(item).at(0).simulate('mousedown');
+      },
+      classes: classes
+    }));
+    wrapper.setState({
+      focus: true
+    });
+    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
       textRight: '(222)'
     });
-    wrapper.find('input').simulate('focus');
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'a'
-      }
+    wrapper.setState({
+      focus: true,
+      value: 'a'
     });
-    wrapper.find(item).at(1).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-34').at(1).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -176,7 +173,7 @@ describe("Autocomplete", function () {
   });
   it('calls the onChange function', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onChange: onChange,
       textfieldProps: {
         valueProp: 'a',
@@ -185,7 +182,8 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
     wrapper.find('input').simulate('change', {
       target: {
@@ -196,9 +194,7 @@ describe("Autocomplete", function () {
   });
   it('calls the onMouseDown function', function () {
     var onMouseDown = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onMouseDown: onMouseDown,
       textfieldProps: {
         valueProp: 'a',
@@ -207,16 +203,18 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
-    })));
-    wrapper.find('input').simulate('focus');
-    classes = sheets.registry[2].classes;
-    wrapper.find(".".concat(classes.item)).at(0).simulate('mousedown');
+      },
+      classes: classes
+    }));
+    wrapper.setState({
+      focus: true
+    });
+    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {
     var onFocus = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onFocus: onFocus,
       textfieldProps: {
         valueProp: 'a',
@@ -225,14 +223,15 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
     wrapper.find('input').simulate('focus');
     expect(onFocus.mock.calls.length).toBe(1);
   });
   it('calls the onBlur function', function () {
     var onBlur = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Autocomplete["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       onBlur: onBlur,
       textfieldProps: {
         valueProp: 'a',
@@ -241,9 +240,26 @@ describe("Autocomplete", function () {
       droplistProps: {
         items: items,
         className: 'droplist'
-      }
+      },
+      classes: classes
     }));
     wrapper.find('input').simulate('blur');
     expect(onBlur.mock.calls.length).toBe(1);
   });
+});
+describe("AutocompleteJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      droplistProps: {
+        items: items
+      },
+      items: items
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Autocomplete styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Autocomplete matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Autocomplete styles matches the snapshot 1`] = `
+Object {
+  "autoComplete": Object {
+    "position": "relative",
+  },
+  "droplist": Object {
+    "left": 0,
+    "position": "absolute",
+    "top": [Function],
+    "width": "100%",
+    "zIndex": 2,
+  },
+}
+`;
+
+exports[`AutocompleteJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Autocomplete/index.js

@@ -5,9 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _Autocomplete["default"];
+var _default = (0, _reactJss["default"])(_styles["default"])(_Autocomplete["default"]);
+
 exports["default"] = _default;

package/build/Autocomplete/styles.js

@@ -7,13 +7,11 @@ exports["default"] = void 0;
 
 var _idx = _interopRequireDefault(require("idx"));
 
-var _reactJss = require("react-jss");
-
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss.createUseStyles)({
+var _default = {
   autoComplete: {
     position: 'relative'
   },
@@ -30,6 +28,5 @@ var _default = (0, _reactJss.createUseStyles)({
     left: 0,
     width: '100%'
   }
-});
-
+};
 exports["default"] = _default;

package/build/Avatar/Avatar.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,43 +11,79 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _AvatarContent = _interopRequireDefault(require("./AvatarContent"));
 
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/**
-* The Avatar component shows a rounded avatar with a profile picture, a gender icon or the first two capital letters of a name.
-* You can use more than one property as a fallback in case one of the props is empty or wrong.
-*/
-var Avatar = function Avatar(props) {
-  var photo = props.photo,
-      gender = props.gender,
-      name = props.name,
-      size = props.size,
-      id = props.id,
-      className = props.className,
-      style = props.style;
-  var classes = (0, _styles["default"])(props);
-  return _react["default"].createElement("div", {
-    id: id,
-    className: (0, _classnames["default"])(classes.circle, className),
-    style: style
-  }, _react["default"].createElement(_AvatarContent["default"], {
-    photo: photo,
-    gender: gender,
-    name: name,
-    size: size
-  }));
-};
+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); }
+
+/**
+ * The Avatar component shows a rounded avatar with a profile picture, a gender icon or the first two capital letters of a name.
+ * You can use more than one property as a fallback in case one of the props is empty or wrong.
+ */
+var Avatar = /*#__PURE__*/function (_React$Component) {
+  _inherits(Avatar, _React$Component);
+
+  var _super = _createSuper(Avatar);
+
+  function Avatar() {
+    _classCallCheck(this, Avatar);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Avatar, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          photo = _this$props.photo,
+          gender = _this$props.gender,
+          name = _this$props.name,
+          size = _this$props.size,
+          id = _this$props.id,
+          className = _this$props.className,
+          style = _this$props.style;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        id: id,
+        className: "".concat(classes.circle).concat(className ? " ".concat(className) : ''),
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
+        photo: photo,
+        gender: gender,
+        name: name,
+        size: size
+      }));
+    }
+  }]);
+
+  return Avatar;
+}(_react["default"].Component);
 
 Avatar.defaultProps = {
   size: 70
 };
 Avatar.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+
   /** A url to show a photo as the avatar. */
   photo: _propTypes["default"].string,
 

package/build/Avatar/Avatar.test.js

@@ -6,23 +6,46 @@ var _enzyme = require("enzyme");
 
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Avatar', function () {
+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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe("Avatar", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      name: "John Doe",
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("AvatarJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Avatar["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       name: "John Doe"
     }));
-    expect(wrapper.html()).toMatchSnapshot();
-    wrapper.setProps({
-      name: '',
-      gender: 'f'
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-    wrapper.setProps({
-      gender: null,
-      photo: 'http://photo.url'
-    });
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Avatar styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+  it('returns the right width and height', function () {
+    var props = {};
+    expect(_styles["default"].circle.width(props)).toBe(70);
+    expect(_styles["default"].circle.height(props)).toBe(70);
+    props.size = 50;
+    expect(_styles["default"].circle.width(props)).toBe(50);
+    expect(_styles["default"].circle.height(props)).toBe(50);
   });
 });

package/build/Avatar/AvatarContent/AvatarContent.js

@@ -9,39 +9,35 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var capitalLetter = function capitalLetter(name) {
   if (name) {
-    var capitals = name.toUpperCase().split(' ');
+    var capitals = name.toUpperCase().split(" ");
     capitals = capitals.filter(Boolean);
-    return _react["default"].createElement("span", null, capitals[0] ? capitals[0].charAt(0) : 'N', capitals[1] ? capitals[1].charAt(0) : 'O');
+    return /*#__PURE__*/_react["default"].createElement("span", null, capitals[0] ? capitals[0].charAt(0) : 'N', capitals[1] ? capitals[1].charAt(0) : 'O');
   }
 
-  return '';
+  return "";
 };
 
 var AvatarContent = function AvatarContent(_ref) {
-  var photo = _ref.photo,
+  var classes = _ref.classes,
+      photo = _ref.photo,
       gender = _ref.gender,
       name = _ref.name,
       size = _ref.size;
-  var classes = (0, _styles["default"])();
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.wrap
-  }, gender && _react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.cont, classes[gender])
-  }), !gender && name && _react["default"].createElement("div", {
+  }, gender && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cont, " ").concat(classes[gender])
+  }), !gender && name && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.cont, " ").concat(classes.capital),
     style: size ? {
       fontSize: "".concat(size * 0.4, "px"),
       lineHeight: "".concat(size, "px")
     } : {}
-  }, capitalLetter(name)), photo && _react["default"].createElement("div", {
+  }, capitalLetter(name)), photo && /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.cont,
     style: {
       background: "url('".concat(photo, "') no-repeat center center / cover")
@@ -50,6 +46,7 @@ var AvatarContent = function AvatarContent(_ref) {
 };
 
 AvatarContent.propTypes = {
+  classes: _propTypes["default"].object,
   photo: _propTypes["default"].string,
   gender: _propTypes["default"].string,
   name: _propTypes["default"].string,