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

package/build/Checkbox/styles.js

@@ -5,20 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var checkbox = _colors["default"].checkbox,
+    icon = _colors["default"].icon;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
@@ -29,30 +33,46 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:hover $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].grey200]))
+    '&:focus $check:before': {
+      boxShadow: _shadows["default"]['focus-bright-blue'],
+      borderWidth: 1
+    },
+    '&$active, &$undetermined': {
+      '&:hover $check:before, &:active $check:before': {
+        background: checkbox['selected']['bg']['hover']
+      }
+    },
+    '&:not($active), &:not($undetermined)': {
+      '&:hover $check:before, &:active $check:before': {
+        borderColor: checkbox['unselected']['border']['hover']
+      },
+      '&:active $check:before': {
+        borderWidth: 2
+      }
     }
   },
   check: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
     position: 'relative',
     '&:before': {
       content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
-      borderRadius: 4,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
+      borderRadius: _borderRadius["default"]['br-xs'],
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
+      border: "1px solid ".concat(checkbox['unselected']['border']['default']),
+      background: checkbox['unselected']['bg']['default']
     },
     '&:after': {
       content: '""',
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
       marginTop: -1,
       position: 'absolute',
       top: '50%',
@@ -64,27 +84,52 @@ var _default = {
   },
   active: {
     '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].check.icon([_colors["default"].prim])), '!important']
+      background: _icons["default"].base(_icons["default"].check.icon([icon['inverse']['default']]))
+    },
+    '& $check:before': {
+      borderColor: checkbox['selected']['border']['default'],
+      background: checkbox['selected']['bg']['default']
     }
   },
   undetermined: {
+    '& $check:before': {
+      borderColor: checkbox['selected']['border']['default'],
+      background: checkbox['selected']['bg']['default']
+    },
     '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].minus.icon([_colors["default"].prim])), '!important'],
+      background: _icons["default"].base(_icons["default"].minus.icon([icon['inverse']['default']])),
       marginTop: 0
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '&$active, &$undetermined': {
+      '& $check:before': {
+        borderColor: checkbox['selected']['border']['default'],
+        background: checkbox['selected']['bg']['disabled']
+      }
+    },
+    '&$undetermined $check:after': {
+      background: _icons["default"].base(_icons["default"].minus.icon([icon['brand']['disabled']]))
+    },
+    '&$active $check:after': {
+      background: _icons["default"].base(_icons["default"].check.icon([icon['brand']['disabled']]))
+    },
+    '&:not($active), &:not($undetermined)': {
+      '& $check:before': {
+        borderColor: checkbox['unselected']['border']['default'],
+        background: checkbox['unselected']['bg']['disabled']
+      }
+    }
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     cursor: 'pointer',
     "float": 'left',
     flex: '1'
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     "float": 'right'
   },
   overflow: {

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'
     });

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

@@ -5,59 +5,91 @@ exports[`Droplist matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Droplist styles matches the snapshot 1`] = `
 Object {
   "block": Object {
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
+    "background": "#fff",
+    "border": "1px solid #D3D4DC",
+    "borderRadius": "4px",
+    "boxShadow": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
     "overflow": "hidden",
+    "padding": "8px",
   },
-  "extraText": Object {
-    "marginLeft": 8,
+  "corpDisabled": Object {
+    "color": "#878A9F",
   },
-  "extraTextColor": Object {
-    "color": "#0946CB",
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "extraText": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 10px/1.5 'OccText', sans-serif",
+    "marginLeft": "4px",
   },
   "group": Object {
+    "display": "inline-block",
     "padding": Array [
-      16,
-      16,
-      4,
+      "8px",
+      "16px",
+      0,
     ],
   },
-  "icon": Object {
-    "marginRight": 8,
-    "position": "absolute",
-    "top": 12,
+  "groupText": Object {
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "iconText": Object {
-    "display": "inline-block",
-    "marginLeft": 24,
+  "highlighted": Object {
+    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
+  "icon": Object {
+    "marginRight": "8px",
   },
   "item": Object {
+    "&:active, &:focus": Object {
+      "& > $rightText": Object {
+        "color": "#080D39",
+      },
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#fafafa",
+      "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
+    "alignItems": "center",
+    "borderRadius": "4px",
     "display": "flex",
     "justifyContent": "space-between",
     "padding": Array [
-      8,
-      16,
+      "12px",
+      "16px",
     ],
     "position": "relative",
     "transition": "0.1s all",
   },
+  "itemContainer": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "itemPointer": Object {
     "cursor": "pointer",
   },
+  "mainText": Object {
+    "color": "#080D39",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "#e4edff",
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "background": "#e4edff",
+    "background": "hsl(221 91.2% 35.7% / 0.1)",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 16,
-    "transition": "0.1s all",
+    "marginLeft": "16px",
+  },
+  "rightText": Object {
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+  },
+  "text": Object {
+    "margin": 0,
   },
 }
 `;

package/build/Droplist/styles.js

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

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

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