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

package/build/Droplist/Droplist.test.js

@@ -4,12 +4,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _enzyme = require("enzyme");
 
-var _reactJss = require("react-jss");
-
 var _Droplist = _interopRequireDefault(require("./Droplist"));
 
+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)',
@@ -26,6 +35,10 @@ var items = [{
   text: 'Administrar',
   textRight: '(6)',
   id: 4
+}, {
+  text: 'Comunicación',
+  textRight: '(6)',
+  id: 5
 }];
 var items2 = [{
   text: 'Países',
@@ -64,134 +77,145 @@ var items2 = [{
     id: '3.1'
   }]
 }];
-var sheets, classes;
 describe("Droplist", 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(_Droplist["default"], {
-      items: items
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
+      items: items,
+      classes: classes
     }));
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
   it('returns the right number of items', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
-      items: items
-    })));
-    classes = sheets.registry[1].classes;
-    expect(wrapper.find(".".concat(classes.item)).length).toBe(4);
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
+      items: items,
+      classes: classes
+    }));
+    expect(wrapper.find('.item').length).toBe(5);
   });
   it('returns the right number of groups and its items', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items2,
-      groups: true
-    })));
-    classes = sheets.registry[1].classes;
-    var block = ".".concat(classes.block, ">div");
-    var item = ".".concat(classes.item);
-    expect(wrapper.find(block).length).toBe(3);
-    expect(wrapper.find(block).at(0).find(item).length).toBe(1);
-    expect(wrapper.find(block).at(1).find(item).length).toBe(2);
-    expect(wrapper.find(block).at(2).find(item).length).toBe(1);
+      groups: true,
+      classes: classes
+    }));
+    expect(wrapper.find('.block>div').length).toBe(3);
+    expect(wrapper.find('.block>div').at(0).find('.item').length).toBe(1);
+    expect(wrapper.find('.block>div').at(1).find('.item').length).toBe(2);
+    expect(wrapper.find('.block>div').at(2).find('.item').length).toBe(1);
   });
   it('renders the item correctly', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items,
-      itemIdKey: "id"
-    })));
-    classes = sheets.registry[1].classes;
-    expect(wrapper.find(".".concat(classes.item)).at(0).text()).toBe('Administrador(222)');
+      itemIdKey: "id",
+      classes: classes
+    }));
+    expect(wrapper.find('.item').at(0).text()).toBe('Administrador(222)');
   });
   it('renders the group and sub-item correctly', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items2,
       groups: true,
       groupIdKey: "id",
-      itemIdKey: "id"
-    })));
-    classes = sheets.registry[1].classes;
-    expect(wrapper.find(".".concat(classes.block, ">div")).at(0).text()).toBe('PAÍSESMéxico(3405)');
+      itemIdKey: "id",
+      classes: classes
+    }));
+    expect(wrapper.find('.block>div').at(0).text()).toBe('PAÍSESMéxico(3405)');
   });
   it('filters the items', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items,
-      itemIdKey: "id"
-    })));
-    classes = sheets.registry[1].classes;
-    var item = ".".concat(classes.item);
-    expect(wrapper.find(item).length).toBe(4);
+      itemIdKey: "id",
+      classes: classes
+    }));
+    expect(wrapper.find('.item').length).toBe(5);
     wrapper.setProps({
-      children: _react["default"].createElement(_Droplist["default"], {
-        items: items,
-        itemIdKey: "id",
-        term: "Administrador"
-      })
+      term: 'Administrador'
     });
-    wrapper.instance().forceUpdate();
-    wrapper.update();
-    expect(wrapper.find(item).length).toBe(3);
+    expect(wrapper.find('.item').length).toBe(3);
+  });
+  it('filters the items (accents)', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
+      items: items,
+      itemIdKey: "id",
+      classes: classes
+    }));
+    expect(wrapper.find('.item').length).toBe(5);
+    wrapper.setProps({
+      term: 'comunicacion'
+    });
+    expect(wrapper.find('.item').length).toBe(1);
   });
   it('highlights the matching part of the items', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items,
-      itemIdKey: "id"
-    })));
-    classes = sheets.registry[1].classes;
-    var item = ".".concat(classes.item);
-    expect(wrapper.find(item).at(0).find('b').text()).toBe('');
+      itemIdKey: "id",
+      classes: classes
+    }));
+    expect(wrapper.find('.item').at(0).find('b').text()).toBe('');
     wrapper.setProps({
-      children: _react["default"].createElement(_Droplist["default"], {
-        items: items,
-        itemIdKey: "id",
-        term: "Administrador"
-      })
+      term: 'Administrador'
     });
-    wrapper.instance().forceUpdate();
-    wrapper.update();
-    expect(wrapper.find(item).at(0).find('b').text()).toBe('Administrador');
+    expect(wrapper.find('.item').at(0).find('b').text()).toBe('Administrador');
   });
   it('calls the onClick, onMouseDown and onMouseUp functions', function () {
     var onClick = jest.fn();
     var onMouseDown = jest.fn();
     var onMouseUp = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Droplist["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
       items: items,
       itemIdKey: "id",
       onClick: onClick,
       onMouseDown: onMouseDown,
-      onMouseUp: onMouseUp
-    })));
-    classes = sheets.registry[1].classes;
-    var item = ".".concat(classes.item);
-    wrapper.find(item).at(0).simulate('click', {
+      onMouseUp: onMouseUp,
+      classes: classes
+    }));
+    wrapper.find('.item').at(0).simulate('click', {
       stopPropagation: jest.fn()
     });
     expect(onClick.mock.calls.length).toBe(1);
-    wrapper.find(item).at(0).simulate('mousedown', {
+    wrapper.find('.item').at(0).simulate('mousedown', {
       stopPropagation: jest.fn()
     });
     expect(onMouseDown.mock.calls.length).toBe(1);
-    wrapper.find(item).at(0).simulate('mouseup', {
+    wrapper.find('.item').at(0).simulate('mouseup', {
       stopPropagation: jest.fn()
     });
     expect(onMouseUp.mock.calls.length).toBe(1);
   });
+  it('Should not call the onClick function when contains the disable property', function () {
+    var onClick = jest.fn();
+    var onMouseDown = jest.fn();
+    var onMouseUp = jest.fn();
+    var disabledItems = [{
+      name: 'Item 3',
+      secondary: '(30)',
+      iconName: 'location',
+      disabled: true
+    }];
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
+      items: disabledItems,
+      itemIdKey: "id",
+      onClick: onClick,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      classes: classes
+    }));
+    wrapper.find('.item').at(0).simulate('click', {
+      stopPropagation: jest.fn()
+    });
+    expect(onClick.mock.calls.length).toBe(0);
+  });
+});
+describe("DroplistJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      items: items
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Droplist styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Droplist matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Droplist styles matches the snapshot 1`] = `
+Object {
+  "block": Object {
+    "background": "#ffffff",
+    "border": "1px solid #dddddd",
+    "borderRadius": 4,
+    "overflow": "hidden",
+  },
+  "extraText": Object {
+    "marginLeft": 8,
+  },
+  "extraTextColor": Object {
+    "color": "#0946CB",
+  },
+  "group": Object {
+    "padding": Array [
+      16,
+      16,
+      4,
+    ],
+  },
+  "icon": Object {
+    "marginRight": 8,
+    "position": "absolute",
+    "top": 12,
+  },
+  "iconText": Object {
+    "display": "inline-block",
+    "marginLeft": 24,
+  },
+  "item": Object {
+    "&:hover": Object {
+      "background": "#fafafa",
+    },
+    "display": "flex",
+    "justifyContent": "space-between",
+    "padding": Array [
+      8,
+      16,
+    ],
+    "position": "relative",
+    "transition": "0.1s all",
+  },
+  "itemPointer": Object {
+    "cursor": "pointer",
+  },
+  "onFocus": Object {
+    "&:hover": Object {
+      "background": "#e4edff",
+    },
+    "background": "#e4edff",
+  },
+  "right": Object {
+    "float": "right",
+    "marginLeft": 16,
+    "transition": "0.1s all",
+  },
+}
+`;
+
+exports[`DroplistJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Droplist/functions.js

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.separateText = exports.compareText = void 0;
 
+var _unorm = _interopRequireDefault(require("unorm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var compareText = function compareText() {
   var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var term = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var accents = /[\u0300-\u036f]/g;
-  var textLC = text.toLowerCase().normalize('NFD').replace(accents, "");
-  var termLC = term.toLowerCase().normalize('NFD').replace(accents, "");
+
+  var textLC = _unorm["default"].nfd(text.toLowerCase()).replace(accents, "");
+
+  var termLC = _unorm["default"].nfd(term.toLowerCase()).replace(accents, "");
+
   var index = textLC.indexOf(termLC);
   return index;
 };

package/build/Droplist/index.js

@@ -5,9 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
 var _Droplist = _interopRequireDefault(require("./Droplist"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _Droplist["default"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+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; }
+
+var StyledDroplist = (0, _reactJss["default"])(_styles["default"])(_Droplist["default"]); // eslint-disable-next-line
+
+var _Droplist$propTypes = _Droplist["default"].propTypes,
+    classes = _Droplist$propTypes.classes,
+    propTypes = _objectWithoutProperties(_Droplist$propTypes, ["classes"]);
+
+StyledDroplist.propTypes = _objectSpread(_objectSpread({}, propTypes), StyledDroplist.propTypes);
+var _default = StyledDroplist;
 exports["default"] = _default;

package/build/Droplist/styles.js

@@ -5,44 +5,70 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = require("react-jss");
-
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss.createUseStyles)({
+var gutter = _spacing["default"].gutter,
+    tiny = _spacing["default"].tiny,
+    small = _spacing["default"].small,
+    base = _spacing["default"].base,
+    xTiny = _spacing["default"].xTiny;
+var primLighter = _colors["default"].primLighter,
+    grey50 = _colors["default"].grey50,
+    grey200 = _colors["default"].grey200,
+    bgWhite = _colors["default"].bgWhite,
+    textLink = _colors["default"].textLink;
+var _default = {
   block: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    borderRadius: _spacing["default"].xTiny,
+    background: bgWhite,
+    border: "1px solid ".concat(grey200),
+    borderRadius: xTiny,
     overflow: 'hidden'
   },
   group: {
-    padding: [_spacing["default"].small, _spacing["default"].small, _spacing["default"].xTiny]
+    padding: [small, small, xTiny]
   },
   item: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
+    padding: [tiny, small],
     transition: '0.1s all',
-    cursor: 'pointer',
+    position: 'relative',
     '&:hover': {
-      background: _colors["default"].grey50
+      background: grey50
     }
   },
+  itemPointer: {
+    cursor: 'pointer'
+  },
   right: {
     "float": 'right',
-    transition: '0.1s all'
+    transition: '0.1s all',
+    marginLeft: small
   },
   onFocus: {
-    background: _colors["default"].primLighter,
+    background: primLighter,
     '&:hover': {
-      background: _colors["default"].primLighter
+      background: primLighter
     }
+  },
+  icon: {
+    marginRight: tiny,
+    position: 'absolute',
+    top: gutter
+  },
+  iconText: {
+    display: 'inline-block',
+    marginLeft: base
+  },
+  extraText: {
+    marginLeft: tiny
+  },
+  extraTextColor: {
+    color: textLink
   }
-});
-
+};
 exports["default"] = _default;

package/build/Flexbox/Flexbox.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,42 +11,75 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames7 = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _styles = _interopRequireDefault(require("./styles"));
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 _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; }
+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 Flexbox component uses the grid system of flexbox. */
-var Flexbox = function Flexbox(_ref) {
-  var children = _ref.children,
-      display = _ref.display,
-      direction = _ref.direction,
-      wrap = _ref.wrap,
-      justifyContent = _ref.justifyContent,
-      alignItems = _ref.alignItems,
-      alignContent = _ref.alignContent,
-      order = _ref.order,
-      flex = _ref.flex,
-      alignSelf = _ref.alignSelf,
-      id = _ref.id,
-      className = _ref.className,
-      style = _ref.style;
-  var classes = (0, _styles["default"])();
-  var displayClass = display ? display === 'inline-flex' ? classes.iFlex : classes.flex : '';
-  if (!style) style = {};
-  if (order) style.order = order;
-  if (flex) style.flex = flex;
-  return _react["default"].createElement("div", {
-    className: (0, _classnames7["default"])(displayClass, _defineProperty({}, classes[direction], display && direction), _defineProperty({}, classes[wrap], display && wrap), _defineProperty({}, classes["j".concat(justifyContent)], display && justifyContent), _defineProperty({}, classes["a".concat(alignItems)], display && alignItems), _defineProperty({}, classes["c".concat(alignContent)], display && alignContent), _defineProperty({}, classes["s".concat(alignSelf)], alignSelf), className),
-    id: id,
-    style: style
-  }, children);
-};
+var Flexbox = /*#__PURE__*/function (_React$Component) {
+  _inherits(Flexbox, _React$Component);
+
+  var _super = _createSuper(Flexbox);
+
+  function Flexbox() {
+    _classCallCheck(this, Flexbox);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Flexbox, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          display = _this$props.display,
+          direction = _this$props.direction,
+          wrap = _this$props.wrap,
+          justifyContent = _this$props.justifyContent,
+          alignItems = _this$props.alignItems,
+          alignContent = _this$props.alignContent,
+          order = _this$props.order,
+          flex = _this$props.flex,
+          alignSelf = _this$props.alignSelf,
+          id = _this$props.id,
+          className = _this$props.className;
+      var style = this.props.style;
+      var displayClass = display ? display == 'inline-flex' ? classes.iFlex : classes.flex : '';
+      if (!style) style = {};
+      if (order) style.order = order;
+      if (flex) style.flex = flex;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(displayClass).concat(display && direction ? " ".concat(classes[direction]) : '').concat(display && wrap ? " ".concat(classes[wrap]) : '').concat(display && justifyContent ? " ".concat(classes["j".concat(justifyContent)]) : '').concat(display && alignItems ? " ".concat(classes["a".concat(alignItems)]) : '').concat(display && alignContent ? " ".concat(classes["c".concat(alignContent)]) : '').concat(alignSelf ? " ".concat(classes["s".concat(alignSelf)]) : '').concat(className ? " ".concat(className) : ''),
+        id: id,
+        style: style
+      }, children);
+    }
+  }]);
+
+  return Flexbox;
+}(_react["default"].Component);
 
 Flexbox.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
   children: _propTypes["default"].node,
 
   /** Use the value 'flex' or 'inline-flex' to give your container the flex properties. If you're using the Flexbox component just as a child of another Flexbox, then don't specify any value here. */

package/build/Flexbox/Flexbox.test.js

@@ -4,31 +4,49 @@ var _react = _interopRequireDefault(require("react"));
 
 var _enzyme = require("enzyme");
 
-var _reactJss = require("react-jss");
-
 var _Flexbox = _interopRequireDefault(require("./Flexbox"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Flexbox', 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("Flexbox", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Flexbox["default"], {
-      display: "flex"
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+      display: "flex",
+      classes: classes
     }));
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
   it('matches the classes', function () {
-    var sheets = new _reactJss.SheetsRegistry();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_Flexbox["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
       display: "flex",
       direction: "col",
       justifyContent: "center",
       alignItems: "start",
-      alignContent: "end"
-    })));
-    var classes = sheets.registry[0].classes;
-    expect(wrapper.find('div').prop('className')).toEqual("".concat(classes.flex, " ").concat(classes.col, " ").concat(classes.jcenter, " ").concat(classes.astart, " ").concat(classes.cend));
+      alignContent: "end",
+      classes: classes
+    }));
+    expect(wrapper.find('div').prop('className')).toEqual('flex col jcenter astart cend');
+  });
+});
+describe("FlexboxJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Flexbox styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
   });
 });