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

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,71 +11,121 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames7 = _interopRequireDefault(require("classnames"));
-
-var _styles = _interopRequireDefault(require("./styles"));
+var _Loading = _interopRequireDefault(require("./Loading"));
 
 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; }
-
-/**
-* 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 = function Button(props) {
-  var className = props.className,
-      children = props.children,
-      id = props.id,
-      href = props.href,
-      target = props.target,
-      rel = props.rel,
-      onClick = props.onClick,
-      theme = props.theme,
-      size = props.size,
-      block = props.block,
-      disabled = props.disabled,
-      icon = props.icon,
-      iconRight = props.iconRight,
-      style = props.style,
-      loading = props.loading;
-  var classes = (0, _styles["default"])(props);
-  var buttonClassName = (0, _classnames7["default"])(classes.btn, _defineProperty({}, classes[theme], theme), _defineProperty({}, classes.loading, loading), _defineProperty({}, classes.disabled, disabled), _defineProperty({}, classes[size], ['md', 'lg'].includes(size)), _defineProperty({}, classes.block, block), className, _defineProperty({}, classes.iconOnly, !children && icon));
-
-  var content = _react["default"].createElement("span", {
-    className: classes.cont
-  }, icon ? _react["default"].createElement("i", {
-    className: classes.icon
-  }) : '', children, iconRight ? _react["default"].createElement("i", {
-    className: classes.iconRight
-  }) : '');
-
-  var loadingLayer = loading ? _react["default"].createElement("span", {
-    className: classes.loadCont
-  }, _react["default"].createElement("i", {
-    className: classes.loadIcon
-  })) : null;
-
-  if (href) {
-    return _react["default"].createElement("a", {
-      className: buttonClassName,
-      href: !disabled ? href : '',
-      target: target,
-      rel: rel,
-      onClick: !disabled ? onClick : null,
-      id: id,
-      style: style
-    }, content, loadingLayer);
-  } else {
-    return _react["default"].createElement("button", {
-      className: buttonClassName,
-      onClick: !disabled ? onClick : null,
-      id: id,
-      style: style
-    }, content, loadingLayer);
+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); }
+
+/**
+ * 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 _super.apply(this, arguments);
   }
-};
+
+  _createClass(Button, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          children = _this$props.children,
+          id = _this$props.id,
+          href = _this$props.href,
+          target = _this$props.target,
+          rel = _this$props.rel,
+          onClick = _this$props.onClick,
+          theme = _this$props.theme,
+          size = _this$props.size,
+          block = _this$props.block,
+          disabled = _this$props.disabled,
+          icon = _this$props.icon,
+          iconRight = _this$props.iconRight,
+          round = _this$props.round,
+          style = _this$props.style,
+          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 (block) classNames += " ".concat(classes.block);
+      if (className) classNames += " ".concat(className);
+
+      if (!children && icon) {
+        classNames += " ".concat(classes.iconOnly);
+        if (round) classNames += " ".concat(classes.round);
+      }
+
+      var content = /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.cont
+      }, icon ? /*#__PURE__*/_react["default"].createElement("i", {
+        className: classes.icon
+      }) : '', children, iconRight ? /*#__PURE__*/_react["default"].createElement("i", {
+        className: classes.iconRight
+      }) : '');
+
+      var loadingLayer = loading ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.loadCont
+      }, /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
+        className: classes.loadIcon
+      })) : null;
+
+      if (href) {
+        return /*#__PURE__*/_react["default"].createElement("a", {
+          className: classNames,
+          href: !disabled ? href : '',
+          target: target,
+          rel: rel,
+          onClick: !disabled ? onClick : null,
+          id: id,
+          style: style,
+          "data-testid": testId
+        }, content, loadingLayer);
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("button", {
+          className: classNames,
+          onClick: !disabled ? onClick : null,
+          id: id,
+          style: style,
+          "data-testid": testId
+        }, content, loadingLayer);
+      }
+    }
+  }]);
+
+  return Button;
+}(_react["default"].Component);
 
 Button.defaultProps = {
   theme: 'primary',
@@ -82,6 +134,9 @@ Button.defaultProps = {
   disabled: false
 };
 Button.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  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']),
 
@@ -100,6 +155,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,
 
@@ -116,7 +174,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

@@ -6,40 +6,60 @@ var _enzyme = require("enzyme");
 
 var _Button = _interopRequireDefault(require("./Button"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Button', 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("Button", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Button["default"], null, "Button"));
+    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.mount)(_react["default"].createElement(_Button["default"], null, "Button"));
+    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.mount)(_react["default"].createElement(_Button["default"], null, "Button"));
+    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.mount)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      classes: classes,
       href: "http://occ.com.mx"
     }, "Button"));
     expect(wrapper.find('button').length).toBe(0);
     expect(wrapper.find('a').length).toBe(1);
   });
   it('has the right theme', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Button["default"], null, "Button"));
-    expect(wrapper.find('button').prop('className').indexOf('primary')).not.toBe(-1);
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      classes: classes
+    }, "Button"));
+    expect(wrapper.find('button').prop('className')).toEqual('btn primary');
     wrapper.setProps({
       theme: 'secondary'
     });
-    expect(wrapper.find('button').prop('className').indexOf('primary')).toBe(-1);
-    expect(wrapper.find('button').prop('className').indexOf('secondary')).not.toBe(-1);
+    expect(wrapper.find('button').prop('className')).toEqual('btn secondary');
   });
   it('has the right size', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      classes: classes,
       size: "md"
     }, "Button"));
     expect(wrapper.find('button').prop('className').indexOf('md')).not.toBe(-1);
@@ -51,7 +71,9 @@ describe('Button', function () {
     expect(wrapper.find('button').prop('className').indexOf('lg')).not.toBe(-1);
   });
   it('has the block class', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Button["default"], null, "Button"));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      classes: classes
+    }, "Button"));
     expect(wrapper.find('button').prop('className').indexOf('block')).toBe(-1);
     wrapper.setProps({
       block: true
@@ -60,7 +82,8 @@ describe('Button', function () {
   });
   it('calls onClick function', function () {
     var onClick = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Button["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      classes: classes,
       onClick: onClick,
       disabled: true
     }, "Button"));
@@ -73,27 +96,53 @@ describe('Button', function () {
     expect(onClick.mock.calls.length).toBe(1);
   });
   it('disabled', function () {
-    var wrapper = (0, _enzyme.mount)(_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.mount)(_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);
   });
   it('has an icon on the right', function () {
-    var wrapper = (0, _enzyme.mount)(_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);
   });
-  it('has a loaging icon', function () {
-    var wrapper = (0, _enzyme.mount)(_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)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Button styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+  it('returns the right icons', function () {
+    var props = {
+      icon: 'testing'
+    };
+    expect(_styles["default"].primary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
+    expect(_styles["default"].secondary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
+    expect(_styles["default"].tertiary['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
+    expect(_styles["default"].ghostPink['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
+    expect(_styles["default"].ghostGrey['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
+    expect(_styles["default"].ghostWhite['& i'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
   });
 });

package/build/Button/Loading.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Loading;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function Loading(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: props.fill || _colors["default"]['blue-corp'][1000],
+    width: props.width || _spacing["default"]['size-5'],
+    height: props.height || _spacing["default"]['size-5'],
+    viewBox: "0 0 ".concat(_spacing["default"]['size-5'], " ").concat(_spacing["default"]['size-5'])
+  }, props), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "4",
+    cy: "13",
+    r: "3"
+  }, /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "r",
+    begin: "0s",
+    dur: "0.7s",
+    values: "2;3;2",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "cy",
+    begin: "0s",
+    dur: "0.7s",
+    values: "10;14;10",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "12",
+    cy: "13",
+    r: "3"
+  }, /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "r",
+    begin: "0.1s",
+    dur: "0.7s",
+    values: "2;3;2",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "cy",
+    begin: "0.1s",
+    dur: "0.7s",
+    values: "10;14;10",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: "20",
+    cy: "13",
+    r: "3"
+  }, /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "r",
+    begin: "0.2s",
+    dur: "0.7s",
+    values: "2;3;2",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  }), /*#__PURE__*/_react["default"].createElement("animate", {
+    attributeName: "cy",
+    begin: "0.2s",
+    dur: "0.7s",
+    values: "10;14;10",
+    calcMode: "linear",
+    repeatCount: "indefinite"
+  })));
+}
+
+;
+Loading.propTypes = {
+  fill: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  height: _propTypes["default"].string
+};