@occmundial/occ-atomic 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.20.0](https://github.com/occmundial/occ-atomic/compare/v1.19.0...v1.20.0) (2022-01-19)
+
+
+### Bug Fixes
+
+* Change in TextField icons ([989abb3](https://github.com/occmundial/occ-atomic/commit/989abb35e3d7e346a68519939f5cc4b489affb7b))
+* Simplify TextField status logic ([574824a](https://github.com/occmundial/occ-atomic/commit/574824a63c6ba8e83cefafaca102566e53578d0e))
+
+
+### Features
+
+* Add searchField theme to the TextField component ([3f36f4f](https://github.com/occmundial/occ-atomic/commit/3f36f4fcef97130a11afd0ed1e857d289295e491))
+
 # [1.19.0](https://github.com/occmundial/occ-atomic/compare/v1.18.4...v1.19.0) (2021-12-20)
 
 

package/build/Autocomplete/Autocomplete.test.js

@@ -154,7 +154,7 @@ describe("Autocomplete", function () {
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-31').at(0).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
@@ -164,7 +164,7 @@ describe("Autocomplete", function () {
       focus: true,
       value: 'a'
     });
-    wrapper.find('.Droplist-item-0-1-31').at(1).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-34').at(1).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -209,7 +209,7 @@ describe("Autocomplete", function () {
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-31').at(0).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {

package/build/TextField/TextField.js

@@ -222,60 +222,82 @@ var TextField = /*#__PURE__*/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,
-          inputMode = _this$props8.inputMode,
-          disableAutoComplete = _this$props8.disableAutoComplete,
-          pattern = _this$props8.pattern;
+          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;
       var realStatus = status;
       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,
@@ -326,7 +348,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           iconName: "eyeSolid",
           width: _iconSizes["default"].small,
           height: _iconSizes["default"].small,
-          colors: [_colors["default"].grey100]
+          colors: [_colors["default"].grey200]
         }));
       } else if (type == "select") {
         element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
@@ -380,7 +402,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           iconName: "eyeSolid",
           width: _iconSizes["default"].small,
           height: _iconSizes["default"].small,
-          colors: showPass ? [_colors["default"].grey500] : [_colors["default"].grey200]
+          colors: showPass ? [_colors["default"].grey900] : [_colors["default"].grey400]
         }));
       }
 
@@ -395,10 +417,10 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         className: classes.inputWrap
       }, 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]
+        colors: [this.setIconColor()]
       }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.selectIcon
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -410,7 +432,9 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         onClick: this.onClear,
         className: classes.clear
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "close"
+        iconName: "close",
+        width: _iconSizes["default"].small,
+        height: _iconSizes["default"].small
       })), element), (assistiveText || counter && maxLength || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
       }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
@@ -549,7 +573,10 @@ TextField.propTypes = {
   style: _propTypes["default"].object,
 
   /** Regular expression to validate the input content. */
-  pattern: _propTypes["default"].string
+  pattern: _propTypes["default"].string,
+
+  /** Size of the TextField. */
+  searchField: _propTypes["default"].bool
 };
 var _default = TextField;
 exports["default"] = _default;

package/build/TextField/TextField.test.js

@@ -228,6 +228,14 @@ 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 () {

package/build/TextField/styles.js

@@ -15,6 +15,8 @@ var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 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 _default = {
   container: {
     position: 'relative',
@@ -44,6 +46,13 @@ var _default = {
   focus: {
     '& $input': {
       borderColor: _colors["default"].prim
+    },
+    '& $searchField': {
+      borderWidth: 2,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
     }
   },
   error: {
@@ -51,6 +60,24 @@ var _default = {
       borderColor: _colors["default"].error,
       color: _colors["default"].errorText,
       background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
+    },
+    '& $searchField': {
+      borderWidth: 2,
+      color: _colors["default"].ink,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
+    }
+  },
+  filled: {
+    '& $input': {
+      borderColor: _colors["default"].grey900,
+      borderWidth: 2,
+      paddingLeft: _spacing["default"].tiny - 1
+    },
+    '& $searchFieldHasIcon': {
+      paddingLeft: 41
     }
   },
   label: {
@@ -92,7 +119,7 @@ var _default = {
     background: _colors["default"].bgWhite,
     border: "1px solid ".concat(_colors["default"].grey200),
     borderRadius: 4,
-    padding: '8px 16px',
+    padding: [_spacing["default"].tiny, _spacing["default"].small],
     boxShadow: 'none',
     outline: 'none',
     transition: '0.3s all',
@@ -157,8 +184,9 @@ var _default = {
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].gutter,
-    top: _spacing["default"].tiny
+    left: _spacing["default"].small,
+    top: '50%',
+    transform: 'translateY(-50%)'
   },
   passIcon: {
     width: 24,
@@ -191,7 +219,7 @@ var _default = {
   hasClear: {
     paddingRight: 42
   },
-  clear: {
+  clear: _defineProperty({
     width: 24,
     height: 24,
     background: 'none',
@@ -200,11 +228,12 @@ var _default = {
     margin: 0,
     position: 'absolute',
     right: 12,
-    top: 8,
+    top: '50%',
+    transform: 'translateY(-50%)',
     zIndex: 1,
     outline: 0,
     cursor: 'pointer'
-  },
+  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
@@ -220,6 +249,13 @@ var _default = {
   bottom: {
     height: 20,
     marginTop: 4
-  }
+  },
+  searchField: {
+    height: _spacing["default"].large,
+    borderRadius: _spacing["default"].base,
+    borderColor: _colors["default"].grey600,
+    background: [_colors["default"].bgWhite, '!important']
+  },
+  searchFieldHasIcon: {}
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",