DevDocs: Add UserItem component. (Automattic#24230)

client/components/user/README.md

@@ -0,0 +1,16 @@
+## UserItem
+
+`UserItem` displays the Gravatar and username of the current user. It takes only one prop:
+ a user object with a `name` property for the display name.
+
+### Usage
+
+```js
+export default class extends React.Component {
+	render() {
+		return (
+			<UserItem user={ currentUser } />
+		);
+	}
+}
+```

client/components/user/docs/example.jsx

@@ -0,0 +1,33 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import UserItem from '../index';
+import { getCurrentUser } from 'state/current-user/selectors';
+
+const UserItemExample = ( { currentUser } ) => {
+	return <UserItem user={ currentUser } />;
+};
+
+const ConnectedUserItemExample = connect( state => {
+	const user = getCurrentUser( state );
+	if ( ! user ) {
+		return {};
+	}
+	const currentUser = Object.assign( {}, user, { name: user.display_name } );
+
+	return {
+		currentUser,
+	};
+} )( UserItemExample );
+
+ConnectedUserItemExample.displayName = 'UserItem';
+
+export default ConnectedUserItemExample;

client/devdocs/design/component-examples.js

@@ -80,6 +80,7 @@ export TimeSince from 'components/time-since/docs/example';
 export Timezone from 'components/timezone/docs/example';
 export TokenFields from 'components/token-field/docs/example';
 export Tooltip from 'components/tooltip/docs/example';
+export UserItem from 'components/user/docs/example';
 export Version from 'components/version/docs/example';
 export VerticalMenu from 'components/vertical-menu/docs/example';
 export VerticalNav from 'components/vertical-nav/docs/example';

client/devdocs/design/index.jsx

@@ -108,6 +108,7 @@ import TimeSince from 'components/time-since/docs/example';
 import Timezone from 'components/timezone/docs/example';
 import TokenFields from 'components/token-field/docs/example';
 import Tooltip from 'components/tooltip/docs/example';
+import UserItem from 'components/user/docs/example';
 import Version from 'components/version/docs/example';
 import VerticalMenu from 'components/vertical-menu/docs/example';
 import VerticalNav from 'components/vertical-nav/docs/example';
@@ -249,6 +250,7 @@ class DesignAssets extends React.Component {
 					<Timezone readmeFilePath="timezone" />
 					<TokenFields readmeFilePath="token-field" />
 					<Tooltip readmeFilePath="tooltip" />
+					<UserItem readmeFilePath="user" />
 					<VerticalMenu readmeFilePath="vertical-menu" />
 					<VerticalNav readmeFilePath="vertical-nav" />
 					<Version readmeFilePath="version" />

client/devdocs/design/playground-scope.js

@@ -112,6 +112,7 @@ export TimeSince from 'components/time-since';
 export Timezone from 'components/timezone';
 export TokenFields from 'components/token-field';
 export Tooltip from 'components/tooltip';
+export UserItem from 'components/user/docs/example';
 export Version from 'components/version';
 export VerticalMenu from 'components/vertical-menu';
 export VerticalNav from 'components/vertical-nav';