@occmundial/occ-atomic 1.18.4 → 1.21.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [1.21.0](https://github.com/occmundial/occ-atomic/compare/v1.20.1...v1.21.0) (2022-02-16)
+
+
+### Features
+
+* Implement babel plugin ([a73c4fe](https://github.com/occmundial/occ-atomic/commit/a73c4fe73abd82e8c159ed7b6bfae0e26ecb613b))
+
+## [1.20.1](https://github.com/occmundial/occ-atomic/compare/v1.20.0...v1.20.1) (2022-01-31)
+
+
+### Bug Fixes
+
+* Change in location icon and new locationSolid icon ([4ec15e1](https://github.com/occmundial/occ-atomic/commit/4ec15e18dabf7f23469d989d57812d45be17f5d4))
+
+# [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)
+
+
+### Features
+
+* New matchJob, cash and profileView icons ([95a0c68](https://github.com/occmundial/occ-atomic/commit/95a0c68fee7d46bd2e674c7674e59b3ebd594dbf))
+
 ## [1.18.4](https://github.com/occmundial/occ-atomic/compare/v1.18.3...v1.18.4) (2021-11-03)
 
 

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/build/plugin/babel.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var types = require('@babel/types');
+
+function error(msg) {
+  throw new Error("babel-plugin-occ-atomic: ".concat(msg));
+}
+
+function getImportsList(path) {
+  return path.node.specifiers.filter(function (specifier) {
+    if (specifier.type !== 'ImportSpecifier') {
+      error('Import entire module detected. Using this syntax means we cannot tree shake properly.');
+    } else return true;
+  });
+}
+
+function importDeclaration(specifier, path) {
+  return types.importDeclaration([specifier], types.stringLiteral(path));
+}
+
+function replaceImport(path, statements) {
+  if (statements.length > 0) {
+    path.replaceWithMultiple(statements);
+  }
+
+  return path;
+}
+
+var subatomic = ['colors', 'fonts', 'grid', 'icons', 'iconSizes', 'shadows', 'spacing'];
+
+function importModule(path) {
+  var importsList = getImportsList(path);
+  var importStatements = importsList.map(function (specifier) {
+    var importName = specifier.imported.name;
+
+    if (importName === 'toaster') {
+      return importDeclaration(specifier, '@occmundial/occ-atomic/build/Toaster/functions');
+    } else if (importName === 'Nav' || importName === 'Menu') {
+      return importDeclaration(specifier, "@occmundial/occ-atomic/build/Header/".concat(importName));
+    } else if (subatomic.includes(importName)) {
+      return importDeclaration(types.importDefaultSpecifier(types.identifier(importName)), "@occmundial/occ-atomic/build/subatomic/".concat(importName));
+    }
+
+    return importDeclaration(types.importDefaultSpecifier(types.identifier(importName)), "@occmundial/occ-atomic/build/".concat(importName));
+  });
+  replaceImport(path, importStatements);
+}
+
+module.exports = function () {
+  return {
+    visitor: {
+      ImportDeclaration: function ImportDeclaration(path) {
+        if (path.node.source.value === '@occmundial/occ-atomic') {
+          return importModule(path);
+        }
+      }
+    }
+  };
+};

package/build/subatomic/icons/cash.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+var _spacing = _interopRequireDefault(require("../spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  width: _spacing["default"].base,
+  height: _spacing["default"].base,
+  display: 'inline-block',
+  icon: function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
+    return "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(color[0], "\" fill-rule=\"evenodd\" d=\"M4 6C4 5.44772 4.44772 5 5 5H18.5C19.0523 5 19.5 5.44772 19.5 6V12.075C19.2577 12.0258 19.0068 12 18.75 12C17.3054 12 16.0516 12.8169 15.4252 14.0139C14.3321 14.1076 13.3729 14.6704 12.7497 15.5H5C4.44772 15.5 4 15.0523 4 14.5V6ZM14 17.75C14 17.0433 14.4189 16.4344 15.022 16.1582C15.1562 17.3988 15.8956 18.4579 16.9388 19.0344C16.6263 19.3237 16.2083 19.5 15.75 19.5C14.7835 19.5 14 18.7165 14 17.75ZM22.5 15.75C22.5 17.7118 20.9936 19.3217 19.0745 19.4862C18.4488 20.682 17.1959 21.5 15.75 21.5C13.6789 21.5 12 19.8211 12 17.75C12 17.666 12.0028 17.5826 12.0082 17.5H5C3.34315 17.5 2 16.1569 2 14.5V6C2 4.34315 3.34315 3 5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V13.2005C22.1206 13.8695 22.5 14.7655 22.5 15.75ZM15.2448 8.26843H18.2562V6.26843H15.2448V8.26843ZM11.75 9C11.3358 9 11 9.33579 11 9.75C11 10.1642 11.3358 10.5 11.75 10.5C12.1642 10.5 12.5 10.1642 12.5 9.75C12.5 9.33579 12.1642 9 11.75 9ZM9 9.75C9 8.23122 10.2312 7 11.75 7C13.2688 7 14.5 8.23122 14.5 9.75C14.5 11.2688 13.2688 12.5 11.75 12.5C10.2312 12.5 9 11.2688 9 9.75ZM17 15.75C17 14.7835 17.7835 14 18.75 14C19.7165 14 20.5 14.7835 20.5 15.75C20.5 16.7165 19.7165 17.5 18.75 17.5C17.7835 17.5 17 16.7165 17 15.75ZM5.26418 14.2684H8.2562V12.2684H5.26418V14.2684Z\" />\n    </svg>");
+  }
+};
+exports["default"] = _default;

package/build/subatomic/icons/location.js

@@ -17,7 +17,7 @@ var _default = {
   display: 'inline-block',
   icon: function icon() {
     var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
-    return "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n            <path fill=\"".concat(color[0], "\" d=\"M19.24,2.6A1.71,1.71,0,0,1,21,3l0,0,0,0a1.72,1.72,0,0,1,.34,1.73h0L15.07,20.41A1.67,1.67,0,0,1,13.5,21.5h-.05a1.67,1.67,0,0,1-1.58-1.17v0L10.17,14a1,1,0,0,0-.67-.68L3.75,11.77a1.63,1.63,0,0,1-.68-.37,2,2,0,0,1-.41-.54l0,0v0a1.65,1.65,0,0,1,1-2.18l15.6-6Z\"/>\n        </svg>");
+    return "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path fill=\"".concat(color[0], "\" fill-rule=\"evenodd\"\n\t\t\td=\"M19.6181 2.09917C20.1976 1.91098 20.9207 1.96873 21.4505 2.48484L21.4903 2.52359L21.5255 2.5665C21.8305 2.93788 22.1915 3.63242 21.8855 4.38224C21.885 4.38329 21.8846 4.38434 21.8842 4.38539L15.2368 20.8519C14.9746 21.573 14.2698 22 13.5791 22H13.5275C12.6346 22 12.0633 21.3686 11.8587 20.7697L11.8476 20.7372L10.0728 14.0808C9.98053 13.7346 9.71012 13.4643 9.36394 13.3721L3.3172 11.7616C3.00999 11.6838 2.76733 11.517 2.59946 11.3652C2.42359 11.2061 2.27046 11.01 2.16132 10.7974L2.14768 10.7708L2.13565 10.7434C1.71767 9.79326 2.29079 8.7748 3.16161 8.44964L19.5922 2.10756L19.6181 2.09917ZM19.8164 4.16485L4.60724 10.0355L9.87868 11.4395C10.9172 11.7161 11.7284 12.5271 12.0053 13.5655L13.6028 19.557L19.8164 4.16485Z\" />\n\t</svg>");
   }
 };
 exports["default"] = _default;

package/build/subatomic/icons/locationSolid.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+var _spacing = _interopRequireDefault(require("../spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  width: _spacing["default"].base,
+  height: _spacing["default"].base,
+  display: 'inline-block',
+  icon: function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n            <path fill=\"".concat(color[0], "\" d=\"M19.24,2.6A1.71,1.71,0,0,1,21,3l0,0,0,0a1.72,1.72,0,0,1,.34,1.73h0L15.07,20.41A1.67,1.67,0,0,1,13.5,21.5h-.05a1.67,1.67,0,0,1-1.58-1.17v0L10.17,14a1,1,0,0,0-.67-.68L3.75,11.77a1.63,1.63,0,0,1-.68-.37,2,2,0,0,1-.41-.54l0,0v0a1.65,1.65,0,0,1,1-2.18l15.6-6Z\"/>\n        </svg>");
+  }
+};
+exports["default"] = _default;

package/build/subatomic/icons/matchJob.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+var _spacing = _interopRequireDefault(require("../spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  width: _spacing["default"].base,
+  height: _spacing["default"].base,
+  display: 'inline-block',
+  icon: function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
+    return "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(color[0], "\" clip-rule=\"evenodd\" d=\"m22.072 11.855-8.011 8.301-3.588-3.018-1.277 1.52 4.296 3.611a.987.987 0 0 0 1.358-.07l8.65-8.962-1.428-1.382z\" />\n      <path fill=\"").concat(color[0], "\" clip-rule=\"evenodd\" d=\"M14.236 18.09h-.592l.336.278.256-.278zM7.896 18.775a1.23 1.23 0 0 1 .151-.674H4.262a.766.766 0 0 1-.696-.812v-4.842h5.979v1.637h1.95v-1.637h5.98v2.322l1.95-2.02v-.929c.397-.41.617-.96.615-1.532V6.015c0-.57-.22-1.12-.615-1.532a2.09 2.09 0 0 0-1.498-.627h-3.111A2.868 2.868 0 0 0 11.948 1H9.092a2.868 2.868 0 0 0-2.868 2.856H3.113a2.101 2.101 0 0 0-1.498.627A2.218 2.218 0 0 0 1 6.015v4.273c0 .57.22 1.12.615 1.532v5.469a2.705 2.705 0 0 0 2.647 2.763h4.563l-.464-.395a1.323 1.323 0 0 1-.465-.882zM9.057 2.962h2.856a.917.917 0 0 1 .918.894H8.187a.917.917 0 0 1 .905-.894h-.035zM3.02 10.451a.199.199 0 0 1-.058-.163V6.015a.197.197 0 0 1 .07-.162.105.105 0 0 1 .093 0h14.802a.139.139 0 0 1 .105 0c.027.05.035.107.023.162v4.273a.233.233 0 0 1-.058.162.14.14 0 0 1-.105 0h-6.397V8.128h-1.95v2.322H3.113a.105.105 0 0 1-.093 0z\" />\n    </svg>");
+  }
+};
+exports["default"] = _default;

package/build/subatomic/icons/profileView.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../colors"));
+
+var _spacing = _interopRequireDefault(require("../spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  width: _spacing["default"].base,
+  height: _spacing["default"].base,
+  display: 'inline-block',
+  icon: function icon() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [_colors["default"].grey900];
+    return "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"".concat(color[0], "\" fill-rule=\"evenodd\" d=\"M4.94183 4.86614C4.42808 4.91109 4.04803 5.36401 4.09298 5.87776L5.07614 17.1153C5.31589 16.4792 5.75925 15.9133 6.32898 15.46C7.27278 14.7092 8.60837 14.2157 10.2077 14.0758C11.807 13.9358 13.208 14.1899 14.2678 14.7655C14.8967 15.107 15.4242 15.5769 15.7711 16.1482L14.7907 4.94183C14.7458 4.42808 14.2928 4.04803 13.7791 4.09298L4.94183 4.86614ZM14.1693 17.6505L6.92694 18.2841L6.92605 18.274C6.8976 17.9488 7.04463 17.5031 7.60176 17.0598C8.16028 16.6155 9.08494 16.2261 10.3858 16.1123C11.6867 15.9985 12.665 16.2213 13.2922 16.562C13.9178 16.9017 14.14 17.3152 14.1684 17.6404L14.1693 17.6505ZM2.23251 6.04053C2.09767 4.49927 3.2378 3.14051 4.77906 3.00567L13.6163 2.23251C14.7212 2.13585 15.7322 2.69436 16.2659 3.58614L16.2736 3.55411L20.8133 4.64489C22.3177 5.00635 23.2442 6.51887 22.8827 8.02321L20.0467 19.8265C19.6852 21.3309 18.1727 22.2574 16.6684 21.8959L16.656 21.893L9.40688 19.9419L6.28469 20.215C4.74342 20.3499 3.38467 19.2098 3.24982 17.6685L2.23251 6.04053ZM14.8299 19.4674L17.1149 20.0824C17.613 20.1963 18.1111 19.8883 18.2308 19.3902L21.0668 7.5869C21.1873 7.08545 20.8785 6.58128 20.377 6.46079L16.7215 5.58246L17.6685 16.407C17.8033 17.9483 16.6632 19.307 15.1219 19.4419L14.8299 19.4674ZM8.53286 8.28622C8.80484 7.96208 9.19498 7.7453 9.63951 7.70641C10.084 7.66752 10.5059 7.81326 10.83 8.08524C11.1542 8.35723 11.371 8.74736 11.4099 9.1919C11.4487 9.63643 11.303 10.0583 11.031 10.3824C10.759 10.7066 10.3689 10.9233 9.92436 10.9622C9.47983 11.0011 9.05797 10.8554 8.73383 10.5834C8.40969 10.3114 8.19291 9.92128 8.15402 9.47675C8.11513 9.03221 8.26087 8.61036 8.53286 8.28622ZM9.47674 5.84593C8.51372 5.93019 7.67604 6.4019 7.10221 7.08576C6.52838 7.76963 6.20929 8.6765 6.29355 9.63952C6.3778 10.6025 6.84951 11.4402 7.53338 12.0141C8.21724 12.5879 9.12411 12.907 10.0871 12.8227C11.0501 12.7385 11.8878 12.2667 12.4617 11.5829C13.0355 10.899 13.3546 9.99215 13.2703 9.02913C13.1861 8.06611 12.7144 7.22842 12.0305 6.65459C11.3466 6.08076 10.4398 5.76168 9.47674 5.84593Z\" />\n    </svg>");
+  }
+};
+exports["default"] = _default;

package/build/subatomic/icons.js

@@ -203,6 +203,8 @@ var _book = _interopRequireDefault(require("./icons/book"));
 
 var _location = _interopRequireDefault(require("./icons/location"));
 
+var _locationSolid = _interopRequireDefault(require("./icons/locationSolid"));
+
 var _suitcase = _interopRequireDefault(require("./icons/suitcase"));
 
 var _suitcaseSolid = _interopRequireDefault(require("./icons/suitcaseSolid"));
@@ -225,6 +227,12 @@ var _warning = _interopRequireDefault(require("./icons/warning"));
 
 var _warningSolid = _interopRequireDefault(require("./icons/warningSolid"));
 
+var _matchJob = _interopRequireDefault(require("./icons/matchJob"));
+
+var _cash = _interopRequireDefault(require("./icons/cash"));
+
+var _profileView = _interopRequireDefault(require("./icons/profileView"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -337,6 +345,7 @@ var _default = {
   hourGlass: _hourGlass["default"],
   book: _book["default"],
   location: _location["default"],
+  locationSolid: _locationSolid["default"],
   suitcase: _suitcase["default"],
   suitcaseSolid: _suitcaseSolid["default"],
   profile: _profile["default"],
@@ -348,6 +357,9 @@ var _default = {
   moreOptionsHorizontal: _moreOptionsHorizontal["default"],
   warning: _warning["default"],
   warningSolid: _warningSolid["default"],
+  matchJob: _matchJob["default"],
+  cash: _cash["default"],
+  profileView: _profileView["default"],
   occatomic: {
     width: '45px',
     height: '45px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "1.18.4",
+  "version": "1.21.0",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -21,7 +21,8 @@
     "prepare": "npm run build && husky install",
     "predeploy": "npm run build:bundle",
     "deploy": "node scripts/deploy.js",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "audit-fix": "cross-env npm_config_yes=true npx yarn-audit-fix"
   },
   "repository": {
     "type": "git",
@@ -63,6 +64,7 @@
     "base64-url": "^2.2.2",
     "buffer": "^6.0.3",
     "chokidar": "^3.5.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.3.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",