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

package/build/Button/styles.js

@@ -5,20 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _reactJss = require("react-jss");
-
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
 var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var sec = _colors["default"].sec,
+    secDark = _colors["default"].secDark,
+    grey900 = _colors["default"].grey900;
+var sm = _fonts2["default"]['button-small'];
+var md = _fonts2["default"]['button-medium'];
+var lg = _fonts2["default"]['button-large'];
+
 var renderIcon = function renderIcon(props, color) {
   if (props.icon) {
     return _icons["default"].base(_icons["default"][props.icon].icon(color));
@@ -29,24 +40,19 @@ var renderIcon = function renderIcon(props, color) {
   return '';
 };
 
-var _default = (0, _reactJss.createUseStyles)({
+var _default = {
   btn: {
     display: 'inline-block',
     boxSizing: 'border-box',
     position: 'relative',
     maxWidth: '100%',
-    height: _spacing["default"].medium,
     marginBottom: 0,
-    padding: [0, _spacing["default"].small],
-    borderRadius: _spacing["default"].radius,
-    fontFamily: _fonts["default"].body,
-    fontWeight: 600,
-    fontSize: 12,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
-    letterSpacing: 1,
+    border: 0,
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    font: "".concat(sm.fontWeight, " ").concat(sm.fontSize, "/").concat(sm.lineHeight, " ").concat(_fonts["default"].body),
     textAlign: 'center',
     textDecoration: 'none',
-    textTransform: 'uppercase',
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
@@ -80,188 +86,223 @@ var _default = (0, _reactJss.createUseStyles)({
   },
   // Themes
   primary: {
-    background: _colors["default"].sec,
-    color: _colors["default"].white,
-    border: "1px solid ".concat(_colors["default"].sec),
-    '&:hover, &:active': {
-      background: _colors["default"].secDark,
-      color: _colors["default"].white,
-      borderColor: _colors["default"].secDark
+    background: _colors2["default"].button.primary.bg["default"],
+    color: _colors2["default"].text.white.primary,
+    outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"]),
+    outlineOffset: '-2px',
+    '&:hover': {
+      background: _colors2["default"].button.primary.bg.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.primary.bg.active
+    },
+    '&:focus': {
+      outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-pink']
+    },
+    '&$disabled': {
+      background: _colors2["default"].button.primary.bg.disabled,
+      color: _colors2["default"].text.white.secondary,
+      cursor: 'not-allowed'
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].bgWhite]);
+        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
+      }
+    },
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
       }
     }
   },
   secondary: {
-    background: _colors["default"].secLighter,
-    color: _colors["default"].sec,
-    border: "1px solid ".concat(_colors["default"].secLighter),
-    '&:hover, &:active': {
-      color: _colors["default"].secDark,
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].secDark]);
-        }
-      }
+    background: _colors2["default"].button.secondary.bg["default"],
+    color: _colors2["default"].text.indigo.primary,
+    '&:hover': {
+      background: _colors2["default"].button.secondary.bg.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.secondary.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
+    },
+    '&$disabled': {
+      background: _colors2["default"].button.secondary.bg.disabled,
+      color: _colors2["default"].text.indigo.secondary
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].sec]);
+        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
       }
     },
-    '&$disabled': {
-      background: "".concat(_colors["default"].secLighter, " !important"),
-      color: "".concat(_colors["default"].sec, " !important"),
-      border: "1px solid ".concat(_colors["default"].secLighter, " !important")
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors["default"].sec]))
+      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
     }
   },
   tertiary: {
-    background: _colors["default"].bgWhite,
-    color: _colors["default"].ink,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    '&:hover, &:active': {
-      color: _colors["default"].inkLight,
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey600]);
-        }
-      }
+    background: 'transparent',
+    color: _colors2["default"].text.indigo.primary,
+    outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"]),
+    outlineOffset: '-2px',
+    '&:hover': {
+      background: _colors2["default"].button.tertiary.bg.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.tertiary.bg.active
+    },
+    '&:focus': {
+      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].grey900]);
+        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
       }
     },
     '&$disabled': {
-      background: "".concat(_colors["default"].bgWhite, " !important"),
-      color: "".concat(_colors["default"].ink, " !important"),
-      border: "1px solid ".concat(_colors["default"].grey200, " !important"),
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey900]);
-        }
+      background: 'transparent',
+      color: _colors2["default"].text.indigo.secondary,
+      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.disabled)
+    },
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors["default"].grey600]))
+      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
     }
   },
   tertiaryWhite: {
     background: 'transparent',
-    color: _colors["default"].white,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    '&:hover, &:active': {
-      opacity: 0.6
+    color: _colors2["default"].text.white.primary,
+    outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"]),
+    outlineOffset: '-2px',
+    '&:hover': {
+      background: _colors2["default"].button.tertiary.bg.inverse.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.tertiary.bg.inverse.active
+    },
+    '&:focus': {
+      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-white']
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].bgWhite]);
+        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
       }
     },
     '&$disabled': {
-      background: "transparent !important",
-      color: "".concat(_colors["default"].white, " !important"),
-      border: "1px solid ".concat(_colors["default"].grey200, " !important"),
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].bgWhite]);
-        }
+      background: 'transparent',
+      color: _colors2["default"].text.white.secondary
+    },
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
       }
     }
   },
   ghostPink: {
     background: 'transparent',
-    color: _colors["default"].sec,
+    color: sec,
     border: 'none',
     paddingLeft: 0,
     paddingRight: 0,
     '&:hover, &:active': {
-      color: _colors["default"].secDark,
+      color: secDark,
       '& i': {
         background: function background(props) {
-          return renderIcon(props, [_colors["default"].secDark]);
+          return renderIcon(props, [secDark]);
         }
       }
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].sec]);
+        return renderIcon(props, [sec]);
       }
     },
     '&$disabled': {
       background: "transparent !important",
-      color: "".concat(_colors["default"].sec, " !important"),
+      color: "".concat(sec, " !important"),
       border: "none !important",
       '& i': {
         background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey900]);
+          return renderIcon(props, [grey900]);
         }
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors["default"].sec]))
+      background: _icons["default"].base(_icons["default"].loading.icon([sec]))
     }
   },
   ghostGrey: {
     background: 'transparent',
-    color: _colors["default"].ink,
-    border: 'none',
-    paddingLeft: 0,
-    paddingRight: 0,
-    '&:hover, &:active': {
-      color: _colors["default"].inkLight,
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey600]);
-        }
-      }
+    color: _colors2["default"].text.corp.secondary,
+    '&:hover': {
+      background: _colors2["default"].button.ghost.bg.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.ghost.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp']
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].grey900]);
+        return renderIcon(props, [_colors2["default"].icon["default"]["default"]]);
       }
     },
     '&$disabled': {
-      background: "transparent !important",
-      color: "".concat(_colors["default"].ink, " !important"),
-      border: "none !important",
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey900]);
-        }
+      background: 'transparent',
+      color: _colors2["default"].text.corp.disabled
+    },
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon["default"].disabled]);
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors["default"].grey600]))
+      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon["default"]["default"]]))
     }
   },
   ghostWhite: {
     background: 'transparent',
-    color: _colors["default"].white,
-    border: 'none',
-    paddingLeft: 0,
-    paddingRight: 0,
-    '&:hover, &:active': {
-      opacity: 0.6
+    color: _colors2["default"].text.white.primary,
+    '&:hover': {
+      background: _colors2["default"].button.ghost.bg.inverse.hover
+    },
+    '&:active': {
+      background: _colors2["default"].button.ghost.bg.inverse.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-white']
     },
     '& i': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].bgWhite]);
+        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
       }
     },
     '&$disabled': {
-      background: "transparent !important",
-      color: "".concat(_colors["default"].white, " !important"),
-      border: "none !important",
-      '& i': {
-        background: function background(props) {
-          return renderIcon(props, [_colors["default"].bgWhite]);
-        }
+      background: 'transparent',
+      color: _colors2["default"].text.white.secondary
+    },
+    '&$disabled i': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
       }
     }
   },
@@ -272,46 +313,30 @@ var _default = (0, _reactJss.createUseStyles)({
     }
   },
   disabled: {
-    background: _colors["default"].sec,
-    color: _colors["default"].white,
-    border: "1px solid ".concat(_colors["default"].sec),
     cursor: 'default',
-    pointerEvents: 'none',
-    opacity: 0.4,
-    '& i': {
-      background: function background(props) {
-        return renderIcon(props, [_colors["default"].bgWhite]);
-      }
-    },
-    '&:hover, &:active, &:focus': {
-      background: _colors["default"].sec,
-      color: _colors["default"].white,
-      border: "1px solid ".concat(_colors["default"].sec)
-    }
+    pointerEvents: 'none'
   },
   // Sizes
   md: {
-    fontSize: 14,
-    height: 40,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
+    font: "".concat(md.fontWeight, " ").concat(md.fontSize, "/").concat(md.lineHeight, " ").concat(_fonts["default"].body),
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-5']],
     '& i': {
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small
+      width: 24,
+      height: 24
     },
     '&$iconOnly': {
-      padding: "0 ".concat(_spacing["default"].gutter, "px")
+      padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']]
     }
   },
   lg: {
-    fontSize: 14,
-    height: _spacing["default"].large,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
+    font: "".concat(lg.fontWeight, " ").concat(lg.fontSize, "/").concat(lg.lineHeight, " ").concat(_fonts["default"].body),
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-6']],
     '& i': {
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small
+      width: 24,
+      height: 24
     },
     '&$iconOnly': {
-      padding: "0 ".concat(_spacing["default"].small, "px")
+      padding: [_spacing["default"]['size-3'], _spacing["default"]['size-3']]
     }
   },
   // Block
@@ -321,41 +346,32 @@ var _default = (0, _reactJss.createUseStyles)({
   },
   // Icon
   icon: {
-    width: _iconSizes["default"].tiny,
-    height: _iconSizes["default"].tiny,
-    marginRight: 4,
+    width: 16,
+    height: 16,
+    marginRight: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'
   },
   iconRight: {
-    width: _iconSizes["default"].tiny,
-    height: _iconSizes["default"].tiny,
-    marginLeft: 4,
+    width: 16,
+    height: 16,
+    marginLeft: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'
   },
-  '@keyframes iconRotate': {
-    from: {
-      transform: 'rotate(0deg)'
-    },
-    to: {
-      transform: 'rotate(360deg)'
-    }
-  },
   iconOnly: {
-    padding: "0 ".concat(_spacing["default"].tiny, "px"),
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
     '& i': {
       marginRight: 0
     }
   },
   loadIcon: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    display: 'inline-block',
-    transition: '0.3s all',
-    animation: '$iconRotate 1s infinite linear',
-    background: _icons["default"].base(_icons["default"].loading.icon())
+    width: 24,
+    height: 24,
+    fill: _colors2["default"].icon.inverse["default"]
+  },
+  round: {
+    borderRadius: '50%'
   }
-});
-
+};
 exports["default"] = _default;

package/build/ButtonAlign/ButtonAlign.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
 });
@@ -11,38 +13,40 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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); }
-
 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 _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; } }
 
-/**
-* The Input component and the Button component have different sizes. That's why they wouldn't be aligned with each other when putting them side to side. Use this component to align the Button correctly with the Input.
-* To align it correctly, use the same size value used on the Button.
-* Right below there are two examples, one aligned and one that is not.
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+* The Input component and the Button component have different sizes. That's why they wouldn't be aligned with each other when putting them side to side. Use this component to align the Button correctly with the Input.
+* To align it correctly, use the same size value used on the Button.
+* Right below there are two examples, one aligned and one that is not.
 */
-var ButtonAlign =
-/*#__PURE__*/
-function (_React$Component) {
+var ButtonAlign = /*#__PURE__*/function (_React$Component) {
   _inherits(ButtonAlign, _React$Component);
 
+  var _super = _createSuper(ButtonAlign);
+
   function ButtonAlign() {
     _classCallCheck(this, ButtonAlign);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ButtonAlign).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(ButtonAlign, [{
@@ -59,7 +63,7 @@ function (_React$Component) {
           classes = _this$props.classes,
           children = _this$props.children,
           size = _this$props.size;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: size ? classes[size] : classes.sm
       }, children);
     }

package/build/ButtonAlign/ButtonAlign.test.js

@@ -21,13 +21,13 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("ButtonAlign", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_ButtonAlign["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ButtonAlign["default"], {
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('has the right size', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_ButtonAlign["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ButtonAlign["default"], {
       classes: classes
     }));
     expect(wrapper.prop('className')).toEqual('sm');
@@ -39,7 +39,7 @@ describe("ButtonAlign", function () {
 });
 describe("ButtonAlignJSS", 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();
   });
 });

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonAlign matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`ButtonAlign styles matches the snapshot 1`] = `
+Object {
+  "lg": Object {
+    "marginTop": "3px",
+  },
+  "md": Object {
+    "marginTop": "9px",
+  },
+  "sm": Object {
+    "marginTop": "19px",
+  },
+}
+`;
+
+exports[`ButtonAlignJSS matches the snapshot 1`] = `ShallowWrapper {}`;