Stats: Show Post Likes on the Stats Post Details page

client/my-sites/stats/stats-module/style.scss

@@ -512,3 +512,20 @@ ul.module-header-actions {
 		@include long-content-fade( $color: $white, $size: 15% );
 	}
 }
+
+.stats-post-likes {
+	.stats-post-likes__content {
+		box-sizing: border-box;
+		padding: 8px 24px;
+		color: $gray-dark;
+		font-size: 13px;
+	}
+
+	.count {
+		margin-left: 8px;
+	}
+
+	.gravatar {
+		margin-right: 8px;
+	}
+}

client/my-sites/stats/stats-post-detail/index.jsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import page from 'page';
 
 /**
@@ -16,10 +17,10 @@ import HeaderCake from 'components/header-cake';
 import { decodeEntities } from 'lib/formatting';
 import Main from 'components/main';
 import StatsFirstView from '../stats-first-view';
+import PostLikes from '../stats-post-likes';
+import { getSelectedSiteId } from 'state/ui/selectors';
 
-export default React.createClass( {
-	displayName: 'StatsPostDetail',
-
+const StatsPostDetail = React.createClass( {
 	mixins: [ observe( 'postViewsList' ) ],
 
 	propTypes: {
@@ -87,7 +88,17 @@ export default React.createClass( {
 					postViewsList={ this.props.postViewsList } />
 
 				<PostWeeks postViewsList={ this.props.postViewsList } />
+
+				{ post && <PostLikes postId={ post.ID } siteId={ this.props.siteId } /> }
 			</Main>
 		);
 	}
 } );
+
+export default connect(
+	state => {
+		return {
+			siteId: getSelectedSiteId( state ),
+		};
+	}
+)( StatsPostDetail );

client/my-sites/stats/stats-post-likes/index.jsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ **/
+import React from 'react';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import { flowRight } from 'lodash';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import Card from 'components/card';
+import Count from 'components/count';
+import Gridicon from 'components/gridicon';
+import Gravatar from 'components/gravatar';
+import StatsModuleContent from '../stats-module/content-text';
+import QueryPostLikes from 'components/data/query-post-likes';
+import StatsModulePlaceholder from '../stats-module/placeholder';
+import toggleInfo from '../toggle-info';
+import { isRequestingPostLikes, getPostLikes, countPostLikes } from 'state/selectors';
+
+export const PostLikes = ( { countLikes, isRequesting, likes, opened, postId, siteId, toggle, translate } ) => {
+	const infoIcon = opened ? 'info' : 'info-outline';
+	const classes = {
+		'is-showing-info': opened,
+	};
+
+	return (
+		<Card className={ classNames( 'stats-module', 'stats-post-likes', 'is-expanded', classes ) }>
+			<QueryPostLikes siteId={ siteId } postId={ postId } />
+			<div className="module-header">
+				<h4 className="module-header-title">
+					{ translate( 'Post Likes' ) }
+					{ countLikes !== null && <Count count={ countLikes } /> }
+				</h4>
+				<ul className="module-header-actions">
+					<li className="module-header-action toggle-info">
+						<a
+							href="#"
+							className="module-header-action-link"
+							aria-label={ translate( 'Show or hide panel information', { textOnly: true, context: 'Stats panel action' } ) }
+							title={ translate( 'Show or hide panel information', { textOnly: true, context: 'Stats panel action' } ) }
+							onClick={ toggle }
+						>
+							<Gridicon icon={ infoIcon } />
+						</a>
+					</li>
+				</ul>
+			</div>
+			<StatsModuleContent className="module-content-text-info">
+				<p>{ translate( 'This panel shows the list of people who likes your post.' ) }</p>
+			</StatsModuleContent>
+			<StatsModulePlaceholder isLoading={ isRequesting && ! likes } />
+			{ likes && !! likes.length &&
+				<div className="stats-post-likes__content">
+					{ likes.map( like =>
+						<Gravatar key={ like.ID } user={ like } />
+					) }
+				</div>
+			}
+			{ countLikes === 0 && ! isRequesting &&
+				<div className="stats-post-likes__content">
+					{ translate( 'This post has not likes yet!' ) }
+				</div>
+			}
+		</Card>
+	);
+};
+
+const connectComponent = connect(
+	( state, { siteId, postId } ) => {
+		const isRequesting = isRequestingPostLikes( state, siteId, postId );
+		const countLikes = countPostLikes( state, siteId, postId );
+		const likes = getPostLikes( state, siteId, postId );
+		return {
+			countLikes,
+			isRequesting,
+			likes,
+		};
+	}
+);
+
+export default flowRight(
+	connectComponent,
+	toggleInfo,
+	localize
+)( PostLikes );

client/my-sites/stats/toggle-info.jsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+
+const toggleInfo = WrappedComponent => class ToggleComponent extends Component {
+	state = {
+		open: false
+	};
+
+	toggle = event => {
+		event.preventDefault();
+		this.setState( {
+			open: ! this.state.open
+		} );
+	};
+
+	render() {
+		return (
+			<WrappedComponent { ...this.props } toggle={ this.toggle } opened={ this.state.open } />
+		);
+	}
+};
+
+export default toggleInfo;