@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.2

package/build/TextField/TextField.js

@@ -15,9 +15,9 @@ var _reactTextMask = _interopRequireDefault(require("react-text-mask"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Button = _interopRequireDefault(require("../Button"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -222,12 +222,9 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           type = _this$props7.type,
           inputClassName = _this$props7.inputClassName,
           alignRight = _this$props7.alignRight,
-          hjWhitelist = _this$props7.hjWhitelist,
-          searchField = _this$props7.searchField;
+          hjWhitelist = _this$props7.hjWhitelist;
       var className = classes.input;
-      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);
@@ -240,65 +237,54 @@ var TextField = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setIconColor",
     value: function setIconColor() {
-      var _this$state = this.state,
-          status = _this$state.status,
-          value = _this$state.value,
-          touched = _this$state.touched;
-      var _this$props8 = this.props,
-          disabled = _this$props8.disabled,
-          searchField = _this$props8.searchField,
-          error = _this$props8.error,
-          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;
+      var status = this.state.status;
+      var disabled = this.props.disabled;
+      if (disabled) return _colors["default"].icon["default"].disabled;
+      if (status === 'focus') return _colors["default"].icon.brand.bold;
+      return _colors["default"].icon["default"]["default"];
     }
   }, {
     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 _this$state = this.state,
+          status = _this$state.status,
+          value = _this$state.value,
+          touched = _this$state.touched,
+          showPass = _this$state.showPass,
+          passIconBeingClicked = _this$state.passIconBeingClicked;
+      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,
+          error = _this$props8.error,
+          assistiveText = _this$props8.assistiveText,
+          clear = _this$props8.clear,
+          iconName = _this$props8.iconName,
+          allowError = _this$props8.allowError,
+          required = _this$props8.required,
+          mask = _this$props8.mask,
+          guide = _this$props8.guide,
+          inputMode = _this$props8.inputMode,
+          disableAutoComplete = _this$props8.disableAutoComplete,
+          pattern = _this$props8.pattern,
+          testId = _this$props8.testId;
       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';else if (status !== 'focus' && searchField && value) realStatus = 'filled';
+      if (disabled) realStatus = 'disabled';else if (status != 'focus' && errorStatus) realStatus = 'error';
       var element, passIcon;
       var commonProps = {
         name: name,
@@ -344,14 +330,13 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           }, input && input.value ? input.value : value ? value : placeholder));
         }
 
-        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.passIcon
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          iconName: "eyeClosed",
-          width: _iconSizes["default"].small,
-          height: _iconSizes["default"].small,
-          colors: [_colors["default"].grey200]
-        }));
+        passIcon = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          theme: "ghostGrey",
+          icon: "eye",
+          size: "md",
+          disabled: true,
+          className: classes.rightButton
+        });
       } else if (type == 'select') {
         element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
           value: "",
@@ -369,7 +354,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
                 value: option.value,
                 disabled: option.disabled
               }, testId && {
-                'data-testid': "".concat(testId, "__item-").concat(item.value)
+                'data-testid': "".concat(testId, "__item-").concat(option.value)
               }), option.label);
             }));
           } else {
@@ -399,61 +384,55 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         }, disableAutoComplete && {
           autoComplete: 'off'
         }));
-        passIcon = /*#__PURE__*/_react["default"].createElement("div", {
+        passIcon = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          theme: "ghostGrey",
+          icon: showPass ? 'eye' : 'eye-slash',
+          size: "md",
+          className: classes.rightButton,
           onMouseDown: this.togglePass,
           onMouseUp: this.focusInput,
-          onMouseOut: this.outOfPassIcon,
-          className: classes.passIcon
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          iconName: showPass ? 'eye' : 'eyeClosed',
-          width: _iconSizes["default"].small,
-          height: _iconSizes["default"].small,
-          colors: showPass ? [_colors["default"].grey900] : [_colors["default"].grey400]
-        }));
+          onMouseOut: this.outOfPassIcon
+        });
       }
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.setClassName(realStatus),
         style: style
-      }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
+      }, label && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
       }, label && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left)
+        className: classes.label
       }, label)), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.inputWrap
       }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: iconName,
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small,
+        width: 24,
+        height: 24,
         className: classes.icon,
         colors: [this.setIconColor()]
       }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.selectIcon
       }, /*#__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 && /*#__PURE__*/_react["default"].createElement("div", _extends({
-        onClick: this.onClear,
-        className: classes.clear
+        iconName: "chevron-down",
+        width: 24,
+        height: 24,
+        colors: disabled ? [_colors["default"].icon["default"].disabled] : [_colors["default"].icon["default"]["default"]]
+      })), element, type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        icon: "x",
+        theme: "ghostGrey",
+        size: "md",
+        className: classes.rightButton,
+        onClick: this.onClear
       }, 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", {
+      }))), (assistiveText || counter && maxLength) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.assistiveTextWrap
       }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
-      }, 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 && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.right, " ").concat(classes.counter)
+        className: "".concat(classes.assistiveText, " ").concat(realStatus == 'error' ? classes.assistiveError : null)
+      }, assistiveText)), counter && maxLength && /*#__PURE__*/_react["default"].createElement("label", {
+        className: "".concat(classes.counter)
       }, value.length, " / ", maxLength)));
     }
   }]);
@@ -511,9 +490,6 @@ TextField.propTypes = {
   /** It allows the component to display the error messages even if it hasn't been touched. */
   allowError: _propTypes["default"].bool,
 
-  /** By default the TextField container would be smaller without a label or an assistive text. lockHeight will maintain the same height as if it had both, label and assistive text. */
-  lockHeight: _propTypes["default"].bool,
-
   /** Use as a default value. */
   valueProp: _propTypes["default"].node,
 
@@ -583,9 +559,6 @@ TextField.propTypes = {
   /** 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
 };

package/build/TextField/TextField.test.js

@@ -105,13 +105,13 @@ describe("TextField", function () {
       classes: classes,
       clear: true
     }));
-    expect(wrapper.find('.clear').length).toBe(0);
+    expect(wrapper.find('.rightButton').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('.rightButton').length).toBe(1);
+    wrapper.find('.rightButton').simulate('click');
+    expect(wrapper.find('.rightButton').length).toBe(0);
     expect(wrapper.state('value')).toBe('');
   });
   it('shows the TextField with an error', function () {
@@ -121,12 +121,12 @@ describe("TextField", function () {
       error: true
     }));
     expect(wrapper.find('.error').length).toBe(0);
-    expect(wrapper.find('.errorAssistiveText').length).toBe(0);
+    expect(wrapper.find('.assistiveError').length).toBe(0);
     wrapper.setState({
       touched: true
     });
     expect(wrapper.find('.error').length).toBe(1);
-    expect(wrapper.find('.errorAssistiveText').length).toBe(1);
+    expect(wrapper.find('.assistiveError').length).toBe(1);
     expect(wrapper.find('.error').at(0).hasClass('container')).toBe(true);
   });
   it('sets a default value', function () {
@@ -179,7 +179,7 @@ describe("TextField", function () {
       onClear: onClear,
       valueProp: "Value"
     }));
-    wrapper.find('.clear').simulate('click');
+    wrapper.find('.rightButton').simulate('click');
     expect(onClear.mock.calls.length).toBe(1);
   });
   it('calls the onRef function', function () {
@@ -228,14 +228,6 @@ 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/__snapshots__/TextField.test.js.snap

@@ -7,108 +7,59 @@ Object {
   "alignRight": Object {
     "textAlign": "right",
   },
+  "assistiveError": Object {
+    "color": "#8b1313",
+  },
   "assistiveText": Object {
-    "color": "#aaaaaa",
-    "fontSize": 12,
-    "fontWeight": 300,
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "bottom": Object {
-    "height": 20,
-    "marginTop": 4,
+  "assistiveTextWrap": Object {
+    "display": "flex",
   },
-  "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,
+  "bottom": Object {
+    "display": "flex",
+    "justifyContent": "space-between",
+    "marginTop": "8px",
   },
   "container": Object {
-    "marginBottom": 8,
     "position": "relative",
   },
   "counter": Object {
-    "color": "#aaaaaa",
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
   "default": Object {},
   "disabled": Object {
     "& $input": Object {
-      "borderColor": "#dddddd",
-      "color": "#dddddd",
-      "paddingTop": 9,
-    },
-    "& $label": Object {
-      "color": "#dddddd",
-    },
-    "& $passIcon": Object {
-      "cursor": "auto",
+      "background": "#EDEDF1",
+      "color": "#878A9F",
     },
   },
   "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,
+      "boxShadow": "inset 0 0 0 1px #e82020",
     },
   },
   "focus": Object {
     "& $input": Object {
-      "borderColor": "#083cae",
-    },
-    "& $searchField": Object {
-      "borderWidth": 2,
-      "paddingLeft": 7,
-    },
-    "& $searchFieldHasIcon": Object {
-      "paddingLeft": 41,
+      "boxShadow": "inset 0 0 0 2px #0059CD, 0 0 0 8px rgba(0,110,255,0.3) !important",
     },
   },
   "hasClear": Object {
-    "paddingRight": 42,
+    "paddingRight": "48px",
   },
   "hasIcon": Object {
-    "paddingLeft": 42,
+    "paddingLeft": "48px",
   },
   "hasPass": Object {
-    "paddingRight": 42,
+    "paddingRight": "48px",
   },
   "hasRightIcon": Object {
-    "marginRight": 16,
+    "marginRight": "48px",
   },
   "icon": Object {
-    "left": 16,
+    "left": "16px",
     "position": "absolute",
     "top": "50%",
     "transform": "translateY(-50%)",
@@ -123,7 +74,10 @@ Object {
       "margin": 0,
     },
     "&::placeholder": Object {
-      "color": "#aaaaaa",
+      "color": "#5A5D7B",
+    },
+    "&:hover": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
     "&[type=number]": Object {
       "-moz-appearance": "textfield",
@@ -131,25 +85,22 @@ Object {
     "-webkit-appearance": "none",
     "alignItems": "center",
     "appearance": "none",
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
-    "boxShadow": "none",
+    "background": "#fff",
+    "border": "none",
+    "borderRadius": "4px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
     "boxSizing": "border-box",
-    "caretColor": "#083cae",
-    "color": "#222222",
+    "caretColor": "#083CAE",
+    "color": "#080D39",
     "display": "flex",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 16,
-    "fontWeight": 300,
-    "height": 40,
-    "lineHeight": 1.5,
+    "font": "400 16px/1.5 'OccText', sans-serif",
+    "height": 48,
     "outline": "none",
     "padding": Array [
-      8,
-      16,
+      "4px",
+      "16px",
     ],
-    "transition": "0.3s all",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
     "width": "100%",
   },
   "inputDisabled": Object {
@@ -161,88 +112,50 @@ Object {
     "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",
+    "color": "#080D39",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "passIcon": Object {
-    "background": "none",
-    "border": 0,
-    "cursor": "pointer",
-    "height": 24,
-    "margin": 0,
-    "outline": 0,
-    "padding": 3,
+  "rightButton": Object {
     "position": "absolute",
-    "right": 12,
-    "top": 8,
-    "width": 24,
+    "right": "4px",
+    "top": "50%",
+    "transform": "translateY(-50%)",
     "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,
+      "color": "#5A5D7B",
+      "font": "400 14px/1.5 'OccText', sans-serif",
     },
     "& option": Object {
       "&:disabled": Object {
-        "color": "#aaaaaa",
+        "color": "#878A9F",
       },
-      "color": "#222222",
-      "fontSize": 16,
-      "lineHeight": 1.5,
+      "color": "#080D39",
+      "font": "400 16px/1.5 'OccText', sans-serif",
     },
     "&::-ms-expand": Object {
       "display": "none",
     },
     "&:invalid, & option[value=\\"\\"]": Object {
-      "color": "#aaaaaa",
+      "color": "#878A9F",
     },
-    "paddingRight": 32,
+    "paddingRight": "48px",
   },
   "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,
+    "right": "16px",
+    "top": "50%",
+    "transform": "translateY(-50%)",
   },
   "textarea": Object {
     "alignItems": "flex-start",
     "height": 120,
+    "paddingg": Array [
+      "12px",
+      "16px",
+    ],
     "resize": "none",
   },
   "top": Object {
@@ -250,7 +163,8 @@ Object {
       "clear": "both",
       "content": "\\"\\"",
     },
-    "height": 24,
+    "display": "flex",
+    "marginBottom": "8px",
   },
 }
 `;