Merge branch 'feature/connectv2' of https://github.com/appirio-tech/react-components into feature/connectv2

Author: Parth Shah

components/Avatar/Avatar.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
+import { default as ReactAvatar } from 'react-avatar'
 
 require('./Avatar.scss')
 
-const Avatar = ({ avatarUrl }) => {
-
-  const src = avatarUrl || require('./place-holder.svg')
-
+const Avatar = ({ avatarUrl, userName, size }) => {
+  const s = size || 35
+  const src = !avatarUrl && !userName ? require('./place-holder.svg') : avatarUrl
   return (
     <div className="Avatar">
-      <img src={src}/>
+      <ReactAvatar src={ src } name={ userName } size={ s }/>
     </div>
   )
 }

components/UserDropdownMenu/UserDropdownMenu.jsx

@@ -6,11 +6,11 @@ import Avatar from '../Avatar/Avatar'
 import Dropdown from '../Dropdown/Dropdown'
 
 
-const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl, menuItems, forReactRouter}) => {
+const UserDropdownMenu = ({ userHandle, userImage, userName, domain, loginUrl, registerUrl, menuItems, forReactRouter}) => {
 
   const userDropdownLists = [
     [
-      { label: 'My Profile', link: '/profile/' + username, id: 0 },
+      { label: 'My Profile', link: '/profile/' + userHandle, id: 0 },
       { label: 'Dashboard', link: '/my-dashbaord', id: 1 },
       { label: 'Settings', link: '/settings/profile', id: 2 },
       { label: 'Payments', link: '//community.' + domain  + '/PactsMemberServlet?module=PaymentHistory&full_list=false', id: 3 }
@@ -40,8 +40,8 @@ const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl, m
     <div className="UserDropdownMenu">
       <Dropdown pointerShadow>
         <div className="dropdown-menu-header">
-          <span className="user-image"><Avatar avatarUrl={userImage} /></span>
-          <span className="username">{ username }</span>
+          <span className="user-image"><Avatar avatarUrl={ userImage } userName={ userName ? userName : userHandle } /></span>
+          <span className="username">{ userHandle }</span>
           <img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
         </div>
 
@@ -65,11 +65,11 @@ const UserDropdownMenu = ({username, userImage, domain, loginUrl, registerUrl, m
     </div>
   )
 
-  return username ? loggedInDOM : publicDOM
+  return userHandle ? loggedInDOM : publicDOM
 }
 
 UserDropdownMenu.propTypes = {
-  username      : PropTypes.string,
+  userHandle    : PropTypes.string,
   userImage     : PropTypes.string,
   domain        : PropTypes.string.isRequired,
   loginUrl      : PropTypes.string,

package.json

@@ -36,6 +36,7 @@
     "react": "^15.3.1",
     "react-addons-pure-render-mixin": "^15.3.1",
     "react-addons-update": "^15.3.1",
+    "react-avatar": "^2.2.0",
     "react-datetime": "^2.0.2",
     "react-dom": "^15.3.1",
     "react-dropzone": "^3.5.3",