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

package/build/TextField/TextField.test.js

@@ -4,255 +4,247 @@ var _react = _interopRequireDefault(require("react"));
 
 var _enzyme = require("enzyme");
 
-var _reactJss = require("react-jss");
-
 var _TextField = _interopRequireDefault(require("./TextField"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _index = _interopRequireDefault(require("./index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var sheets, classes;
+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("TextField", function () {
-  beforeEach(function () {
-    return sheets = new _reactJss.SheetsRegistry();
-  });
-  afterEach(function () {
-    return sheets = null;
-  });
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_TextField["default"], null));
-    expect(wrapper.html()).toMatchSnapshot();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes
+    }));
+    expect(wrapper).toMatchSnapshot();
   });
   it('renders the right html tag', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], null)));
-    classes = sheets.registry[0].classes;
-    var input = ".".concat(classes.input);
-    expect(wrapper.find(input).type()).toBe('input');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.input').type()).toBe('input');
     wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        type: "textarea"
-      })
+      type: 'textarea'
     });
-    expect(wrapper.find(input).type()).toBe('textarea');
+    expect(wrapper.find('.input').type()).toBe('textarea');
   });
   it('renders the right type of input', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], null)));
-    classes = sheets.registry[0].classes;
-    var input = ".".concat(classes.input);
-    expect(wrapper.find(input).prop('type')).toBe('text');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.input').prop('type')).toBe('text');
     wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        type: "email"
-      })
+      type: 'email'
     });
-    expect(wrapper.find(input).prop('type')).toBe('email');
+    expect(wrapper.find('.input').prop('type')).toBe('email');
     wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        type: "number"
-      })
+      type: 'number'
     });
-    expect(wrapper.find(input).prop('type')).toBe('number');
+    expect(wrapper.find('.input').prop('type')).toBe('number');
   });
   it('sets the maxLength property', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       maxLength: 2
-    })));
-    classes = sheets.registry[0].classes;
-    expect(wrapper.find(".".concat(classes.input)).prop('maxLength')).toBe(2);
+    }));
+    expect(wrapper.find('.input').prop('maxLength')).toBe(2);
   });
   it('shows a counter with the number of characters written', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       maxLength: 50,
       label: "Label",
       counter: true
-    })));
-    classes = sheets.registry[1].classes;
-    var right = ".".concat(classes.right);
-    expect(wrapper.find(right).length > 0).toBe(true);
-    expect(wrapper.find(right).at(0).text()).toBe('0 / 50');
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: '1234567890'
-      }
+    }));
+    expect(wrapper.find('.counter').length).toBe(1);
+    expect(wrapper.find('.counter').text()).toBe('0 / 50');
+    wrapper.setState({
+      value: '1234567890'
     });
-    expect(wrapper.find(right).at(0).text()).toBe('10 / 50');
+    expect(wrapper.find('.counter').text()).toBe('10 / 50');
   });
   it('renders a label and a placeholder in the input', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       label: "Label",
       placeholder: "Placeholder"
-    })));
-    classes = sheets.registry[1].classes;
-    var label = ".".concat(classes.label);
-    expect(wrapper.find(label).length > 0).toBe(true);
-    expect(wrapper.find(label).at(0).text()).toBe('Label');
-    expect(wrapper.find(".".concat(classes.input)).prop('placeholder')).toBe('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 static field when disabled', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], null)));
-    classes = sheets.registry[0].classes;
-    var container = ".".concat(classes.container);
-    var input = ".".concat(classes.input);
-    expect(wrapper.find(container).hasClass(classes.disabled)).toBe(false);
-    expect(wrapper.find(input).type()).toBe('input');
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.container').hasClass('disabled')).toBe(false);
+    expect(wrapper.find('.input').type()).toBe('input');
     wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        disabled: true
-      })
+      disabled: true
     });
-    expect(wrapper.find(container).hasClass(classes.disabled)).toBe(true);
-    expect(wrapper.find(input).type()).toBe('label');
+    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.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       autoFocus: true
     }));
-    expect(wrapper.find('input').prop('autoFocus')).toBe(true);
+    expect(wrapper.find('.input').prop('autoFocus')).toBe(true);
   });
   it('shows an icon that clears the value on click', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       clear: true
-    })));
-    classes = sheets.registry[0].classes;
-    var clear = ".".concat(classes.clear);
-    expect(wrapper.find(clear).length).toBe(0);
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'Value'
-      }
+    }));
+    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.find('input').prop('value')).toBe('');
+    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 the TextField with an error', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       assistiveText: "This field has an error",
       error: true
-    })));
-    classes = sheets.registry[1].classes;
-    var error = ".".concat(classes.error);
-    expect(wrapper.find(error).length).toBe(0);
-    wrapper.find('input').simulate('focus');
-    wrapper.find('input').simulate('blur');
-    classes = sheets.registry[1].classes;
-    expect(wrapper.find(error).length).toBe(1);
-    expect(wrapper.find(_Text["default"]).text()).toBe(' This field has an error');
-    expect(wrapper.find(error).prop('className').indexOf('container') > -1).toBe(true);
+    }));
+    expect(wrapper.find('.error').length).toBe(0);
+    expect(wrapper.find('.errorAssistiveText').length).toBe(0);
+    wrapper.setState({
+      touched: true
+    });
+    expect(wrapper.find('.error').length).toBe(1);
+    expect(wrapper.find('.errorAssistiveText').length).toBe(1);
+    expect(wrapper.find('.error').at(0).hasClass('container')).toBe(true);
   });
   it('sets a default value', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       valueProp: "Value"
     }));
-    expect(wrapper.find('input').prop('value')).toBe('Value');
+    expect(wrapper.state('value')).toBe('Value');
   });
   it('calls the onFocus function', function () {
     var onFocus = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       onFocus: onFocus
     }));
-    wrapper.find('input').simulate('focus');
+    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.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       onBlur: onBlur
     }));
-    wrapper.find('input').simulate('blur');
+    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.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       onChange: onChange
     }));
-    wrapper.find('input').simulate('change');
+    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.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
       clear: true,
       onClear: onClear,
       valueProp: "Value"
-    })));
-    classes = sheets.registry[1].classes;
-    wrapper.find(".".concat(classes.clear)).simulate('click');
+    }));
+    wrapper.find('.clear').simulate('click');
     expect(onClear.mock.calls.length).toBe(1);
   });
   it('calls the onRef function', function () {
-    var inputRef = jest.fn();
-    (0, _enzyme.mount)(_react["default"].createElement(_TextField["default"], {
-      ref: inputRef
+    var onRef = jest.fn();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes,
+      onRef: onRef
     }));
-    expect(inputRef.mock.calls.length).toBe(1);
+    wrapper.update();
+    expect(onRef.mock.calls.length).toBe(1);
   });
   it('shows an icon', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_reactJss.JssProvider, {
-      registry: sheets
-    }, _react["default"].createElement(_TextField["default"], null)));
-    classes = sheets.registry[0].classes;
-    var icon = ".".concat(classes.icon);
-    expect(wrapper.find(icon).length > 0).toBe(false);
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      classes: classes
+    }));
+    expect(wrapper.find('.icon').length).toBe(0);
     wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        iconName: "search"
-      })
+      iconName: 'search'
     });
-    expect(wrapper.find(icon).length > 0).toBe(true);
+    expect(wrapper.find('.icon').length).toBe(1);
   });
   it('validates with the regex', function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       regex: "^[0-9]*$",
-      onChange: onChange
+      classes: classes
     }));
     wrapper.find('input').simulate('change', {
       target: {
         value: '123'
       }
     });
-    expect(onChange).toHaveBeenCalledWith('123');
+    expect(wrapper.state('value')).toBe('123');
     wrapper.find('input').simulate('change', {
       target: {
         value: '123abc'
       }
     });
-    expect(onChange).toHaveBeenCalledWith('123');
+    expect(wrapper.state('value')).toBe('123');
     wrapper.setProps({
       regex: ''
     });
-    wrapper.setProps({
-      children: _react["default"].createElement(_TextField["default"], {
-        onChange: onChange
-      })
-    });
     wrapper.find('input').simulate('change', {
       target: {
         value: '123abc'
       }
     });
-    expect(onChange).toHaveBeenCalledWith('123abc');
+    expect(wrapper.state('value')).toBe('123abc');
+  });
+  it('renders as a SearchField', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      searchField: true,
+      classes: classes
+    }));
+    var input = wrapper.find('input');
+    expect(input.hasClass('searchField')).toBe(true);
+  });
+});
+describe("TextFieldJSS", function () {
+  it('matches the snapshot', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+describe("TextField styles", function () {
+  it('matches the snapshot', function () {
+    expect(_styles["default"]).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,258 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`TextField styles matches the snapshot 1`] = `
+Object {
+  "alignRight": Object {
+    "textAlign": "right",
+  },
+  "assistiveText": Object {
+    "color": "#aaaaaa",
+    "fontSize": 12,
+    "fontWeight": 300,
+  },
+  "bottom": Object {
+    "height": 20,
+    "marginTop": 4,
+  },
+  "clear": Object {
+    "background": "none",
+    "border": 0,
+    "cursor": "pointer",
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": 3,
+    "position": "absolute",
+    "right": 12,
+    "top": "50%",
+    "transform": "translateY(-50%)",
+    "width": 24,
+    "zIndex": 1,
+  },
+  "container": Object {
+    "marginBottom": 8,
+    "position": "relative",
+  },
+  "counter": Object {
+    "color": "#aaaaaa",
+  },
+  "default": Object {},
+  "disabled": Object {
+    "& $input": Object {
+      "borderColor": "#dddddd",
+      "color": "#dddddd",
+      "paddingTop": 9,
+    },
+    "& $label": Object {
+      "color": "#dddddd",
+    },
+    "& $passIcon": Object {
+      "cursor": "auto",
+    },
+  },
+  "error": Object {
+    "& $input": Object {
+      "background": "rgba(219, 55, 55, 0.04)",
+      "borderColor": "#db3737",
+      "color": "#db3737",
+    },
+    "& $searchField": Object {
+      "borderWidth": 2,
+      "color": "#222222",
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "errorAssistiveText": Object {
+    "color": "#db3737",
+  },
+  "errorIcon": Object {
+    "marginBottom": -2,
+  },
+  "filled": Object {
+    "& $input": Object {
+      "borderColor": "#222222",
+      "borderWidth": 2,
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "focus": Object {
+    "& $input": Object {
+      "borderColor": "#083cae",
+    },
+    "& $searchField": Object {
+      "borderWidth": 2,
+      "paddingLeft": 7,
+    },
+    "& $searchFieldHasIcon": Object {
+      "paddingLeft": 41,
+    },
+  },
+  "hasClear": Object {
+    "paddingRight": 42,
+  },
+  "hasIcon": Object {
+    "paddingLeft": 42,
+  },
+  "hasPass": Object {
+    "paddingRight": 42,
+  },
+  "hasRightIcon": Object {
+    "marginRight": 16,
+  },
+  "icon": Object {
+    "left": 16,
+    "position": "absolute",
+    "top": "50%",
+    "transform": "translateY(-50%)",
+  },
+  "input": Object {
+    "&::-webkit-inner-spin-button": Object {
+      "-webkit-appearance": "none",
+      "margin": 0,
+    },
+    "&::-webkit-outer-spin-button": Object {
+      "-webkit-appearance": "none",
+      "margin": 0,
+    },
+    "&::placeholder": Object {
+      "color": "#aaaaaa",
+    },
+    "&[type=number]": Object {
+      "-moz-appearance": "textfield",
+    },
+    "-webkit-appearance": "none",
+    "alignItems": "center",
+    "appearance": "none",
+    "background": "#ffffff",
+    "border": "1px solid #dddddd",
+    "borderRadius": 4,
+    "boxShadow": "none",
+    "boxSizing": "border-box",
+    "caretColor": "#083cae",
+    "color": "#222222",
+    "display": "flex",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": 16,
+    "fontWeight": 300,
+    "height": 40,
+    "lineHeight": 1.5,
+    "outline": "none",
+    "padding": Array [
+      8,
+      16,
+    ],
+    "transition": "0.3s all",
+    "width": "100%",
+  },
+  "inputDisabled": Object {
+    "overflow": "hidden",
+    "whiteSpace": "nowrap",
+  },
+  "inputWrap": Object {
+    "boxSizing": "border-box",
+    "position": "relative",
+  },
+  "label": Object {
+    "& a": Object {
+      "color": "#1476fb",
+      "outline": "none",
+      "textDecoration": "none",
+    },
+    "color": "#222222",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": 14,
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "transition": "0.3s all",
+  },
+  "left": Object {
+    "float": "left",
+  },
+  "passIcon": Object {
+    "background": "none",
+    "border": 0,
+    "cursor": "pointer",
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": 3,
+    "position": "absolute",
+    "right": 12,
+    "top": 8,
+    "width": 24,
+    "zIndex": 1,
+  },
+  "right": Object {
+    "float": "right",
+  },
+  "searchField": Object {
+    "background": Array [
+      "#ffffff",
+      "!important",
+    ],
+    "borderColor": "#777777",
+    "borderRadius": 24,
+    "height": 48,
+  },
+  "searchFieldHasIcon": Object {},
+  "select": Object {
+    "& optgroup": Object {
+      "color": "#777777",
+      "fontSize": 14,
+      "fontWeight": "normal",
+      "lineHeight": 1.5,
+    },
+    "& option": Object {
+      "&:disabled": Object {
+        "color": "#aaaaaa",
+      },
+      "color": "#222222",
+      "fontSize": 16,
+      "lineHeight": 1.5,
+    },
+    "&::-ms-expand": Object {
+      "display": "none",
+    },
+    "&:invalid, & option[value=\\"\\"]": Object {
+      "color": "#aaaaaa",
+    },
+    "paddingRight": 32,
+  },
+  "selectIcon": Object {
+    "background": "none",
+    "border": 0,
+    "height": 24,
+    "margin": 0,
+    "outline": 0,
+    "padding": "3px 0",
+    "pointerEvents": "none",
+    "position": "absolute",
+    "right": 12,
+    "top": 8,
+    "width": 18,
+    "zIndex": 1,
+  },
+  "textarea": Object {
+    "alignItems": "flex-start",
+    "height": 120,
+    "resize": "none",
+  },
+  "top": Object {
+    "&:after": Object {
+      "clear": "both",
+      "content": "\\"\\"",
+    },
+    "height": 24,
+  },
+}
+`;
+
+exports[`TextFieldJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/TextField/index.js

@@ -5,9 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
 var _TextField = _interopRequireDefault(require("./TextField"));
 
+var _styles = _interopRequireDefault(require("./styles"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _TextField["default"];
+var _default = (0, _reactJss["default"])(_styles["default"])(_TextField["default"]);
+
 exports["default"] = _default;