newspack-components 2.0.3 → 2.2.0

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, HandoffMessage, TabbedNavigation } from '../';
 import { buttonProps } from '../../../shared/js/';
 import './style.scss';
 
@@ -31,9 +31,10 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 			tabbedNavigation,
 			secondaryButtonText,
 			secondaryButtonAction,
-			routes,
 			renderAboveContent,
+			disableUpcomingInTabbedNavigation,
 		} = props;
+
 		const retrievedButtonProps = buttonProps( buttonAction );
 		const retrievedSecondaryButtonProps = buttonProps( secondaryButtonAction );
 		const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? Handoff : Button;
@@ -58,13 +59,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 +73,23 @@ 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 ) }
+					/>
+				) }
+
+				<HandoffMessage />
+
 				<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

@@ -2,25 +2,75 @@
  * With Wizard Screen
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+@use '../../../shared/scss/colors';
 
 .newspack-wizard {
+	// Color
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+
+	color: wp-colors.$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;
 	}
 
 	&__title {
 		align-items: center;
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$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: wp-colors.$gray-700;
+				display: none;
+				margin-left: 8px;
+
+				@media screen and ( min-width: 744px ) {
+					display: block;
+				}
+			}
 		}
 
 		svg {
@@ -33,17 +83,19 @@
 			}
 
 			&:not( .newspack-icon ) {
-				background: $primary-500;
+				background: colors.$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,23 @@
 					opacity: 1;
 				}
 			}
-		}
 
-		a:focus-visible {
-			outline: none !important;
+			&: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;
+				&::before {
+					border: 2px solid white;
+					border-radius: 2px;
+					content: '';
+					display: block;
+					inset: 6px 6px 5px;
+					position: absolute;
+				}
 			}
 		}
 	}
 
 	&__content {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
 		margin: 0 auto;
 		max-width: 1208px;
 		padding: 0 16px;
@@ -84,55 +130,19 @@
 
 		// 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
 
 		hr {
-			background: $gray-300;
+			background: wp-colors.$gray-300;
 			border: 0;
 			height: 1px;
 			margin: 48px 0;
@@ -141,70 +151,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,145 @@
+/**
+ * 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,
+	HandoffMessage,
+} 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 (
+		<>
+			<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 }>
+							<WizardError />
+						</TabbedNavigation>
+					) }
+					<HandoffMessage />
+
+					<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;

package/src/wizard/store/index.js

@@ -0,0 +1,132 @@
+/**
+ * External dependencies.
+ */
+import set from 'lodash/set';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { createReduxStore, register, dispatch, select } from '@wordpress/data';
+
+import { createAction } from './utils.js';
+
+export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
+
+const DEFAULT_STATE = {
+	isLoading: true,
+	isQuietLoading: false,
+	apiData: {},
+	error: null,
+};
+
+/**
+ * wordpress/data does not trigger a component re-render
+ * on deep state change (via lodash's set function)
+ * unless the state was cloned first.
+ */
+const clone = objectToClone => JSON.parse( JSON.stringify( objectToClone ) );
+
+const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
+	switch ( type ) {
+		case 'START_LOADING_DATA':
+			if ( payload.isQuietLoading ) {
+				return { ...state, isQuietLoading: true };
+			}
+			return { ...state, isLoading: true };
+		case 'FINISH_LOADING_DATA':
+			return { ...state, isLoading: false, isQuietLoading: false };
+		case 'SET_API_DATA':
+			return set( clone( state ), [ 'apiData', payload.slug ], payload.data );
+		case 'UPDATE_WIZARD_SETTINGS':
+			return set( clone( state ), [ 'apiData', payload.slug, ...payload.path ], payload.value );
+		case 'SET_ERROR':
+			return { ...state, error: payload };
+		default:
+			return state;
+	}
+};
+
+const actions = {
+	// Regular actions.
+	startLoadingData: createAction( 'START_LOADING_DATA' ),
+	finishLoadingData: createAction( 'FINISH_LOADING_DATA' ),
+	fetchFromAPI: createAction( 'FETCH_FROM_API' ),
+	setAPIDataForWizard: createAction( 'SET_API_DATA' ),
+	updateWizardSettings: createAction( 'UPDATE_WIZARD_SETTINGS' ),
+	setError: createAction( 'SET_ERROR' ),
+
+	// Async actions. These will not show up in Redux devtools.
+	*saveWizardSettings( { slug, section = '', payloadPath = false, updatePayload = null } ) {
+		// Optionally data can be updated before saving - an immediate update case
+		// (without an explicit "save" action).
+		if ( updatePayload ) {
+			yield actions.updateWizardSettings( { slug, ...updatePayload } );
+		}
+		const wizardState = select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( slug );
+		const updatedData = yield actions.fetchFromAPI( {
+			path: `/newspack/v1/wizard/${ slug }/${ section }`,
+			method: 'POST',
+			data: payloadPath ? get( wizardState, payloadPath ) : wizardState,
+			isQuietFetch: true,
+		} );
+		if ( ! isEmpty( updatedData ) && ! updatedData.error ) {
+			return actions.setAPIDataForWizard( { slug, data: updatedData } );
+		}
+	},
+	*wizardApiFetch( fetchConfig ) {
+		// Just a proxy to fetchFromAPI, but it has to be a generator.
+		const result = yield actions.fetchFromAPI( fetchConfig );
+		return result;
+	},
+};
+
+const selectors = {
+	isLoading: state => state.isLoading,
+	isQuietLoading: state => state.isQuietLoading,
+	getWizardAPIData: ( state, slug ) => state.apiData[ slug ] || {},
+	getError: state => state.error,
+};
+
+const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
+	reducer,
+	actions,
+	selectors,
+
+	controls: {
+		FETCH_FROM_API: action => {
+			dispatch( WIZARD_STORE_NAMESPACE ).startLoadingData( {
+				isQuietLoading: Boolean( action.payload.isQuietFetch ),
+			} );
+			return apiFetch( action.payload )
+				.then( data => {
+					dispatch( WIZARD_STORE_NAMESPACE ).setError( null );
+					return data;
+				} )
+				.catch( error => {
+					dispatch( WIZARD_STORE_NAMESPACE ).setError( error );
+					return { error };
+				} )
+				.finally( result => {
+					dispatch( WIZARD_STORE_NAMESPACE ).finishLoadingData();
+					return result;
+				} );
+		},
+	},
+
+	resolvers: {
+		*getWizardAPIData( slug ) {
+			if ( slug ) {
+				const data = yield actions.fetchFromAPI( {
+					path: `/newspack/v1/wizard/${ slug }`,
+				} );
+				return actions.setAPIDataForWizard( { slug, data } );
+			}
+			return actions.finishLoadingData();
+		},
+	},
+} );
+
+export default () => register( store );

package/src/wizard/store/utils.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies.
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { WIZARD_STORE_NAMESPACE } from '.';
+
+export const createAction = type => payload => ( { type, payload } );
+
+export const useWizardData = ( wizardName, defaultValue = {} ) =>
+	useSelect( select =>
+		select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( `newspack-${ wizardName }-wizard` )
+	) || defaultValue;