Allow any node to be passed in as the avatar for GlobalHeaderProfile

Closes salesforce#1461

Author: sudowork

components/global-header/__docs__/storybook-stories.jsx

@@ -4,6 +4,7 @@ import IconSettings from '../../icon-settings';
 
 import logo from '../__examples__/logo.svg';
 
+import Avatar from '../../avatar';
 import GlobalHeader from '../../global-header';
 import GlobalHeaderButton from '../../global-header/button';
 import GlobalHeaderDropdown from '../../global-header/dropdown';
@@ -104,6 +105,7 @@ const GlobalHeaderDemo = (props) => (
 			openOn={props.openOn}
 			onClick={action('Profile Clicked')}
 			onSelect={action('Profile Selected')}
+			avatar={props.avatar}
 		>
 			<HeaderProfileCustomContent />
 		</GlobalHeaderProfile>
@@ -132,4 +134,7 @@ storiesOf(GLOBAL_HEADER, module)
 				options={[{ label: 'Profile Menu' }]}
 			/>
 		</GlobalHeader>
+	))
+	.add('With custom <Avatar/>', () => (
+		<GlobalHeaderDemo avatar={<Avatar variant="user" label="Art Vandelay" />} />
 	));

components/global-header/private/dropdown-trigger.jsx

@@ -38,9 +38,9 @@ const GlobalHeaderDropdownTrigger = createReactClass({
 	// ### Prop Types
 	propTypes: {
 		/**
-		 * An image URL to display for the user profile.
+		 * An image URL or avatar node to display for the user profile.
 		 */
-		avatar: PropTypes.string,
+		avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 		/**
 		 * CSS classes to be added to `li` element.
 		 */
@@ -107,11 +107,22 @@ const GlobalHeaderDropdownTrigger = createReactClass({
 		triggerRef: PropTypes.func,
 	},
 
+	renderAvatar () {
+		const { avatar } = this.props;
+		if (typeof avatar === 'string') {
+			return (
+				<span className="slds-avatar slds-avatar--circle slds-avatar--medium">
+					<img src={avatar} alt="" />
+				</span>
+			);
+		}
+		return avatar || null;
+	},
+
 	// ### Render
 	render () {
 		// The following props are provided to the `li`, all others are passed into the `Button`
 		const {
-			avatar,
 			className,
 			id,
 			isOpen,
@@ -128,7 +139,6 @@ const GlobalHeaderDropdownTrigger = createReactClass({
 			...rest
 		} = this.props;
 
-		// TODO: Add avatar component for use across multiple components
 		return (
 			/* eslint-disable jsx-a11y/no-static-element-interactions */
 			<li
@@ -162,11 +172,7 @@ const GlobalHeaderDropdownTrigger = createReactClass({
 					aria-haspopup="true"
 					{...rest}
 				>
-					{avatar ? (
-						<span className="slds-avatar slds-avatar--circle slds-avatar--medium">
-							<img src={avatar} alt="" />
-						</span>
-					) : null}
+					{this.renderAvatar()}
 				</Button>
 				{menu}
 			</li>

components/global-header/profile.jsx

@@ -70,9 +70,9 @@ GlobalHeaderProfile.propTypes = {
 	 */
 	className: PropTypes.string,
 	/**
-	 * An image URL to display for the user profile.
+	 * An image URL or avatar node to display for the user profile.
 	 */
-	avatar: PropTypes.string,
+	avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 	/**
 	 * CSS classes to be added to `li` element.
 	 */