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

package/build/Droplist/styles.js

@@ -5,70 +5,100 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var gutter = _spacing["default"].gutter,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    base = _spacing["default"].base,
-    xTiny = _spacing["default"].xTiny;
-var primLighter = _colors["default"].primLighter,
-    grey50 = _colors["default"].grey50,
-    grey200 = _colors["default"].grey200,
-    bgWhite = _colors["default"].bgWhite,
-    textLink = _colors["default"].textLink;
 var _default = {
   block: {
-    background: bgWhite,
-    border: "1px solid ".concat(grey200),
-    borderRadius: xTiny,
-    overflow: 'hidden'
+    background: _colors["default"]['text-field'].bg["default"],
+    border: "1px solid ".concat(_colors["default"]['text-field'].border["default"]),
+    borderRadius: _borderRadius["default"]['br-xs'],
+    overflow: 'hidden',
+    padding: _spacing["default"]['size-2'],
+    boxShadow: _shadows["default"]['elevation-elevation-4']
+  },
+  text: {
+    margin: 0
   },
   group: {
-    padding: [small, small, xTiny]
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4'], 0],
+    display: 'inline-block'
+  },
+  groupText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label'])
   },
   item: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: [tiny, small],
+    alignItems: 'center',
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     transition: '0.1s all',
+    borderRadius: _borderRadius["default"]['br-xs'],
     position: 'relative',
     '&:hover': {
-      background: grey50
+      background: _colors["default"].dropdown.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].dropdown.bg.active,
+      '& > $rightText': {
+        color: _colors["default"].text.corp.primary
+      }
     }
   },
   itemPointer: {
     cursor: 'pointer'
   },
+  disabled: {
+    pointerEvents: 'none'
+  },
   right: {
-    "float": 'right',
-    transition: '0.1s all',
-    marginLeft: small
+    marginLeft: _spacing["default"]['size-4']
+  },
+  rightText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.secondary
   },
   onFocus: {
-    background: primLighter,
+    background: _colors["default"].dropdown.bg.active,
     '&:hover': {
-      background: primLighter
+      background: _colors["default"].dropdown.bg.active
     }
   },
   icon: {
-    marginRight: tiny,
-    position: 'absolute',
-    top: gutter
+    marginRight: _spacing["default"]['size-2']
   },
-  iconText: {
+  mainText: {
     display: 'inline-block',
-    marginLeft: base
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder']),
+    color: _colors["default"].text.corp.primary
+  },
+  corpDisabled: {
+    color: _colors["default"].text.corp.disabled
   },
   extraText: {
-    marginLeft: tiny
+    marginLeft: _spacing["default"]['size-1'],
+    display: 'inline-block',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['heading-tag']),
+    color: _colors["default"].text.indigo.primary
+  },
+  highlighted: {
+    background: _colors["default"].bg.action.secondary["default"],
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder'])
   },
-  extraTextColor: {
-    color: textLink
+  itemContainer: {
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 exports["default"] = _default;

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/Text/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.parseFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -46,6 +46,7 @@ var parseFontValue = function parseFontValue(font) {
   return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
 };
 
+exports.parseFontValue = parseFontValue;
 var _default = {
   text: {
     letterSpacing: 0,

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 () {