newspack-components 4.2.0 → 4.3.0

package/src/wizard/components/style.scss

@@ -0,0 +1,48 @@
+.newspack-wizard {
+	&__snackbar {
+		border-bottom: 2px solid transparent;
+		bottom: 16px;
+		left: 16px;
+		max-width: calc(100vw - 32px);
+		position: fixed;
+		z-index: 99999;
+		&--success {
+			border-color: var(--newspack-ui-color-success-60);
+		}
+		&--error {
+			border-color: var(--newspack-ui-color-error-60);
+		}
+		&--warning {
+			border-color: var(--newspack-ui-color-warning-40);
+		}
+		@media screen and ( min-width: 783px ) {
+			left: calc(36px + 16px); /* 36px for admin menu bar */
+		}
+		@media screen and ( min-width: 960px ) {
+			left: calc(160px + 16px); /* 160px for admin menu bar */
+		}
+		&.newspack-wizard__snackbar--bottom-right,
+		&.newspack-wizard__snackbar--top-right {
+			left: auto;
+			right: calc(16px);
+		}
+		&.newspack-wizard__snackbar--top-left,
+		&.newspack-wizard__snackbar--top-right {
+			bottom: auto;
+			top: calc(16px + 46px); /* 46px for admin bar */
+			@media screen and ( min-width: 783px ) {
+				top: calc(16px + 32px); /* 32px for admin bar */
+			}
+		}
+		a,
+		.components-button.is-link {
+			color: var(--newspack-ui-color-neutral-0);
+			cursor: pointer;
+			margin-left: 16px;
+			&:hover,
+			&:focus {
+				color: var(--newspack-ui-color-neutral-10);
+			}
+		}
+	}
+}

package/src/wizard/index.js

@@ -6,22 +6,38 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import { useSelect } from '@wordpress/data';
-import { useState, forwardRef } from '@wordpress/element';
+import { DropdownMenu, MenuItem } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { category } from '@wordpress/icons';
+import { category, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, HandoffMessage } from '../';
+import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage } from '../';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
+import WizardSnackbar from './components/WizardSnackbar';
 import WizardError from './components/WizardError';
 
 registerStore();
 
-const { HashRouter, Redirect, Route, Switch } = Router;
+const { HashRouter, Redirect, Route, Switch, useLocation } = Router;
+
+/**
+ * Reset the header data when a new section is rendered.
+ */
+const ResetHeaderData = () => {
+	const location = useLocation();
+	const { resetHeaderData } = useDispatch( WIZARD_STORE_NAMESPACE );
+
+	useEffect( () => {
+		resetHeaderData();
+	}, [ location.pathname, resetHeaderData ] );
+
+	return null;
+};
 
 /**
  * @typedef  {Object}     WizardProps
@@ -49,17 +65,25 @@ const Wizard = (
 		sections = [],
 		headerText,
 		apiSlug,
+		sharedProps = {},
 		subHeaderText,
 		hasSimpleFooter,
 		className,
 		renderAboveSections,
 		requiredPlugins = [],
 		isInitialFetchTriggered = true,
+		fixedHeader = false,
 	},
 	ref
 ) => {
 	const isLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isLoading() );
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
+	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
+	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
+	const { actions, backNav, badges, sectionDescription, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } = headerData;
+
+	const mainActions = actions?.filter( action => action.type === 'primary' || action.type === 'secondary' );
+	const moreActions = actions?.filter( action => action.type === 'more' );
 
 	// Trigger initial data fetch. Some sections might not use the wizard data,
 	// but for consistency, fetching is triggered regardless of the section.
@@ -87,11 +111,12 @@ const Wizard = (
 			<div
 				className={ classnames( isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
 					'newspack-wizard__is-loading-quiet': isQuietLoading,
+					'newspack-wizard__fixed-header': fixedHeader,
 				} ) }
 			>
 				<HashRouter hashType="slash">
 					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
-					<div className="bg-white">
+					<div className="newspack-wizard__header">
 						<div className="newspack-wizard__header__inner">
 							<div className="newspack-wizard__title">
 								{ newspack_urls.dashboard !== urlWithoutHash ? (
@@ -109,11 +134,53 @@ const Wizard = (
 									<NewspackIcon size={ 36 } />
 								) }
 								<div>
-									{ headerText && <h2>{ headerText }</h2> }
+									{ headerText && (
+										<h2 className="newspack-wizard__header__title">
+											{ headerText }
+											{ sectionName && (
+												<span className="newspack-wizard__header__section">
+													<span className="newspack-wizard__header__section__separator"> / </span> { sectionName }
+												</span>
+											) }
+										</h2>
+									) }
 									{ subHeaderText && <span>{ subHeaderText }</span> }
 								</div>
 							</div>
 						</div>
+						{ actions?.length > 0 && (
+							<div className="newspack-wizard__header__actions">
+								{ mainActions.map( ( action, index ) => (
+									<Button
+										key={ index }
+										icon={ action.icon }
+										variant={ action.type }
+										onClick={ action.action }
+										disabled={ action.disabled || false }
+										isDestructive={ action.destructive || false }
+									>
+										{ action.label }
+									</Button>
+								) ) }
+								{ moreActions.length > 0 && (
+									<DropdownMenu icon={ moreVertical } label={ __( 'More', 'newspack-plugin' ) }>
+										{ () =>
+											moreActions.map( ( action, index ) => (
+												<MenuItem
+													key={ index }
+													icon={ action.icon }
+													onClick={ action.action }
+													disabled={ action.disabled || false }
+													isDestructive={ action.destructive || false }
+												>
+													{ action.label }
+												</MenuItem>
+											) )
+										}
+									</DropdownMenu>
+								) }
+							</div>
+						) }
 					</div>
 
 					{ displayedSections.length > 1 && (
@@ -123,21 +190,48 @@ const Wizard = (
 					) }
 					<HandoffMessage />
 
+					{ sections.length > 1 && <ResetHeaderData /> }
+
 					<Switch>
-						{ displayedSections.map( ( section, index ) => {
+						{ sections.map( ( section, index ) => {
 							const SectionComponent = section.render;
+							const sectionProps = section.props || {};
 							return (
-								<Route key={ index } exact={ section.exact ?? false } path={ section.path }>
-									<div className={ classnames( 'newspack-wizard__content', className ) }>
-										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
-										<SectionComponent />
-									</div>
-								</Route>
+								<Route
+									key={ index }
+									exact={ section.exact ?? false }
+									path={ section.path }
+									render={ routerProps => (
+										<div className={ classnames( 'newspack-wizard__content', className ) }>
+											{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
+											{ ( sectionTitle || section.title ) && (
+												<SectionHeader
+													className="newspack-wizard__section-header"
+													backNav={ backNav || section.backNav }
+													title={ sectionTitle || section.title }
+													description={ sectionDescription || section.description }
+													badges={ badges || section.badges }
+													primaryAction={ sectionPrimaryAction || section.primaryAction }
+													secondaryAction={ sectionSecondaryAction || section.secondaryAction }
+													heading={ 1 }
+													noMargin
+												/>
+											) }
+											<SectionComponent { ...routerProps } { ...sectionProps } { ...sharedProps } />
+										</div>
+									) }
+								/>
 							);
 						} ) }
 						<Redirect to={ displayedSections[ 0 ].path } />
 					</Switch>
 				</HashRouter>
+				{ notices?.length > 0 &&
+					notices.map( ( notice, index ) => (
+						<WizardSnackbar key={ notice.id || index } type={ notice.type } id={ notice.id } actions={ notice.actions }>
+							{ notice.message }
+						</WizardSnackbar>
+					) ) }
 			</div>
 			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
 		</div>

package/src/wizard/store/index.js

@@ -16,9 +16,18 @@ import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 
 const DEFAULT_STATE = {
+	headerData: {
+		actions: [],
+		backNav: '',
+		badges: [],
+		sectionDescription: '',
+		sectionName: '',
+		sectionTitle: '',
+	},
 	isLoading: false,
 	isQuietLoading: false,
 	apiData: {},
+	notices: [],
 	error: null,
 };
 
@@ -31,6 +40,10 @@ const clone = objectToClone => JSON.parse( JSON.stringify( objectToClone ) );
 
 const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 	switch ( type ) {
+		case 'SET_HEADER_DATA':
+			return { ...state, headerData: { ...state.headerData, ...payload } };
+		case 'RESET_HEADER_DATA':
+			return { ...state, headerData: { ...DEFAULT_STATE.headerData } };
 		case 'START_LOADING_DATA':
 			if ( payload.isQuietLoading ) {
 				return { ...state, isQuietLoading: true };
@@ -42,8 +55,14 @@ const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 			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 'ADD_NOTICE':
+			return { ...state, notices: [ ...state.notices, payload ] };
+		case 'REMOVE_NOTICE':
+			return { ...state, notices: state.notices.filter( notice => notice.id !== payload ) };
 		case 'SET_ERROR':
 			return { ...state, error: payload };
+		case 'RESET_NOTICES':
+			return { ...state, notices: DEFAULT_STATE.notices };
 		default:
 			return state;
 	}
@@ -51,11 +70,16 @@ const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 
 const actions = {
 	// Regular actions.
+	setHeaderData: createAction( 'SET_HEADER_DATA' ),
+	resetHeaderData: createAction( 'RESET_HEADER_DATA' ),
 	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' ),
+	addNotice: createAction( 'ADD_NOTICE' ),
+	removeNotice: createAction( 'REMOVE_NOTICE' ),
+	resetNotices: createAction( 'RESET_NOTICES' ),
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
@@ -85,10 +109,12 @@ const actions = {
 };
 
 const selectors = {
+	getHeaderData: state => state.headerData,
 	isLoading: state => state.isLoading,
 	isQuietLoading: state => state.isQuietLoading,
 	getWizardAPIData: ( state, slug ) => state.apiData[ slug ] || {},
 	getWizardData: ( state, slug ) => state.apiData[ slug ] ?? {},
+	getNotices: state => state.notices,
 	getError: state => state.error,
 };