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

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Avatar styles matches the snapshot 1`] = `
+Object {
+  "circle": Object {
+    "borderRadius": "50%",
+    "height": [Function],
+    "overflow": "hidden",
+    "position": "relative",
+    "width": [Function],
+  },
+}
+`;
+
+exports[`AvatarJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Avatar/index.js

@@ -13,7 +13,9 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+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; }
 
@@ -27,6 +29,6 @@ var _Avatar$propTypes = _Avatar["default"].propTypes,
     classes = _Avatar$propTypes.classes,
     propTypes = _objectWithoutProperties(_Avatar$propTypes, ["classes"]);
 
-StyledAvatar.propTypes = _objectSpread({}, propTypes, StyledAvatar.propTypes);
+StyledAvatar.propTypes = _objectSpread(_objectSpread({}, propTypes), StyledAvatar.propTypes);
 var _default = StyledAvatar;
 exports["default"] = _default;

package/build/Banner/Banner.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Flexbox = _interopRequireDefault(require("../Flexbox"));
+
+var _WindowSize = _interopRequireDefault(require("../WindowSize"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Banner = function Banner(_ref) {
+  var id = _ref.id,
+      style = _ref.style,
+      className = _ref.className,
+      classes = _ref.classes,
+      children = _ref.children,
+      onClose = _ref.onClose,
+      winWidth = _ref.winWidth;
+  var isMobile = winWidth < _grid["default"].xs;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: id,
+    className: className,
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    flex: "1",
+    className: classes.textFlex
+  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    white: true,
+    small: isMobile,
+    tag: "div",
+    className: classes.textBanner
+  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    className: classes.iconFlex
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "close",
+    colors: [_colors["default"].bgWhite],
+    onClick: onClose,
+    className: classes.icon
+  }))));
+};
+
+Banner.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  winWidth: _propTypes["default"].number,
+
+  /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
+  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+
+  /** Icon name to show on the left. */
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  onClose: _propTypes["default"].func
+};
+
+var _default = (0, _WindowSize["default"])(Banner);
+
+exports["default"] = _default;

package/build/Banner/Banner.test.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Banner = _interopRequireDefault(require("./Banner"));
+
+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, {});
+describe("Banner", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Banner["default"], {
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("BannerJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Banner styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Banner styles matches the snapshot 1`] = `
+Object {
+  "container": Object {
+    "backgroundColor": "#222222",
+    "padding": 16,
+  },
+  "icon": Object {
+    "cursor": "pointer",
+  },
+  "iconFlex": Object {
+    "@media screen and (min-width:576px)": Object {
+      "padding": 0,
+    },
+    "paddingLeft": 16,
+    "paddingTop": 16,
+  },
+  "textBanner": Object {
+    "display": "inline-block",
+  },
+  "textFlex": Object {
+    "@media screen and (min-width:576px)": Object {
+      "textAlign": "center",
+    },
+    "textAlign": "start",
+  },
+}
+`;
+
+exports[`BannerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Banner/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 _Banner = _interopRequireDefault(require("./Banner"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Banner["default"]);
+
+exports["default"] = _default;

package/build/Banner/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
+
+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 = {
+  container: {
+    padding: _spacing["default"].small,
+    backgroundColor: _colors["default"].ink
+  },
+  textBanner: {
+    display: 'inline-block'
+  },
+  textFlex: _defineProperty({
+    textAlign: 'start'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    textAlign: 'center'
+  }),
+  iconFlex: _defineProperty({
+    paddingLeft: _spacing["default"].small,
+    paddingTop: _spacing["default"].small
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: 0
+  }),
+  icon: {
+    cursor: 'pointer'
+  }
+};
+exports["default"] = _default;

package/build/Button/Button.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,9 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Loading = _interopRequireDefault(require("./Loading"));
 
-function _typeof(obj) { 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); }
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+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"); } }
 
@@ -19,30 +23,35 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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; } }
 
-/**
-* A flexible button component, with four pre-stablished themes.
-* The Buton can behave like any button with an onClick function, or like an anchor with href and target.
-* There are 3 sizes available: small, medium and large.
-*/
-var Button =
-/*#__PURE__*/
-function (_React$Component) {
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+ * A flexible button component, with four pre-stablished themes.
+ * The Buton can behave like any button with an onClick function, or like an anchor with href and target.
+ * There are 3 sizes available: small, medium and large.
+ * NOTE: The ghostPink theme is deprecated, since it doesn't match with any of the new themes.
+ */
+var Button = /*#__PURE__*/function (_React$Component) {
   _inherits(Button, _React$Component);
 
+  var _super = _createSuper(Button);
+
   function Button() {
     _classCallCheck(this, Button);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Button).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(Button, [{
@@ -63,47 +72,65 @@ function (_React$Component) {
           disabled = _this$props.disabled,
           icon = _this$props.icon,
           iconRight = _this$props.iconRight,
+          round = _this$props.round,
           style = _this$props.style,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          testId = _this$props.testId;
       var classNames = classes.btn;
       if (theme) classNames += " ".concat(classes[theme]);
       if (loading) classNames += " ".concat(classes.loading);
       if (disabled) classNames += " ".concat(classes.disabled);
-      if (size == "md" || size == "lg") classNames += " ".concat(classes[size]);
+      if (size == 'md' || size == 'lg') classNames += " ".concat(classes[size]);
       if (block) classNames += " ".concat(classes.block);
       if (className) classNames += " ".concat(className);
-      if (!children && icon) classNames += " ".concat(classes.iconOnly);
 
-      var content = _react["default"].createElement("span", {
+      if (!children && icon) {
+        classNames += " ".concat(classes.iconOnly);
+        if (round) classNames += " ".concat(classes.round);
+      }
+
+      var iconSize = size === 'sm' ? 16 : 24;
+
+      var content = /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.cont
-      }, icon ? _react["default"].createElement("i", {
-        className: classes.icon
-      }) : '', children, iconRight ? _react["default"].createElement("i", {
-        className: classes.iconRight
+      }, icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        className: classes.icon,
+        iconName: icon,
+        width: iconSize,
+        height: iconSize
+      }) : '', children, iconRight ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        className: classes.iconRight,
+        iconName: iconRight,
+        width: iconSize,
+        height: iconSize
       }) : '');
 
-      var loadingLayer = loading ? _react["default"].createElement("span", {
+      var loadingLayer = loading ? /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.loadCont
-      }, _react["default"].createElement("i", {
-        className: classes.loadIcon
+      }, /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
+        className: classes.loadIcon,
+        width: iconSize,
+        height: iconSize
       })) : null;
 
       if (href) {
-        return _react["default"].createElement("a", {
+        return /*#__PURE__*/_react["default"].createElement("a", {
           className: classNames,
           href: !disabled ? href : '',
           target: target,
           rel: rel,
           onClick: !disabled ? onClick : null,
           id: id,
-          style: style
+          style: style,
+          "data-testid": testId
         }, content, loadingLayer);
       } else {
-        return _react["default"].createElement("button", {
+        return /*#__PURE__*/_react["default"].createElement("button", {
           className: classNames,
           onClick: !disabled ? onClick : null,
           id: id,
-          style: style
+          style: style,
+          "data-testid": testId
         }, content, loadingLayer);
       }
     }
@@ -120,7 +147,7 @@ Button.defaultProps = {
 };
 Button.propTypes = {
   classes: _propTypes["default"].object.isRequired,
-  children: _propTypes["default"].string,
+  children: _propTypes["default"].node,
 
   /** There are four themes available: main, secondary, white, blue, flat. */
   theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
@@ -140,6 +167,9 @@ Button.propTypes = {
   /** Use the name of any of the icons available in the library. The icon will be rendered on the right side of the button. */
   iconRight: _propTypes["default"].string,
 
+  /** Property to make the button round when it only has an icon. */
+  round: _propTypes["default"].bool,
+
   /** The loading property disables the button and shows a loading icon spinning. */
   loading: _propTypes["default"].bool,
 
@@ -156,7 +186,10 @@ Button.propTypes = {
   rel: _propTypes["default"].string,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Button;
 exports["default"] = _default;

package/build/Button/Button.test.js

@@ -21,26 +21,26 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Button", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes
     }, "Button"));
     expect(wrapper).toMatchSnapshot();
   });
   it('renders the children content', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes
     }, "Button"));
     expect(wrapper.text()).toEqual('Button');
   });
   it('returns a button', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes
     }, "Button"));
     expect(wrapper.find('button').length).toBe(1);
     expect(wrapper.find('a').length).toBe(0);
   });
   it('returns an anchor', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       href: "http://occ.com.mx"
     }, "Button"));
@@ -48,7 +48,7 @@ describe("Button", function () {
     expect(wrapper.find('a').length).toBe(1);
   });
   it('has the right theme', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes
     }, "Button"));
     expect(wrapper.find('button').prop('className')).toEqual('btn primary');
@@ -58,7 +58,7 @@ describe("Button", function () {
     expect(wrapper.find('button').prop('className')).toEqual('btn secondary');
   });
   it('has the right size', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       size: "md"
     }, "Button"));
@@ -71,7 +71,7 @@ describe("Button", function () {
     expect(wrapper.find('button').prop('className').indexOf('lg')).not.toBe(-1);
   });
   it('has the block class', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes
     }, "Button"));
     expect(wrapper.find('button').prop('className').indexOf('block')).toBe(-1);
@@ -82,7 +82,7 @@ describe("Button", function () {
   });
   it('calls onClick function', function () {
     var onClick = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       onClick: onClick,
       disabled: true
@@ -96,37 +96,37 @@ describe("Button", function () {
     expect(onClick.mock.calls.length).toBe(1);
   });
   it('disabled', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       disabled: true
     }, "Button"));
     expect(wrapper.find('button').prop('className').indexOf('disabled')).not.toBe(-1);
   });
   it('has an icon', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       icon: "plus"
     }, "Button"));
-    expect(wrapper.find('button span i').prop('className').indexOf('icon')).not.toBe(-1);
+    expect(wrapper.find('button span Jss(Icon)').prop('className').indexOf('icon')).not.toBe(-1);
   });
   it('has an icon on the right', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       iconRight: "plus"
     }, "Button"));
-    expect(wrapper.find('button span i').prop('className').indexOf('iconRight')).not.toBe(-1);
+    expect(wrapper.find('button span Jss(Icon)').prop('className').indexOf('iconRight')).not.toBe(-1);
   });
-  it('has a loaging icon', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Button["default"], {
+  it('has a loading icon', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       classes: classes,
       loading: true
     }, "Button"));
-    expect(wrapper.find('button span i').prop('className').indexOf('load')).not.toBe(-1);
+    expect(wrapper.find('button span *').prop('className').indexOf('load')).not.toBe(-1);
   });
 });
 describe("ButtonJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -138,16 +138,11 @@ describe("Button styles", function () {
     var props = {
       icon: 'testing'
     };
-    expect(_styles["default"].primary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmZmZmY=)');
-    expect(_styles["default"].secondary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
-    expect(_styles["default"].secondary['&:hover, &:active']['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNjYzFiNGE=)');
-    expect(_styles["default"].tertiary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMyMjIyMjI=)');
-    expect(_styles["default"].tertiary['&:hover, &:active']['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM3Nzc3Nzc=)');
-    expect(_styles["default"].ghostPink['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
-    expect(_styles["default"].ghostPink['&:hover, &:active']['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNjYzFiNGE=)');
-    expect(_styles["default"].ghostGrey['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMyMjIyMjI=)');
-    expect(_styles["default"].ghostGrey['&:hover, &:active']['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM3Nzc3Nzc=)');
-    expect(_styles["default"].ghostWhite['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmZmZmY=)');
-    expect(_styles["default"].disabled['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmZmZmY=)');
+    expect(_styles["default"].primary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
+    expect(_styles["default"].secondary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
+    expect(_styles["default"].tertiary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
+    expect(_styles["default"].ghostPink['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
+    expect(_styles["default"].ghostGrey['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
+    expect(_styles["default"].ghostWhite['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
   });
 });