pass style property to userchip div

terrestris · Sep 1, 2017 · 9d28d55 · 9d28d55
1 parent 67e322a
commit 9d28d55
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/examples/userChip.js b/examples/userChip.js
@@ -4,12 +4,8 @@ import UserChip from '../src/UserChip/UserChip.jsx';
 
 render(
   <div>
-    <div>
-      <UserChip userName="John Doe"/>
-    </div>
-    <div style={{marginTop: '10px'}}>
-      <UserChip userName="John Doe" imageSrc="./user.png"/>
-    </div>
+    <UserChip userName="John Doe"/>
+    <UserChip userName="John Doe" imageSrc="./user.png" style={{marginTop: '10px'}}/>
   </div>,
   document.getElementById('exampleContainer')
 );
diff --git a/src/UserChip/UserChip.jsx b/src/UserChip/UserChip.jsx
@@ -29,7 +29,13 @@ class UserChip extends React.Component {
      * The react element representing the user menu
      * @type {Element}
      */
-    userMenu: PropTypes.element
+    userMenu: PropTypes.element,
+
+    /**
+     * The style object
+     * @type {Element}
+     */
+    style: PropTypes.object
   }
 
   /**
@@ -75,7 +81,7 @@ class UserChip extends React.Component {
    * @return {type} Description
    */
   getUserMenu() {
-    return <div className="userchip">
+    return <div className="userchip" style={this.props.style}>
       <Avatar src={this.props.imageSrc} size="large" className="userimage"> {this.props.imageSrc ? '' : this.getInitials()} </Avatar>
       <span className="username">{this.props.userName}</span>
     </div>;

diff --git a/src/UserChip/UserChip.spec.jsx b/src/UserChip/UserChip.spec.jsx
@@ -45,4 +45,14 @@ describe('<UserChip />', () => {
     expect(wrapper.find('ul.user-appinfo-menu').node).to.be(undefined);
   });
 
+  it('should pass style prop', () => {
+    const props = {
+      style: {
+        'backgroundColor': 'yellow'
+      }
+    };
+    const wrapper =TestUtils.mountComponent(UserChip, props);
+    expect(wrapper.find('div.userchip').node.style.backgroundColor).to.be('yellow');
+  });
+
 });