From 3b532598c7bb52577cabd589cb8451a68c891e14 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 21 May 2019 14:23:34 +0200 Subject: [PATCH 01/12] Add static Checklist CTA to my plan --- .../my-plan/my-plan-header/checklist-cta.js | 29 +++++++++++++++++++ .../checklist-progress-card/index.js | 0 .../progress-bar/index.js | 0 .../progress-bar/style.scss | 0 .../checklist-progress-card/style.scss | 0 .../index.js} | 12 ++++++-- _inc/client/my-plan/style.scss | 27 +++++++++++++++-- _inc/client/scss/style.scss | 1 - 8 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 _inc/client/my-plan/my-plan-header/checklist-cta.js rename _inc/client/my-plan/{ => my-plan-header}/checklist-progress-card/index.js (100%) rename _inc/client/my-plan/{ => my-plan-header}/checklist-progress-card/progress-bar/index.js (100%) rename _inc/client/my-plan/{ => my-plan-header}/checklist-progress-card/progress-bar/style.scss (100%) rename _inc/client/my-plan/{ => my-plan-header}/checklist-progress-card/style.scss (100%) rename _inc/client/my-plan/{my-plan-header.jsx => my-plan-header/index.js} (91%) diff --git a/_inc/client/my-plan/my-plan-header/checklist-cta.js b/_inc/client/my-plan/my-plan-header/checklist-cta.js new file mode 100644 index 0000000000000..35f9512a4be0e --- /dev/null +++ b/_inc/client/my-plan/my-plan-header/checklist-cta.js @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import React from 'react'; +import { translate as __ } from 'i18n-calypso'; + +/** + * Internal dependencies + */ +import Button from 'components/button'; + +export default function ChecklistCta( { placeholder, siteSlug } ) { + return ( +
+ { ! placeholder && ( + + ) } +
+ ); +} diff --git a/_inc/client/my-plan/checklist-progress-card/index.js b/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js similarity index 100% rename from _inc/client/my-plan/checklist-progress-card/index.js rename to _inc/client/my-plan/my-plan-header/checklist-progress-card/index.js diff --git a/_inc/client/my-plan/checklist-progress-card/progress-bar/index.js b/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/index.js similarity index 100% rename from _inc/client/my-plan/checklist-progress-card/progress-bar/index.js rename to _inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/index.js diff --git a/_inc/client/my-plan/checklist-progress-card/progress-bar/style.scss b/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/style.scss similarity index 100% rename from _inc/client/my-plan/checklist-progress-card/progress-bar/style.scss rename to _inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/style.scss diff --git a/_inc/client/my-plan/checklist-progress-card/style.scss b/_inc/client/my-plan/my-plan-header/checklist-progress-card/style.scss similarity index 100% rename from _inc/client/my-plan/checklist-progress-card/style.scss rename to _inc/client/my-plan/my-plan-header/checklist-progress-card/style.scss diff --git a/_inc/client/my-plan/my-plan-header.jsx b/_inc/client/my-plan/my-plan-header/index.js similarity index 91% rename from _inc/client/my-plan/my-plan-header.jsx rename to _inc/client/my-plan/my-plan-header/index.js index 9fd2ce3510502..3053cfc4ed1d2 100644 --- a/_inc/client/my-plan/my-plan-header.jsx +++ b/_inc/client/my-plan/my-plan-header/index.js @@ -10,9 +10,10 @@ import { connect } from 'react-redux'; /** * Internal dependencies */ -import { imagePath } from 'constants/urls'; -import { getUpgradeUrl, showBackups } from 'state/initial-state'; +import ChecklistCta from './checklist-cta'; import ChecklistProgress from './checklist-progress-card'; +import { getUpgradeUrl, getSiteRawUrl, showBackups } from 'state/initial-state'; +import { imagePath } from 'constants/urls'; class MyPlanHeader extends React.Component { trackLearnMore = () => { @@ -24,6 +25,7 @@ class MyPlanHeader extends React.Component { }; render() { + const { siteSlug } = this.props; let planCard = ''; switch ( getPlanClass( this.props.plan ) ) { case 'is-free-plan': @@ -43,6 +45,7 @@ class MyPlanHeader extends React.Component {

{ __( 'Get started with hassle-free design, stats, and performance tools.' ) }

+ ); @@ -71,6 +74,7 @@ class MyPlanHeader extends React.Component { { __( 'Spam filtering and priority support.' ) }

) } + ); @@ -95,6 +99,7 @@ class MyPlanHeader extends React.Component { 'Full security suite, marketing and revenue automation tools, unlimited video hosting, and priority support.' ) }

+ ); @@ -119,6 +124,7 @@ class MyPlanHeader extends React.Component { 'Full security suite, marketing and revenue automation tools, unlimited video hosting, unlimited themes, enhanced search, and priority support.' ) }

+ ); @@ -131,6 +137,7 @@ class MyPlanHeader extends React.Component {

+
); @@ -146,6 +153,7 @@ class MyPlanHeader extends React.Component { } export default connect( state => { return { + siteSlug: getSiteRawUrl( state ), showBackups: showBackups( state ), plansMainTopUpgradeUrl: getUpgradeUrl( state, 'plans-main-top' ), }; diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 49ee1a9e02776..60b756e9437b8 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -124,8 +124,29 @@ margin: 0; } -.jp-landing__plan-iconcard-current h3 { - font-size: 1.5em; +.jp-landing__plan-iconcard-current { + h3 { + font-size: 1.5em; + width: 100%; + } + + @include breakpoint( ">660px" ) { + display: flex; + flex-wrap: wrap; + + .jp-landing__plan-features-text { + margin-right: 3em; + } + } + +} + +.jp-landing__plan-features-header-checklist-cta-container { + align-self: center; + + .dops-button { + margin-right: 0; + } } .jp-landing__plan-features-card { @@ -279,3 +300,5 @@ text-align: center; } } + +@import './my-plan-header/checklist-progress-card/style.scss'; diff --git a/_inc/client/scss/style.scss b/_inc/client/scss/style.scss index 9b983d64807ff..e86c2969d6ec1 100644 --- a/_inc/client/scss/style.scss +++ b/_inc/client/scss/style.scss @@ -47,7 +47,6 @@ @import '../components/apps-card/style'; @import '../components/jetpack-dialogue/style'; @import '../components/about-page/style'; -@import '../my-plan/checklist-progress-card/style.scss'; // Page Templates @import '../at-a-glance/style'; From ff3adf144ab94f33ded5046b700623f1e6c17c42 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Tue, 21 May 2019 14:42:55 +0200 Subject: [PATCH 02/12] Remove instead of placeholder --- .../my-plan/my-plan-header/checklist-cta.js | 20 +++++++------------ _inc/client/my-plan/my-plan-header/index.js | 1 - 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/_inc/client/my-plan/my-plan-header/checklist-cta.js b/_inc/client/my-plan/my-plan-header/checklist-cta.js index 35f9512a4be0e..cc39e8615b438 100644 --- a/_inc/client/my-plan/my-plan-header/checklist-cta.js +++ b/_inc/client/my-plan/my-plan-header/checklist-cta.js @@ -11,19 +11,13 @@ import Button from 'components/button'; export default function ChecklistCta( { placeholder, siteSlug } ) { return ( -
- { ! placeholder && ( - - ) } +
+
); } diff --git a/_inc/client/my-plan/my-plan-header/index.js b/_inc/client/my-plan/my-plan-header/index.js index 3053cfc4ed1d2..48867ff91f864 100644 --- a/_inc/client/my-plan/my-plan-header/index.js +++ b/_inc/client/my-plan/my-plan-header/index.js @@ -137,7 +137,6 @@ class MyPlanHeader extends React.Component {

-
); From 39c548548bc10a42d3c9725282ea9908502a5576 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 09:33:16 +0200 Subject: [PATCH 03/12] Finish removing placeholder references --- _inc/client/my-plan/my-plan-header/checklist-cta.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/_inc/client/my-plan/my-plan-header/checklist-cta.js b/_inc/client/my-plan/my-plan-header/checklist-cta.js index cc39e8615b438..6301be632df16 100644 --- a/_inc/client/my-plan/my-plan-header/checklist-cta.js +++ b/_inc/client/my-plan/my-plan-header/checklist-cta.js @@ -9,13 +9,10 @@ import { translate as __ } from 'i18n-calypso'; */ import Button from 'components/button'; -export default function ChecklistCta( { placeholder, siteSlug } ) { +export default function ChecklistCta( { siteSlug } ) { return (
-
From 38ebdaeb21c053d65c47887ddac47146a2f49943 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 09:49:33 +0200 Subject: [PATCH 04/12] Fix bad class name --- _inc/client/my-plan/my-plan-header/index.js | 2 +- _inc/client/my-plan/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_inc/client/my-plan/my-plan-header/index.js b/_inc/client/my-plan/my-plan-header/index.js index 48867ff91f864..b8466858a4ee5 100644 --- a/_inc/client/my-plan/my-plan-header/index.js +++ b/_inc/client/my-plan/my-plan-header/index.js @@ -90,7 +90,7 @@ class MyPlanHeader extends React.Component { alt={ __( 'Jetpack Premium Plan' ) } /> -
+

{ __( 'Welcome to Jetpack Premium' ) }

diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 60b756e9437b8..c650b9160fd3b 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -124,7 +124,7 @@ margin: 0; } -.jp-landing__plan-iconcard-current { +.jp-landing__plan-card-current { h3 { font-size: 1.5em; width: 100%; From e88850148912016cb78b9b2c5c5b7fcb9628da9b Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 09:58:55 +0200 Subject: [PATCH 05/12] Remove unused style --- _inc/client/my-plan/style.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index c650b9160fd3b..e667275e440f7 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -109,17 +109,10 @@ line-height: 1.25; } -.jp-landing-plans__header-description, -.jp-landing-plans__header-text { +.jp-landing-plans__header-description { color: lighten($gray, 10%); } -.jp-landing-plans__header-text { - font-size: rem( 14px ); - padding: rem( 24px ) 0; - margin: 0; -} - .jp-landing-plans__header-btn-container { margin: 0; } From 1e056735e818e77187e056f0d33dc90b49e2c048 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:00:06 +0200 Subject: [PATCH 06/12] Remove unused jp-landing-plans__header-description --- _inc/client/my-plan/style.scss | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index e667275e440f7..c23bcf338858d 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -78,8 +78,7 @@ } } -.jp-landing-plans__header-title, -.jp-landing-plans__header-description { +.jp-landing-plans__header-title { line-height: 1.5; @include breakpoint( ">660px" ) { @@ -98,21 +97,11 @@ font-size: rem( 20px ); } -.jp-landing-plans__header-description { - font-size: rem( 14px ); - margin: 0; - padding-bottom: rem( 16px ); -} - .jp-landing-plans__header-subtitle { font-size: rem( 16px ); line-height: 1.25; } -.jp-landing-plans__header-description { - color: lighten($gray, 10%); -} - .jp-landing-plans__header-btn-container { margin: 0; } From 6510c6c6418c60bc0ec512b50fad2dc0b72bf510 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:00:28 +0200 Subject: [PATCH 07/12] Remove unused jp-landing-plans__header-btn-container class --- _inc/client/my-plan/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index c23bcf338858d..0652ce97da294 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -102,10 +102,6 @@ line-height: 1.25; } -.jp-landing-plans__header-btn-container { - margin: 0; -} - .jp-landing__plan-card-current { h3 { font-size: 1.5em; From 8cb14fb01136fd2aa239fe587a89c3729c40aa98 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:02:12 +0200 Subject: [PATCH 08/12] Remove unused jp-landing-plans__header-title class --- _inc/client/my-plan/style.scss | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 0652ce97da294..4498f1d459004 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -78,25 +78,12 @@ } } -.jp-landing-plans__header-title { - line-height: 1.5; - - @include breakpoint( ">660px" ) { - text-align: center; - } -} - -.jp-landing-plans__header-title, .jp-landing-plans__header-subtitle { color: $white; font-weight: 400; margin: 0; } -.jp-landing-plans__header-title { - font-size: rem( 20px ); -} - .jp-landing-plans__header-subtitle { font-size: rem( 16px ); line-height: 1.25; From c0e9fd60f187c154d3f258e5b55dcd56753f73d3 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:02:39 +0200 Subject: [PATCH 09/12] Remove unused jp-landing-plans__header-subtitle class --- _inc/client/my-plan/style.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 4498f1d459004..14cf54ba430ad 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -78,17 +78,6 @@ } } -.jp-landing-plans__header-subtitle { - color: $white; - font-weight: 400; - margin: 0; -} - -.jp-landing-plans__header-subtitle { - font-size: rem( 16px ); - line-height: 1.25; -} - .jp-landing__plan-card-current { h3 { font-size: 1.5em; From 6d3c202d82332c88573b66ab33057e2856e2ef5f Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:04:23 +0200 Subject: [PATCH 10/12] Remove unused classes --- _inc/client/my-plan/style.scss | 41 ---------------------------------- 1 file changed, 41 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 14cf54ba430ad..41ee04f498da3 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -37,47 +37,6 @@ } } -// clouds are a little hacky, but works for IE11 -jg -.jp-landing-plans__clouds { - position: relative; - overflow: hidden; - padding-top: rem( 80px ); - - img { - position: absolute; - bottom: -2px; - left: -5%; - right: -5%; - height: auto; - width: 110%; - } - - @include breakpoint( "<660px" ) { - display: none; - } -} -// end IE11 cloud hack - -.jp-landing-plans__header-col-left { - flex-basis: 45%; - - @include breakpoint( ">660px" ) { - padding-left: rem( 32px ); - } -} - -.jp-landing-plans__header-col-right { - flex-basis: 55%; - - @include breakpoint( ">660px" ) { - padding: 0 rem( 32px ); - } - - @include breakpoint( "<660px" ) { - text-align: center; - } -} - .jp-landing__plan-card-current { h3 { font-size: 1.5em; From 7d3c89693f22da4b957e47acc7a29491684a18c4 Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:06:37 +0200 Subject: [PATCH 11/12] Remove unused classes --- _inc/client/my-plan/style.scss | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index 41ee04f498da3..fa46739608586 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -9,34 +9,6 @@ } } -.jp-landing-plans__header { - background: $gray-dark; - - @include breakpoint( ">660px" ) { - padding: rem( 32px ) 0 0; - } - - @include breakpoint( "<660px" ) { - padding: rem( 32px ); - } -} - -.jp-landing-plans__header-img-container { - margin: rem( 32px ) 0 0; - overflow: hidden; - - @include breakpoint( ">660px" ) { - display: flex; - flex-wrap: nowrap; - flex-direction: row; - align-items: center; - } - - @include breakpoint( "<660px" ) { - margin-bottom: 0; - } -} - .jp-landing__plan-card-current { h3 { font-size: 1.5em; From 4c9859b13931fa6af7abd8b66e1a7e39fa2cfb0b Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Wed, 22 May 2019 10:43:36 +0200 Subject: [PATCH 12/12] Ensure correct line break and placeholder display --- _inc/client/my-plan/style.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss index fa46739608586..d87276a8fbd6b 100644 --- a/_inc/client/my-plan/style.scss +++ b/_inc/client/my-plan/style.scss @@ -10,9 +10,22 @@ } .jp-landing__plan-card-current { + // Force a break by including full-width psuedo-element at correct position. + &::before { + content: ''; + order: 20; + width: 100%; + } + h3 { font-size: 1.5em; - width: 100%; + width: 100%; // Make sure placeholder appears + order: 10; + } + + .jp-landing__plan-features-text { + font-size: rem( 14px ); + order: 30; } @include breakpoint( ">660px" ) { @@ -27,6 +40,7 @@ } .jp-landing__plan-features-header-checklist-cta-container { + order: 30; align-self: center; .dops-button {