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

package/build/Input/Input.test.js

@@ -0,0 +1,258 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+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("Input", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('renders the right html tag', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.input').type()).toBe('input');
+    wrapper.setProps({
+      type: 'textarea'
+    });
+    expect(wrapper.find('.input').type()).toBe('textarea');
+    wrapper.setProps({
+      type: 'select',
+      options: []
+    });
+    expect(wrapper.find('.input').type()).toBe('select');
+  });
+  it('renders the right type of input', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.input').prop('type')).toBe('text');
+    wrapper.setProps({
+      type: 'email'
+    });
+    expect(wrapper.find('.input').prop('type')).toBe('email');
+    wrapper.setProps({
+      type: 'number'
+    });
+    expect(wrapper.find('.input').prop('type')).toBe('number');
+  });
+  it('sets the maxLength property', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      maxLength: 2
+    }));
+    expect(wrapper.find('.input').prop('maxLength')).toBe(2);
+  });
+  it('shows a counter with the remaining characters', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      maxLength: 50,
+      counter: true
+    }));
+    expect(wrapper.find('.counter').length).toBe(0);
+    wrapper.setState({
+      status: 'focus'
+    });
+    expect(wrapper.find('.counter').length).toBe(1);
+    expect(wrapper.find('.counter').text()).toBe('50');
+    wrapper.setState({
+      value: '1234567890'
+    });
+    expect(wrapper.find('.counter').text()).toBe('40');
+  });
+  it('renders a label and a placeholder in the input', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      label: "Label",
+      placeholder: "Placeholder"
+    }));
+    expect(wrapper.find('.label').length).toBe(1);
+    expect(wrapper.find('.label').text()).toBe('Label');
+    expect(wrapper.find('.input').prop('placeholder')).toBe('Placeholder');
+  });
+  it('renders a placeholder that works as a label on focus', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      placeholder: "Placeholder"
+    }));
+    expect(wrapper.find('.placeholder').length).toBe(1);
+    expect(wrapper.find('.placeholder').text()).toBe('Placeholder');
+    expect(wrapper.find('.container').hasClass('push')).toBe(true);
+  });
+  it('renders a static field when disabled', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.container').hasClass('disabled')).toBe(false);
+    expect(wrapper.find('.input').type()).toBe('input');
+    wrapper.setProps({
+      disabled: true
+    });
+    expect(wrapper.find('.container').hasClass('disabled')).toBe(true);
+    expect(wrapper.find('.input').type()).toBe('label');
+  });
+  it('sets the autoFocus property', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      autoFocus: true
+    }));
+    expect(wrapper.find('.input').prop('autoFocus')).toBe(true);
+  });
+  it('shows an icon that clears the value on click', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      clear: true
+    }));
+    expect(wrapper.find('.clear').length).toBe(0);
+    wrapper.setState({
+      value: 'Value'
+    });
+    expect(wrapper.find('.clear').length).toBe(1);
+    wrapper.find('.clear').simulate('click');
+    expect(wrapper.find('.clear').length).toBe(0);
+    expect(wrapper.state('value')).toBe('');
+  });
+  it('shows an error message', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      error: "This field has an error"
+    }));
+    expect(wrapper.find('.error').length).toBe(0);
+    wrapper.setState({
+      touched: true
+    });
+    expect(wrapper.find('.error').length).toBe(2);
+    expect(wrapper.find('.error').at(0).hasClass('container')).toBe(true);
+    expect(wrapper.find('.error').at(1).text()).toBe('This field has an error');
+  });
+  it('shows the field as a valid value', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      valid: true
+    }));
+    expect(wrapper.find('.container').hasClass('correct')).toBe(false);
+    wrapper.setState({
+      touched: true
+    });
+    expect(wrapper.find('.container').hasClass('correct')).toBe(true);
+  });
+  it('sets a default value', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      valueProp: "Value"
+    }));
+    expect(wrapper.state('value')).toBe('Value');
+  });
+  it('calls the onFocus function', function () {
+    var onFocus = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      onFocus: onFocus
+    }));
+    wrapper.find('.input').simulate('focus', {
+      target: {}
+    });
+    expect(onFocus.mock.calls.length).toBe(1);
+  });
+  it('calls the onBlur function', function () {
+    var onBlur = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      onBlur: onBlur
+    }));
+    wrapper.find('.input').simulate('blur', {
+      target: {
+        value: 'Value'
+      }
+    });
+    expect(onBlur.mock.calls.length).toBe(1);
+  });
+  it('calls the onChange function', function () {
+    var onChange = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      onChange: onChange
+    }));
+    wrapper.find('.input').simulate('change', {
+      target: {}
+    });
+    expect(onChange.mock.calls.length).toBe(1);
+  });
+  it('calls the onClear function', function () {
+    var onClear = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      clear: true,
+      onClear: onClear,
+      valueProp: "Value"
+    }));
+    wrapper.find('.clear').simulate('click');
+    expect(onClear.mock.calls.length).toBe(1);
+  });
+  it('calls the onRef function', function () {
+    var onRef = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      onRef: onRef
+    }));
+    wrapper.update();
+    expect(onRef.mock.calls.length).toBe(1);
+  });
+  it('renders the options of the select', function () {
+    var options = [{
+      value: 1,
+      text: 'Option 1'
+    }, {
+      value: 2,
+      text: 'Option 2'
+    }];
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes,
+      type: "select",
+      options: options
+    }));
+    expect(wrapper.find('option').length).toBe(2);
+    expect(wrapper.find('option').at(0).text()).toBe('Option 1');
+    expect(wrapper.find('option').at(0).prop('value')).toBe(1);
+  });
+  it('shows an icon', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.icon').length).toBe(0);
+    wrapper.setProps({
+      iconName: 'search'
+    });
+    expect(wrapper.find('.icon').length).toBe(1);
+  });
+});
+describe("InputJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("Input styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Input styles matches the snapshot 1`] = `
+Object {
+  "clear": Object {
+    "background": "none",
+    "border": "0",
+    "cursor": "pointer",
+    "margin": "0",
+    "outline": "0",
+    "padding": "0",
+    "position": "absolute",
+    "right": "0",
+    "top": "20px",
+  },
+  "complete": Object {
+    "& $input": Object {
+      "borderColor": "#000000",
+    },
+    "& $placeholder": Object {
+      "color": "#000000",
+    },
+    "& $pushHolder": Object {
+      "left": "0",
+    },
+    "color": "#000000",
+  },
+  "container": Object {
+    "marginBottom": "16px",
+    "paddingBottom": "11px",
+    "position": "relative",
+  },
+  "correct": Object {
+    "& $input": Object {
+      "borderColor": "#09ba8a",
+    },
+    "& $placeholder": Object {
+      "color": "#09ba8a",
+    },
+    "& $pushHolder": Object {
+      "left": "0",
+    },
+    "color": "#09ba8a",
+  },
+  "counter": Object {
+    "position": "absolute",
+    "right": "0",
+    "top": "0",
+  },
+  "default": Object {
+    "& $input": Object {
+      "borderColor": "#bfbfbf",
+    },
+    "& $placeholder": Object {
+      "color": "#a7a7a7",
+      "fontSize": "16px",
+      "top": "20px",
+    },
+    "color": "#b0b0b0",
+  },
+  "disabled": Object {
+    "& $input": Object {
+      "borderColor": "#bfbfbf",
+      "color": "#bfbfbf",
+    },
+    "& $placeholder": Object {
+      "color": "#cdcdcd",
+      "fontSize": "16px",
+      "top": "20px",
+    },
+    "& $pushHolder": Object {
+      "left": "0",
+    },
+    "color": "#bfbfbf",
+  },
+  "error": Object {
+    "& $input": Object {
+      "borderColor": "#ef2525",
+    },
+    "& $placeholder": Object {
+      "color": "#ef2525",
+    },
+    "& $pushHolder": Object {
+      "left": "0",
+    },
+    "color": "#ef2525",
+  },
+  "expanded": Object {
+    "height": "80px",
+  },
+  "focus": Object {
+    "& $inputWrap:after": Object {
+      "left": "0",
+      "width": "100%",
+    },
+    "& $placeholder": Object {
+      "color": "#1476fb",
+    },
+    "& $pushHolder": Object {
+      "left": "0",
+    },
+    "color": "#1476fb",
+  },
+  "hasClear": Object {
+    "paddingRight": "24px",
+  },
+  "hasIcon": Object {
+    "paddingLeft": "24px",
+  },
+  "icon": Object {
+    "left": "0",
+    "position": "absolute",
+    "top": "19px",
+  },
+  "input": Object {
+    "&::placeholder": Object {
+      "color": "#a7a7a7",
+    },
+    "alignItems": "center",
+    "background": "transparent",
+    "border": "0",
+    "borderBottom": "1px solid #bfbfbf",
+    "boxSizing": "border-box",
+    "color": "#222222",
+    "display": "flex",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": "16px",
+    "fontWeight": "normal",
+    "height": "34px",
+    "lineHeight": "16px",
+    "marginBottom": "4px",
+    "outline": "none",
+    "padding": "10px 0",
+    "transition": "0.3s all",
+    "width": "100%",
+  },
+  "inputWrap": Object {
+    "&:after": Object {
+      "background": "#1476fb",
+      "bottom": "0",
+      "content": "\\"\\"",
+      "display": "block",
+      "height": "1px",
+      "left": "50%",
+      "position": "absolute",
+      "transition": "0.3s all",
+      "width": "0",
+    },
+    "boxSizing": "border-box",
+    "position": "relative",
+  },
+  "label": Object {
+    "boxSizing": "border-box",
+    "display": "inline-block",
+    "float": "left",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": "normal",
+    "marginBottom": "0",
+    "maxWidth": "100%",
+    "transition": "0.3s all",
+  },
+  "left": Object {
+    "float": "left",
+  },
+  "placeholder": Object {
+    "fontSize": "11px",
+    "pointerEvents": "none",
+    "position": "absolute",
+    "top": "0",
+  },
+  "push": Object {
+    "paddingTop": "15px",
+  },
+  "pushHolder": Object {
+    "left": "24px",
+  },
+  "select": Object {
+    "appearance": "none",
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAxNCAxNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTQgMTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHBhdGggZmlsbD0iIzRFNjI3MyIgZD0iTTExLjUsNC4ybDAuMywwLjRjMC4xLDAuMSwwLjEsMC4yLDAsMC4zTDcuMSw5LjhjLTAuMSwwLjEtMC4yLDAuMS0wLjMsMGMwLDAsMCwwLDAsMEwyLjEsNC44CiAgICAgICAgICAgIAljLTAuMS0wLjEtMC4xLTAuMiwwLTAuM2wwLjMtMC40YzAuMS0wLjEsMC4yLTAuMSwwLjMsMGMwLDAsMCwwLDAsMGw0LjEsNC40YzAuMSwwLjEsMC4yLDAuMSwwLjMsMGMwLDAsMCwwLDAsMGw0LjEtNC40CiAgICAgICAgICAgIAlDMTEuMyw0LjEsMTEuNCw0LjEsMTEuNSw0LjJDMTEuNSw0LjEsMTEuNSw0LjIsMTEuNSw0LjJ6Ii8+CiAgICAgICAgICAgIDwvc3ZnPg==)",
+    "backgroundPosition": "calc(100% - 5px) 5px",
+    "backgroundSize": "24px 24px",
+    "padding": "0",
+  },
+  "textarea": Object {
+    "lineHeight": "22px",
+    "padding": "5px 0",
+  },
+}
+`;
+
+exports[`InputJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Input/index.js

@@ -0,0 +1,78 @@
+"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"));
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _stylesFlat = _interopRequireDefault(require("./stylesFlat"));
+
+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); }
+
+var InputDefault = (0, _reactJss["default"])(_styles["default"])(_Input["default"]);
+var InputFlat = (0, _reactJss["default"])(_stylesFlat["default"])(_Input["default"]);
+
+var StyledInput = /*#__PURE__*/function (_React$Component) {
+  _inherits(StyledInput, _React$Component);
+
+  var _super = _createSuper(StyledInput);
+
+  function StyledInput() {
+    _classCallCheck(this, StyledInput);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(StyledInput, [{
+    key: "render",
+    value: function render() {
+      var theme = this.props.theme;
+
+      if (theme != 'flat') {
+        return /*#__PURE__*/_react["default"].createElement(InputDefault, this.props);
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(InputFlat, this.props);
+      }
+    }
+  }]);
+
+  return StyledInput;
+}(_react["default"].Component);
+
+StyledInput.propTypes = {
+  theme: _propTypes["default"].string
+};
+var _default = StyledInput;
+exports["default"] = _default;