Signup: Fix Themes step horizontal scroll (#11299)

* Fix Themes step horizontal scroll * Fix leftover horizontal scroll * Update the way header texts are set * Update code according to code review
Automattic · Feb 10, 2017 · e078ace · e078ace
1 parent 4096432
commit e078ace
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 45 deletions.
diff --git a/client/signup/step-wrapper/index.jsx b/client/signup/step-wrapper/index.jsx
@@ -14,7 +14,14 @@ import config from 'config';
 export default React.createClass( {
 	displayName: 'StepWrapper',
 
+	propTypes: {
+		shouldHideNavButtons: React.PropTypes.bool
+	},
+
 	renderBack: function() {
+		if ( this.props.shouldHideNavButtons ) {
+			return null;
+		}
 		return (
 			<NavigationLink
 				direction="back"
@@ -28,7 +35,7 @@ export default React.createClass( {
 	},
 
 	renderSkip: function() {
-		if ( this.props.goToNextStep ) {
+		if ( ! this.props.shouldHideNavButtons && this.props.goToNextStep ) {
 			return (
 				<NavigationLink
 					direction="forward"
@@ -78,7 +85,7 @@ export default React.createClass( {
 					headerText={ this.headerText() }
 					subHeaderText={ this.subHeaderText() }>
 					{ config.isEnabled( 'jetpack/connect' )
-						? ( headerButton )
+						? headerButton
 						: null }
 				</StepHeader>
 				<div className="step-wrapper__content is-animated-content">

diff --git a/client/signup/steps/theme-selection/index.jsx b/client/signup/steps/theme-selection/index.jsx
@@ -66,13 +66,34 @@ class ThemeSelectionStep extends Component {
 	};
 
 	renderThemesList() {
+		const pressableWrapperClassName = classNames(
+			'theme-selection__pressable-wrapper',
+			{ 'is-hidden': ! this.state.showPressable }
+		);
+
+		const themesWrapperClassName = classNames(
+			'theme-selection__themes-wrapper',
+			{ 'is-hidden': this.state.showPressable }
+		);
+
 		return (
-			<SignupThemesList
-				surveyQuestion={ this.props.chosenSurveyVertical }
-				designType={ this.props.designType || this.props.signupDependencies.designType }
-				handleScreenshotClick={ this.pickTheme }
-				handleThemeUpload={ this.handleThemeUpload }
-			/>
+			<div className="theme-selection__pressable-substep-wrapper">
+				<div className={ pressableWrapperClassName }>
+					<PressableThemeStep
+						{ ...this.props }
+						onBackClick={ this.handleStoreBackClick }
+					/>
+				</div>
+				<div className={ themesWrapperClassName }>
+					<SignupThemesList
+						className={ themesWrapperClassName }
+						surveyQuestion={ this.props.chosenSurveyVertical }
+						designType={ this.props.designType || this.props.signupDependencies.designType }
+						handleScreenshotClick={ this.pickTheme }
+						handleThemeUpload={ this.handleThemeUpload }
+					/>
+				</div>
+			</div>
 		);
 	}
 
@@ -101,42 +122,31 @@ class ThemeSelectionStep extends Component {
 
 	render = () => {
 		const defaultDependencies = this.props.useHeadstart ? { themeSlugWithRepo: 'pub/twentysixteen' } : undefined;
+		const { translate } = this.props;
 
-		const pressableWrapperClassName = classNames( {
-			'theme-selection__pressable-wrapper': true,
-			'is-hidden': ! this.state.showPressable,
-		} );
-
-		const themesWrapperClassName = classNames( {
-			'theme-selection__themes-wrapper': true,
-			'is-hidden': this.state.showPressable,
-		} );
+		const headerText = this.state.showPressable
+			? translate( 'Upload your WordPress Theme' )
+			: translate( 'Choose a theme.' );
 
-		const { translate } = this.props;
+		const subHeaderText = this.state.showPressable
+			? translate( 'Our partner Pressable is here to help you', {
+				context: 'Subheader text in Signup, when a user chooses the Upload theme in the Themes step'
+			} )
+			: translate( 'No need to overthink it. You can always switch to a different theme later.', {
+				context: 'Themes step subheader in Signup'
+			} );
 
 		return (
-			<div>
-				<div className={ pressableWrapperClassName } >
-					<PressableThemeStep
-						{ ... this.props }
-						onBackClick={ this.handleStoreBackClick }
-					/>
-				</div>
-				<div className={ themesWrapperClassName } >
-					<StepWrapper
-						fallbackHeaderText={ translate( 'Choose a theme.' ) }
-						fallbackSubHeaderText={
-							translate( 'No need to overthink it. You can always switch to a different theme later.' )
-						}
-						subHeaderText={
-							translate( 'Choose a theme. You can always switch to a different theme later.' )
-						}
-						stepContent={ this.renderThemesList() }
-						defaultDependencies={ defaultDependencies }
-						headerButton={ this.renderJetpackButton() }
-						{ ...this.props } />
-					</div>
-			</div>
+			<StepWrapper
+				fallbackHeaderText={ headerText }
+				fallbackSubHeaderText={ subHeaderText }
+				subHeaderText={ subHeaderText }
+				stepContent={ this.renderThemesList() }
+				defaultDependencies={ defaultDependencies }
+				headerButton={ this.renderJetpackButton() }
+				shouldHideNavButtons={ this.state.showPressable }
+				{ ...this.props }
+			/>
 		);
 	}
 }

diff --git a/client/signup/steps/theme-selection/pressable-theme/index.jsx b/client/signup/steps/theme-selection/pressable-theme/index.jsx
@@ -18,7 +18,6 @@ import FormInputValidation from 'components/forms/form-input-validation';
 import FormButton from 'components/forms/form-button';
 import FormLabel from 'components/forms/form-label';
 import FormSectionHeading from 'components/forms/form-section-heading';
-import StepHeader from 'signup/step-header';
 import Button from 'components/button';
 import analytics from 'lib/analytics';
 
@@ -111,10 +110,6 @@ export default React.createClass( {
 	render() {
 		return (
 			<div className="pressable-theme">
-				<StepHeader
-					headerText={ this.translate( 'Upload your WordPress Theme' ) }
-					subHeaderText={ this.translate( 'Our partner Pressable is here to help you' ) }
-				/>
 				{ this.renderThemeForm() }
 				<div className="pressable-theme__back-button-wrapper">
 					<Button compact borderless onClick={ this.props.onBackClick }>

diff --git a/client/signup/steps/theme-selection/style.scss b/client/signup/steps/theme-selection/style.scss
@@ -27,3 +27,9 @@
 	}
 }
 
+/**
+ * Fixes Pressable sub-step width
+ */
+.theme-selection__pressable-substep-wrapper {
+	position: relative;
+}
diff --git a/client/signup/style.scss b/client/signup/style.scss
@@ -13,6 +13,7 @@
 	position: absolute;
 		left: 0;
 		right: 0;
+	overflow: hidden;
 
 	@include breakpoint( "<480px" ) {
 		margin: 0;