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

package/build/TextField/TextField.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
 });
@@ -19,8 +21,6 @@ var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
 
 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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -29,28 +29,32 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _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); }
 
 /** TextField component that includes all the markup, functions and behaviors to implement any type of input field. */
-var TextField =
-/*#__PURE__*/
-function (_React$Component) {
+var TextField = /*#__PURE__*/function (_React$Component) {
   _inherits(TextField, _React$Component);
 
+  var _super = _createSuper(TextField);
+
   function TextField(props) {
     var _this;
 
     _classCallCheck(this, TextField);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(TextField).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       status: 'default',
       value: props.valueProp ? props.valueProp : '',
@@ -218,58 +222,83 @@ function (_React$Component) {
           type = _this$props7.type,
           inputClassName = _this$props7.inputClassName,
           alignRight = _this$props7.alignRight,
-          hjWhitelist = _this$props7.hjWhitelist;
+          hjWhitelist = _this$props7.hjWhitelist,
+          searchField = _this$props7.searchField;
       var className = classes.input;
-      if (iconName) className += ' ' + classes.hasIcon;
-      if (clear) className += ' ' + classes.hasClear;
-      if (alignRight) className += ' ' + classes.alignRight;
-      if (type == "select") className += ' ' + classes.select;
-      if (type == "textarea") className += ' ' + classes.textarea;
-      if (type == "password") className += ' ' + classes.hasPass;
+      if (searchField) className += " ".concat(classes.searchField);
+      if (iconName) className += " ".concat(classes.hasIcon);
+      if (searchField && iconName) className += " ".concat(classes.searchFieldHasIcon);
+      if (clear) className += " ".concat(classes.hasClear);
+      if (alignRight) className += " ".concat(classes.alignRight);
+      if (type == 'select') className += " ".concat(classes.select);
+      if (type == 'textarea') className += " ".concat(classes.textarea);
+      if (type == 'password') className += " ".concat(classes.hasPass);
       if (hjWhitelist) className += ' data-hj-whitelist';
-      if (inputClassName) className += ' ' + inputClassName;
+      if (inputClassName) className += " ".concat(inputClassName);
       return className;
     }
   }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
+    key: "setIconColor",
+    value: function setIconColor() {
       var _this$state = this.state,
           status = _this$state.status,
           value = _this$state.value,
-          touched = _this$state.touched,
-          showPass = _this$state.showPass,
-          passIconBeingClicked = _this$state.passIconBeingClicked;
+          touched = _this$state.touched;
       var _this$props8 = this.props,
-          classes = _this$props8.classes,
-          input = _this$props8.input,
-          meta = _this$props8.meta,
-          label = _this$props8.label,
-          placeholder = _this$props8.placeholder,
-          counter = _this$props8.counter,
-          maxLength = _this$props8.maxLength,
-          type = _this$props8.type,
-          name = _this$props8.name,
-          options = _this$props8.options,
-          id = _this$props8.id,
-          style = _this$props8.style,
           disabled = _this$props8.disabled,
-          autoFocus = _this$props8.autoFocus,
+          searchField = _this$props8.searchField,
           error = _this$props8.error,
-          assistiveText = _this$props8.assistiveText,
-          clear = _this$props8.clear,
-          iconName = _this$props8.iconName,
-          allowError = _this$props8.allowError,
-          lockHeight = _this$props8.lockHeight,
-          required = _this$props8.required,
-          mask = _this$props8.mask,
-          guide = _this$props8.guide,
-          disableAutoComplete = _this$props8.disableAutoComplete;
+          allowError = _this$props8.allowError;
+      if (disabled) return _colors["default"].grey500;
+      if (status === 'focus' && searchField) return _colors["default"].prim;
+      if (error && (allowError || touched)) return _colors["default"].error;
+      if (status !== 'focus' && searchField && value) return _colors["default"].grey900;
+      return _colors["default"].grey500;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state2 = this.state,
+          status = _this$state2.status,
+          value = _this$state2.value,
+          touched = _this$state2.touched,
+          showPass = _this$state2.showPass,
+          passIconBeingClicked = _this$state2.passIconBeingClicked;
+      var _this$props9 = this.props,
+          classes = _this$props9.classes,
+          input = _this$props9.input,
+          meta = _this$props9.meta,
+          label = _this$props9.label,
+          placeholder = _this$props9.placeholder,
+          counter = _this$props9.counter,
+          maxLength = _this$props9.maxLength,
+          type = _this$props9.type,
+          name = _this$props9.name,
+          options = _this$props9.options,
+          id = _this$props9.id,
+          style = _this$props9.style,
+          disabled = _this$props9.disabled,
+          autoFocus = _this$props9.autoFocus,
+          error = _this$props9.error,
+          assistiveText = _this$props9.assistiveText,
+          clear = _this$props9.clear,
+          iconName = _this$props9.iconName,
+          allowError = _this$props9.allowError,
+          lockHeight = _this$props9.lockHeight,
+          required = _this$props9.required,
+          mask = _this$props9.mask,
+          guide = _this$props9.guide,
+          inputMode = _this$props9.inputMode,
+          disableAutoComplete = _this$props9.disableAutoComplete,
+          pattern = _this$props9.pattern,
+          searchField = _this$props9.searchField,
+          testId = _this$props9.testId;
       var realStatus = status;
-      var InputType = type == "select" ? "select" : type == "textarea" ? "textarea" : "input";
+      var InputType = type == 'select' ? 'select' : type == 'textarea' ? 'textarea' : 'input';
       var errorStatus = meta && meta.error && (meta.touched || allowError) || error && (touched || allowError) && !passIconBeingClicked;
-      if (disabled) realStatus = 'disabled';else if (status != 'focus' && errorStatus) realStatus = 'error';
+      if (disabled) realStatus = 'disabled';else if (status != 'focus' && errorStatus) realStatus = 'error';else if (status !== 'focus' && searchField && value) realStatus = 'filled';
       var element, passIcon;
       var commonProps = {
         name: name,
@@ -285,11 +314,14 @@ function (_React$Component) {
         ref: function ref(_ref5) {
           _this2.input = _ref5;
         },
-        required: required
+        required: required,
+        pattern: pattern,
+        inputMode: inputMode,
+        'data-testid': testId
       };
 
       if (disabled) {
-        if (type == "select") {
+        if (type == 'select') {
           var selectedOption = options.filter(function (option) {
             return option.value == value;
           });
@@ -299,113 +331,128 @@ function (_React$Component) {
             optionLabel = selectedOption[0].label;
           }
 
-          element = _react["default"].createElement("label", {
+          element = /*#__PURE__*/_react["default"].createElement("label", {
             className: "".concat(classes.input).concat(iconName ? " ".concat(classes.hasIcon) : '')
-          }, input && input.value ? input.value : optionLabel ? optionLabel : value ? value : placeholder);
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "".concat(classes.inputDisabled, " ").concat(classes.hasRightIcon)
+          }, input && input.value ? input.value : optionLabel ? optionLabel : value ? value : placeholder));
         } else {
-          element = _react["default"].createElement("label", {
+          element = /*#__PURE__*/_react["default"].createElement("label", {
             className: "".concat(classes.input).concat(type == 'textarea' ? " ".concat(classes.textarea) : '').concat(iconName ? " ".concat(classes.hasIcon) : '')
-          }, input && input.value ? input.value : value ? value : placeholder);
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.inputDisabled
+          }, input && input.value ? input.value : value ? value : placeholder));
         }
 
-        passIcon = _react["default"].createElement("div", {
+        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.passIcon
-        }, _react["default"].createElement(_Icon["default"], {
-          iconName: "eye",
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          iconName: "eyeClosed",
           width: _iconSizes["default"].small,
           height: _iconSizes["default"].small,
-          colors: [_colors["default"].grey100]
+          colors: [_colors["default"].grey200]
         }));
-      } else if (type == "select") {
-        element = _react["default"].createElement(InputType, commonProps, _react["default"].createElement("option", {
+      } else if (type == 'select') {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
           value: "",
           disabled: true,
           hidden: true
         }, placeholder), options.map(function (item) {
           if (item.grouped) {
-            return _react["default"].createElement("optgroup", {
+            return /*#__PURE__*/_react["default"].createElement("optgroup", {
               key: item.key,
               label: item.label,
               disabled: item.disabled
             }, item.options.map(function (option) {
-              return _react["default"].createElement("option", {
+              return /*#__PURE__*/_react["default"].createElement("option", _extends({
                 key: option.value,
                 value: option.value,
                 disabled: option.disabled
-              }, option.label);
+              }, testId && {
+                'data-testid': "".concat(testId, "__item-").concat(item.value)
+              }), option.label);
             }));
           } else {
-            return _react["default"].createElement("option", {
+            return /*#__PURE__*/_react["default"].createElement("option", _extends({
               key: item.value,
               value: item.value,
               disabled: item.disabled
-            }, item.label);
+            }, testId && {
+              'data-testid': "".concat(testId, "__item-").concat(item.value)
+            }), item.label);
           }
         }));
       } else if (mask) {
-        element = _react["default"].createElement(_reactTextMask["default"], _extends({}, commonProps, {
+        element = /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], _extends({}, commonProps, {
           placeholder: placeholder,
-          type: "text",
+          type: type == 'password' && showPass ? 'text' : type
+        }, disableAutoComplete && {
+          autoComplete: 'off'
+        }, {
           mask: mask,
           guide: guide
         }));
       } else {
-        element = _react["default"].createElement(InputType, _extends({}, commonProps, {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, _extends({}, commonProps, {
           placeholder: placeholder,
           type: type == 'password' && showPass ? 'text' : type
         }, disableAutoComplete && {
           autoComplete: 'off'
         }));
-        passIcon = _react["default"].createElement("div", {
+        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
           onMouseDown: this.togglePass,
           onMouseUp: this.focusInput,
           onMouseOut: this.outOfPassIcon,
           className: classes.passIcon
-        }, _react["default"].createElement(_Icon["default"], {
-          iconName: "eye",
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          iconName: showPass ? 'eye' : 'eyeClosed',
           width: _iconSizes["default"].small,
           height: _iconSizes["default"].small,
-          colors: showPass ? [_colors["default"].grey500] : [_colors["default"].grey200]
+          colors: showPass ? [_colors["default"].grey900] : [_colors["default"].grey400]
         }));
       }
 
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.setClassName(realStatus),
         style: style
-      }, (label || lockHeight) && _react["default"].createElement("div", {
+      }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
-      }, label && _react["default"].createElement("label", {
+      }, label && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.left)
-      }, label)), _react["default"].createElement("div", {
+      }, label)), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.inputWrap
-      }, iconName && _react["default"].createElement(_Icon["default"], {
+      }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: iconName,
-        width: _iconSizes["default"].base,
-        height: _iconSizes["default"].base,
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small,
         className: classes.icon,
-        colors: disabled ? [_colors["default"].grey500] : [_colors["default"].grey500]
-      }), type == 'select' && _react["default"].createElement("div", {
+        colors: [this.setIconColor()]
+      }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.selectIcon
-      }, _react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "arrowDown",
         width: _iconSizes["default"].small,
         height: _iconSizes["default"].small,
         colors: disabled ? [_colors["default"].grey200] : [_colors["default"].grey900]
-      })), type == 'password' && passIcon, value && clear && _react["default"].createElement("div", {
+      })), type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement("div", _extends({
         onClick: this.onClear,
         className: classes.clear
-      }, _react["default"].createElement(_Icon["default"], {
-        iconName: "close"
-      })), element), (assistiveText || counter && maxLength || lockHeight) && _react["default"].createElement("div", {
+      }, testId && {
+        'data-testid': "".concat(testId, "__container-close-icon")
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "close",
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small
+      })), element), (assistiveText || counter && maxLength || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
-      }, assistiveText && _react["default"].createElement("label", {
+      }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
-      }, realStatus == 'error' ? _react["default"].createElement(_Icon["default"], {
-        iconName: "warning",
+      }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "warningSolid",
         width: _iconSizes["default"].tiny,
         height: _iconSizes["default"].tiny,
         className: classes.errorIcon
-      }) : null, " ", assistiveText), counter && maxLength && _react["default"].createElement("label", {
+      }) : null, ' ', assistiveText), counter && maxLength && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.right, " ").concat(classes.counter)
       }, value.length, " / ", maxLength)));
     }
@@ -479,6 +526,9 @@ TextField.propTypes = {
   /** Boolean to show or hide the full mask while writing. */
   guide: _propTypes["default"].bool,
 
+  /** The type of input the field will receive, to show the right keyboard in mobile. */
+  inputMode: _propTypes["default"].oneOf(['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url']),
+
   /**  Disables native autoComplete on browsers. */
   disableAutoComplete: _propTypes["default"].bool,
 
@@ -528,7 +578,16 @@ TextField.propTypes = {
   alignRight: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** Regular expression to validate the input content. */
+  pattern: _propTypes["default"].string,
+
+  /** Size of the TextField. */
+  searchField: _propTypes["default"].bool,
+
+  /** 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 = TextField;
 exports["default"] = _default;

package/build/TextField/TextField.test.js

@@ -21,13 +21,13 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("TextField", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    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.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes
     }));
     expect(wrapper.find('.input').type()).toBe('input');
@@ -37,7 +37,7 @@ describe("TextField", function () {
     expect(wrapper.find('.input').type()).toBe('textarea');
   });
   it('renders the right type of input', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes
     }));
     expect(wrapper.find('.input').prop('type')).toBe('text');
@@ -51,14 +51,14 @@ describe("TextField", function () {
     expect(wrapper.find('.input').prop('type')).toBe('number');
   });
   it('sets the maxLength property', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       maxLength: 2
     }));
     expect(wrapper.find('.input').prop('maxLength')).toBe(2);
   });
   it('shows a counter with the number of characters written', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       maxLength: 50,
       label: "Label",
@@ -72,7 +72,7 @@ describe("TextField", function () {
     expect(wrapper.find('.counter').text()).toBe('10 / 50');
   });
   it('renders a label and a placeholder in the input', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       label: "Label",
       placeholder: "Placeholder"
@@ -82,7 +82,7 @@ describe("TextField", function () {
     expect(wrapper.find('.input').prop('placeholder')).toBe('Placeholder');
   });
   it('renders a static field when disabled', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes
     }));
     expect(wrapper.find('.container').hasClass('disabled')).toBe(false);
@@ -94,14 +94,14 @@ describe("TextField", function () {
     expect(wrapper.find('.input').type()).toBe('label');
   });
   it('sets the autoFocus property', function () {
-    var wrapper = (0, _enzyme.shallow)(_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);
   });
   it('shows an icon that clears the value on click', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       clear: true
     }));
@@ -115,7 +115,7 @@ describe("TextField", function () {
     expect(wrapper.state('value')).toBe('');
   });
   it('shows the TextField with an error', function () {
-    var wrapper = (0, _enzyme.shallow)(_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
@@ -130,7 +130,7 @@ describe("TextField", function () {
     expect(wrapper.find('.error').at(0).hasClass('container')).toBe(true);
   });
   it('sets a default value', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       valueProp: "Value"
     }));
@@ -138,7 +138,7 @@ describe("TextField", function () {
   });
   it('calls the onFocus function', function () {
     var onFocus = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       onFocus: onFocus
     }));
@@ -149,7 +149,7 @@ describe("TextField", function () {
   });
   it('calls the onBlur function', function () {
     var onBlur = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       onBlur: onBlur
     }));
@@ -162,7 +162,7 @@ describe("TextField", function () {
   });
   it('calls the onChange function', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       onChange: onChange
     }));
@@ -173,7 +173,7 @@ describe("TextField", function () {
   });
   it('calls the onClear function', function () {
     var onClear = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       clear: true,
       onClear: onClear,
@@ -184,7 +184,7 @@ describe("TextField", function () {
   });
   it('calls the onRef function', function () {
     var onRef = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes,
       onRef: onRef
     }));
@@ -192,7 +192,7 @@ describe("TextField", function () {
     expect(onRef.mock.calls.length).toBe(1);
   });
   it('shows an icon', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       classes: classes
     }));
     expect(wrapper.find('.icon').length).toBe(0);
@@ -202,7 +202,7 @@ describe("TextField", function () {
     expect(wrapper.find('.icon').length).toBe(1);
   });
   it('validates with the regex', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_TextField["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       regex: "^[0-9]*$",
       classes: classes
     }));
@@ -228,10 +228,18 @@ describe("TextField", function () {
     });
     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)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });