Plans: Add plan features to Plan Overview page

assets/stylesheets/_components.scss

@@ -187,6 +187,8 @@
 @import 'my-sites/people/people-profile/style';
 @import 'my-sites/people/people-notices/style';
 @import 'my-sites/plans/style';
+@import 'my-sites/plans/plan-overview/style';
+@import 'my-sites/plans/plan-overview/plan-feature/style';
 @import 'my-sites/plans/plan-overview/plan-status/style';
 @import 'my-sites/post/post-image/style';
 @import 'my-sites/post-selector/style';

client/my-sites/plans/plan-overview/index.jsx

@@ -37,7 +37,8 @@ const PlanOverview = React.createClass( {
 					plan={ this.props.plan }
 					selectedSite={ this.props.selectedSite } />
 
-				<PlanFeatures />
+				<PlanFeatures
+					selectedSite={ this.props.selectedSite } />
 			</Main>
 		);
 	}

client/my-sites/plans/plan-overview/plan-feature/index.jsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import CompactCard from 'components/card/compact';
+
+const PlanFeature = ( { button, description, heading } ) => {
+	return (
+		<CompactCard className="plan-feature">
+			<div>
+				<strong className="plan-feature__heading">{ heading }</strong>
+				<span>{ description }</span>
+			</div>
+			{ button &&
+				<Button
+					className="plan-feature__button"
+					href={ button.href }
+					primary>
+					{ button.label }
+				</Button>
+			}
+		</CompactCard>
+	);
+};
+
+PlanFeature.propTypes = {
+	button: React.PropTypes.shape( {
+		label: React.PropTypes.string.isRequired,
+		href: React.PropTypes.string.isRequired
+	} ),
+	description: React.PropTypes.string.isRequired,
+	heading: React.PropTypes.string.isRequired
+};
+
+export default PlanFeature;

client/my-sites/plans/plan-overview/plan-feature/style.scss

@@ -0,0 +1,3 @@
+.plan-feature__heading {
+	display: block;
+}

client/my-sites/plans/plan-overview/plan-features/index.jsx

@@ -6,17 +6,66 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import Card from 'components/card';
+import PlanFeature from '../plan-feature'
 import SectionHeader from 'components/section-header';
+import { isBusiness } from 'lib/products-values';
 
 const PlanFeatures = React.createClass( {
+	propTypes: {
+		selectedSite: React.PropTypes.oneOfType( [
+			React.PropTypes.object,
+			React.PropTypes.bool
+		] ).isRequired
+	},
+
+	renderBusinessFeatures() {
+		return (
+			<div>
+				<PlanFeature
+					button={ { label: this.translate( 'Setup eCommerce' ), href: `/plugins/${ this.props.selectedSite.slug }` } }
+					description={ this.translate( 'Connect your Shopify, Ecwid, or Gumroad account to your WordPress.com site.' ) }
+					heading={ this.translate( 'eCommerce Integration' ) } />
+
+				<PlanFeature
+					button={ { label: this.translate( 'Setup Analytics' ), href: `/settings/analytics/${ this.props.selectedSite.slug }` } }
+					description={ this.translate( 'Connect your Google Analytics account.' ) }
+					heading={ this.translate( 'Google Analytics Integration' ) } />
+
+				<PlanFeature
+					button={ { label: this.translate( 'View Themes' ), href: `/design/${ this.props.selectedSite.slug }` } }
+					description={ this.translate( 'You have access to dozens of our best themes available.' ) }
+					heading={ this.translate( 'Unlimited Premium Themes' ) } />
+			</div>
+		);
+	},
+
 	render() {
 		return (
 			<div>
 				<SectionHeader label={ this.translate( "Your Site's Features" ) } />
-				<Card>
-					...
-				</Card>
+
+				<PlanFeature
+					button={ { label: this.translate( 'Customize' ), href: `/customize/${ this.props.selectedSite.slug }` } }
+					description={ this.translate( "Change your theme's fonts, colors, and CSS for a unique look." ) }
+					heading={ this.translate( 'Custom Design' ) } />
+
+				{ isBusiness( this.props.selectedSite.plan ) && this.renderBusinessFeatures() }
+
+				<PlanFeature
+					description={ this.translate( 'WordPress.com ads will not display on your site.' ) }
+					heading={ this.translate( 'No Ads' ) } />
+
+				<PlanFeature
+					description={ this.translate( 'You can upload unlimited photos, videos, or music.' ) }
+					heading={ this.translate( 'Storage Space' ) } />
+
+				<PlanFeature
+					description={ this.translate( 'You can upload and hosts videos on your site without advertising.' ) }
+					heading={ this.translate( 'VideoPress' ) } />
+
+				<PlanFeature
+					description={ this.translate( 'You can live chat with our happiness engineers anytime you need.' ) }
+					heading={ this.translate( 'Support' ) } />
 			</div>
 		);
 	}

client/my-sites/plans/plan-overview/plan-status/index.jsx

@@ -28,7 +28,7 @@ const PlanStatus = React.createClass( {
 	purchasePlan() {
 		upgradesActions.addItem( cartItems.planItem( this.props.plan.productSlug ) );
 
-		page( '/checkout/' + this.props.selectedSite.slug );
+		page( `/checkout/${ this.props.selectedSite.slug }` );
 	},
 
 	render() {
@@ -51,7 +51,7 @@ const PlanStatus = React.createClass( {
 						<h1 className="plan-status__plan">
 							{
 								this.translate( '%(planName)s Free Trial', {
-									args: { planName: this.props.plan.productName }
+									args: { planName: plan.productName }
 								} )
 							}
 						</h1>
@@ -64,7 +64,7 @@ const PlanStatus = React.createClass( {
 					</Button>
 				</CompactCard>
 
-				<PlanStatusProgress plan={ this.props.plan } />
+				<PlanStatusProgress plan={ plan } />
 			</div>
 		);
 	}

client/my-sites/plans/plan-overview/plan-status/style.scss

@@ -2,19 +2,11 @@
 	margin-bottom: 30px;
 }
 
-.plan-status__info {
-	align-content: space-between;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-
-	@include breakpoint( ">480px" ) {
-		flex-direction: row;
-	}
-
-	&:after {
-		display: none;
+// the nesting here is necessary to override the styles in the `PlanOverview` stylesheet
+.plan-overview .plan-status__button.button {
+	@include breakpoint( "<960px" ) {
+		margin-left: 0;
+		min-width: 0;
 	}
 }
 
@@ -23,7 +15,7 @@
 
 	@include breakpoint( ">480px" ) {
 		margin-left: 20px;
-		margin-right: 20px;
+		margin-right: 10px;
 	}
 }
 
@@ -55,16 +47,11 @@
 .plan-status__plan {
 	line-height: 26px;
 	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
-	font-size: 24px;
+	font-size: 18px;
 	font-weight: 700;
-}
-
-.plan-status__button {
-	flex-shrink: 0;
 
-	@include breakpoint( "<480px" ) {
-		margin-top: 15px;
-		width: 100%;
+	@include breakpoint( ">960px" ) {
+		font-size: 24px;
 	}
 }
 
@@ -85,4 +72,8 @@
 
 .plan-status__time-until-expiry {
 	font-weight: 700;
+
+	@include breakpoint( "<480px" ) {
+		font-size: 14px;
+	}
 }

client/my-sites/plans/plan-overview/style.scss

@@ -0,0 +1,36 @@
+.plan-overview {
+	.plan-feature__button,
+	.plan-status__button {
+		flex-shrink: 0;
+		min-width: 160px;
+		text-align: center;
+
+		@include breakpoint( "<480px" ) {
+			margin-top: 15px;
+			width: 100%;
+		}
+
+		@include breakpoint( ">480px" ) {
+			margin-left: 15px;
+		}
+	}
+}
+
+.plan-overview {
+	.plan-feature,
+	.plan-status__info {
+		align-content: space-between;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		@include breakpoint( ">480px" ) {
+			flex-direction: row;
+			align-items: center;
+		}
+
+		&:after {
+			display: none;
+		}
+	}
+}