From 9e7c1d23091d42e8bd4a128b0f8cb634ee280804 Mon Sep 17 00:00:00 2001
From: Dave Whitley <drw158@gmail.com>
Date: Mon, 25 Apr 2016 15:18:20 -0500
Subject: [PATCH 1/6] Make the icons green to be more active

---
 client/my-sites/plugins-wpcom/style.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/my-sites/plugins-wpcom/style.scss b/client/my-sites/plugins-wpcom/style.scss
index 1f4871b9f02bf..623961c1ab298 100644
--- a/client/my-sites/plugins-wpcom/style.scss
+++ b/client/my-sites/plugins-wpcom/style.scss
@@ -10,6 +10,10 @@
 	.wpcom-plugins__plugin-item {
 		opacity: 0.5;
 	}
+	
+	.wpcom-plugins__plugin-icon {
+		background: $gray;
+	}
 }
 
 .wpcom-plugin-panel .section-header {
@@ -70,7 +74,7 @@
 .wpcom-plugins__plugin-icon {
 	width: 40px;
 	height: 40px;
-	background: $gray;
+	background: $alert-green;
 	float: left;
 	display: flex;
 	justify-content: center;

From 409af8465bd4dfdfbbf67cc8c0c00b53d086eef6 Mon Sep 17 00:00:00 2001
From: Dave Whitley <drw158@gmail.com>
Date: Mon, 25 Apr 2016 15:18:29 -0500
Subject: [PATCH 2/6] Update text

---
 client/my-sites/plugins-wpcom/default-plugins.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/my-sites/plugins-wpcom/default-plugins.js b/client/my-sites/plugins-wpcom/default-plugins.js
index ba7a1fea61f7f..1bcc3e154f5c1 100644
--- a/client/my-sites/plugins-wpcom/default-plugins.js
+++ b/client/my-sites/plugins-wpcom/default-plugins.js
@@ -68,11 +68,11 @@ export const defaultStandardPlugins = [
 		description: i18n.translate( 'Advanced anti-spam security.' )
 	},
 	{
-		name: i18n.translate( 'Backup' ),
+		name: i18n.translate( 'Backup & Export' ),
 		descriptionLink: 'https://en.support.wordpress.com/export/#backups',
 		icon: 'lock',
 		category: 'Security',
-		description: i18n.translate( '24/7 backup of your entire site.' )
+		description: i18n.translate( '24/7 backup of your entire site. Export everything.' )
 	},
 	{
 		name: i18n.translate( 'Photon CDN' ),
@@ -100,7 +100,7 @@ export const defaultStandardPlugins = [
 		descriptionLink: 'https://en.support.wordpress.com/infinite-scroll/',
 		icon: 'posts',
 		category: 'Appearance',
-		description: i18n.translate( 'Load more posts when you reach the bottom of a page.' )
+		description: i18n.translate( 'Load more posts when you reach the bottom of a page on your site.' )
 	},
 	{
 		name: i18n.translate( 'Related Posts' ),
@@ -141,7 +141,7 @@ export const defaultPremiumPlugins = [
 		descriptionLink: 'https://en.support.wordpress.com/no-ads/',
 		icon: 'block',
 		plan: 'Premium',
-		description: i18n.translate( 'Remove all ads from your site.' )
+		description: i18n.translate( 'Remove WordPress.com ads from your site.' )
 	},
 	{
 		name: i18n.translate( 'Custom Design' ),

From c77dc900166641f1a58d602078699d3ca790ebd1 Mon Sep 17 00:00:00 2001
From: Dennis Snell <dennis.snell@automattic.com>
Date: Mon, 25 Apr 2016 14:10:45 -0700
Subject: [PATCH 3/6] Swap icon to external glyph on hover

Previously, it was noted that there isn't much to distinguish external
links on the WordPress.com plugins page.

This patch adds the behavior that a plugin Gridicon will change when
hovering over the plugin to show the external glyph if the plugin link
is outside of Calypso.

Currently this only impacts the Google Analytics plugin on the Business
plugin panel. I haven only included the code changes, therefore, on the
business plugin component. If we include external links in the future on
the other classes of plugins, we can add the same changes there.
---
 .../plugin-types/business-plugin.jsx          | 45 +++++++++++++------
 .../plugin-types/premium-plugin.jsx           | 36 ++++++++++++++-
 .../plugin-types/standard-plugin.jsx          | 36 ++++++++++++++-
 3 files changed, 100 insertions(+), 17 deletions(-)

diff --git a/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx b/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
index c1d90803cdc56..89908a7dad666 100644
--- a/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
+++ b/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
@@ -7,18 +7,21 @@ import { recordTracksEvent } from 'state/analytics/actions';
 
 import Gridicon from 'components/gridicon';
 
-/**
- * Detect if the given url is a fully formed url
- *
- * @param {String} url - url to check
- * @return {Boolean} True if it's a fully formed url
- */
-
-const hasHttpProtocol = url => {
-	return /^https?:\/\//.test( url );
-};
+const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
 
 export const BusinessPlugin = React.createClass( {
+	getInitialState() {
+		return { isUnderMouse: false };
+	},
+
+	startHover() {
+		this.setState( { isUnderMouse: true } );
+	},
+
+	stopHover() {
+		this.setState( { isUnderMouse: false } );
+	},
+
 	render() {
 		const {
 			description,
@@ -29,13 +32,29 @@ export const BusinessPlugin = React.createClass( {
 			descriptionLink,
 		} = this.props;
 
-		const target = hasHttpProtocol( descriptionLink ) ? '_blank' : '_self';
+		const { isUnderMouse } = this.state;
+
+		const isExternalLink = hasHttpProtocol( descriptionLink );
+
+		const target = isExternalLink
+			? '_blank'
+			: '_self';
+
+		const linkIcon = ( isExternalLink && isUnderMouse )
+			? 'external'
+			: icon;
 
 		return (
 			<div className="wpcom-plugins__plugin-item">
-				<a onClick={ onClick } href={ descriptionLink } target={ target }>
+				<a
+					href={ descriptionLink }
+					onClick={ onClick }
+					onMouseEnter={ this.startHover }
+					onMouseLeave={ this.stopHover }
+					target={ target }
+				>
 					<div className="wpcom-plugins__plugin-icon">
-						<Gridicon { ...{ icon } } />
+						<Gridicon icon={ linkIcon } />
 					</div>
 					<div className="wpcom-plugins__plugin-title">{ name }</div>
 					<div className="wpcom-plugins__plugin-plan">{ plan }</div>
diff --git a/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx b/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
index cec3e9a000b1b..339118b5d11a8 100644
--- a/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
+++ b/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
@@ -7,7 +7,21 @@ import { recordTracksEvent } from 'state/analytics/actions';
 
 import Gridicon from 'components/gridicon';
 
+const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
+
 export const PremiumPlugin = React.createClass( {
+	getInitialState() {
+		return { isUnderMouse: false };
+	},
+
+	startHover() {
+		this.setState( { isUnderMouse: true } );
+	},
+
+	stopHover() {
+		this.setState( { isUnderMouse: false } );
+	},
+
 	render() {
 		const {
 			description,
@@ -18,11 +32,29 @@ export const PremiumPlugin = React.createClass( {
 			descriptionLink
 		} = this.props;
 
+		const { isUnderMouse } = this.state;
+
+		const isExternalLink = hasHttpProtocol( descriptionLink );
+
+		const target = isExternalLink
+			? '_blank'
+			: '_self';
+
+		const linkIcon = ( isExternalLink && isUnderMouse )
+			? 'external'
+			: icon;
+
 		return (
 			<div className="wpcom-plugins__plugin-item">
-				<a onClick={ onClick } href={ descriptionLink } target="_blank">
+				<a
+					href={ descriptionLink }
+					onClick={ onClick }
+					onMouseEnter={ this.startHover }
+					onMouseLeave={ this.stopHover }
+					target={ target }
+				>
 					<div className="wpcom-plugins__plugin-icon">
-						<Gridicon { ...{ icon } } />
+						<Gridicon icon={ linkIcon } />
 					</div>
 					<div className="wpcom-plugins__plugin-title">{ name }</div>
 					<div className="wpcom-plugins__plugin-plan">{ plan }</div>
diff --git a/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx b/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx
index 180da15e613e0..888c82a99c986 100644
--- a/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx
+++ b/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx
@@ -7,7 +7,21 @@ import { recordTracksEvent } from 'state/analytics/actions';
 
 import Gridicon from 'components/gridicon';
 
+const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
+
 export const StandardPlugin = React.createClass( {
+	getInitialState() {
+		return { isUnderMouse: false };
+	},
+
+	startHover() {
+		this.setState( { isUnderMouse: true } );
+	},
+
+	stopHover() {
+		this.setState( { isUnderMouse: false } );
+	},
+
 	render() {
 		const {
 			category,
@@ -18,11 +32,29 @@ export const StandardPlugin = React.createClass( {
 			descriptionLink
 		} = this.props;
 
+		const { isUnderMouse } = this.state;
+
+		const isExternalLink = hasHttpProtocol( descriptionLink );
+
+		const target = isExternalLink
+			? '_blank'
+			: '_self';
+
+		const linkIcon = ( isExternalLink && isUnderMouse )
+			? 'external'
+			: icon;
+
 		return (
 			<div className="wpcom-plugins__plugin-item">
-				<a onClick={ onClick } href={ descriptionLink } target="_blank">
+				<a
+					href={ descriptionLink }
+					onClick={ onClick }
+					onMouseEnter={ this.startHover }
+					onMouseLeave={ this.stopHover }
+					target={ target }
+				>
 					<div className="wpcom-plugins__plugin-icon">
-						<Gridicon { ...{ icon } } />
+						<Gridicon icon={ linkIcon } />
 					</div>
 					<div className="wpcom-plugins__plugin-title">{ name }</div>
 					<div className="wpcom-plugins__plugin-category">{ category }</div>

From 3cedf0d156760bde41260f3b3482ff830a8c5500 Mon Sep 17 00:00:00 2001
From: Dave Whitley <drw158@gmail.com>
Date: Mon, 25 Apr 2016 16:37:50 -0500
Subject: [PATCH 4/6] Making sure truncation doesn't happen

---
 client/my-sites/plugins-wpcom/default-plugins.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/my-sites/plugins-wpcom/default-plugins.js b/client/my-sites/plugins-wpcom/default-plugins.js
index 1bcc3e154f5c1..b18368968a090 100644
--- a/client/my-sites/plugins-wpcom/default-plugins.js
+++ b/client/my-sites/plugins-wpcom/default-plugins.js
@@ -124,7 +124,7 @@ export const defaultStandardPlugins = [
 		description: i18n.translate( 'Text formatting using a lightweight markup language. ' )
 	},
 	{
-		name: i18n.translate( 'Advanced Commenting' ),
+		name: i18n.translate( 'Advanced Comments' ),
 		descriptionLink: 'https://en.support.wordpress.com/category/comments/',
 		icon: 'comment',
 		category: 'Misc',

From 70ba8c8eca897730bbdc82700b0771359c226790 Mon Sep 17 00:00:00 2001
From: Dennis Snell <dennis.snell@automattic.com>
Date: Mon, 25 Apr 2016 15:52:31 -0700
Subject: [PATCH 5/6] Merge different plugin components into one

Previously we had three separate plugin components for the three plan
levels: Free, Premium, and Bussiness in order to facilitate differences
in the underlying representation of those features.

The differences ended up being insignificant and this patch merges them
into one generic plugin component to reduce code size and surface area
for bugs to appear.
---
 .../plugins-wpcom/business-plugins-panel.jsx  | 28 +++++-
 .../my-sites/plugins-wpcom/default-plugins.js | 10 +-
 .../plugin-types/business-plugin.jsx          | 92 -------------------
 .../plugin-types/premium-plugin.jsx           | 89 ------------------
 .../standard-plugin.jsx => plugin.jsx}        | 22 +----
 .../plugins-wpcom/premium-plugins-panel.jsx   | 27 +++++-
 .../plugins-wpcom/standard-plugins-panel.jsx  | 24 ++++-
 7 files changed, 74 insertions(+), 218 deletions(-)
 delete mode 100644 client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
 delete mode 100644 client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
 rename client/my-sites/plugins-wpcom/{plugin-types/standard-plugin.jsx => plugin.jsx} (73%)

diff --git a/client/my-sites/plugins-wpcom/business-plugins-panel.jsx b/client/my-sites/plugins-wpcom/business-plugins-panel.jsx
index bf061c77171ab..9598d8e14bc25 100644
--- a/client/my-sites/plugins-wpcom/business-plugins-panel.jsx
+++ b/client/my-sites/plugins-wpcom/business-plugins-panel.jsx
@@ -1,15 +1,19 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import Card from 'components/card';
 import SectionHeader from 'components/section-header';
-import BusinessPlugin from './plugin-types/business-plugin';
 import PurchaseButton from './purchase-button';
+import { recordTracksEvent } from 'state/analytics/actions';
+
+import Plugin from './plugin';
 
 export const BusinessPluginsPanel = React.createClass( {
 	render() {
 		const {
 			isActive = false,
+			onClick,
 			purchaseLink,
 			plugins = []
 		} = this.props;
@@ -26,9 +30,10 @@ export const BusinessPluginsPanel = React.createClass( {
 
 				<Card className={ cardClasses }>
 					<div className="wpcom-plugins__list">
-						{ plugins.map( ( { name, descriptionLink, icon, plan, description } ) =>
-							<BusinessPlugin
-								{ ...{ name, key: name, descriptionLink, icon, plan, description } }
+						{ plugins.map( ( { name, descriptionLink, icon, category, description } ) =>
+							<Plugin
+								onClick={ () => onClick( name ) }
+								{ ...{ name, key: name, descriptionLink, icon, category, description } }
 							/>
 						) }
 					</div>
@@ -44,4 +49,17 @@ BusinessPluginsPanel.propTypes = {
 	plugins: PropTypes.array
 };
 
-export default BusinessPluginsPanel;
+const trackClick = name => recordTracksEvent(
+	'calypso_plugin_wpcom_click',
+	{
+		plugin_name: name,
+		plugin_plan: 'business'
+	}
+);
+
+const mapDispatchToProps = dispatch => ( {
+	onClick: name => dispatch( trackClick( name ) )
+} );
+
+export default connect( null, mapDispatchToProps )( BusinessPluginsPanel );
+
diff --git a/client/my-sites/plugins-wpcom/default-plugins.js b/client/my-sites/plugins-wpcom/default-plugins.js
index b18368968a090..93c70d187e3e5 100644
--- a/client/my-sites/plugins-wpcom/default-plugins.js
+++ b/client/my-sites/plugins-wpcom/default-plugins.js
@@ -140,21 +140,21 @@ export const defaultPremiumPlugins = [
 		name: i18n.translate( 'No Advertising' ),
 		descriptionLink: 'https://en.support.wordpress.com/no-ads/',
 		icon: 'block',
-		plan: 'Premium',
+		category: 'Premium',
 		description: i18n.translate( 'Remove WordPress.com ads from your site.' )
 	},
 	{
 		name: i18n.translate( 'Custom Design' ),
 		descriptionLink: 'https://en.support.wordpress.com/custom-design/',
 		icon: 'customize',
-		plan: 'Premium',
+		category: 'Premium',
 		description: i18n.translate( 'Customize your blog\'s look with custom fonts, a CSS editor, and more.' )
 	},
 	{
 		name: i18n.translate( 'Video Uploads' ),
 		descriptionLink: 'https://en.support.wordpress.com/videopress/',
 		icon: 'video-camera',
-		plan: 'Premium',
+		category: 'Premium',
 		description: i18n.translate( 'Upload and host your video files on your site with VideoPress.' )
 	}
 ];
@@ -165,9 +165,9 @@ export const defaultPremiumPlugins = [
 export const defaultBusinessPlugins = [
 	{
 		name: i18n.translate( 'Google Analytics' ),
-		descriptionLink: '/plans/features/google-analytics/{siteSlug}',
+		descriptionLink: '/categorys/features/google-analytics/{siteSlug}',
 		icon: 'stats',
-		plan: 'Business',
+		category: 'Business',
 		description: i18n.translate( 'Advanced features to complement WordPress.com stats. Funnel reports, goal conversion, and more.' )
 	}
 ];
diff --git a/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx b/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
deleted file mode 100644
index 89908a7dad666..0000000000000
--- a/client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import get from 'lodash/get';
-import noop from 'lodash/noop';
-
-import { recordTracksEvent } from 'state/analytics/actions';
-
-import Gridicon from 'components/gridicon';
-
-const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
-
-export const BusinessPlugin = React.createClass( {
-	getInitialState() {
-		return { isUnderMouse: false };
-	},
-
-	startHover() {
-		this.setState( { isUnderMouse: true } );
-	},
-
-	stopHover() {
-		this.setState( { isUnderMouse: false } );
-	},
-
-	render() {
-		const {
-			description,
-			icon = 'plugins',
-			name,
-			plan,
-			onClick = noop,
-			descriptionLink,
-		} = this.props;
-
-		const { isUnderMouse } = this.state;
-
-		const isExternalLink = hasHttpProtocol( descriptionLink );
-
-		const target = isExternalLink
-			? '_blank'
-			: '_self';
-
-		const linkIcon = ( isExternalLink && isUnderMouse )
-			? 'external'
-			: icon;
-
-		return (
-			<div className="wpcom-plugins__plugin-item">
-				<a
-					href={ descriptionLink }
-					onClick={ onClick }
-					onMouseEnter={ this.startHover }
-					onMouseLeave={ this.stopHover }
-					target={ target }
-				>
-					<div className="wpcom-plugins__plugin-icon">
-						<Gridicon icon={ linkIcon } />
-					</div>
-					<div className="wpcom-plugins__plugin-title">{ name }</div>
-					<div className="wpcom-plugins__plugin-plan">{ plan }</div>
-					<p className="wpcom-plugins__plugin-description">{ description }</p>
-				</a>
-			</div>
-		);
-	}
-} );
-
-BusinessPlugin.propTypes = {
-	name: PropTypes.string.isRequired,
-	descriptionLink: PropTypes.string.isRequired,
-	icon: PropTypes.string,
-	onClick: PropTypes.func,
-	plan: PropTypes.string.isRequired,
-	description: PropTypes.oneOfType( [
-		PropTypes.string,
-		PropTypes.element
-	] ).isRequired
-};
-
-const trackClick = name => recordTracksEvent(
-	'calypso_plugin_wpcom_click',
-	{
-		plugin_name: name,
-		plugin_plan: 'business'
-	}
-);
-
-const mapDispatchToProps = ( dispatch, props ) => ( {
-	onClick: get( props, 'onClick', () => dispatch( trackClick( props.name ) ) )
-} );
-
-export default connect( null, mapDispatchToProps )( BusinessPlugin );
diff --git a/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx b/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
deleted file mode 100644
index 339118b5d11a8..0000000000000
--- a/client/my-sites/plugins-wpcom/plugin-types/premium-plugin.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import get from 'lodash/get';
-import noop from 'lodash/noop';
-
-import { recordTracksEvent } from 'state/analytics/actions';
-
-import Gridicon from 'components/gridicon';
-
-const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
-
-export const PremiumPlugin = React.createClass( {
-	getInitialState() {
-		return { isUnderMouse: false };
-	},
-
-	startHover() {
-		this.setState( { isUnderMouse: true } );
-	},
-
-	stopHover() {
-		this.setState( { isUnderMouse: false } );
-	},
-
-	render() {
-		const {
-			description,
-			icon = 'plugins',
-			name,
-			plan,
-			onClick = noop,
-			descriptionLink
-		} = this.props;
-
-		const { isUnderMouse } = this.state;
-
-		const isExternalLink = hasHttpProtocol( descriptionLink );
-
-		const target = isExternalLink
-			? '_blank'
-			: '_self';
-
-		const linkIcon = ( isExternalLink && isUnderMouse )
-			? 'external'
-			: icon;
-
-		return (
-			<div className="wpcom-plugins__plugin-item">
-				<a
-					href={ descriptionLink }
-					onClick={ onClick }
-					onMouseEnter={ this.startHover }
-					onMouseLeave={ this.stopHover }
-					target={ target }
-				>
-					<div className="wpcom-plugins__plugin-icon">
-						<Gridicon icon={ linkIcon } />
-					</div>
-					<div className="wpcom-plugins__plugin-title">{ name }</div>
-					<div className="wpcom-plugins__plugin-plan">{ plan }</div>
-					<p className="wpcom-plugins__plugin-description">{ description }</p>
-				</a>
-			</div>
-		);
-	}
-} );
-
-PremiumPlugin.propTypes = {
-	name: PropTypes.string.isRequired,
-	descriptionLink: PropTypes.string.isRequired,
-	icon: PropTypes.string,
-	plan: PropTypes.string.isRequired,
-	onClick: PropTypes.func,
-	description: PropTypes.string.isRequired
-};
-
-const trackClick = name => recordTracksEvent(
-	'calypso_plugin_wpcom_click',
-	{
-		plugin_name: name,
-		plugin_plan: 'premium'
-	}
-);
-
-const mapDispatchToProps = ( dispatch, props ) => ( {
-	onClick: get( props, 'onClick', () => dispatch( trackClick( props.name ) ) )
-} );
-
-export default connect( null, mapDispatchToProps )( PremiumPlugin );
diff --git a/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx b/client/my-sites/plugins-wpcom/plugin.jsx
similarity index 73%
rename from client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx
rename to client/my-sites/plugins-wpcom/plugin.jsx
index 888c82a99c986..28f92515edc9a 100644
--- a/client/my-sites/plugins-wpcom/plugin-types/standard-plugin.jsx
+++ b/client/my-sites/plugins-wpcom/plugin.jsx
@@ -1,15 +1,11 @@
 import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import get from 'lodash/get';
 import noop from 'lodash/noop';
 
-import { recordTracksEvent } from 'state/analytics/actions';
-
 import Gridicon from 'components/gridicon';
 
 const hasHttpProtocol = url => ( /^https?:\/\//.test( url ) );
 
-export const StandardPlugin = React.createClass( {
+export const Plugin = React.createClass( {
 	getInitialState() {
 		return { isUnderMouse: false };
 	},
@@ -65,7 +61,7 @@ export const StandardPlugin = React.createClass( {
 	}
 } );
 
-StandardPlugin.propTypes = {
+Plugin.propTypes = {
 	category: PropTypes.string.isRequired,
 	description: PropTypes.string.isRequired,
 	icon: PropTypes.string,
@@ -74,16 +70,4 @@ StandardPlugin.propTypes = {
 	descriptionLink: PropTypes.string.isRequired
 };
 
-const trackClick = name => recordTracksEvent(
-	'calypso_plugin_wpcom_click',
-	{
-		plugin_name: name,
-		plugin_plan: 'standard'
-	}
-);
-
-const mapDispatchToProps = ( dispatch, props ) => ( {
-	onClick: get( props, 'onClick', () => dispatch( trackClick( props.name ) ) )
-} );
-
-export default connect( null, mapDispatchToProps )( StandardPlugin );
+export default Plugin;
diff --git a/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx b/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx
index 3be32285bdb68..3c8e335a8b3f1 100644
--- a/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx
+++ b/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx
@@ -1,15 +1,19 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import classNames from 'classnames';
 
 import Card from 'components/card';
 import SectionHeader from 'components/section-header';
-import PremiumPlugin from './plugin-types/premium-plugin';
 import PurchaseButton from './purchase-button';
+import { recordTracksEvent } from 'state/analytics/actions';
+
+import Plugin from './plugin';
 
 export const PremiumPluginsPanel = React.createClass( {
 	render() {
 		const {
 			isActive = false,
+			onClick,
 			purchaseLink,
 			plugins = []
 		} = this.props;
@@ -26,9 +30,10 @@ export const PremiumPluginsPanel = React.createClass( {
 
 				<Card className={ cardClasses }>
 					<div className="wpcom-plugins__list">
-						{ plugins.map( ( { name, descriptionLink, icon, plan, description } ) =>
-							<PremiumPlugin
-								{ ...{ name, key: name, descriptionLink, icon, plan, description } }
+						{ plugins.map( ( { name, descriptionLink, icon, category, description } ) =>
+							<Plugin
+								onClick={ () => onClick( name ) }
+								{ ...{ name, key: name, descriptionLink, icon, category, description } }
 							/>
 						) }
 					</div>
@@ -44,4 +49,16 @@ PremiumPluginsPanel.propTypes = {
 	plugins: PropTypes.array
 };
 
-export default PremiumPluginsPanel;
+const trackClick = name => recordTracksEvent(
+	'calypso_plugin_wpcom_click',
+	{
+		plugin_name: name,
+		plugin_plan: 'premium'
+	}
+);
+
+const mapDispatchToProps = dispatch => ( {
+	onClick: name => dispatch( trackClick( name ) )
+} );
+
+export default connect( null, mapDispatchToProps )( PremiumPluginsPanel );
diff --git a/client/my-sites/plugins-wpcom/standard-plugins-panel.jsx b/client/my-sites/plugins-wpcom/standard-plugins-panel.jsx
index cd8f0414221f5..989ad0ac99b49 100644
--- a/client/my-sites/plugins-wpcom/standard-plugins-panel.jsx
+++ b/client/my-sites/plugins-wpcom/standard-plugins-panel.jsx
@@ -1,19 +1,23 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 
 import CompactCard from 'components/card/compact';
 import SectionHeader from 'components/section-header';
 import Button from 'components/button';
 import Gridicon from 'components/gridicon';
+import { recordTracksEvent } from 'state/analytics/actions';
 
-import StandardPlugin from './plugin-types/standard-plugin';
+import Plugin from './plugin';
 
 export const StandardPluginsPanel = React.createClass( {
 	render() {
 		const {
 			displayCount,
+			onClick,
 			plugins = []
 		} = this.props;
 
+		const selectPlugin = name => () => onClick( name );
 		const shownPlugins = plugins.slice( 0, displayCount );
 
 		return (
@@ -27,7 +31,8 @@ export const StandardPluginsPanel = React.createClass( {
 				<CompactCard className="wpcom-plugins__standard-panel">
 					<div className="wpcom-plugins__list">
 						{ shownPlugins.map( ( { name, descriptionLink, icon, category, description } ) =>
-							<StandardPlugin
+							<Plugin
+								onClick={ () => onClick( name ) }
 								{ ...{ name, key: name, descriptionLink, icon, category, description } }
 							/>
 						) }
@@ -43,4 +48,17 @@ StandardPluginsPanel.propTypes = {
 	plugins: PropTypes.array
 };
 
-export default StandardPluginsPanel;
+const trackClick = name => recordTracksEvent(
+	'calypso_plugin_wpcom_click',
+	{
+		plugin_name: name,
+		plugin_plan: 'standard'
+	}
+);
+
+const mapDispatchToProps = dispatch => ( {
+	onClick: name => dispatch( trackClick( name ) )
+} );
+
+export default connect( null, mapDispatchToProps )( StandardPluginsPanel );
+

From 7c865ff42895e994dd2e64e87910e28cd2e637ba Mon Sep 17 00:00:00 2001
From: Dave Whitley <drw158@gmail.com>
Date: Wed, 27 Apr 2016 10:44:25 -0500
Subject: [PATCH 6/6] Active plugins will be blue for now

---
 client/my-sites/plugins-wpcom/style.scss | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/client/my-sites/plugins-wpcom/style.scss b/client/my-sites/plugins-wpcom/style.scss
index 623961c1ab298..148f34728a16e 100644
--- a/client/my-sites/plugins-wpcom/style.scss
+++ b/client/my-sites/plugins-wpcom/style.scss
@@ -28,7 +28,6 @@
 
 .wpcom-plugins__plugin-item {
 	list-style: none;
-	// flex: 1 0 33.33%;
 	box-sizing: border-box;
 	padding: 16px;
 	border-bottom: 1px solid lighten( $gray, 20% );
@@ -65,16 +64,12 @@
 
 .wpcom-plugins__plugin-item a {
 	color: $gray-dark;
-	
-	&:hover .wpcom-plugins__plugin-icon {
-		background: $blue-medium;
-	}
 }
 
 .wpcom-plugins__plugin-icon {
 	width: 40px;
 	height: 40px;
-	background: $alert-green;
+	background: $blue-medium;
 	float: left;
 	display: flex;
 	justify-content: center;
@@ -124,10 +119,6 @@
 	border-bottom: none;
 }
 
-.wpcom-plugin-panel .notice__icon {
-	flex-shrink: 0; // Prevent the notice icon from shrinking
-}
-
 .wpcom-plugin-panel__panel-footer {
 	padding-top: 14px;
 	padding-bottom: 14px;