Add className and title props to Avatar component

source/components/Avatar/README.md

@@ -7,12 +7,12 @@ Avatar with badges
 
 ```js
 <div>
-    <Avatar alt="alt" badge="admin" href="href" />
-    <Avatar alt="alt" badge="content-moderator" href="href" />
-    <Avatar alt="alt" badge="discussion-moderator" href="href" />
-    <Avatar alt="alt" badge="global-discussions-moderator" href="href" />
-    <Avatar alt="alt" badge="helper" href="href" />
-    <Avatar alt="alt" badge="staff" href="href" />
-    <Avatar alt="alt" badge="vstf" href="href" />
+    <Avatar badge="admin" />
+    <Avatar badge="content-moderator" />
+    <Avatar badge="discussion-moderator" />
+    <Avatar badge="global-discussions-moderator" />
+    <Avatar badge="helper" />
+    <Avatar badge="staff" />
+    <Avatar badge="vstf" />
 </div>
 ```

source/components/Avatar/__snapshots__/index.spec.js.snap

@@ -1,46 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Avatar renders 1`] = `
-<Avatar
-  alt="alt"
-  badge="admin"
-  href="href"
-  src="src"
->
-  <div
-    className="wds-avatar"
-  >
-    <a
-      href="href"
-    >
-      <AvatarImage
-        alt="alt"
-        src="src"
-      >
-        <img
-          alt="alt"
-          className="wds-avatar__image"
-          src="src"
-          title="alt"
-        />
-      </AvatarImage>
-    </a>
-    <Badge
-      badge="admin"
-    >
-      <span
-        className="wds-avatar__badge"
-        title="Community Admin"
-      >
-        <_default>
-          <div />
-        </_default>
-      </span>
-    </Badge>
-  </div>
-</Avatar>
-`;
-
 exports[`Avatar renders when incorrect badgePermission is set 1`] = `
 <Avatar
   alt="User avatar"
@@ -106,54 +65,70 @@ exports[`Avatar renders with badge 1`] = `
 </Avatar>
 `;
 
-exports[`Avatar renders without href 1`] = `
+exports[`Avatar renders with default props 1`] = `
 <Avatar
-  alt="alt"
-  src="src"
+  alt="User avatar"
 >
   <div
     className="wds-avatar"
   >
     <AvatarImage
-      alt="alt"
-      src="src"
+      alt="User avatar"
     >
-      <img
-        alt="alt"
+      <_default
         className="wds-avatar__image"
-        src="src"
-        title="alt"
-      />
+        title="wds-avatar__image"
+      >
+        <div
+          className="wds-avatar__image"
+          title="wds-avatar__image"
+        />
+      </_default>
     </AvatarImage>
   </div>
 </Avatar>
 `;
 
-exports[`Avatar renders without src 1`] = `
+exports[`Avatar renders with props 1`] = `
 <Avatar
   alt="alt"
+  badge="admin"
+  className="class-name"
   href="href"
+  src="src"
+  title="title"
 >
   <div
-    className="wds-avatar"
+    className="wds-avatar class-name"
+    title="title"
   >
     <a
       href="href"
     >
       <AvatarImage
         alt="alt"
+        src="src"
       >
-        <_default
+        <img
+          alt="alt"
           className="wds-avatar__image"
-          title="wds-avatar__image"
-        >
-          <div
-            className="wds-avatar__image"
-            title="wds-avatar__image"
-          />
-        </_default>
+          src="src"
+          title="alt"
+        />
       </AvatarImage>
     </a>
+    <Badge
+      badge="admin"
+    >
+      <span
+        className="wds-avatar__badge"
+        title="Community Admin"
+      >
+        <_default>
+          <div />
+        </_default>
+      </span>
+    </Badge>
   </div>
 </Avatar>
 `;

source/components/Avatar/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import AvatarImage from './AvatarImage';
 import Badge from './Badge';
@@ -12,9 +13,14 @@ const getAvatarImage = (href, alt, src) => {
 };
 
 const Avatar = ({
-    href, alt, src, badge,
+    alt,
+    badge,
+    className,
+    href,
+    src,
+    title,
 }) => (
-    <div className="wds-avatar">
+    <div className={classNames('wds-avatar', className)} title={title}>
         {getAvatarImage(href, alt, src)}
         {badge && <Badge badge={badge} />}
     </div>
@@ -30,17 +36,23 @@ Avatar.propTypes = {
             'global-discussions-moderator', 'helper', 'staff', 'vstf',
         ],
     ),
+    /** Additional class name */
+    className: PropTypes.string,
     /** Link to user's profile */
     href: PropTypes.string,
     /** Image src for avatar */
     src: PropTypes.string,
+    /** Title attribute for avatar */
+    title: PropTypes.string,
 };
 
 Avatar.defaultProps = {
     alt: 'User avatar',
     badge: undefined,
+    className: undefined,
     href: undefined,
     src: undefined,
+    title: undefined,
 };
 
 export default Avatar;

source/components/Avatar/index.spec.js

@@ -4,30 +4,19 @@ import sinon from 'sinon';
 
 import Avatar from './index';
 
-test('Avatar renders', () => {
-    const props = {
-        alt: 'alt',
-        badge: 'admin',
-        href: 'href',
-        src: 'src',
-    };
-    const component = mount(<Avatar {...props} />);
+test('Avatar renders with default props', () => {
+    const component = mount(<Avatar />);
     expect(component).toMatchSnapshot();
 });
 
-test('Avatar renders without href', () => {
-    const props = {
-        alt: 'alt',
-        src: 'src',
-    };
-    const component = mount(<Avatar {...props} />);
-    expect(component).toMatchSnapshot();
-});
-
-test('Avatar renders without src', () => {
+test('Avatar renders with props', () => {
     const props = {
         alt: 'alt',
+        badge: 'admin',
+        className: 'class-name',
         href: 'href',
+        src: 'src',
+        title: 'title',
     };
     const component = mount(<Avatar {...props} />);
     expect(component).toMatchSnapshot();