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

package/build/Button/styles.js

@@ -11,17 +11,33 @@ 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("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _mappedIcons = require("../subatomic/mappedIcons");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var sec = _colors["default"].sec,
+    secDark = _colors["default"].secDark,
+    grey500 = _colors["default"].grey500,
+    secLight = _colors["default"].secLight;
+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));
+    return _mappedIcons.legacyIcons[props.icon] ? _icons["default"].base(_icons["default"][props.icon].icon(color)) : '';
   } else if (props.iconRight) {
-    return _icons["default"].base(_icons["default"][props.iconRight].icon(color));
+    return _mappedIcons.legacyIcons[props.iconRight] ? _icons["default"].base(_icons["default"][props.iconRight].icon(color)) : '';
   }
 
   return '';
@@ -33,18 +49,13 @@ var _default = {
     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',
@@ -78,188 +89,223 @@ var _default = {
   },
   // 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']
     },
-    '& i': {
+    '&$disabled': {
+      background: _colors2["default"].button.primary.bg.disabled,
+      color: _colors2["default"].text.white.secondary,
+      cursor: 'not-allowed'
+    },
+    '& span span': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
+      }
+    },
+    '&$disabled span span': {
       background: function background(props) {
-        return renderIcon(props, [_colors["default"].bgWhite]);
+        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']
     },
-    '& i': {
+    '&$disabled': {
+      background: _colors2["default"].button.secondary.bg.disabled,
+      color: _colors2["default"].text.indigo.secondary
+    },
+    '& span span': {
       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 span span': {
+      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
     },
-    '& i': {
+    '&:focus': {
+      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
+    },
+    '& span span': {
       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 span span': {
+      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': {
+    '& span span': {
       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 span span': {
+      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,
+    paddingLeft: [0, '!important'],
+    paddingRight: [0, '!important'],
     '&:hover, &:active': {
-      color: _colors["default"].secDark,
-      '& i': {
+      color: secDark,
+      '& span span': {
         background: function background(props) {
-          return renderIcon(props, [_colors["default"].secDark]);
+          return renderIcon(props, [secDark]);
         }
       }
     },
-    '& i': {
+    '& span span': {
       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(secLight, " !important"),
       border: "none !important",
-      '& i': {
+      '& span span': {
         background: function background(props) {
-          return renderIcon(props, [_colors["default"].grey900]);
+          return renderIcon(props, [grey500]);
         }
       }
     },
     '& $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': {
+    '& span span': {
       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 span span': {
+      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': {
+    '& span span': {
       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 span span': {
+      background: function background(props) {
+        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
       }
     }
   },
@@ -270,46 +316,22 @@ var _default = {
     }
   },
   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"),
-    '& i': {
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small
-    },
+    font: "".concat(md.fontWeight, " ").concat(md.fontSize, "/").concat(md.lineHeight, " ").concat(_fonts["default"].body),
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-5']],
     '&$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"),
-    '& i': {
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small
-    },
+    font: "".concat(lg.fontWeight, " ").concat(lg.fontSize, "/").concat(lg.lineHeight, " ").concat(_fonts["default"].body),
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-6']],
     '&$iconOnly': {
-      padding: "0 ".concat(_spacing["default"].small, "px")
+      padding: [_spacing["default"]['size-3'], _spacing["default"]['size-3']]
     }
   },
   // Block
@@ -319,40 +341,30 @@ var _default = {
   },
   // Icon
   icon: {
-    width: _iconSizes["default"].tiny,
-    height: _iconSizes["default"].tiny,
-    marginRight: 4,
+    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"),
-    '& i': {
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
+    '& span span, & svg': {
       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

@@ -0,0 +1,86 @@
+"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
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+* 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) {
+  _inherits(ButtonAlign, _React$Component);
+
+  var _super = _createSuper(ButtonAlign);
+
+  function ButtonAlign() {
+    _classCallCheck(this, ButtonAlign);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ButtonAlign, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn('DEPRECATED: The ButtonAlign component will be removed soon. Please look for another solution.');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          size = _this$props.size;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: size ? classes[size] : classes.sm
+      }, children);
+    }
+  }]);
+
+  return ButtonAlign;
+}(_react["default"].Component);
+
+ButtonAlign.defaultProps = {
+  size: 'sm'
+};
+ButtonAlign.propTypes = {
+  classes: _propTypes["default"].object,
+  children: _propTypes["default"].object,
+
+  /** Use the same size used in the button. */
+  size: _propTypes["default"].string
+};
+var _default = ButtonAlign;
+exports["default"] = _default;

package/build/ButtonAlign/ButtonAlign.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ButtonAlign = _interopRequireDefault(require("./ButtonAlign"));
+
+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("ButtonAlign", function () {
+  it('matches the snapshot', function () {
+    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)( /*#__PURE__*/_react["default"].createElement(_ButtonAlign["default"], {
+      classes: classes
+    }));
+    expect(wrapper.prop('className')).toEqual('sm');
+    wrapper.setProps({
+      size: 'md'
+    });
+    expect(wrapper.prop('className')).toEqual('md');
+  });
+});
+describe("ButtonAlignJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("ButtonAlign styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).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 {}`;