Merge remote-tracking branch 'origin/develop' into issue-#552-app-header

Merged origin/develop

src/list-item/get-styles.js

@@ -51,19 +51,27 @@ const nestedListButton = (open) => {
   let style = styles.button;
 
   if (open) {
-    style = combineStyles(style, { transform: 'rotate(180deg) translateY(50%)' });
+    style = combineStyles(style, { transform: 'rotate(180deg)' });
   }
 
   return style;
 };
 
-const textContainer = (rightButton) => {
+const textContainer = (avatar, rightButton) => {
   let style = styles.text;
 
+  if (avatar) {
+    style = combineStyles(style, { width: 'calc(100% - 48px)' });
+  }
+
   if (rightButton) {
     style = combineStyles(style, { width: 'calc(100% - 48px)' });
   }
 
+  if (avatar && rightButton) {
+    style = combineStyles(style, { width: 'calc(100% - 96px)' });
+  }
+
   return style;
 };
 

src/list-item/index.jsx

@@ -145,21 +145,21 @@ class ListItem extends Component {
     return (
       <div style={styles.container}>
         <li key="listItem" onClick={rootClick} style={getStyles.root(color, active, rightButton || nestedList, avatar, secondaryText || textBadge, style)} {...custom}>
-          <div style={getStyles.textContainer(rightButton || nestedList)}>
-            {
-              avatar
-              ? <div style={styles.avatar}>
-                {
-                  muted && !blocked
-                  ? <div style={styles.icon}><IconMute color={colors.white} /></div>
-                  : null
-                }
-                {blocked ? <div style={styles.icon}><IconBlock color={colors.white} /></div> : null}
-                {badge ? <div style={styles.badge}>{badge}</div> : null}
-                {typeof avatar === 'string' ? <Avatar image={avatar} /> : avatar}
-              </div>
-              : null
-            }
+          {
+            avatar
+            ? <div style={styles.avatar}>
+              {
+                muted && !blocked
+                ? <div style={styles.icon}><IconMute color={colors.white} /></div>
+                : null
+              }
+              {blocked ? <div style={styles.icon}><IconBlock color={colors.white} /></div> : null}
+              {badge ? <div style={styles.badge}>{badge}</div> : null}
+              {typeof avatar === 'string' ? <Avatar image={avatar} /> : avatar}
+            </div>
+            : null
+          }
+          <div style={getStyles.textContainer(avatar, rightButton || nestedList)}>
             <h1 style={getStyles.text(styles.primaryText, active, null, primaryTextStyle)}>
               {primaryText}
             </h1>

src/list-item/styles.js

@@ -80,7 +80,6 @@ export default {
   },
   avatar: {
     position: 'relative',
-    float: 'left',
     marginRight: '8px'
   },
   badge: {

test/admin-badge/index.test.js

@@ -0,0 +1,40 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import AdminBadge from '../../src/admin-badge';
+import getStyles from '../../src/admin-badge/get-styles';
+
+chai.use(sinonChai);
+global.navigator = { userAgent: 'all' };
+
+describe('AdminBadge', () => {
+  const props = {
+    style: {},
+    inverted: false,
+    text: 'Admin',
+    color: '#1BA6C4'
+  };
+
+  it('should always render a span element', () => {
+    const wrapper = shallow(<AdminBadge {...props} />).dive().dive();
+
+    expect(wrapper.find('span')).to.have.length(1);
+  });
+
+  it('should pass the value of the text prop to the span element', () => {
+    const wrapper = shallow(<AdminBadge {...props} />).dive().dive();
+
+    expect(wrapper.containsMatchingElement(<span>Admin</span>)).to.equal(true);
+  });
+
+  it('should get root styles', () => {
+    const spy = sinon.spy(getStyles, 'root');
+
+    shallow(<AdminBadge {...props} />, { context: { color: 'red' } }).dive().dive();
+    expect(spy).to.have.been.calledWith(props.color, props.inverted, props.style);
+  });
+});

test/alert/index.test.js

@@ -13,7 +13,7 @@ import getStyles from '../../src/alert/get-styles';
 chai.use(sinonChai);
 global.navigator = { userAgent: 'all' };
 
-describe('Alert.index', () => {
+describe('Alert', () => {
   const props = {
     style: {},
     iconStyle: {},

test/list-item/get-styles.test.js

@@ -66,7 +66,33 @@ describe('ListItem.getStyles', () => {
     it('should add open styles', () => {
       const style = getStyles.nestedListButton(true);
 
-      expect(style).to.have.property('transform', 'rotate(180deg) translateY(50%)');
+      expect(style).to.have.property('transform', 'rotate(180deg)');
+    });
+  });
+
+  describe('textContainer', () => {
+    it('should get styles', () => {
+      const style = getStyles.textContainer();
+
+      expect(style).to.deep.equal(styles.text);
+    });
+
+    it('should add avatar styles', () => {
+      const style = getStyles.textContainer(true, false);
+
+      expect(style).to.have.property('width', 'calc(100% - 48px)');
+    });
+
+    it('should add rightButton styles', () => {
+      const style = getStyles.textContainer(false, true);
+
+      expect(style).to.have.property('width', 'calc(100% - 48px)');
+    });
+
+    it('should add avatar and rightButton styles', () => {
+      const style = getStyles.textContainer(true, true);
+
+      expect(style).to.have.property('width', 'calc(100% - 96px)');
     });
   });
 });

test/profile/index.test.js

@@ -12,7 +12,7 @@ import getStyles from '../../src/profile/get-styles';
 chai.use(sinonChai);
 global.navigator = { userAgent: 'all' };
 
-describe('Profile.index', () => {
+describe('Profile', () => {
   const props = {
     avatar: '',
     coverImage: '',