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

package/CHANGELOG.md

@@ -1,3 +1,181 @@
+# [3.0.0-beta.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v3.0.0-beta.1) (2024-05-27)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
+# [2.0.0](https://github.com/occmundial/occ-atomic/compare/v1.39.1...v2.0.0) (2024-05-27)
+
+
+### Bug Fixes
+
+* Add exception for the provider in the babel plugin ([4383e87](https://github.com/occmundial/occ-atomic/commit/4383e876ef28bb773dca3ff9149dfe1ad7cc53a1))
+* Add missed icons ([a5527c5](https://github.com/occmundial/occ-atomic/commit/a5527c5eff5afb23c142c0b412756ee8f6a11b02))
+* Adjust icon in prev and next button ([8d78c19](https://github.com/occmundial/occ-atomic/commit/8d78c196ce2a27990084683fbeb95b0b9e49be02))
+* Adjust styles for ghostPink theme and button icons ([942a2c9](https://github.com/occmundial/occ-atomic/commit/942a2c967cea88479154a65a98f2961bfbd406ce))
+* Adjust styles for ghostPink theme and button icons ([9e2576e](https://github.com/occmundial/occ-atomic/commit/9e2576efb42856f1a91ab271ea4b823fbbfbf45d))
+* Change font tokens in Button ([7b0b47a](https://github.com/occmundial/occ-atomic/commit/7b0b47ab608530cf4fa6ea31afb2592ad70958c9))
+* Change logic to fallback legacy icons ([60f37f4](https://github.com/occmundial/occ-atomic/commit/60f37f48391713faba97f6d4f93e60519d79b348))
+* Change name of the import for AtomicProvider in babel ([d0157de](https://github.com/occmundial/occ-atomic/commit/d0157de2321bce412dc0662a98f89a6196dbc917))
+* Change tabs to spaces ([ba606c3](https://github.com/occmundial/occ-atomic/commit/ba606c3951a779fd05937fed49f785cc529cd611))
+* Change the import declaration for the provider ([4fae96e](https://github.com/occmundial/occ-atomic/commit/4fae96e40028fc5d93438f7df3fd7342c0f6392a))
+* Changed font variable to the old one ([75dc28b](https://github.com/occmundial/occ-atomic/commit/75dc28bc0bd174057449c45d4ebe79366ffc8433))
+* Fix loading icon size ([2cf2248](https://github.com/occmundial/occ-atomic/commit/2cf22486a65eb78ce9e7fb18da00a7e237fbcb55))
+* Force padding of 0 in ghostPink button ([778ef27](https://github.com/occmundial/occ-atomic/commit/778ef27301183f43ace721b625582c14c353009b))
+* Include the tokens into the build ([d3d0e1e](https://github.com/occmundial/occ-atomic/commit/d3d0e1eea096847bfcaf99d6c8f56b17d45faa5f))
+* Update design tokens ([6c96339](https://github.com/occmundial/occ-atomic/commit/6c963392e0b3af43978a5189bdbe0304e046f47c))
+* Update tip and toast icons ([07f3474](https://github.com/occmundial/occ-atomic/commit/07f347420e2f3d278274018cd9039508cbd7e504))
+
+
+### Features
+
+* Add hover shadow ([207b7a2](https://github.com/occmundial/occ-atomic/commit/207b7a2819771ff7384c7c53448f37d5dfb7e146))
+* Add logic to use atomic icons and static icons ([6fe277e](https://github.com/occmundial/occ-atomic/commit/6fe277ed83927d29af3cf06573cb6d08a0f399ab))
+* Add logic to use atomic icons and static icons ([0b9a9e4](https://github.com/occmundial/occ-atomic/commit/0b9a9e41c37a4fcff6c14c8e79da4885662ccba1))
+* Add new design tokens files ([6b8fbcf](https://github.com/occmundial/occ-atomic/commit/6b8fbcf03f272603020686e229cf3ad1bd3e3a3e))
+* Add new fab component ([2164eea](https://github.com/occmundial/occ-atomic/commit/2164eea04ed268165609db2bcd80be4dd02df6a2))
+* Add to mapped icons stars solid icon ([5c96982](https://github.com/occmundial/occ-atomic/commit/5c9698235dc690bb8e1c913cc140854fc64c530b))
+* Adds testing icon to legacy icons ([a0bca6c](https://github.com/occmundial/occ-atomic/commit/a0bca6c33f54e731b645a953499dbc5b96d03d90))
+* Change Button themes and styles ([114375d](https://github.com/occmundial/occ-atomic/commit/114375d8a7a3b56622c00416a007e52a333ed8d4))
+* Change occ logo blue color to blue token ([4b7d63d](https://github.com/occmundial/occ-atomic/commit/4b7d63d0743a8caecc019f8326733c4cf2017b2f))
+* Changed some examples with tables ([3efe252](https://github.com/occmundial/occ-atomic/commit/3efe252c3d8651976f28e951081c717861c0ad56))
+* Map arrow down to chevron down ([9bd47fa](https://github.com/occmundial/occ-atomic/commit/9bd47fab659f3f7743d6f0b6a48dc9ecf599022d))
+* Remove fab border transition ([485e64c](https://github.com/occmundial/occ-atomic/commit/485e64ca574f3300a159b8c4a5bedf11ee49b32d))
+* Remove fab border transition ([9561c59](https://github.com/occmundial/occ-atomic/commit/9561c599981f8ccfc76ccdb00b35576d01f53578))
+* Update atomic icons ([cdaa9bd](https://github.com/occmundial/occ-atomic/commit/cdaa9bda879f0d8aabe44a79cd16a0eedd3a7e8d))
+* Update fab snapshot test ([d75b525](https://github.com/occmundial/occ-atomic/commit/d75b525dd32c4f4b38cebf4f5cd8e0dd1034752e))
+* Update ghost pink loading icon ([9292276](https://github.com/occmundial/occ-atomic/commit/92922766abe7c0010b9f4f4b8265c2105c019f3c))
+* Update snapshots ([438e896](https://github.com/occmundial/occ-atomic/commit/438e8968d5d228d1b9bad3883be676fa1bc8f2b1))
+* Update snapshots ([0395996](https://github.com/occmundial/occ-atomic/commit/0395996ad4f21e6db5b917005c9ccf1c8a9dd0df))
+* Update tokens path and add outline offset ([a7e6807](https://github.com/occmundial/occ-atomic/commit/a7e6807e1936d98c8f72e483b1b131dcfa714877))
+* Update tokens path and add outline offset ([89eeb16](https://github.com/occmundial/occ-atomic/commit/89eeb16a797cb4996069f369bce34b9efb025a3d))
+* Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
+* Updated Text component documentation ([73e4b21](https://github.com/occmundial/occ-atomic/commit/73e4b21d488ba012df82d2e4fb85c18689c5d586))
+* Updated text component with new tokens ([b5f75ee](https://github.com/occmundial/occ-atomic/commit/b5f75eec430126b36c06dcd60bb320ccdf7eee0f))
+* Upgrade font tokens ([069bf92](https://github.com/occmundial/occ-atomic/commit/069bf9237f5b52492961f96f0a6f4a79469f4448))
+* Validate render icon in button logic ([c445f00](https://github.com/occmundial/occ-atomic/commit/c445f00b7f89b94c102b0e113b503d0e1a5193d4))
+* Validate render icon in button logic ([91dbc46](https://github.com/occmundial/occ-atomic/commit/91dbc464acceec6b1c7c9d2dde28976d04a5bf30))
+
+
+### BREAKING CHANGES
+
+* The themes of the Button component have changed to match the styles of the button in the new design system. The current themes have slightly different names to the new ones but they all have a corresponding new theme that matches, except for the ghostPink theme.
+
+# [2.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-05-27)
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+
+# [2.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-05-21)
+
+
+### Bug Fixes
+
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+
+# [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)
+
+
+### Bug Fixes
+
+* Adjust icon in prev and next button ([8d78c19](https://github.com/occmundial/occ-atomic/commit/8d78c196ce2a27990084683fbeb95b0b9e49be02))
+* Change tabs to spaces ([ba606c3](https://github.com/occmundial/occ-atomic/commit/ba606c3951a779fd05937fed49f785cc529cd611))
+
+# [2.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-05-10)
+
+
+### Features
+
+* Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
+
+# [2.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-05-07)
+
+
+### Features
+
+* Add hover shadow ([207b7a2](https://github.com/occmundial/occ-atomic/commit/207b7a2819771ff7384c7c53448f37d5dfb7e146))
+* Add new fab component ([2164eea](https://github.com/occmundial/occ-atomic/commit/2164eea04ed268165609db2bcd80be4dd02df6a2))
+* Remove fab border transition ([485e64c](https://github.com/occmundial/occ-atomic/commit/485e64ca574f3300a159b8c4a5bedf11ee49b32d))
+* Remove fab border transition ([9561c59](https://github.com/occmundial/occ-atomic/commit/9561c599981f8ccfc76ccdb00b35576d01f53578))
+* Update fab snapshot test ([d75b525](https://github.com/occmundial/occ-atomic/commit/d75b525dd32c4f4b38cebf4f5cd8e0dd1034752e))
+* Update ghost pink loading icon ([9292276](https://github.com/occmundial/occ-atomic/commit/92922766abe7c0010b9f4f4b8265c2105c019f3c))
+* Update snapshots ([438e896](https://github.com/occmundial/occ-atomic/commit/438e8968d5d228d1b9bad3883be676fa1bc8f2b1))
+* Update snapshots ([0395996](https://github.com/occmundial/occ-atomic/commit/0395996ad4f21e6db5b917005c9ccf1c8a9dd0df))
+* Update tokens path and add outline offset ([a7e6807](https://github.com/occmundial/occ-atomic/commit/a7e6807e1936d98c8f72e483b1b131dcfa714877))
+* Update tokens path and add outline offset ([89eeb16](https://github.com/occmundial/occ-atomic/commit/89eeb16a797cb4996069f369bce34b9efb025a3d))
+
+# [2.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-04-29)
+
+
+### Features
+
+* Map arrow down to chevron down ([9bd47fa](https://github.com/occmundial/occ-atomic/commit/9bd47fab659f3f7743d6f0b6a48dc9ecf599022d))
+
+# [2.0.0-beta.12](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2024-04-26)
+
+
+### Bug Fixes
+
+* Change name of the import for AtomicProvider in babel ([d0157de](https://github.com/occmundial/occ-atomic/commit/d0157de2321bce412dc0662a98f89a6196dbc917))
+
+# [2.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.10...v2.0.0-beta.11) (2024-04-25)
+
+
+### Bug Fixes
+
+* Update tip and toast icons ([07f3474](https://github.com/occmundial/occ-atomic/commit/07f347420e2f3d278274018cd9039508cbd7e504))
+
+# [2.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2024-04-25)
+
+
+### Bug Fixes
+
+* Change the import declaration for the provider ([4fae96e](https://github.com/occmundial/occ-atomic/commit/4fae96e40028fc5d93438f7df3fd7342c0f6392a))
+
 # [2.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2024-04-25)
 
 

package/build/Autocomplete/Autocomplete.js

@@ -243,7 +243,8 @@ Autocomplete.propTypes = {
     className: _propTypes["default"].string,
     inputClassName: _propTypes["default"].string,
     disabled: _propTypes["default"].bool,
-    testId: _propTypes["default"].string
+    testId: _propTypes["default"].string,
+    disableAutoComplete: _propTypes["default"].bool
   }).isRequired,
 
   /** Object with the props for the Droplist component. Check their descriptions in the Droplist docs. */
@@ -279,9 +280,6 @@ Autocomplete.propTypes = {
   /** Function to call on mouse down (Droplist item). */
   onMouseDown: _propTypes["default"].func,
   onRef: _propTypes["default"].func,
-
-  /**  Disables native autoComplete on browsers. */
-  disableAutoComplete: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
@@ -292,7 +290,6 @@ Autocomplete.propTypes = {
 Autocomplete.defaultProps = {
   textfieldProps: {},
   droplistProps: {},
-  disableAutoComplete: false,
   showInitialData: false
 };
 var _default = Autocomplete;

package/build/Autocomplete/Autocomplete.test.js

@@ -36,7 +36,7 @@ var items = [{
   textRight: '(6)',
   id: 4
 }];
-describe("Autocomplete", function () {
+describe('Autocomplete', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       droplistProps: {
@@ -64,7 +64,7 @@ describe("Autocomplete", function () {
     expect(wrapper.find('.input').at(0).length).toBe(1);
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
   });
-  it('hides the droplist when there\'s no value or the input has no focus', function () {
+  it("hides the droplist when there's no value or the input has no focus", function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
@@ -147,14 +147,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: 'test-component'
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
@@ -164,7 +167,9 @@ describe("Autocomplete", function () {
       focus: true,
       value: 'a'
     });
-    wrapper.find('.Droplist-item-0-1-34').at(1).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-1'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -202,14 +207,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: "test-component"
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {
@@ -247,7 +255,7 @@ describe("Autocomplete", function () {
     expect(onBlur.mock.calls.length).toBe(1);
   });
 });
-describe("AutocompleteJSS", function () {
+describe('AutocompleteJSS', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       droplistProps: {
@@ -258,7 +266,7 @@ describe("AutocompleteJSS", function () {
     expect(wrapper).toMatchSnapshot();
   });
 });
-describe("Autocomplete styles", function () {
+describe('Autocomplete styles', function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });

package/build/Autocomplete/styles.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _idx = _interopRequireDefault(require("idx"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -20,10 +18,12 @@ var _default = {
     zIndex: 2,
     top: function top(props) {
       return (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.label;
+        return _.textfieldProps.assistiveText;
       }) || (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.lockHeight;
-      }) ? _spacing["default"].xLarge : 40;
+        return _.textfieldProps.counter;
+      }) && (0, _idx["default"])(props, function (_) {
+        return _.textfieldProps.maxLength;
+      }) ? 'calc(100% - 21px)' : 'calc(100% + 8px)';
     },
     left: 0,
     width: '100%'

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/Button/__snapshots__/Button.test.js.snap

@@ -49,7 +49,7 @@ Object {
   },
   "ghostGrey": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QjtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QiIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#5A5D7B",
     },
     "& span span": Object {
       "background": [Function],
@@ -75,7 +75,7 @@ Object {
   },
   "ghostPink": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1O3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1Ii8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#f13465",
     },
     "& span span": Object {
       "background": [Function],
@@ -232,7 +232,7 @@ Object {
   },
   "secondary": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#083CAE",
     },
     "& span span": Object {
       "background": [Function],
@@ -258,7 +258,7 @@ Object {
   },
   "tertiary": Object {
     "& $loadIcon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
+      "fill": "#083CAE",
     },
     "& span span": Object {
       "background": [Function],

package/build/Button/styles.js

@@ -148,7 +148,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
+      fill: _colors2["default"].icon.brand["default"]
     }
   },
   tertiary: {
@@ -184,7 +184,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
+      fill: _colors2["default"].icon.brand["default"]
     }
   },
   tertiaryWhite: {
@@ -249,7 +249,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([sec]))
+      fill: sec
     }
   },
   ghostGrey: {
@@ -279,7 +279,7 @@ var _default = {
       }
     },
     '& $loadIcon': {
-      background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon["default"]["default"]]))
+      fill: _colors2["default"].icon["default"]["default"]
     }
   },
   ghostWhite: {

package/build/Droplist/Droplist.js

@@ -21,11 +21,9 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
 var _functions = require("./functions");
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -54,9 +52,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var arrowDown = 40;
 var arrowUp = 38;
 var enter = 13;
-var inkLighter = _colors["default"].inkLighter,
-    ink = _colors["default"].ink;
-var iconSmall = _iconSizes["default"].small;
 /**
  * The Droplist component displays a list and filters it with the prop 'term'.
  * The value of 'term' es highlighted in every item that matches.
@@ -408,7 +403,7 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
           term = _this$props5.term,
           testId = _this$props5.testId;
       var itemsDOM = items.map(function (item, i) {
-        var index = (0, _functions.compareText)(item[itemTextKey], term);
+        var index = term ? (0, _functions.compareText)(item[itemTextKey], term) : -1;
 
         if (index >= 0) {
           var text = (0, _functions.separateText)(item[itemTextKey], index, term);
@@ -423,65 +418,58 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: iconSmall,
-            height: iconSmall,
+            width: 24,
+            height: 24,
             display: "inline-block",
             className: classes.icon,
-            colors: [item.disabled ? inkLighter : ink]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            className: item.iconName ? classes.iconText : '',
-            low: item.disabled
-          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "b",
-            strong: true,
-            low: item.disabled
-          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            low: item.disabled,
-            className: "".concat(classes.extraText).concat(!item.disabled ? " ".concat(classes.extraTextColor) : '')
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement("b", {
+            className: "".concat(classes.highlighted).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         } else {
           return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
-            onClick: function onClick(e) {
+            onClick: !item.disabled ? function (e) {
               return _this4.onClick(item, e);
-            },
+            } : null,
             onMouseDown: function onMouseDown(e) {
               return _this4.onMouseDown(item, e);
             },
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: 14,
-            height: 14,
+            width: 24,
+            height: 24,
             display: "inline-block",
-            colors: [inkLighter]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            className: classes.extraText
+            className: classes.icon,
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText)
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         }
       });
       return itemsDOM;
@@ -510,11 +498,11 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
       }, groups ? items.map(function (group, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: group[groupIdKey]
-        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-          small: true,
-          mid: true,
+        }, /*#__PURE__*/_react["default"].createElement("span", {
           className: classes.group
-        }, group[groupNameKey].toUpperCase()), _this5.renderList(group[groupItemsKey], currentGroup === index));
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          className: "".concat(classes.text, " ").concat(classes.groupText)
+        }, group[groupNameKey])), _this5.renderList(group[groupItemsKey], currentGroup === index));
       }) : this.renderList(items, true));
     }
   }]);

package/build/Droplist/Droplist.test.js

@@ -119,7 +119,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.block>div').at(0).text()).toBe('PAÍSESMéxico(3405)');
+    expect(wrapper.find('.block>div').at(0).text()).toBe('PaísesMéxico(3405)');
   });
   it('filters the items', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
@@ -151,7 +151,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.item').at(0).find('b').text()).toBe('');
+    expect(wrapper.find('.item').at(0).find('b').exists()).toBe(false);
     wrapper.setProps({
       term: 'Administrador'
     });