@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.40

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

@@ -194,8 +194,10 @@ var Text = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           mid = _this$props2.mid,
-          low = _this$props2.low;
-      if (low) return classes.corpDisabled;else if (mid) return classes.corpSecondary;else return classes.corpPrimary;
+          low = _this$props2.low,
+          corpDisabled = _this$props2.corpDisabled,
+          corpSecondary = _this$props2.corpSecondary;
+      if (low || corpDisabled) return classes.corpDisabled;else if (mid | corpSecondary) return classes.corpSecondary;else return classes.corpPrimary;
     }
   }, {
     key: "getColor",

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;