Merge branch 'master' into fix/metric_explosion_grafana

assets/stylesheets/_components.scss

@@ -36,6 +36,7 @@
 @import 'components/foldable-card/style';
 @import 'components/follow-button/style';
 @import 'components/gauge/style';
+@import 'components/global-notices/style';
 @import 'components/gravatar/style';
 @import 'components/gridicon/style';
 @import 'components/social-logo/style';
@@ -198,6 +199,8 @@
 @import 'my-sites/plans/plan-overview/plan-progress/style';
 @import 'my-sites/plans/plan-overview/plan-remove/style';
 @import 'my-sites/plans/plan-overview/plan-status/style';
+@import 'my-sites/plans/jetpack-plan-price/style';
+@import 'my-sites/plans/jetpack-plan-details/style';
 @import 'my-sites/post/post-image/style';
 @import 'my-sites/post-selector/style';
 @import 'my-sites/plugins/featured-plugins/style';

assets/stylesheets/layout/_detail-page.scss

@@ -87,6 +87,10 @@
 			bottom: 0;
 			left: 0;
 		min-width: 200px;
+
+		@include breakpoint( "<480px" ) {
+			min-width: initial;
+		}
 
 		.detail-page__button-label {
 			display: none;
@@ -122,12 +126,6 @@
 		}
 	}
 
-	@include breakpoint( "<660px" ) {
-		.reader-share_button span {
-			display: none;
-		}
-	}
-
 	.post-options {
 		float: right;
 		margin-right: 4px;

assets/stylesheets/sections/_devdocs.scss

@@ -148,7 +148,8 @@
 	color: $gray-dark;
 }
 
-.design-assets__group > .gridicon:hover {
+.design-assets__group > .gridicon:hover,
+.design-assets__group > .social-logo:hover {
 	fill: $gray;
 	cursor: pointer;
 }

assets/stylesheets/sections/_domain-search.scss

@@ -218,9 +218,9 @@ form.google-apps-dialog {
 
 		&:before {
 			position: absolute;
-				left: 15px;
-				top: 6px;
-			@include noticon( '\f8b3', 60px );
+				left: 10px;
+				top: 7px;
+			@include noticon( '\f510', 30px );
 		}
 	}
 }

assets/stylesheets/sections/_posts-controls.scss

@@ -10,6 +10,10 @@
 	position: relative;
 	width: 100%;
 	height: (45 / 15) * 1em;
+
+	@include breakpoint( "<660px" ) {
+		height: (45 / 13) * 1em;
+	}
 }
 
 .post-controls__pane {

assets/stylesheets/shared/functions/_z-index.scss

@@ -91,6 +91,7 @@ $z-layers: (
 		'.accessible-focus .select-dropdown.is-open .select-dropdown__container': 170,
 		'.popover.editor-visibility__popover': 179,
 		'.feature-example__gradient': 179,
+		'.global-notices': 179,
 		'.notices-list.is-pinned': 180,
 		'.notices-list.is-pinned .notice': 180,
 		'.masterbar': 180,

client/boot/index.js

@@ -154,15 +154,14 @@ function boot() {
 		i18n.setLocaleSlug( user.get().localeSlug );
 	} );
 
-	// Temporary support for development of the Support User feature
-	if ( config.isEnabled( 'support-user' ) ) {
-		require( 'lib/user/dev-support-user' )( user );
-	}
-
 	translatorJumpstart.init();
 
 	reduxStore = createReduxStore();
 
+	if ( config.isEnabled( 'support-user' ) ) {
+		require( 'lib/user/support-user-interop' )( reduxStore );
+	}
+
 	if ( user.get() ) {
 		// When logged in the analytics module requires user and superProps objects
 		// Inject these here

client/components/button-group/makefile

@@ -0,0 +1,10 @@
+REPORTER ?= spec
+NODE_BIN := $(shell npm bin)
+MOCHA ?= ../../../node_modules/.bin/mocha
+BASE_DIR := $(NODE_BIN)/../..
+NODE_PATH := test:$(BASE_DIR)/client
+
+test:
+	@NODE_ENV=test NODE_PATH=$(NODE_PATH) $(MOCHA) --compilers jsx:babel/register --reporter $(REPORTER)
+
+.PHONY: test

client/components/button-group/test/test.js

@@ -0,0 +1,43 @@
+
+require( 'lib/react-test-env-setup' )();
+
+/**
+ * External dependencies
+ */
+import { assert } from 'chai';
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+describe( 'ButtonGroup', function() {
+	let sandbox, ButtonGroup, Button;
+	beforeEach( function() {
+		sandbox = sinon.sandbox.create();
+		sandbox.stub( console, 'error');
+		sandbox.stub( console, 'log');
+
+		ButtonGroup = require( '../index' );
+		Button = require( 'components/button' );
+	} );
+
+	afterEach( function() {
+		sandbox.restore();
+	})
+
+	it( 'should have ButtonGroup class', function() {
+		const buttonGroup = shallow( <ButtonGroup /> );
+		assert.equal( 1, buttonGroup.find( '.button-group' ).length );
+	} );
+
+	it( 'should contains the same number of .button nodes than <Button>s it receives', function() {
+		const buttonGroup = shallow( <ButtonGroup><Button>test</Button><Button>test2</Button></ButtonGroup> );
+		assert.equal( 2, buttonGroup.find( Button ).length );
+	} );
+
+	it( 'should throw an error if any of the children is not a <Button>', function() {
+		const buttonGroup = (
+			<ButtonGroup><div id="test">test</div></ButtonGroup>
+		);
+		sinon.assert.calledWithExactly( console.error, 'Warning: Failed propType: All children elements should be a Button.' );
+	} );
+} );

client/components/domains/domain-registration-suggestion/index.jsx

@@ -9,6 +9,7 @@ var React = require( 'react' ),
  */
 var DomainSuggestion = require( 'components/domains/domain-suggestion' ),
 	cartItems = require( 'lib/cart-values/cart-items' ),
+	abtest = require( 'lib/abtest' ).abtest,
 	DomainSuggestionFlag = require( 'components/domains/domain-suggestion-flag' );
 
 var DomainRegistrationSuggestion = React.createClass( {
@@ -27,6 +28,12 @@ var DomainRegistrationSuggestion = React.createClass( {
 			return null;
 		}
 
+		if ( abtest( 'domainRegistrationCta' ) === 'select' ) {
+			return this.translate( 'Select', {
+				context: 'Select a domain registration to be added to the shopping cart'
+			} );
+		}
+
 		return this.translate( 'Add', {
 			context: 'Add a domain registration to the shopping cart'
 		} );

client/components/email-verification/email-verification-notice.jsx

@@ -8,8 +8,7 @@ var React = require( 'react' ),
 /**
  * Internal dependencies
  */
-var notices = require( 'notices' ),
-	sites = require( 'lib/sites-list' )(),
+var sites = require( 'lib/sites-list' )(),
 	Notice = require( 'components/notice' ),
 	emailVerification = require( 'components/email-verification' );
 
@@ -74,20 +73,24 @@ module.exports = React.createClass( {
 				emailSent: response && response.success,
 				error: error,
 				pendingRequest: false
-			}, this.showEmailSentSuccessMessage );
+			} );
 		}.bind( this ) );
 	},
 
-	showEmailSentSuccessMessage: function() {
-		var user, noticeText;
-		if ( this.state.emailSent ) {
-			user = this.props.user.get();
+	emailSentNotice: function() {
+		var user = this.props.user.get(),
 			noticeText = this.translate(
 				'We sent another confirmation email to %(email)s.',
 				{ args: { email: user.email } }
 			);
-			notices.success( noticeText );
-		}
+
+		return (
+			<Notice
+				text={ noticeText }
+				status="is-success"
+				onDismissClick={ this.dismissNotice }
+				className="email-verification-notice" />
+		);
 	},
 
 	handleChangeEmail: function() {
@@ -122,10 +125,10 @@ module.exports = React.createClass( {
 					{ this.translate(
 						'{{requestButton}}Re-send your activation email{{/requestButton}} ' +
 						'or {{changeButton}}change the email address on your account{{/changeButton}}.', {
-						components: {
-							requestButton: <button className="button is-link" onClick={ this.sendVerificationEmail } />,
-							changeButton: <button className="button is-link" onClick={ this.handleChangeEmail } />
-						} }
+							components: {
+								requestButton: <button className="button is-link" onClick={ this.sendVerificationEmail } />,
+								changeButton: <button className="button is-link" onClick={ this.handleChangeEmail } />
+							} }
 					) }
 				</p>
 			</div> );
@@ -135,9 +138,9 @@ module.exports = React.createClass( {
 	},
 
 	verifiedNotice: function() {
-		var noticeText = isEmpty( sites.get() ) ?
-			this.translate( "You've successfully verified your email address." ) :
-			this.translate( "Email verified! Now that you've confirmed your email address you can publish posts on your blog." );
+		var noticeText = isEmpty( sites.get() )
+			? this.translate( "You've successfully verified your email address." )
+			: this.translate( "Email verified! Now that you've confirmed your email address you can publish posts on your blog." );
 
 		return (
 			<Notice status="is-success" onDismissClick={ this.dismissNotice } className="email-verification-notice">
@@ -149,10 +152,14 @@ module.exports = React.createClass( {
 	render: function() {
 		var user = this.props.user.get();
 
-		if ( ! user || this.state.emailSent || this.state.dismissed || ! this.state.activeNotice ) {
+		if ( ! user || this.state.dismissed || ! this.state.activeNotice ) {
 			return null;
 		}
 
+		if ( this.state.emailSent ) {
+			return this.emailSentNotice();
+		}
+
 		if ( 'UNVERIFIED' === this.state.activeNotice && ! user.email_verified ) {
 			return this.unverifiedNotice();
 		}

client/components/empty-content/empty-content.jsx

@@ -16,7 +16,10 @@ module.exports = React.createClass( {
 		] ),
 		illustration: React.PropTypes.string,
 		illustrationWidth: React.PropTypes.number,
-		line: React.PropTypes.string,
+		line: React.PropTypes.oneOfType( [
+			React.PropTypes.string,
+			React.PropTypes.array
+		] ),
 		action: React.PropTypes.oneOfType( [
 			React.PropTypes.string,
 			React.PropTypes.element

client/components/forms/form-setting-explanation/index.jsx

@@ -11,7 +11,8 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<p { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-setting-explanation' ) } >
+			<p { ...omit( this.props, 'className' ) }
+				className={ classnames( this.props.className, 'form-setting-explanation', { 'no-validate': this.props.noValidate } ) } >
 				{ this.props.children }
 			</p>
 		);

client/components/global-notices/index.jsx

@@ -2,7 +2,6 @@
  * External Dependencies
  */
 import React from 'react';
-import classNames from 'classnames';
 import debugModule from 'debug';
 
 /**
@@ -30,48 +29,18 @@ const NoticesList = React.createClass( {
 		notices: React.PropTypes.oneOfType( [
 			React.PropTypes.object,
 			React.PropTypes.array
-		] ),
-		forcePinned: React.PropTypes.bool
-	},
-
-	getInitialState() {
-		return { pinned: this.props.forcePinned };
+		] )
 	},
 
 	getDefaultProps() {
 		return {
 			id: 'overlay-notices',
-			notices: Object.freeze( [] ),
-			forcePinned: false
+			notices: Object.freeze( [] )
 		};
 	},
 
 	componentWillMount() {
-		debug( 'Mounting Notices React component.' );
-	},
-
-	componentDidMount() {
-		if ( ! this.props.forcePinned ) {
-			window.addEventListener( 'scroll', this.updatePinnedState );
-		}
-	},
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.forcePinned && ! prevProps.forcePinned ) {
-			window.removeEventListener( 'scroll', this.updatePinnedState );
-			this.setState( { pinned: true } );
-		} else if ( ! this.props.forcePinned && prevProps.forcePinned ) {
-			window.addEventListener( 'scroll', this.updatePinnedState );
-			this.updatePinnedState();
-		}
-	},
-
-	componentWillUnmount() {
-		window.removeEventListener( 'scroll', this.updatePinnedState );
-	},
-
-	updatePinnedState() {
-		this.setState( { pinned: window.scrollY > 0 } );
+		debug( 'Mounting Global Notices React component.' );
 	},
 
 	removeNotice( notice ) {
@@ -123,14 +92,9 @@ const NoticesList = React.createClass( {
 			return null;
 		}
 		return (
-			<div>
-				<div id={ this.props.id } className={ classNames( 'notices-list', { 'is-pinned': this.state.pinned } ) }>
-					<DeleteSiteNotices />
-					{ noticesList }
-				</div>
-				{ this.state.pinned && ! this.props.forcePinned
-					? <div className="notices-list__whitespace" />
-					: null }
+			<div id={ this.props.id } className="global-notices">
+				<DeleteSiteNotices />
+				{ noticesList }
 			</div>
 		);
 	}