anchor-ui - npm Package Compare versions

Comparing version 1.8.3 to 1.8.4

dist/components/badge.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _badges = require('../style/badges');
@@ -32,2 +36,4 @@
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,14 +48,30 @@
 
-  function Badge(props) {
+  function Badge(props, context) {
     _classCallCheck(this, Badge);
 
-    var _this = _possibleConstructorReturn(this, (Badge.__proto__ || Object.getPrototypeOf(Badge)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Badge.__proto__ || Object.getPrototypeOf(Badge)).call(this, props, context));
 
     var classes = props.sheet.classes,
         style = props.style;
+    var color = context.color;
 
+
+    var themeStyle = {
+      button: {
+        backgroundColor: color
+      },
+      inverted: {
+        color: color,
+        backgroundColor: _colors2.default.white
+      }
+    };
+
     var className = (0, _getClassNames2.default)(classes, style, 'badge', 'Badge');
+    var themeClassName = (0, _getClassNames2.default)(classes, themeStyle.button, 'theme', 'Badge');
+    var invertedClassName = (0, _getClassNames2.default)(classes, themeStyle.inverted, 'theme', 'Badge');
 
     _this.state = {
-      className: className
+      className: className,
+      themeClassName: themeClassName,
+      invertedClassName: invertedClassName
     };
@@ -62,11 +84,18 @@ return _this;
     value: function render() {
-      var content = this.props.content;
-      var className = this.state.className;
-      var color = this.color.color;
+      var _classNames;
 
-      var backgroundColor = color || _colors2.default.theme;
+      var _props = this.props,
+          content = _props.content,
+          inverted = _props.inverted;
+      var _state = this.state,
+          className = _state.className,
+          themeClassName = _state.themeClassName,
+          invertedClassName = _state.invertedClassName;
 
+
       return _react2.default.createElement(
         'span',
-        { className: className, style: { backgroundColor: backgroundColor } },
+        {
+          className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, themeClassName, !inverted), _defineProperty(_classNames, invertedClassName, inverted), _classNames))
+        },
         content
@@ -87,6 +116,8 @@ );
   }).isRequired,
-  style: _react.PropTypes.instanceOf(Object)
+  style: _react.PropTypes.instanceOf(Object),
+  inverted: _react.PropTypes.bool
 };
 Badge.defaultProps = {
-  style: {}
+  style: {},
+  inverted: false
 };
@@ -93,0 +124,0 @@ Badge.contextTypes = {

dist/components/list-item.js

@@ -85,3 +85,4 @@ 'use strict';
           classes = _props.sheet.classes,
-          avatar = _props.avatar;
+          avatar = _props.avatar,
+          badge = _props.badge;
       var _state = this.state,
@@ -105,2 +106,7 @@ className = _state.className,
           { className: classes.avatar },
+          badge ? _react2.default.createElement(
+            'div',
+            { className: classes.badge },
+            badge
+          ) : null,
           _react2.default.createElement(_avatar2.default, { image: avatar })
@@ -150,3 +156,4 @@ ) : null,
   rightButton: _react.PropTypes.node,
-  avatar: _react.PropTypes.string
+  avatar: _react.PropTypes.string,
+  badge: _react.PropTypes.node
 };
@@ -161,3 +168,4 @@ ListItem.defaultProps = {
   rightButton: null,
-  avatar: ''
+  avatar: '',
+  badge: null
 };
@@ -164,0 +172,0 @@ ListItem.contextTypes = {

dist/style/badges.js

@@ -19,8 +19,9 @@ 'use strict';
     color: _colors2.default.white,
+    display: 'block',
     fontSize: '12px',
-    height: '24px',
-    lineHeight: '12px',
-    padding: '6px',
+    height: '20px',
+    lineHeight: '16px',
+    padding: '3px',
     textAlign: 'center',
-    width: '24px'
+    width: '20px'
   }
@@ -27,0 +28,0 @@ };

dist/style/lists.js

@@ -94,2 +94,7 @@ 'use strict';
     top: '6px'
+  },
+  badge: {
+    position: 'absolute',
+    right: '-3px',
+    top: '-3px'
   }
@@ -96,0 +101,0 @@ };

package.json

 {
   "name": "anchor-ui",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "React Component UI Kit",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213538

increased by0.7%

Lines of code

3550

increased by1.11%

No dependency changes