anchor-ui - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0

dist/components/app-header.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -66,12 +70,19 @@
           icon = _props.icon,
-          rightButton = _props.rightButton;
+          rightButton = _props.rightButton,
+          classes = _props.sheet.classes;
       var _state = this.state,
           textClassName = _state.textClassName,
           headerClassName = _state.headerClassName;
+      var color = this.context.color;
 
+      var backgroundColor = color || _colors2.default.theme;
 
       return _react2.default.createElement(
         'header',
-        { className: headerClassName },
-        icon,
+        { className: headerClassName, style: { backgroundColor: backgroundColor } },
+        icon ? _react2.default.createElement(
+          'div',
+          { className: classes.icon },
+          icon
+        ) : null,
         _react2.default.createElement(
@@ -82,3 +93,7 @@ 'h1',
         ),
-        rightButton
+        rightButton ? _react2.default.createElement(
+          'div',
+          { className: classes.button },
+          rightButton
+        ) : null
       );
@@ -96,3 +111,5 @@ }
       header: _react.PropTypes.string.isRequired,
-      text: _react.PropTypes.string.isRequired
+      text: _react.PropTypes.string.isRequired,
+      button: _react.PropTypes.string.isRequired,
+      icon: _react.PropTypes.string.isRequired
     }).isRequired
@@ -113,3 +130,6 @@ }).isRequired,
 };
+AppHeader.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_appHeader2.default)(AppHeader);
 module.exports = exports['default'];

dist/components/badge.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +62,9 @@
       var className = this.state.className;
+      var color = this.color.color;
 
+      var backgroundColor = color || _colors2.default.theme;
 
       return _react2.default.createElement(
         'span',
-        { className: className },
+        { className: className, style: { backgroundColor: backgroundColor } },
         content
@@ -84,3 +90,6 @@ );
 };
+Badge.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_badges2.default)(Badge);
 module.exports = exports['default'];

dist/components/button.js

@@ -29,2 +29,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,3 +77,5 @@
           className = _state.className;
+      var color = this.context.color;
 
+      var backgroundColor = color || _colors2.default.theme;
 
@@ -80,3 +86,4 @@ return _react2.default.createElement(
           onClick: onClick,
-          className: (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, className, !iconButton), _defineProperty(_classNames, iconButtonClassName, iconButton), _classNames))
+          className: (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, className, !iconButton), _defineProperty(_classNames, iconButtonClassName, iconButton), _classNames)),
+          style: !iconButton ? { backgroundColor: backgroundColor } : {}
         },
@@ -107,3 +114,6 @@ children
 };
+Button.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_buttons2.default)(Button);
 module.exports = exports['default'];

dist/components/list-item.js

@@ -29,2 +29,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -69,2 +73,4 @@
     value: function render() {
+      var _classNames;
+
       var _props = this.props,
@@ -81,7 +87,13 @@ primaryText = _props.primaryText,
           secondaryTextClassName = _state.secondaryTextClassName;
+      var color = this.context.color;
 
+      var backgroundColor = color || _colors2.default.theme;
 
       return _react2.default.createElement(
         'li',
-        { onClick: onClick, className: (0, _classnames2.default)(className, _defineProperty({}, classes.active, active)) },
+        {
+          onClick: onClick,
+          style: active ? { backgroundColor: backgroundColor } : {},
+          className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, classes.active, active), _defineProperty(_classNames, classes.rightButton, rightButton), _classNames))
+        },
         _react2.default.createElement(
@@ -97,3 +109,7 @@ 'h1',
         ) : null,
-        rightButton
+        rightButton ? _react2.default.createElement(
+          'div',
+          { className: classes.button },
+          rightButton
+        ) : null
       );
@@ -113,3 +129,5 @@ }
       primaryText: _react.PropTypes.string.isRequired,
-      secondaryText: _react.PropTypes.string.isRequired
+      secondaryText: _react.PropTypes.string.isRequired,
+      rightButton: _react.PropTypes.string.isRequired,
+      button: _react.PropTypes.string.isRequired
     }).isRequired
@@ -133,3 +151,6 @@ }).isRequired,
 };
+ListItem.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_lists2.default)(ListItem);
 module.exports = exports['default'];

dist/components/message-input.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _getClassNames = require('../internal/get-class-names');
@@ -59,4 +63,4 @@
 
+    var className = (0, _getClassNames2.default)(classes, style, 'input', 'MessageInput');
     var inputClassName = (0, _getClassNames2.default)(classes, inputStyle, 'messageInput', 'MessageInput');
-    var className = (0, _getClassNames2.default)(classes, style, 'input', 'MessageInput');
 
@@ -92,7 +96,10 @@ _this.state = {
           leftButton = _props.leftButton,
-          inputRef = _props.inputRef;
+          inputRef = _props.inputRef,
+          classes = _props.sheet.classes;
       var _state = this.state,
           className = _state.className,
           inputClassName = _state.inputClassName;
+      var color = this.context.color;
 
+      var iconColor = color || _colors2.default.theme;
 
@@ -108,5 +115,9 @@ var buttonStyle = {
         { className: className },
-        leftButton,
+        leftButton ? _react2.default.createElement(
+          'div',
+          { className: classes.button },
+          leftButton
+        ) : null,
         _react2.default.createElement('input', {
-          className: inputClassName,
+          className: (0, _classnames2.default)(inputClassName, [classes.leftButton]),
           placeholder: placeholder,
@@ -123,3 +134,3 @@ onChange: onChange,
           { iconButton: true, onClick: sendMessage, style: buttonStyle },
-          _react2.default.createElement(_iconSend2.default, { color: _colors2.default.green })
+          _react2.default.createElement(_iconSend2.default, { color: iconColor })
         )
@@ -139,3 +150,5 @@ );
     classes: _react.PropTypes.shape({
-      messageInput: _react.PropTypes.string.isRequired
+      messageInput: _react.PropTypes.string.isRequired,
+      leftButton: _react.PropTypes.string.isRequired,
+      input: _react.PropTypes.string.isRequired
     }).isRequired
@@ -156,3 +169,6 @@ }).isRequired,
 };
+MessageInput.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_inputs2.default)(MessageInput);
 module.exports = exports['default'];

dist/components/message.js

@@ -41,2 +41,6 @@ 'use strict';
 
+var _colors = require('../style/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -107,3 +111,5 @@
           messageTimeClassName = _state.messageTimeClassName;
+      var color = this.context.color;
 
+      var themeColor = color || _colors2.default.theme;
 
@@ -124,3 +130,4 @@ var style = {
         {
-          className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, classes.myMessage, myMessage), _defineProperty(_classNames, classes.avatar, avatar), _classNames))
+          className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, classes.myMessage, myMessage), _defineProperty(_classNames, classes.avatar, avatar), _classNames)),
+          style: myMessage ? { backgroundColor: themeColor, borderRightColor: themeColor } : null
         },
@@ -180,3 +187,6 @@ avatar ? _react2.default.createElement(_avatar2.default, { image: avatar, style: style }) : null,
 };
+Message.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_messages2.default)(Message);
 module.exports = exports['default'];

dist/components/profile-card.js

@@ -74,3 +74,5 @@ 'use strict';
       var className = this.state.className;
+      var color = this.context.color;
 
+      var backgroundColor = color || _colors2.default.theme;
 
@@ -89,3 +91,6 @@ var style = {
         'section',
-        { className: (0, _classnames2.default)(className, _defineProperty({}, classes.avatar, avatar)) },
+        {
+          className: (0, _classnames2.default)(className, _defineProperty({}, classes.avatar, avatar)),
+          style: { backgroundColor: backgroundColor }
+        },
         avatar ? _react2.default.createElement(_avatar2.default, { image: avatar, style: style.avatar }) : null,
@@ -114,3 +119,6 @@ username
 };
+ProfileCard.contextTypes = {
+  color: _react.PropTypes.string
+};
 exports.default = (0, _reactJss2.default)(_profileCards2.default)(ProfileCard);
 module.exports = exports['default'];

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.colors = exports.IconSend = exports.IconPower = exports.IconPerson = exports.IconPeople = exports.IconMore = exports.IconMenu = exports.IconEmoji = exports.IconEdit = exports.IconConversation = exports.IconClose = exports.IconClock = exports.IconChevronLeft = exports.IconChevronRight = exports.IconChannels = exports.IconChannel = exports.IconAddImage = exports.EmptyState = exports.ProfileCard = exports.MessageInput = exports.Message = exports.ListItem = exports.List = exports.ChannelHeader = exports.Button = exports.Badge = exports.AppHeader = exports.Avatar = undefined;
+exports.withTheme = exports.colors = exports.IconSend = exports.IconPower = exports.IconPerson = exports.IconPeople = exports.IconMore = exports.IconMenu = exports.IconEmoji = exports.IconEdit = exports.IconConversation = exports.IconClose = exports.IconClock = exports.IconChevronLeft = exports.IconChevronRight = exports.IconChannels = exports.IconChannel = exports.IconAddImage = exports.EmptyState = exports.ProfileCard = exports.MessageInput = exports.Message = exports.ListItem = exports.List = exports.ChannelHeader = exports.Button = exports.Badge = exports.AppHeader = exports.Avatar = undefined;
 
@@ -121,5 +121,11 @@ var _avatar = require('./components/avatar');
 
+var _withTheme = require('./with-theme');
+
+var _withTheme2 = _interopRequireDefault(_withTheme);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Components
+// Settings
+
+// Icons
 exports.Avatar = _avatar2.default;
@@ -153,4 +159,4 @@ exports.AppHeader = _appHeader2.default;
 exports.colors = _colors2.default;
-// Settings
-
-// Icons
+exports.withTheme = _withTheme2.default;
+// HOC
+// Components

dist/style/app-header.js

@@ -15,3 +15,3 @@ 'use strict';
   header: {
-    background: _colors2.default.green,
+    background: _colors2.default.theme,
     boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px, rgba(0, 0, 0, 0.1) 0px 1px 4px',
@@ -37,2 +37,12 @@ boxSizing: 'border-box',
     }
+  },
+  button: {
+    position: 'absolute',
+    top: '8px',
+    right: '16px'
+  },
+  icon: {
+    float: 'left',
+    height: '100%',
+    marginRight: '16px'
   }
@@ -39,0 +49,0 @@ };

dist/style/badges.js

@@ -15,3 +15,3 @@ 'use strict';
   badge: {
-    backgroundColor: _colors2.default.green,
+    backgroundColor: _colors2.default.theme,
     borderRadius: '50%',
@@ -18,0 +18,0 @@ boxSizing: 'border-box',

dist/style/buttons.js

@@ -40,3 +40,3 @@ 'use strict';
   button: {
-    backgroundColor: _colors2.default.green,
+    backgroundColor: _colors2.default.theme,
     background: 'none',
@@ -52,6 +52,6 @@ borderRadius: '5px',
     '&:hover': {
-      backgroundColor: (0, _darken2.default)(_colors2.default.green, 0.15)
+      backgroundColor: (0, _darken2.default)(_colors2.default.theme, 0.15)
     },
     '&:active': {
-      backgroundColor: (0, _darken2.default)(_colors2.default.green, 0.25)
+      backgroundColor: (0, _darken2.default)(_colors2.default.theme, 0.25)
     },
@@ -58,0 +58,0 @@ '&>*': {

dist/style/colors.js

@@ -11,3 +11,3 @@ 'use strict';
   white: '#FEFEFE',
-  green: '#54D38A',
+  theme: '#54D38A',
   primaryText: '#757F85',
@@ -14,0 +14,0 @@ secondaryText: '#B4BEC6',

dist/style/inputs.js

@@ -34,2 +34,10 @@ 'use strict';
     }
+  },
+  leftButton: {
+    paddingLeft: '48px'
+  },
+  button: {
+    left: '20px',
+    position: 'absolute',
+    top: '4px'
   }
@@ -36,0 +44,0 @@ };

dist/style/lists.js

@@ -27,3 +27,5 @@ 'use strict';
     boxSizing: 'border-box',
+    borderBottom: '1px solid ' + _colors2.default.white,
     cursor: 'pointer',
+    height: '54px',
     listStyle: 'none',
@@ -33,2 +35,5 @@ padding: '10px',
     transition: 'background-color .3s ease-in-out',
+    '&:first-of-type': {
+      borderTop: '1px solid ' + _colors2.default.white
+    },
     '&:hover': {
@@ -42,9 +47,9 @@ backgroundColor: (0, _darken2.default)(_colors2.default.white, 0.05)
   active: {
-    backgroundColor: _colors2.default.green,
+    backgroundColor: _colors2.default.theme,
     color: _colors2.default.white,
     '&:hover': {
-      backgroundColor: (0, _darken2.default)(_colors2.default.green, 0.05)
+      backgroundColor: (0, _darken2.default)(_colors2.default.theme, 0.05)
     },
     '&:active': {
-      backgroundColor: (0, _darken2.default)(_colors2.default.green, 0.15)
+      backgroundColor: (0, _darken2.default)(_colors2.default.theme, 0.15)
     },
@@ -58,2 +63,10 @@ '& $primaryText': {
   },
+  rightButton: {
+    paddingRight: '52px'
+  },
+  button: {
+    position: 'absolute',
+    right: '6px',
+    top: '6px'
+  },
   primaryText: {
@@ -60,0 +73,0 @@ color: _colors2.default.primaryText,

dist/style/messages.js

@@ -44,3 +44,3 @@ 'use strict';
   myMessage: {
-    backgroundColor: _colors2.default.green,
+    backgroundColor: _colors2.default.theme,
     color: 'white',
@@ -67,3 +67,4 @@ float: 'right',
     '&:before': {
-      borderRight: '10px solid ' + _colors2.default.green,
+      borderRight: '10px solid',
+      borderRightColor: 'inherit',
       left: 'initial',
@@ -70,0 +71,0 @@ right: '-10px',

dist/style/profile-cards.js

@@ -15,3 +15,3 @@ 'use strict';
   profileCard: {
-    backgroundColor: _colors2.default.green,
+    backgroundColor: _colors2.default.theme,
     color: _colors2.default.white,
@@ -18,0 +18,0 @@ fontSize: '18px',

package.json

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

README.md

@@ -13,2 +13,18 @@ # Anchor UI
 
+`withTheme` higherOrderComponent for providing theme color context
+
+Usage:
+```javascript
+export default withTheme(YourComponent, '#1ba6c4');
+```
+
+Arguments:
+
+| Name           | Type      | Required | Default | Description               |
+|:---------------|:----------|:---------|:--------|:--------------------------|
+| ChildComponent | Component | Yes      |         | Child component to render |
+| color          | String    | Yes      | {}      | Theme color               |
+
+---
+
 `<Avatar />` used for rendering a user's profile image.
@@ -15,0 +31,0 @@

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

104807

increased by7.22%

Number of package files

48

increased by2.13%

Lines of code

2067

increased by8.39%

Number of lines in readme file

232

increased by7.41%

No dependency changes