newspack-components 2.0.3 → 2.1.0

package/src/with-wizard/style.scss

@@ -40,60 +40,13 @@ svg {
 	}
 }
 
-// Welcome Screen
+// Blue Screen
 
-.newspack_page_newspack-setup-wizard__welcome {
+.newspack-wizard__blue {
 	#wpwrap {
 		background: $primary-500;
 	}
 
-	.newspack-wizard__header {
-		display: none;
-	}
-
-	.newspack-card {
-		background: white;
-		border: 0;
-		margin: 0 auto 32px;
-
-		@media screen and ( min-width: 584px ) {
-			max-width: 520px;
-		}
-
-		&.loading {
-			cursor: wait;
-		}
-
-		&__footer {
-			align-items: center;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
-
-			.newspack-checkbox-control {
-				margin: 12px 16px 12px 0;
-			}
-		}
-
-		h1 {
-			align-items: center;
-			display: flex;
-			flex-wrap: wrap;
-
-			svg {
-				margin-right: 8px;
-			}
-		}
-	}
-
-	.newspack-logo__wrapper {
-		margin-bottom: 32px;
-	}
-
-	.newspack-buttons-card {
-		margin: 0;
-	}
-
 	.newspack-footer {
 		background: $primary-500;
 		border-color: $primary-500;
@@ -165,80 +118,82 @@ svg {
 		}
 
 		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 $gray-700, 520px 96px 0 0 white,
+			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 $gray-700, 512px 96px 0 0 white,
 				0 96px 0 0 $gray-700;
 			width: calc( 100% - ( 64px * 2 ) );
 		}
 	}
 
-	// Welcome Screen
-	.newspack_page_newspack-setup-wizard__welcome & {
+	// Blue Screen
+	.newspack-wizard__blue & {
 		background: $primary-500;
 
-		&::before,
-		&::after {
-			left: 50%;
-			position: absolute;
-			transform: translate( -50% );
-		}
-
 		&::before {
-			border-radius: 4px;
+			animation: loading-quiet 1.25s ease-in-out infinite;
 			background: white;
-			height: 192px;
-			max-width: 584px;
-			top: 120px;
-			width: calc( 100% - ( 32px * 2 ) );
-
-			@media screen and ( min-width: 744px ) {
-				width: calc( 100% - ( 64px * 2 ) );
-			}
+			border-radius: 0;
+			box-shadow: 0;
+			height: 8px;
+			left: 0;
+			margin: 0;
+			position: absolute;
+			right: 100%;
+			top: 0;
+			width: auto;
 		}
 
 		&::after {
-			box-shadow: inset -130px 0 0 0 white, 0 64px 0 0 $gray-700, 0 96px 0 0 $gray-700;
-			margin: 0;
-			max-width: 520px;
-			top: 156px;
-			width: calc( 100% - ( 64px * 2 ) );
-
-			@media screen and ( min-width: 600px ) {
-				box-shadow: inset -260px 0 0 0 white, 0 64px 0 0 $gray-700, 0 96px 0 0 $gray-700;
-			}
+			display: none;
 		}
 	}
 
 	// Quiet
 	&-quiet {
-		cursor: wait;
 		position: relative;
 
-		> * {
-			opacity: 0.5;
-		}
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: $primary-500;
+		&::before,
+		&::after {
 			content: '';
+			cursor: wait;
 			display: block;
-			height: 8px;
 			left: 0;
 			position: fixed;
-			right: 100%;
 			top: 46px;
-			z-index: 1;
 
 			@media screen and ( min-width: 783px ) {
 				top: 32px;
 				margin-left: 160px;
 
-				body.auto-fold &,
+				body.auto-fold & {
+					margin-left: 36px;
+				}
+			}
+
+			@media screen and ( min-width: 961px ) {
+				body.auto-fold & {
+					margin-left: 160px;
+				}
+
 				body.folded & {
 					margin-left: 36px;
 				}
 			}
 		}
+
+		&::before {
+			animation: loading-quiet 1.25s ease-in-out infinite;
+			background: $primary-500;
+			height: 8px;
+			right: 100%;
+			z-index: 9999;
+		}
+
+		&::after {
+			background: rgba( white, 0.7 );
+			bottom: 0;
+			right: 0;
+			z-index: 9998;
+		}
 	}
 }
 

package/src/with-wizard-screen/index.js

@@ -7,7 +7,7 @@ import { category } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { Button, Handoff, NewspackIcon, Notice, TabbedNavigation, WizardPagination } from '../';
+import { Button, Handoff, NewspackIcon, Notice, TabbedNavigation } from '../';
 import { buttonProps } from '../../../shared/js/';
 import './style.scss';
 
@@ -31,8 +31,8 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 			tabbedNavigation,
 			secondaryButtonText,
 			secondaryButtonAction,
-			routes,
 			renderAboveContent,
+			disableUpcomingInTabbedNavigation,
 		} = props;
 		const retrievedButtonProps = buttonProps( buttonAction );
 		const retrievedSecondaryButtonProps = buttonProps( secondaryButtonAction );
@@ -58,13 +58,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 			);
 		return (
 			<>
-				{ newspack_aux_data.is_debug_mode && (
-					<Notice
-						isWarning
-						className="newspack-wizard__above-header"
-						noticeText={ __( 'Newspack is in debug mode.', 'newspack' ) }
-					/>
-				) }
+				{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 				<div className="newspack-wizard__header">
 					<div className="newspack-wizard__header__inner">
 						<div className="newspack-wizard__title">
@@ -78,18 +72,21 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 							>
 								<NewspackIcon size={ 36 } />
 							</Button>
-							{ headerText && <h1>{ headerText }</h1> }
-							{ subHeaderText && <p className="screen-reader-text">{ subHeaderText }</p> }
+							<div>
+								{ headerText && <h2>{ headerText }</h2> }
+								{ subHeaderText && <span>{ subHeaderText }</span> }
+							</div>
 						</div>
-						{ tabbedNavigation && (
-							<>
-								<TabbedNavigation items={ tabbedNavigation } />
-							</>
-						) }
 					</div>
-					{ routes && <WizardPagination routes={ routes } /> }
 				</div>
 
+				{ tabbedNavigation && (
+					<TabbedNavigation
+						disableUpcoming={ disableUpcomingInTabbedNavigation }
+						items={ tabbedNavigation.filter( item => ! item.isHiddenInNav ) }
+					/>
+				) }
+
 				<div className={ classnames( 'newspack-wizard newspack-wizard__content', className ) }>
 					{ typeof renderAboveContent === 'function' ? renderAboveContent() : null }
 					{ <WrappedComponent { ...props } renderPrimaryButton={ renderPrimaryButton } /> }

package/src/with-wizard-screen/style.scss

@@ -6,6 +6,43 @@
 @import '../../../shared/scss/colors';
 
 .newspack-wizard {
+	// Color
+	--wp-admin-theme-color: #{$primary-500};
+	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
+
+	color: $gray-900;
+
+	// Headings
+	h1,
+	h2,
+	h3 {
+		color: inherit;
+	}
+
+	h1 {
+		line-height: 1.4;
+	}
+
+	// Links
+	a {
+		color: var( --wp-admin-theme-color );
+
+		&:active,
+		&:focus,
+		&:hover {
+			color: var( --wp-admin-theme-color-darker-10 );
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			outline: 3px solid transparent;
+		}
+	}
+
 	&__header {
 		background: white;
 	}
@@ -15,12 +52,25 @@
 		border-bottom: 1px solid $gray-300;
 		display: flex;
 
-		h1 {
-			color: $gray-900;
-			font-size: 21px;
-			line-height: 30px;
+		h2 {
 			margin: 0;
+			padding: 0;
+		}
+
+		> div {
+			align-items: baseline;
+			display: flex;
 			padding: 0 24px;
+
+			span {
+				color: $gray-700;
+				display: none;
+				margin-left: 8px;
+
+				@media screen and ( min-width: 744px ) {
+					display: block;
+				}
+			}
 		}
 
 		svg {
@@ -35,15 +85,17 @@
 			&:not( .newspack-icon ) {
 				background: $primary-500;
 				left: 50%;
-				margin: -18px 0 0 -18px !important;
+				margin: -28px 0 0 -28px !important;
 				opacity: 0;
+				padding: 10px;
 				position: absolute;
 				top: 50%;
 				transition: opacity 125ms ease-in-out;
 			}
 		}
 
-		a {
+		.components-button.has-icon {
+			padding: 0;
 			position: relative;
 
 			&:hover {
@@ -51,29 +103,26 @@
 					opacity: 1;
 				}
 			}
-		}
-
-		a:focus-visible {
-			outline: none !important;
 
-			&::before {
-				border: 2px solid white;
-				border-radius: 3px;
-				bottom: 5px;
-				content: '';
-				display: block;
-				left: 6px;
-				position: absolute;
-				right: 6px;
-				top: 6px;
+			&:focus-visible {
+				outline: none !important;
+
+				&::before {
+					border: 2px solid white;
+					border-radius: 2px;
+					bottom: 5px;
+					content: '';
+					display: block;
+					left: 6px;
+					position: absolute;
+					right: 6px;
+					top: 6px;
+				}
 			}
 		}
 	}
 
 	&__content {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
 		margin: 0 auto;
 		max-width: 1208px;
 		padding: 0 16px;
@@ -84,49 +133,13 @@
 
 		// Typography
 
-		h1,
-		h2,
-		h3,
-		p {
-			line-height: 24px;
-			margin: 32px 0;
-			padding: 0;
-		}
-
-		h1 {
-			color: $gray-900;
-			font-size: 21px;
-			font-weight: bold;
-			line-height: 32px;
-		}
-
-		h2 {
-			color: $gray-900;
-			font-size: 17px;
-			font-weight: bold;
-		}
-
-		h3 {
-			color: $gray-900;
-			font-size: 14px;
-			font-weight: bold;
-		}
-
-		p {
-			font-size: 14px;
-
-			&.is-dark {
-				color: $gray-900;
-			}
-		}
-
 		strong {
 			font-weight: bold;
 		}
 
 		small {
 			font-size: 12px;
-			line-height: 16px;
+			line-height: 1.4;
 		}
 
 		// Thematic Break
@@ -141,70 +154,10 @@
 				margin: 64px 0;
 			}
 		}
-
-		// Links
-
-		a {
-			color: $primary-500;
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: $primary-600;
-				text-decoration: none;
-			}
-
-			&:focus {
-				box-shadow: none;
-				outline: 2px solid $primary-500;
-				outline-offset: 2px;
-			}
-		}
 	}
 
 	&__above-header {
+		border-radius: 0;
 		margin: 0;
 	}
 }
-
-// Buttons Card
-
-.newspack-buttons-card {
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: flex-start;
-	align-items: center;
-	margin: 64px 0 32px;
-
-	&:empty {
-		display: none;
-	}
-
-	.newspack-button {
-		margin-left: 16px;
-	}
-}
-
-// Checkbox Icon
-
-.newspack-checkbox-icon {
-	background: white;
-	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px $gray-300;
-	display: block;
-	height: 24px;
-	width: 24px;
-
-	svg {
-		fill: $gray-700;
-	}
-
-	&--checked {
-		background: $alert-green;
-		box-shadow: none;
-
-		svg {
-			fill: white;
-		}
-	}
-}

package/src/wizard/components/WizardError.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies.
+ */
+import { Button, Card, Modal, Notice } from '../..';
+import { WIZARD_STORE_NAMESPACE } from '../store';
+
+const parseError = ( { data, message, code } ) => {
+	let level = 'fatal';
+	if ( !! data && 'level' in data ) {
+		level = data.level;
+	} else if ( 'rest_invalid_param' === code ) {
+		level = 'notice';
+	}
+	return {
+		message,
+		level,
+	};
+};
+
+const WizardError = () => {
+	const error = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getError() );
+	if ( ! error ) {
+		return null;
+	}
+
+	const { level, message } = parseError( error );
+	if ( 'fatal' === level ) {
+		const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
+		return (
+			<Modal
+				title={ __( 'Unrecoverable error' ) }
+				onRequestClose={ fallbackURL ? () => ( window.location = fallbackURL ) : undefined }
+			>
+				<Notice noticeText={ message } isError rawHTML />
+				{ fallbackURL && (
+					<Card buttonsCard noBorder className="justify-end">
+						<Button isPrimary href={ fallbackURL }>
+							{ __( 'Return to Dashboard', 'newspack' ) }
+						</Button>
+					</Card>
+				) }
+			</Modal>
+		);
+	}
+
+	return (
+		<Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />
+	);
+};
+
+export default WizardError;

package/src/wizard/index.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { category } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller } from '../';
+import Router from '../proxied-imports/router';
+import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
+import { useWizardData } from './store/utils';
+import WizardError from './components/WizardError';
+
+registerStore();
+
+const { HashRouter, Redirect, Route, Switch } = Router;
+
+const Wizard = ( {
+	sections = [],
+	apiSlug,
+	headerText,
+	subHeaderText,
+	hasSimpleFooter,
+	className,
+	renderAboveSections,
+	requiredPlugins = [],
+} ) => {
+	const isLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isLoading() );
+	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
+
+	// Trigger initial data fetch. Some sections might not use the wizard data,
+	// but for consistency, fetching is triggered regardless of the section.
+	useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
+
+	let displayedSections = sections.filter( section => ! section.isHidden );
+
+	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState(
+		requiredPlugins.length === 0
+	);
+	if ( ! pluginRequirementsSatisfied ) {
+		headerText =
+			requiredPlugins.length > 1
+				? __( 'Required plugins', 'newspack' )
+				: __( 'Required plugin', 'newspack' );
+		displayedSections = [
+			{
+				path: '/',
+				render: () => (
+					<PluginInstaller
+						plugins={ requiredPlugins }
+						onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) }
+					/>
+				),
+			},
+		];
+	}
+
+	return (
+		<>
+			<WizardError />
+			<div
+				className={ classnames(
+					isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded',
+					{
+						'newspack-wizard__is-loading-quiet': isQuietLoading,
+					}
+				) }
+			>
+				<HashRouter hashType="slash">
+					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
+					<div className="bg-white">
+						<div className="newspack-wizard__header__inner">
+							<div className="newspack-wizard__title">
+								<Button
+									isLink
+									href={ newspack_urls.dashboard }
+									label={ __( 'Return to Dashboard', 'newspack' ) }
+									showTooltip={ true }
+									icon={ category }
+									iconSize={ 36 }
+								>
+									<NewspackIcon size={ 36 } />
+								</Button>
+								<div>
+									{ headerText && <h2>{ headerText }</h2> }
+									{ subHeaderText && <span>{ subHeaderText }</span> }
+								</div>
+							</div>
+						</div>
+					</div>
+
+					{ displayedSections.length > 1 && <TabbedNavigation items={ displayedSections } /> }
+
+					<Switch>
+						{ displayedSections.map( ( section, index ) => {
+							const SectionComponent = section.render;
+							return (
+								<Route key={ index } path={ section.path }>
+									<div
+										className={ classnames(
+											'newspack-wizard newspack-wizard__content',
+											className
+										) }
+									>
+										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
+										<SectionComponent />
+									</div>
+								</Route>
+							);
+						} ) }
+						<Redirect to={ displayedSections[ 0 ].path } />
+					</Switch>
+				</HashRouter>
+			</div>
+			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
+		</>
+	);
+};
+
+Wizard.useWizardData = useWizardData;
+
+Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
+
+export default Wizard;