@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.70

package/build/Tabs/index.test.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ = _interopRequireDefault(require("./"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _context = require("./context");
+
+var _Tab = _interopRequireDefault(require("./Tab"));
+
+var _TabContent = _interopRequireDefault(require("./TabContent"));
+
+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 reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('Tab', function () {
+  global.ResizeObserver = jest.fn().mockImplementation(function () {
+    return {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    };
+  });
+  it('should throw an error', function () {
+    expect(function () {
+      return (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+        classes: classes,
+        size: "large"
+      }, "Pruebas"));
+    }).toThrow('useTabsContext must be used within a TabsProvider');
+  });
+  it('should not render text child', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, "Tab prueba")));
+    expect(wrapper.find('Tab prueba').length).toBe(0);
+  });
+  it('should render tabs children', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Tab prueba"))));
+    expect(wrapper.find({
+      children: 'Tab prueba'
+    }).length).toBe(1);
+  });
+  it('should be selected the first child', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    }))));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+  });
+  it('should be displayed the first child content', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    })), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 0,
+      testId: "tab-content-1"
+    }, "Tab child 1 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 1,
+      testId: "tab-content-2"
+    }, "Tab child 2 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 2,
+      testId: "tab-content-3"
+    }, "Tab child 3 content")));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-2'
+    }).prop('className')).not.toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).prop('className')).not.toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-1'
+    }).prop('className')).not.toContain('hide');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-2'
+    }).prop('className')).toContain('hide');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-3'
+    }).prop('className')).toContain('hide');
+  });
+  it('should display content on click', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    })), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 0,
+      testId: "tab-content-1"
+    }, "Tab child 1 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 1,
+      testId: "tab-content-2"
+    }, "Tab child 2 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 2,
+      testId: "tab-content-3"
+    }, "Tab child 3 content")));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-1'
+    }).prop('className')).not.toContain('hide');
+    wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).simulate('click');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-3'
+    }).prop('className')).not.toContain('hide');
+  });
+});

package/build/Tabs/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  container: {
+    display: 'flex',
+    position: 'relative',
+    overflowX: 'auto',
+    boxShadow: 'inset 0 -1px 0px 0px #EDEDF1',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    scrollbarWidth: 'none'
+  }
+};
+exports["default"] = _default;

package/build/Tag/Tag.js

@@ -36,9 +36,9 @@ var Tag = function Tag(_ref) {
     alignItems: "center",
     wrap: "noWrap"
   }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.icon, " ").concat(size ? classes["".concat(size, "Icon")] : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
+    className: "".concat(classes.icon, " ").concat(size === 'big' ? classes.bigIcon : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.tagText, " ").concat(size ? classes["".concat(size, "TagText")] : classes.standardTagText)
+    className: classes.tagText
   }, children)));
 };
 

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

@@ -12,19 +12,15 @@ Object {
     "background": [Function],
   },
   "big": Object {
-    "borderRadius": 32,
-    "height": 40,
+    "minHeight": "32px",
     "padding": Array [
-      8,
-      16,
+      "8px",
+      "16px",
     ],
   },
   "bigIcon": Object {
-    "height": 18,
-    "width": 18,
-  },
-  "bigTagText": Object {
-    "fontSize": 16,
+    "height": "16px",
+    "width": "16px",
   },
   "default": Object {
     "background": "#f5f5f5",
@@ -34,23 +30,33 @@ Object {
     "background": [Function],
   },
   "error": Object {
-    "background": "#fcebeb",
-    "color": "#db3737",
+    "background": "#fce8e8",
+    "boxShadow": "inset 0px 0px 0px 1px #FBDFDF",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "background": [Function],
   },
+  "featured": Object {
+    "background": "#0059CD",
+    "boxShadow": "inset 0px 0px 0px 1px rgba(255,255,255,0.2)",
+    "color": "#fff",
+  },
+  "featuredIcon": Object {
+    "background": [Function],
+  },
   "icon": Object {
     "backgroundRepeat": "no-repeat",
     "content": "\\"\\"",
     "display": "inline-block",
     "left": 0,
-    "marginRight": 4,
+    "marginRight": "4px",
     "paddingBottom": 0,
   },
   "info": Object {
-    "backgroundColor": "#efebf7",
-    "color": "#5736ab",
+    "background": "#e3efff",
+    "boxShadow": "inset 0px 0px 0px 1px #b9d7ff",
+    "color": "#083CAE",
   },
   "infoIcon": Object {
     "background": [Function],
@@ -63,46 +69,39 @@ Object {
     "background": [Function],
   },
   "medium": Object {
-    "height": 32,
     "padding": Array [
-      5,
-      12,
-      7,
-      12,
+      "8px",
+      "12px",
     ],
   },
-  "mediumIcon": Object {
-    "height": 18,
-    "width": 18,
+  "promo": Object {
+    "background": "#080D39",
+    "boxShadow": "inset 0px 0px 0px 1px rgba(255,255,255,0.2)",
+    "color": "#fff",
   },
-  "mediumTagText": Object {
-    "fontSize": 16,
+  "promoIcon": Object {
+    "background": [Function],
   },
   "standard": Object {
-    "height": 16,
     "padding": Array [
-      1,
-      8,
-      3,
-      8,
+      "2px",
+      "8px",
     ],
   },
   "standardIcon": Object {
-    "height": 12,
-    "width": 12,
-  },
-  "standardTagText": Object {
-    "fontSize": 10,
+    "height": "12px",
+    "width": "12px",
   },
   "success": Object {
-    "background": "#e6f5eb",
-    "color": "#009537",
+    "background": "#ebfbf1",
+    "boxShadow": "inset 0px 0px 0px 1px #d7f6e3",
+    "color": "#16542e",
   },
   "successIcon": Object {
     "background": [Function],
   },
   "tag": Object {
-    "borderRadius": 16,
+    "borderRadius": "9999px",
     "boxSizing": "border-box",
     "display": "inline-block",
     "lineHeight": "12px",
@@ -113,20 +112,18 @@ Object {
   "tagText": Object {
     "boxSizing": "border-box",
     "display": "inline-block",
-    "fontFamily": "'OccText', sans-serif",
+    "font": "400 10px/1.5 'OccText', sans-serif",
     "fontStretch": "normal",
     "fontStyle": "normal",
-    "fontWeight": "400",
     "letterSpacing": "normal",
-    "lineHeight": 1.5,
     "overflow": "hidden",
-    "paddingRight": [Function],
     "position": "relative",
     "textAlign": "center",
   },
   "warning": Object {
-    "background": "#fffaed",
-    "color": "#e69000",
+    "background": "#fff8e9",
+    "boxShadow": "inset 0px 0px 0px 1px #fff1d3",
+    "color": "#664a0e",
   },
   "warningIcon": Object {
     "background": [Function],

package/build/Tag/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -11,87 +11,61 @@ var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
 var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var infoLight = _colors["default"].infoLight,
-    infoText = _colors["default"].infoText,
-    successLight = _colors["default"].successLight,
-    successText = _colors["default"].successText,
-    warningLight = _colors["default"].warningLight,
-    warningText = _colors["default"].warningText,
-    errorLight = _colors["default"].errorLight,
-    errorText = _colors["default"].errorText,
-    grey900 = _colors["default"].grey900,
+var tag = _colors2["default"].tag,
+    text = _colors2["default"].text,
+    icon = _colors2["default"].icon;
+
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
+var grey900 = _colors["default"].grey900,
     grey100 = _colors["default"].grey100,
     textLink = _colors["default"].textLink,
     bgWhite = _colors["default"].bgWhite;
-var xTiny = _spacing["default"].xTiny,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    gutter = _spacing["default"].gutter,
-    medium = _spacing["default"].medium;
-var smallIcon = _iconSizes["default"].small;
-var paddingStandardTag = [1, tiny, 3, tiny],
-    paddingMediumTag = [5, gutter, 7, gutter],
-    paddingBigTag = [tiny, small],
-    tagTextLineHeight = 1.5,
-    tagTextStandardSize = 10,
-    tagTextMediumSize = 16,
-    tagTextBigSize = 16,
-    bigTagHeight = 40;
 var _default = {
   tag: {
     boxSizing: 'border-box',
     lineHeight: '12px',
     textAlign: 'center',
-    borderRadius: small,
+    borderRadius: _borderRadius["default"]['br-full'],
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block'
   },
   standard: {
-    padding: paddingStandardTag,
-    height: small
+    padding: [_spacing["default"]['size-0'], _spacing["default"]['size-2']]
   },
   medium: {
-    padding: paddingMediumTag,
-    height: medium
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-3']]
   },
   big: {
-    padding: paddingBigTag,
-    height: bigTagHeight,
-    borderRadius: medium
+    minHeight: _spacing["default"]['size-6'],
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']]
   },
   tagText: {
     boxSizing: 'border-box',
-    fontFamily: _fonts["default"].body,
-    fontWeight: '400',
+    font: objectToFontValue(_fonts2["default"]['heading-tag']),
     fontStyle: 'normal',
     fontStretch: 'normal',
     letterSpacing: 'normal',
     textAlign: 'center',
     position: 'relative',
     overflow: 'hidden',
-    display: 'inline-block',
-    lineHeight: tagTextLineHeight,
-    paddingRight: function paddingRight(props) {
-      return props.iconName ? xTiny : 0;
-    }
-  },
-  standardTagText: {
-    fontSize: tagTextStandardSize
-  },
-  mediumTagText: {
-    fontSize: tagTextMediumSize
-  },
-  bigTagText: {
-    fontSize: tagTextBigSize
+    display: 'inline-block'
   },
   "default": {
     color: grey900,
@@ -101,47 +75,57 @@ var _default = {
     color: grey900,
     background: bgWhite
   },
-  info: {
-    color: infoText,
-    backgroundColor: infoLight
+  link: {
+    color: textLink,
+    background: (0, _hexRgba["default"])(textLink, 10)
+  },
+  featured: {
+    color: text.white.primary,
+    background: tag.featured.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.featured.border)
+  },
+  promo: {
+    color: text.white.primary,
+    background: tag.promo.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.promo.border)
   },
   success: {
-    color: successText,
-    background: successLight
+    color: text.success,
+    background: tag.success.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.success.border)
+  },
+  info: {
+    color: text.indigo.primary,
+    background: tag.info.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.info.border)
   },
   warning: {
-    color: warningText,
-    background: warningLight
+    color: text.warning,
+    background: tag.warning.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.warning.border)
   },
   error: {
-    color: errorText,
-    background: errorLight
-  },
-  link: {
-    color: textLink,
-    background: (0, _hexRgba["default"])(textLink, 10)
+    color: text.error,
+    background: tag.error.bg,
+    boxShadow: "inset 0px 0px 0px 1px ".concat(tag.error.border)
   },
 
   /* Icon with themes */
   icon: {
     display: 'inline-block',
-    marginRight: xTiny,
+    marginRight: _spacing["default"]['size-1'],
     content: '""',
     paddingBottom: 0,
     left: 0,
     backgroundRepeat: 'no-repeat'
   },
   standardIcon: {
-    width: gutter,
-    height: gutter
-  },
-  mediumIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-3'],
+    height: _spacing["default"]['size-3']
   },
   bigIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-4'],
+    height: _spacing["default"]['size-4']
   },
   defaultIcon: {
     background: function background(props) {
@@ -153,29 +137,39 @@ var _default = {
       return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([grey900])) : '';
     }
   },
-  infoIcon: {
+  linkIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+    }
+  },
+  featuredIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([infoText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
+    }
+  },
+  promoIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
     }
   },
   successIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([successText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.success])) : '';
     }
   },
-  warningIcon: {
+  infoIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([warningText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.brand.bold])) : '';
     }
   },
-  errorIcon: {
+  warningIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([errorText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.warning])) : '';
     }
   },
-  linkIcon: {
+  errorIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.error])) : '';
     }
   }
 };

package/build/Text/Text.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.oldToNewClassMapper = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -77,6 +77,7 @@ var oldToNewClassMapper = {
   bottomLarge: 'bottom8',
   bottomXLarge: 'bottom9'
 };
+exports.oldToNewClassMapper = oldToNewClassMapper;
 
 var getActiveKey = function getActiveKey(array) {
   var _iterator = _createForOfIteratorHelper(array),

package/build/TextField/TextField.js

@@ -338,7 +338,9 @@ var TextField = /*#__PURE__*/function (_React$Component) {
           className: classes.rightButton
         });
       } else if (type == 'select') {
-        element = /*#__PURE__*/_react["default"].createElement(InputType, commonProps, /*#__PURE__*/_react["default"].createElement("option", {
+        element = /*#__PURE__*/_react["default"].createElement(InputType, _extends({}, commonProps, {
+          className: "".concat(commonProps.className, " ").concat(classes.pointer)
+        }), /*#__PURE__*/_react["default"].createElement("option", {
           value: "",
           disabled: true,
           hidden: true
@@ -410,14 +412,13 @@ var TextField = /*#__PURE__*/function (_React$Component) {
         height: 24,
         className: classes.icon,
         colors: [this.setIconColor()]
-      }), type == 'select' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.selectIcon
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }), type == 'select' && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "chevron-down",
         width: 24,
         height: 24,
-        colors: disabled ? [_colors["default"].icon["default"].disabled] : [_colors["default"].icon["default"]["default"]]
-      })), element, type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+        colors: disabled ? [_colors["default"].icon["default"].disabled] : [_colors["default"].icon["default"]["default"]],
+        className: classes.selectIcon
+      }), element, type == 'password' && passIcon, value && clear && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         icon: "x",
         theme: "ghostGrey",
         size: "md",

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

@@ -115,6 +115,9 @@ Object {
     "color": "#080D39",
     "font": "400 14px/1.5 'OccText', sans-serif",
   },
+  "pointer": Object {
+    "cursor": "pointer",
+  },
   "rightButton": Object {
     "position": "absolute",
     "right": "4px",

package/build/TextField/styles.js

@@ -191,6 +191,9 @@ var _default = {
     display: 'flex',
     justifyContent: 'space-between',
     marginTop: _spacing["default"]['size-2']
+  },
+  pointer: {
+    cursor: 'pointer'
   }
 };
 exports["default"] = _default;