@occmundial/occ-atomic 2.0.0-beta.16 → 2.0.0-beta.17

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [2.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-05-21)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+
+
+### Features
+
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
 # [2.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-05-14)
 
 

package/build/Autocomplete/Autocomplete.test.js

@@ -154,7 +154,7 @@ describe("Autocomplete", function () {
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-28').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-34').at(1).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-28').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-34').at(0).simulate('mousedown');
+    wrapper.find('.Droplist-item-0-1-28').at(0).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {

package/build/Button/Button.js

@@ -17,6 +17,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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"); } }
 
 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); } }
@@ -66,6 +68,9 @@ var Button = /*#__PURE__*/function (_React$Component) {
           target = _this$props.target,
           rel = _this$props.rel,
           onClick = _this$props.onClick,
+          onMouseDown = _this$props.onMouseDown,
+          onMouseUp = _this$props.onMouseUp,
+          onMouseOut = _this$props.onMouseOut,
           theme = _this$props.theme,
           size = _this$props.size,
           block = _this$props.block,
@@ -112,26 +117,33 @@ var Button = /*#__PURE__*/function (_React$Component) {
         width: iconSize,
         height: iconSize
       })) : null;
+      var eventProps = !disabled ? {
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut
+      } : {};
 
       if (href) {
-        return /*#__PURE__*/_react["default"].createElement("a", {
+        return /*#__PURE__*/_react["default"].createElement("a", _extends({
           className: classNames,
           href: !disabled ? href : '',
           target: target,
-          rel: rel,
-          onClick: !disabled ? onClick : null,
+          rel: rel
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       } else {
-        return /*#__PURE__*/_react["default"].createElement("button", {
+        return /*#__PURE__*/_react["default"].createElement("button", _extends({
           className: classNames,
-          onClick: !disabled ? onClick : null,
+          disabled: disabled
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       }
     }
   }]);
@@ -176,6 +188,15 @@ Button.propTypes = {
   /** The function to call when the button is clicked. */
   onClick: _propTypes["default"].func,
 
+  /** The function to call when the mouse is down on the button. */
+  onMouseDown: _propTypes["default"].func,
+
+  /** The function to call when the mouse is up on the button. */
+  onMouseUp: _propTypes["default"].func,
+
+  /** The function to call when the mouse moves out of the button. */
+  onMouseOut: _propTypes["default"].func,
+
   /** Optionally, you can set the href property and use it like a link. */
   href: _propTypes["default"].string,
 

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

@@ -3,6 +3,7 @@
 exports[`FAB matches the snapshot 1`] = `
 <button
   className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  disabled={false}
 >
   <span
     className="Button-cont-0-1-29 Button-cont-0-1-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",
   },
 }
 `;

package/build/TextField/styles.js

@@ -3,27 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 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 placeholder = _fonts2["default"]['text-field-placeholder'];
+var label = _fonts2["default"]['text-field-label'];
+var assistiveText = _fonts2["default"]['text-field-assistive-text'];
+var TRANSITION = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var border = {
+  DEFAULT: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border["default"]),
+  HOVER: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.hover),
+  FOCUS: "inset 0 0 0 2px ".concat(_colors["default"]['text-field'].border.focus),
+  ERROR: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.error)
+};
 
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   container: {
-    position: 'relative',
-    marginBottom: _spacing["default"].tiny
+    position: 'relative'
   },
   top: {
-    height: _spacing["default"].base,
+    display: 'flex',
+    marginBottom: _spacing["default"]['size-2'],
     '&:after': {
       content: '""',
       clear: 'both'
@@ -32,75 +50,27 @@ var _default = {
   "default": {},
   disabled: {
     '& $input': {
-      borderColor: _colors["default"].inkLightest,
-      color: _colors["default"].inkLightest,
-      paddingTop: 9
-    },
-    '& $label': {
-      color: _colors["default"].inkLightest
-    },
-    '& $passIcon': {
-      cursor: 'auto'
+      background: _colors["default"]['text-field'].bg.disabled,
+      color: _colors["default"].text.corp.disabled
     }
   },
   focus: {
     '& $input': {
-      borderColor: _colors["default"].prim
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: "".concat(border.FOCUS, ", ").concat(_shadows["default"]['focus-bright-blue'], " !important")
     }
   },
   error: {
     '& $input': {
-      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
+      boxShadow: border.ERROR
     }
   },
   label: {
-    fontWeight: 300,
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
-  },
-  left: {
-    "float": 'left'
-  },
-  right: {
-    "float": 'right'
+    font: objectToFontValue(label),
+    color: _colors["default"].text.corp.primary
   },
   counter: {
-    color: _colors["default"].inkLighter
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
   inputWrap: {
     boxSizing: 'border-box',
@@ -111,24 +81,21 @@ var _default = {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    height: 40,
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontWeight: 300,
-    fontSize: 16,
-    lineHeight: 1.5,
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    borderRadius: 4,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
-    boxShadow: 'none',
+    height: 48,
+    color: _colors["default"].text.corp.primary,
+    font: objectToFontValue(placeholder),
+    background: _colors["default"]['text-field'].bg["default"],
+    border: 'none',
+    borderRadius: _borderRadius["default"]['br-xs'],
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-4']],
+    boxShadow: border.DEFAULT,
     outline: 'none',
-    transition: '0.3s all',
+    transition: TRANSITION,
     appearance: 'none',
     '-webkit-appearance': 'none',
-    caretColor: _colors["default"].prim,
+    caretColor: _colors["default"].border.brand["default"],
     '&::placeholder': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.secondary
     },
     '&::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
@@ -140,6 +107,9 @@ var _default = {
     },
     '&[type=number]': {
       '-moz-appearance': 'textfield'
+    },
+    '&:hover': {
+      boxShadow: border.HOVER
     }
   },
   inputDisabled: {
@@ -147,118 +117,80 @@ var _default = {
     whiteSpace: 'nowrap'
   },
   hasRightIcon: {
-    marginRight: _spacing["default"].small
+    marginRight: _spacing["default"]['size-8']
   },
   select: {
     '&::-ms-expand': {
       display: 'none'
     },
-    paddingRight: 32,
+    paddingRight: _spacing["default"]['size-8'],
     '& optgroup': {
-      fontSize: 14,
-      fontWeight: 'normal',
-      lineHeight: 1.5,
-      color: _colors["default"].inkLight
+      font: objectToFontValue(label),
+      color: _colors["default"].text.corp.secondary
     },
     '& option': {
-      fontSize: 16,
-      lineHeight: 1.5,
-      color: _colors["default"].ink,
+      font: objectToFontValue(placeholder),
+      color: _colors["default"].text.corp.primary,
       '&:disabled': {
-        color: _colors["default"].inkLighter
+        color: _colors["default"].text.corp.disabled
       }
     },
     '&:invalid, & option[value=""]': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.disabled
     }
   },
   textarea: {
     resize: 'none',
+    paddingg: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     height: 120,
     alignItems: 'flex-start'
   },
   hasIcon: {
-    paddingLeft: 42
+    paddingLeft: _spacing["default"]['size-8']
   },
   hasPass: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].small,
+    left: _spacing["default"]['size-4'],
     top: '50%',
     transform: 'translateY(-50%)'
   },
-  passIcon: {
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 3,
-    margin: 0,
+  rightButton: {
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
+    right: _spacing["default"]['size-1'],
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1
   },
   selectIcon: {
-    width: 18,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: '3px 0',
-    margin: 0,
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
+    right: _spacing["default"]['size-4'],
+    top: '50%',
+    transform: 'translateY(-50%)',
     pointerEvents: 'none'
   },
   hasClear: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
-  clear: _defineProperty({
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 0,
-    margin: 0,
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
-  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
-  assistiveText: {
-    color: _colors["default"].inkLighter,
-    fontSize: 12,
-    fontWeight: 300
+  assistiveTextWrap: {
+    display: 'flex'
   },
-  errorAssistiveText: {
-    color: _colors["default"].errorText
+  assistiveText: {
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
-  errorIcon: {
-    marginBottom: -2
+  assistiveError: {
+    color: _colors["default"].text.error
   },
   bottom: {
-    height: 20,
-    marginTop: 4
-  },
-  searchField: {
-    height: _spacing["default"].large,
-    borderRadius: _spacing["default"].base,
-    borderColor: _colors["default"].grey600,
-    background: [_colors["default"].bgWhite, '!important']
-  },
-  searchFieldHasIcon: {}
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: _spacing["default"]['size-2']
+  }
 };
 exports["default"] = _default;

package/package.json

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