From 014d17e9a16c35205549f197b1b073d9565cb1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 09:29:53 -0500 Subject: [PATCH 01/21] Plans: Add plan features section to Plan Overview page --- client/my-sites/plans/plan-overview/index.jsx | 3 +- .../plan-overview/plan-features/index.jsx | 68 +++++++++++++++++-- .../plan-overview/plan-status/style.scss | 18 ++++- 3 files changed, 81 insertions(+), 8 deletions(-) diff --git a/client/my-sites/plans/plan-overview/index.jsx b/client/my-sites/plans/plan-overview/index.jsx index 6f647c1d1cee42..1646e52982ca0f 100644 --- a/client/my-sites/plans/plan-overview/index.jsx +++ b/client/my-sites/plans/plan-overview/index.jsx @@ -37,7 +37,8 @@ const PlanOverview = React.createClass( { plan={ this.props.plan } selectedSite={ this.props.selectedSite } /> - + ); } diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 8af3c270cfcd29..57a2815fb2884d 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -2,21 +2,81 @@ * External dependencies */ import React from 'react'; +import page from 'page'; /** * Internal dependencies */ -import Card from 'components/card'; +import Button from 'components/button'; +import CompactCard from 'components/card/compact'; import SectionHeader from 'components/section-header'; const PlanFeatures = React.createClass( { + propTypes: { + selectedSite: React.PropTypes.oneOfType( [ + React.PropTypes.object, + React.PropTypes.bool + ] ).isRequired + }, + + goToCustomizer() { + page( `/customize/${ this.props.selectedSite.slug }` ); + }, + + goToGoogleAnalytics() { + page( `/settings/analytics/${ this.props.selectedSite.slug }` ); + }, + + goToPlugins() { + page( `/plugins/${ this.props.selectedSite.slug }` ); + }, + render() { return (
- - ... - + + +
+ { this.translate( 'Custom Design' ) } + { this.translate( "Change your theme's fonts, colors, and CSS for a unique look." ) } +
+ + + + + +
+ { this.translate( 'eCommerce Integration' ) } + { this.translate( 'Connect your Shopify, Ecwid, or Gumroad account to your WordPress.com site.' ) } +
+ + + + + +
+ { this.translate( 'Google Analytics Integration' ) } + { this.translate( 'Connect your Google Analytics account.' ) } +
+ + +
); } diff --git a/client/my-sites/plans/plan-overview/plan-status/style.scss b/client/my-sites/plans/plan-overview/plan-status/style.scss index 4ce49a1eb01ee2..6cda012f753c92 100644 --- a/client/my-sites/plans/plan-overview/plan-status/style.scss +++ b/client/my-sites/plans/plan-overview/plan-status/style.scss @@ -2,15 +2,16 @@ margin-bottom: 30px; } -.plan-status__info { +.plan-status__info, +.plan-features__feature { align-content: space-between; - align-items: center; display: flex; flex-direction: column; justify-content: space-between; @include breakpoint( ">480px" ) { flex-direction: row; + align-items: center; } &:after { @@ -59,7 +60,8 @@ font-weight: 700; } -.plan-status__button { +.plan-status__button, +.plan-features__feature-button { flex-shrink: 0; @include breakpoint( "<480px" ) { @@ -86,3 +88,13 @@ .plan-status__time-until-expiry { font-weight: 700; } + +.plan-features__feature-description { + em { + font-style: normal; + } + + strong { + display: block; + } +} From 7cb4c12d407735d3de3637b2cd528c8e640b2a48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 13:14:02 -0500 Subject: [PATCH 02/21] Plans: Extract plan feature code into dedicated component in Plan Overview page Let's reduce code duplication. --- .../plan-overview/plan-features/feature.jsx | 45 ++++++++++++++++ .../plan-overview/plan-features/index.jsx | 54 +++++-------------- 2 files changed, 58 insertions(+), 41 deletions(-) create mode 100644 client/my-sites/plans/plan-overview/plan-features/feature.jsx diff --git a/client/my-sites/plans/plan-overview/plan-features/feature.jsx b/client/my-sites/plans/plan-overview/plan-features/feature.jsx new file mode 100644 index 00000000000000..f8be28d8668c3a --- /dev/null +++ b/client/my-sites/plans/plan-overview/plan-features/feature.jsx @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import React from 'react'; +import page from 'page'; + +/** + * Internal dependencies + */ +import Button from 'components/button'; +import CompactCard from 'components/card/compact'; +import SectionHeader from 'components/section-header'; + +const PlanFeature = React.createClass( { + propTypes: { + button: React.PropTypes.shape( { + label: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired + } ), + description: React.PropTypes.string.isRequired, + heading: React.PropTypes.string.isRequired + }, + + render() { + return ( + +
+ { this.props.heading } + { this.props.description } +
+ + { this.props.button && + + } + + ); + } +} ); + +export default PlanFeature; diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 57a2815fb2884d..d1e134bd83c559 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -7,8 +7,7 @@ import page from 'page'; /** * Internal dependencies */ -import Button from 'components/button'; -import CompactCard from 'components/card/compact'; +import PlanFeature from './feature' import SectionHeader from 'components/section-header'; const PlanFeatures = React.createClass( { @@ -36,47 +35,20 @@ const PlanFeatures = React.createClass( {
- -
- { this.translate( 'Custom Design' ) } - { this.translate( "Change your theme's fonts, colors, and CSS for a unique look." ) } -
+ - - + - -
- { this.translate( 'eCommerce Integration' ) } - { this.translate( 'Connect your Shopify, Ecwid, or Gumroad account to your WordPress.com site.' ) } -
- - - - - -
- { this.translate( 'Google Analytics Integration' ) } - { this.translate( 'Connect your Google Analytics account.' ) } -
- - - +
); } From a87a94fd1ca7803d238c4a4a431cd0cb53ba3f37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 13:21:31 -0500 Subject: [PATCH 03/21] Plans: Add remaining features to Plan Overview page These features don't have calls to action. --- .../plan-overview/plan-features/index.jsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index d1e134bd83c559..23913ec5ac222d 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -49,6 +49,26 @@ const PlanFeatures = React.createClass( { button={ { label: this.translate( 'Setup Analytics' ), onClick: this.goToGoogleAnalytics } } description={ this.translate( 'Connect your Google Analytics account.' ) } heading={ this.translate( 'Google Analytics Integration' ) } /> + + + + + + + + + + ); } From cf46a83f915825ff9c5afdb215e0e59b9bb5c327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 13:32:52 -0500 Subject: [PATCH 04/21] Plans: Simplify code in plan status section in Plan Overview page --- client/my-sites/plans/plan-overview/plan-status/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/my-sites/plans/plan-overview/plan-status/index.jsx b/client/my-sites/plans/plan-overview/plan-status/index.jsx index 0cdcf4c0013f1a..973f3c247b6e7c 100644 --- a/client/my-sites/plans/plan-overview/plan-status/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-status/index.jsx @@ -51,7 +51,7 @@ const PlanStatus = React.createClass( {

{ this.translate( '%(planName)s Free Trial', { - args: { planName: this.props.plan.productName } + args: { planName: plan.productName } } ) }

@@ -64,7 +64,7 @@ const PlanStatus = React.createClass( { - + ); } From 6e8bd3b5df510a6dfeec750847d049d148a5ca96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 14:02:06 -0500 Subject: [PATCH 05/21] Plans: Move stylesheet of Plan Overview page at the right place --- assets/stylesheets/_components.scss | 2 +- .../my-sites/plans/plan-overview/{plan-status => }/style.scss | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename client/my-sites/plans/plan-overview/{plan-status => }/style.scss (100%) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index c4fd11289e5360..491fbcf11f2519 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -187,7 +187,7 @@ @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/plan-status/style'; +@import 'my-sites/plans/plan-overview/style'; @import 'my-sites/post/post-image/style'; @import 'my-sites/post-selector/style'; @import 'my-sites/post-trends/style'; diff --git a/client/my-sites/plans/plan-overview/plan-status/style.scss b/client/my-sites/plans/plan-overview/style.scss similarity index 100% rename from client/my-sites/plans/plan-overview/plan-status/style.scss rename to client/my-sites/plans/plan-overview/style.scss From cff7f9abd043b8f52a44797d3459c107c697dab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Thomas?= Date: Mon, 14 Dec 2015 14:31:56 -0500 Subject: [PATCH 06/21] Plans: Update Plan Overview page to use template strings for redirects This makes sure we're using them consistently. --- client/my-sites/plans/plan-overview/plan-status/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/plans/plan-overview/plan-status/index.jsx b/client/my-sites/plans/plan-overview/plan-status/index.jsx index 973f3c247b6e7c..451b36ed546d38 100644 --- a/client/my-sites/plans/plan-overview/plan-status/index.jsx +++ b/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() { From 3fad72ffc2b4d21b9685262d8650edb7c3fdafd8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 13:57:47 +0000 Subject: [PATCH 07/21] Plans: Replacing buttons with onClick events with native links for accessibility reasons --- .../plan-overview/plan-features/feature.jsx | 4 +--- .../plan-overview/plan-features/index.jsx | 19 +++---------------- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/client/my-sites/plans/plan-overview/plan-features/feature.jsx b/client/my-sites/plans/plan-overview/plan-features/feature.jsx index f8be28d8668c3a..d7daf966de9070 100644 --- a/client/my-sites/plans/plan-overview/plan-features/feature.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/feature.jsx @@ -2,14 +2,12 @@ * External dependencies */ import React from 'react'; -import page from 'page'; /** * Internal dependencies */ import Button from 'components/button'; import CompactCard from 'components/card/compact'; -import SectionHeader from 'components/section-header'; const PlanFeature = React.createClass( { propTypes: { @@ -32,7 +30,7 @@ const PlanFeature = React.createClass( { { this.props.button && diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 23913ec5ac222d..7016b943a3cdfa 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -2,7 +2,6 @@ * External dependencies */ import React from 'react'; -import page from 'page'; /** * Internal dependencies @@ -18,35 +17,23 @@ const PlanFeatures = React.createClass( { ] ).isRequired }, - goToCustomizer() { - page( `/customize/${ this.props.selectedSite.slug }` ); - }, - - goToGoogleAnalytics() { - page( `/settings/analytics/${ this.props.selectedSite.slug }` ); - }, - - goToPlugins() { - page( `/plugins/${ this.props.selectedSite.slug }` ); - }, - render() { return (
From 744f09507cb62d1717695ee55bd2e65cfb5060a4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 15:38:23 +0000 Subject: [PATCH 08/21] Plans: Only show Business features to users in a Business trial --- .../plan-overview/plan-features/index.jsx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 7016b943a3cdfa..6bf1f48a1e8a37 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -8,6 +8,7 @@ import React from 'react'; */ import PlanFeature from './feature' import SectionHeader from 'components/section-header'; +import { isBusiness } from 'lib/products-values'; const PlanFeatures = React.createClass( { propTypes: { @@ -17,16 +18,9 @@ const PlanFeatures = React.createClass( { ] ).isRequired }, - render() { + renderBusinessFeatures() { return ( -
- - - - + + + ); + }, + + render() { + return ( +
+ + + + + { isBusiness( this.props.selectedSite.plan ) ? this.renderBusinessFeatures() : null } Date: Wed, 16 Dec 2015 16:21:14 +0000 Subject: [PATCH 09/21] Plans: Splitting up the CSS into separate files to conform to the coding standards --- assets/stylesheets/_components.scss | 3 ++- .../plans/plan-overview/plan-features/style.scss | 9 +++++++++ .../plans/plan-overview/{ => plan-status}/style.scss | 11 +---------- 3 files changed, 12 insertions(+), 11 deletions(-) create mode 100644 client/my-sites/plans/plan-overview/plan-features/style.scss rename client/my-sites/plans/plan-overview/{ => plan-status}/style.scss (93%) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 491fbcf11f2519..4a4fb599a5265e 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -187,7 +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-features/style'; +@import 'my-sites/plans/plan-overview/plan-status/style'; @import 'my-sites/post/post-image/style'; @import 'my-sites/post-selector/style'; @import 'my-sites/post-trends/style'; diff --git a/client/my-sites/plans/plan-overview/plan-features/style.scss b/client/my-sites/plans/plan-overview/plan-features/style.scss new file mode 100644 index 00000000000000..0f01b3cf0f9764 --- /dev/null +++ b/client/my-sites/plans/plan-overview/plan-features/style.scss @@ -0,0 +1,9 @@ +.plan-features__feature-description { + em { + font-style: normal; + } + + strong { + display: block; + } +} diff --git a/client/my-sites/plans/plan-overview/style.scss b/client/my-sites/plans/plan-overview/plan-status/style.scss similarity index 93% rename from client/my-sites/plans/plan-overview/style.scss rename to client/my-sites/plans/plan-overview/plan-status/style.scss index 6cda012f753c92..273424b625b7ec 100644 --- a/client/my-sites/plans/plan-overview/style.scss +++ b/client/my-sites/plans/plan-overview/plan-status/style.scss @@ -66,6 +66,7 @@ @include breakpoint( "<480px" ) { margin-top: 15px; + text-align: center; width: 100%; } } @@ -88,13 +89,3 @@ .plan-status__time-until-expiry { font-weight: 700; } - -.plan-features__feature-description { - em { - font-style: normal; - } - - strong { - display: block; - } -} From bc602be50eaae74d0f0fae88cfed5b356388d0ac Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 16:34:55 +0000 Subject: [PATCH 10/21] Plans: Add a minimum width to the buttons so that they line up. Also add a left margin to create space between the button and the text --- client/my-sites/plans/plan-overview/plan-status/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/my-sites/plans/plan-overview/plan-status/style.scss b/client/my-sites/plans/plan-overview/plan-status/style.scss index 273424b625b7ec..e7f7fce845ca27 100644 --- a/client/my-sites/plans/plan-overview/plan-status/style.scss +++ b/client/my-sites/plans/plan-overview/plan-status/style.scss @@ -63,10 +63,12 @@ .plan-status__button, .plan-features__feature-button { flex-shrink: 0; + margin-left: 15px; + min-width: 150px; + text-align: center; @include breakpoint( "<480px" ) { - margin-top: 15px; - text-align: center; + margin: 15px 0 0 0; width: 100%; } } From 044607bf57058be02a18d64e4aa3a9b184a3681f Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 17:01:30 +0000 Subject: [PATCH 11/21] Plans: Refactoring CSS to share code in mixins, so we can keep the component files targetting their respective components, and keep the code DRY --- assets/stylesheets/_components.scss | 1 + .../plan-overview/plan-features/style.scss | 8 +++++ .../plan-overview/plan-status/style.scss | 30 +++---------------- .../my-sites/plans/plan-overview/style.scss | 27 +++++++++++++++++ 4 files changed, 40 insertions(+), 26 deletions(-) create mode 100644 client/my-sites/plans/plan-overview/style.scss diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 4a4fb599a5265e..14a3358e83508b 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -187,6 +187,7 @@ @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-features/style'; @import 'my-sites/plans/plan-overview/plan-status/style'; @import 'my-sites/post/post-image/style'; diff --git a/client/my-sites/plans/plan-overview/plan-features/style.scss b/client/my-sites/plans/plan-overview/plan-features/style.scss index 0f01b3cf0f9764..7589b2e3c80f9c 100644 --- a/client/my-sites/plans/plan-overview/plan-features/style.scss +++ b/client/my-sites/plans/plan-overview/plan-features/style.scss @@ -1,3 +1,11 @@ +.plan-features__feature { + @include plan-overview-row(); +} + +.plan-features__feature-button { + @include plan-overview-button(); +} + .plan-features__feature-description { em { font-style: normal; diff --git a/client/my-sites/plans/plan-overview/plan-status/style.scss b/client/my-sites/plans/plan-overview/plan-status/style.scss index e7f7fce845ca27..8272f6b5e13d20 100644 --- a/client/my-sites/plans/plan-overview/plan-status/style.scss +++ b/client/my-sites/plans/plan-overview/plan-status/style.scss @@ -2,21 +2,8 @@ margin-bottom: 30px; } -.plan-status__info, -.plan-features__feature { - 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; - } +.plan-status__info { + @include plan-overview-row(); } .plan-status__header { @@ -60,17 +47,8 @@ font-weight: 700; } -.plan-status__button, -.plan-features__feature-button { - flex-shrink: 0; - margin-left: 15px; - min-width: 150px; - text-align: center; - - @include breakpoint( "<480px" ) { - margin: 15px 0 0 0; - width: 100%; - } +.plan-status__button { + @include plan-overview-button(); } .plan-status__progress { diff --git a/client/my-sites/plans/plan-overview/style.scss b/client/my-sites/plans/plan-overview/style.scss new file mode 100644 index 00000000000000..5af617458e1ca0 --- /dev/null +++ b/client/my-sites/plans/plan-overview/style.scss @@ -0,0 +1,27 @@ +@mixin plan-overview-button { + flex-shrink: 0; + margin-left: 15px; + min-width: 150px; + text-align: center; + + @include breakpoint( "<480px" ) { + margin: 15px 0 0 0; + width: 100%; + } +} + +@mixin plan-overview-row { + 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; + } +} \ No newline at end of file From 8b7c1ab5453d2cf95acc5eabb9b352d17859d33d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 17:05:12 +0000 Subject: [PATCH 12/21] Plans: Upating the font sizes for mobile devices, to make the status header more readable --- .../plans/plan-overview/plan-status/style.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/my-sites/plans/plan-overview/plan-status/style.scss b/client/my-sites/plans/plan-overview/plan-status/style.scss index 8272f6b5e13d20..a9aa1892640727 100644 --- a/client/my-sites/plans/plan-overview/plan-status/style.scss +++ b/client/my-sites/plans/plan-overview/plan-status/style.scss @@ -43,8 +43,12 @@ .plan-status__plan { line-height: 26px; font-family: Merriweather, Georgia, "Times New Roman", Times, serif; - font-size: 24px; + font-size: 18px; font-weight: 700; + + @include breakpoint( ">480px" ) { + font-size: 24px; + } } .plan-status__button { @@ -68,4 +72,8 @@ .plan-status__time-until-expiry { font-weight: 700; + + @include breakpoint( "<480px" ) { + font-size: 14px; + } } From 2550ef3ba67cffed147abf2dad5ef4047a32e9fd Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 16 Dec 2015 17:53:40 +0000 Subject: [PATCH 13/21] Plans: Move the plan feature component to its own directory --- assets/stylesheets/_components.scss | 2 +- .../{plan-features/feature.jsx => plan-feature/index.jsx} | 6 +++--- .../{plan-features => plan-feature}/style.scss | 6 +++--- client/my-sites/plans/plan-overview/plan-status/style.scss | 4 ---- 4 files changed, 7 insertions(+), 11 deletions(-) rename client/my-sites/plans/plan-overview/{plan-features/feature.jsx => plan-feature/index.jsx} (83%) rename client/my-sites/plans/plan-overview/{plan-features => plan-feature}/style.scss (58%) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 14a3358e83508b..d46b1816f0768b 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -188,7 +188,7 @@ @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-features/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'; diff --git a/client/my-sites/plans/plan-overview/plan-features/feature.jsx b/client/my-sites/plans/plan-overview/plan-feature/index.jsx similarity index 83% rename from client/my-sites/plans/plan-overview/plan-features/feature.jsx rename to client/my-sites/plans/plan-overview/plan-feature/index.jsx index d7daf966de9070..74e19a05e3086a 100644 --- a/client/my-sites/plans/plan-overview/plan-features/feature.jsx +++ b/client/my-sites/plans/plan-overview/plan-feature/index.jsx @@ -21,15 +21,15 @@ const PlanFeature = React.createClass( { render() { return ( - -
+ +
{ this.props.heading } { this.props.description }
{ this.props.button && + } + + ); +}; - render() { - return ( - -
- { this.props.heading } - { this.props.description } -
- - { this.props.button && - - } - - ); - } -} ); +PlanFeature.propTypes = { + button: React.PropTypes.shape( { + label: React.PropTypes.string.isRequired, + href: React.PropTypes.string + } ), + description: React.PropTypes.string.isRequired, + heading: React.PropTypes.string.isRequired +}; export default PlanFeature; diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 6bf1f48a1e8a37..3598af37911975 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -6,7 +6,7 @@ import React from 'react'; /** * Internal dependencies */ -import PlanFeature from './feature' +import PlanFeature from '../plan-feature' import SectionHeader from 'components/section-header'; import { isBusiness } from 'lib/products-values'; From 85dd88afb872dc9e35e979c79b76466377f84eb7 Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 17 Dec 2015 10:41:18 -0800 Subject: [PATCH 16/21] Plans: Link business trial users to `/design/:site` in `PlanFeatures` --- client/my-sites/plans/plan-overview/plan-features/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/plans/plan-overview/plan-features/index.jsx b/client/my-sites/plans/plan-overview/plan-features/index.jsx index 3598af37911975..98f31fb6925675 100644 --- a/client/my-sites/plans/plan-overview/plan-features/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-features/index.jsx @@ -32,6 +32,7 @@ const PlanFeatures = React.createClass( { heading={ this.translate( 'Google Analytics Integration' ) } /> From 6f50710b6c98b4da11740c245bb9140aff33b41c Mon Sep 17 00:00:00 2001 From: Drew Blaisdell Date: Thu, 17 Dec 2015 11:16:46 -0800 Subject: [PATCH 17/21] Plans: Replace element selectors with class names --- .../plans/plan-overview/plan-feature/index.jsx | 6 +++--- .../plans/plan-overview/plan-feature/style.scss | 10 ++-------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/client/my-sites/plans/plan-overview/plan-feature/index.jsx b/client/my-sites/plans/plan-overview/plan-feature/index.jsx index 38fdbcf57aaa53..41b7115cc2d6c4 100644 --- a/client/my-sites/plans/plan-overview/plan-feature/index.jsx +++ b/client/my-sites/plans/plan-overview/plan-feature/index.jsx @@ -12,9 +12,9 @@ import CompactCard from 'components/card/compact'; const PlanFeature = ( { button, description, heading } ) => { return ( -
- { heading } - { description } +
+ { heading } + { description }
{ button &&