@occmundial/occ-atomic 1.21.3 → 1.22.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.22.1](https://github.com/occmundial/occ-atomic/compare/v1.22.0...v1.22.1) (2022-11-10)
+
+
+### Bug Fixes
+
+* Add testid in render props ([d55d31e](https://github.com/occmundial/occ-atomic/commit/d55d31e737799916afe9705239fb48b9a840654b))
+* Indentation navicon ([0d98ca6](https://github.com/occmundial/occ-atomic/commit/0d98ca68b4ca7c67155a04acaf8f80f8318954a2))
+
+# [1.22.0](https://github.com/occmundial/occ-atomic/compare/v1.21.3...v1.22.0) (2022-11-09)
+
+
+### Bug Fixes
+
+* Indentation tabs to spaces ([bf7bdf8](https://github.com/occmundial/occ-atomic/commit/bf7bdf82ef1cf5b69ad46d5c6e1eae01f0544a02))
+* Remove unnecessary classname in droplist ([6f6bd6a](https://github.com/occmundial/occ-atomic/commit/6f6bd6ad6f9fed0d534f9d30ff748ac1b6e5d866))
+
+
+### Features
+
+* Add testid prop to button, modal and textfield ([86a8155](https://github.com/occmundial/occ-atomic/commit/86a8155ff1ae202c88bc558502912968ebe8a04a))
+* Add testid prop to checkbox, droplist and navitem/icon/tab ([7087d67](https://github.com/occmundial/occ-atomic/commit/7087d67e1977167a384a366cb11036919b3c9572))
+
 ## [1.21.3](https://github.com/occmundial/occ-atomic/compare/v1.21.2...v1.21.3) (2022-08-23)
 
 

package/build/Autocomplete/Autocomplete.js

@@ -242,7 +242,8 @@ Autocomplete.propTypes = {
     valueProp: _propTypes["default"].string,
     className: _propTypes["default"].string,
     inputClassName: _propTypes["default"].string,
-    disabled: _propTypes["default"].bool
+    disabled: _propTypes["default"].bool,
+    testId: _propTypes["default"].string
   }).isRequired,
 
   /** Object with the props for the Droplist component. Check their descriptions in the Droplist docs. */
@@ -256,7 +257,8 @@ Autocomplete.propTypes = {
     groupNameKey: _propTypes["default"].string,
     groupItemsKey: _propTypes["default"].string,
     className: _propTypes["default"].string,
-    filter: _propTypes["default"].bool
+    filter: _propTypes["default"].bool,
+    testId: _propTypes["default"].string
   }).isRequired,
 
   /** Function to call on change (TextField). */

package/build/Button/Button.js

@@ -69,7 +69,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
           iconRight = _this$props.iconRight,
           round = _this$props.round,
           style = _this$props.style,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          testId = _this$props.testId;
       var classNames = classes.btn;
       if (theme) classNames += " ".concat(classes[theme]);
       if (loading) classNames += " ".concat(classes.loading);
@@ -105,14 +106,16 @@ var Button = /*#__PURE__*/function (_React$Component) {
           rel: rel,
           onClick: !disabled ? onClick : null,
           id: id,
-          style: style
+          style: style,
+          "data-testid": testId
         }, content, loadingLayer);
       } else {
         return /*#__PURE__*/_react["default"].createElement("button", {
           className: classNames,
           onClick: !disabled ? onClick : null,
           id: id,
-          style: style
+          style: style,
+          "data-testid": testId
         }, content, loadingLayer);
       }
     }
@@ -168,7 +171,10 @@ Button.propTypes = {
   rel: _propTypes["default"].string,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Button;
 exports["default"] = _default;

package/build/Checkbox/Checkbox.js

@@ -15,6 +15,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 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); } }
@@ -94,14 +96,18 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           id = _this$props2.id,
           className = _this$props2.className,
           style = _this$props2.style,
-          trk = _this$props2.trk;
+          trk = _this$props2.trk,
+          testId = _this$props2.testId;
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: style,
+        "data-testid": testId
+      }, testId && {
+        'data-value': value ? 1 : 0
+      }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.check,
         id: trk
       }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
@@ -146,7 +152,10 @@ Checkbox.propTypes = {
   trk: _propTypes["default"].string,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Checkbox;
 exports["default"] = _default;

package/build/Droplist/Droplist.js

@@ -29,6 +29,8 @@ var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
 
 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); } }
@@ -403,13 +405,14 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
           itemIdKey = _this$props5.itemIdKey,
           itemTextKey = _this$props5.itemTextKey,
           itemTextRightKey = _this$props5.itemTextRightKey,
-          term = _this$props5.term;
+          term = _this$props5.term,
+          testId = _this$props5.testId;
       var itemsDOM = items.map(function (item, i) {
         var index = (0, _functions.compareText)(item[itemTextKey], term);
 
         if (index >= 0) {
           var text = (0, _functions.separateText)(item[itemTextKey], index, term);
-          return /*#__PURE__*/_react["default"].createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
             onClick: !item.disabled ? function (e) {
               return _this4.onClick(item, e);
@@ -421,7 +424,9 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
               return _this4.onMouseUp(item, e);
             },
             className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
-          }, /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(item[itemIdKey])
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
             width: iconSmall,
             height: iconSmall,
@@ -447,7 +452,7 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
             low: true
           }, item[itemTextRightKey])));
         } else {
-          return /*#__PURE__*/_react["default"].createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
             onClick: function onClick(e) {
               return _this4.onClick(item, e);
@@ -459,12 +464,13 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
               return _this4.onMouseUp(item, e);
             },
             className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
-          }, /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }, testId && {
+            'data-testid': "".concat(testId, "__droplist-item-").concat(item[itemIdKey])
+          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
             width: 14,
             height: 14,
             display: "inline-block",
-            className: classes.dsfsdf,
             colors: [inkLighter]
           }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
             tag: "span",
@@ -576,7 +582,10 @@ Droplist.propTypes = {
   isOnFocus: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Droplist;
 exports["default"] = _default;

package/build/Modal/Modal.js

@@ -27,6 +27,8 @@ var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
 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); } }
@@ -50,8 +52,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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; }
 
 /**
-* The Modal component is rendered in any given container, avoiding z-index an position conflicts. Your application must have the logic to show or hide the Modal component.
-*/
+ * The Modal component is rendered in any given container, avoiding z-index an position conflicts. Your application must have the logic to show or hide the Modal component.
+ */
 var Modal = /*#__PURE__*/function (_React$Component) {
   _inherits(Modal, _React$Component);
 
@@ -118,11 +120,14 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           imgTop = _this$props.imgTop,
           imgLeft = _this$props.imgLeft,
           onTransitionEnd = _this$props.onTransitionEnd,
-          fullSize = _this$props.fullSize;
+          fullSize = _this$props.fullSize,
+          testId = _this$props.testId;
 
-      var closeButton = /*#__PURE__*/_react["default"].createElement("div", {
+      var closeButton = /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: classes.closeIcon
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, testId && {
+        'data-testid': "".concat(testId, "__container-close-icon")
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "close",
         width: 24,
         height: 24,
@@ -173,7 +178,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         className: classes.content
       }, children), mainBtn && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
-      }, secBtn && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, secBtn && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         theme: "ghostGrey",
         className: classes.secBtn,
         onClick: secBtn.onClick,
@@ -182,7 +187,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         loading: secBtn.loading,
         disabled: secBtn.disabled,
         id: secBtn.id
-      }, secBtn.text), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, testId && {
+        'data-testid': "".concat(testId, "__button_secondary")
+      }), secBtn.text), /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         className: classes.mainBtn,
         onClick: mainBtn.onClick,
         href: mainBtn.href,
@@ -190,7 +197,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         loading: mainBtn.loading,
         disabled: mainBtn.disabled,
         id: mainBtn.id
-      }, mainBtn.text))))))));
+      }, testId && {
+        'data-testid': "".concat(testId, "__button_main")
+      }), mainBtn.text))))))));
     }
   }]);
 
@@ -263,7 +272,10 @@ Modal.propTypes = {
   onTransitionEnd: _propTypes["default"].func,
 
   /** Boolean value to make full size the Modal component in mobile size. */
-  fullSize: _propTypes["default"].bool
+  fullSize: _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
 };
 var _default = Modal;
 exports["default"] = _default;

package/build/NavIcon/NavIcon.js

@@ -57,10 +57,12 @@ var NavIcon = /*#__PURE__*/function (_React$Component) {
           label = _this$props.label,
           onClick = _this$props.onClick,
           direction = _this$props.direction,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
-        onClick: onClick
+        onClick: onClick,
+        "data-testid": testId
       }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         direction: direction,
@@ -89,7 +91,10 @@ NavIcon.propTypes = {
   width: _propTypes["default"].number,
   showBar: _propTypes["default"].bool,
   direction: _propTypes["default"].oneOf(['col', 'row']),
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = NavIcon;
 exports["default"] = _default;

package/build/NavItem/NavItem.js

@@ -64,14 +64,17 @@ var NavItem = /*#__PURE__*/function (_React$Component) {
           notification = _this$props.notification,
           white = _this$props.white,
           small = _this$props.small,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId;
       var AnchorTag = customComponent ? customComponent : 'a';
       return /*#__PURE__*/_react["default"].createElement(AnchorTag, _extends({
         className: "".concat(classes.link).concat(className ? " ".concat(className) : ''),
         href: !selected ? link : null,
         onClick: !selected ? onClick : null,
         target: target
-      }, customComponent && customProps), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      }, customComponent && customProps, {
+        "data-testid": testId
+      }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "span",
         white: white,
         small: small,
@@ -115,7 +118,10 @@ NavItem.propTypes = {
 
   /** Custom properties to apply directly to the custom component. */
   customProps: _propTypes["default"].object,
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = NavItem;
 exports["default"] = _default;

package/build/NavTab/NavTab.js

@@ -266,7 +266,8 @@ var positionPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].shap
   link: _propTypes["default"].string,
   theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
   iconName: _propTypes["default"].string,
-  custom: _propTypes["default"].node
+  custom: _propTypes["default"].node,
+  testId: _propTypes["default"].string
 }));
 
 NavTab.propTypes = {

package/build/TextField/TextField.js

@@ -230,9 +230,9 @@ var TextField = /*#__PURE__*/function (_React$Component) {
       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 (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 += " ".concat(inputClassName);
       return className;
@@ -293,9 +293,10 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           inputMode = _this$props9.inputMode,
           disableAutoComplete = _this$props9.disableAutoComplete,
           pattern = _this$props9.pattern,
-          searchField = _this$props9.searchField;
+          searchField = _this$props9.searchField,
+          testId = _this$props9.testId;
       var realStatus = status;
-      var InputType = type == "select" ? "select" : type == "textarea" ? "textarea" : "input";
+      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';
       var element, passIcon;
@@ -315,11 +316,12 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         },
         required: required,
         pattern: pattern,
-        inputMode: inputMode
+        inputMode: inputMode,
+        'data-testid': testId
       };
 
       if (disabled) {
-        if (type == "select") {
+        if (type == 'select') {
           var selectedOption = options.filter(function (option) {
             return option.value == value;
           });
@@ -350,7 +352,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           height: _iconSizes["default"].small,
           colors: [_colors["default"].grey200]
         }));
-      } else if (type == "select") {
+      } else if (type == 'select') {
         element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
           value: "",
           disabled: true,
@@ -362,18 +364,22 @@ var TextField = /*#__PURE__*/function (_React$Component) {
               label: item.label,
               disabled: item.disabled
             }, item.options.map(function (option) {
-              return /*#__PURE__*/_react["default"].createElement("option", {
+              return /*#__PURE__*/_react["default"].createElement("option", _extends({
                 key: option.value,
                 value: option.value,
                 disabled: option.disabled
-              }, option.label);
+              }, testId && {
+                'data-testid': "".concat(testId, "__item-").concat(item.value)
+              }), option.label);
             }));
           } else {
-            return /*#__PURE__*/_react["default"].createElement("option", {
+            return /*#__PURE__*/_react["default"].createElement("option", _extends({
               key: item.value,
               value: item.value,
               disabled: item.disabled
-            }, item.label);
+            }, testId && {
+              'data-testid': "".concat(testId, "__item-").concat(item.value)
+            }), item.label);
           }
         }));
       } else if (mask) {
@@ -399,7 +405,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           onMouseOut: this.outOfPassIcon,
           className: classes.passIcon
         }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-          iconName: showPass ? "eye" : "eyeClosed",
+          iconName: showPass ? 'eye' : 'eyeClosed',
           width: _iconSizes["default"].small,
           height: _iconSizes["default"].small,
           colors: showPass ? [_colors["default"].grey900] : [_colors["default"].grey400]
@@ -428,10 +434,12 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         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", {
+      })), type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement("div", _extends({
         onClick: this.onClear,
         className: classes.clear
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, testId && {
+        'data-testid': "".concat(testId, "__container-close-icon")
+      }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "close",
         width: _iconSizes["default"].small,
         height: _iconSizes["default"].small
@@ -444,7 +452,7 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         width: _iconSizes["default"].tiny,
         height: _iconSizes["default"].tiny,
         className: classes.errorIcon
-      }) : null, " ", assistiveText), counter && maxLength && /*#__PURE__*/_react["default"].createElement("label", {
+      }) : null, ' ', assistiveText), counter && maxLength && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.right, " ").concat(classes.counter)
       }, value.length, " / ", maxLength)));
     }
@@ -576,7 +584,10 @@ TextField.propTypes = {
   pattern: _propTypes["default"].string,
 
   /** Size of the TextField. */
-  searchField: _propTypes["default"].bool
+  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
 };
 var _default = TextField;
 exports["default"] = _default;

package/package.json

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