newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/src/with-wizard/style.scss

@@ -3,11 +3,21 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
 
 // Styling for full-page-react Wizards (ignoring admin-header-only wizards).
 body.newspack-wizard-page:not(.newspack-admin-header) {
-
-	background: white;
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
+	--wp-components-color-accent: #{colors.$primary-600};
+
+	background: #{wp-colors.$white};
 
 	// Reset Padding
 	#wpcontent {
@@ -18,6 +28,14 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		@media screen and ( min-width: 600px ) {
+			min-height: calc(100vh - 46px);
+		}
+
+		@media screen and ( min-width: 783px ) {
+			min-height: calc(100vh - 32px);
+		}
+
 		// For admin notices directly ">" at top of page above the Wizard header.
 		// PHP code should hide these notices, but just incase add this style.
 		> .notice {
@@ -29,10 +47,14 @@ body.newspack-wizard-page:not(.newspack-admin-header) {
 			padding-bottom: 202px;
 		}
 
-		@media screen and ( min-width: 1128px ) {
-			padding-bottom: 168px;
+		@media screen and ( min-width: 1054px ) {
+			padding-bottom: 136px;
 		}
 	}
+
+	.components-popover__content {
+		min-width: 192px;
+	}
 }
 
 // Styling for wizards that are admin-header-only.
@@ -63,37 +85,6 @@ svg {
 	}
 }
 
-// Blue Screen
-.newspack-wizard__blue {
-	#wpwrap {
-		background: var(--wp-admin-theme-color);
-	}
-
-	.newspack-footer {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		justify-content: center;
-
-		&__logo {
-			background: inherit;
-		}
-	}
-
-	#wpfooter {
-		color: white;
-
-		a {
-			color: inherit;
-
-			&:active,
-			&:focus,
-			&:hover {
-				opacity: 0.75;
-			}
-		}
-	}
-}
-
 // Loading
 .newspack-wizard__is-loading {
 	background: white;
@@ -134,7 +125,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 68px auto 0;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: calc(100% - ( 32px * 2 ));
 
 		@media screen and ( min-width: 744px ) {
@@ -156,29 +147,6 @@ svg {
 		}
 	}
 
-	// Blue Screen
-	.newspack-wizard__blue & {
-		background: var(--wp-admin-theme-color);
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: white;
-			border-radius: 0;
-			box-shadow: 0;
-			height: 8px;
-			left: 0;
-			margin: 0;
-			position: absolute;
-			right: 100%;
-			top: 0;
-			width: auto;
-		}
-
-		&::after {
-			display: none;
-		}
-	}
-
 	// Quiet
 	&-quiet {
 		position: relative;
@@ -250,7 +218,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 0 auto;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: 100%;
 
 		@media screen and ( min-width: 744px ) {

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

@@ -13,6 +13,8 @@
 	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
 	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+	--wp-admin-theme-color-lighter-10: #{colors.$primary-000};
+	--wp-admin-theme-color-lighter-10--rgb: #{colors.$primary-000--rgb};
 
 	color: wp-colors.$gray-900;
 
@@ -44,12 +46,59 @@
 	}
 
 	&__header {
+		align-items: center;
 		background: white;
+		border-bottom: 1px solid wp-colors.$gray-300;
+		display: flex;
+		.newspack-wizard__fixed-header & {
+			position: sticky;
+			top: 0;
+			width: 100%;
+			z-index: 1000;
+			.admin-bar & {
+				@media only screen and ( min-width: 601px ) {
+					top: 46px;
+				}
+				@media only screen and ( min-width: 782px ) {
+					top: 32px;
+				}
+			}
+		}
+		&__inner {
+			flex: 1 1 100%;
+		}
+		&__actions {
+			align-items: center;
+			display: flex;
+			gap: 8px;
+			justify-content: flex-end;
+			padding: 0 24px 0 0;
+			> .newspack-wizard__header__actions__main {
+				display: none;
+			}
+			@media only screen and ( min-width: 782px ) {
+				flex: 1 1 auto;
+				> .newspack-wizard__header__actions__main {
+					display: flex;
+				}
+				&__more {
+					&--primary-only,
+					.newspack-wizard__header__actions__more__main {
+						display: none;
+					}
+				}
+			}
+		}
 	}
 
+	&__main {
+		overflow-x: hidden;
+		padding-bottom: 1px; /* Prevents borders from being cut off */
+	}
+
+
 	&__title {
 		align-items: center;
-		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
 
 		h2 {
@@ -62,7 +111,7 @@
 			display: flex;
 			padding: 0 24px;
 
-			span {
+			> span {
 				color: wp-colors.$gray-700;
 				display: none;
 				margin-left: 8px;
@@ -119,14 +168,22 @@
 		}
 	}
 
+	&__section-header {
+		margin: 0 auto 32px;
+		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
+		&:not(.newspack-section-header--has-primary-action) {
+			@media (min-width: 782px) {
+				.newspack-section-header__title-container + p {
+					max-width: 50%;
+				}
+			}
+		}
+	}
+
 	&__content {
 		margin: 0 auto;
-		max-width: 1208px;
-		padding: 0 16px;
-
-		@media screen and ( min-width: 744px ) {
-			padding: 40px 84px;
-		}
+		max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
+		padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
 
 		// Typography
 
@@ -141,16 +198,26 @@
 
 		// Thematic Break
 
-		hr {
+		hr:not(.newspack-divider) {
 			background: wp-colors.$gray-300;
 			border: 0;
 			height: 1px;
-			margin: 48px 0;
+			margin: 32px 0;
 
 			@media screen and ( min-width: 744px ) {
 				margin: 64px 0;
 			}
 		}
+		&:not(.newspack-wizard__content--full-width) {
+			.newspack-dataviews {
+				margin-left: -24px;
+				margin-right: -24px;
+				@media (min-width: 380px) {
+					margin-left: -48px;
+					margin-right: -48px;
+				}
+			}
+		}
 	}
 
 	&__above-header {

package/src/wizard/components/WizardSnackbar.js

@@ -0,0 +1,58 @@
+/**
+ * Snackbar.
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Snackbar as BaseComponent } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies.
+ */
+import { WIZARD_STORE_NAMESPACE } from '../store';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WizardSnackbar component.
+ *
+ * @param {Object}      props          - The component props.
+ * @param {Object[]}    props.actions  - The actions to display in the snackbar.
+ * @param {JSX.Element} props.children - The component children.
+ * @param {Object}      props.props    - The component props. See: https://wordpress.github.io/gutenberg/?path=/docs/components-snackbar--docs
+ * @param {string}      props.position - The snackbar position.
+ * @param {string}      props.type     - The snackbar type: 'info', 'success', 'warning', or 'error'.
+ * @return {JSX.Element} The component.
+ */
+const WizardSnackbar = ( { children, position = 'bottom-left', type = 'info', actions = [], ...props } ) => {
+	const className = classnames(
+		'newspack-wizard__snackbar',
+		props.className,
+		`newspack-wizard__snackbar--${ position }`,
+		`newspack-wizard__snackbar--${ type }`
+	);
+	const { removeNotice, resetNotices } = useDispatch( WIZARD_STORE_NAMESPACE );
+	const onRemove = () => {
+		if ( props.onRemove ) {
+			props.onRemove();
+		}
+		if ( props.id ) {
+			removeNotice( props.id );
+		} else {
+			resetNotices();
+		}
+	};
+	return (
+		<BaseComponent className={ className } { ...props } onRemove={ onRemove } actions={ actions }>
+			{ children }
+		</BaseComponent>
+	);
+};
+
+export default WizardSnackbar;

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,52 @@ 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, chevronLeft, 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;
+/**
+ * Icon registry for resolving icon name strings passed through the data store.
+ * React elements from @wordpress/icons can't cross webpack entry point boundaries
+ * because each bundle has its own copy of the icon primitives.
+ */
+const ICON_REGISTRY = { chevronLeft, category, moreVertical };
+const resolveIcon = icon => {
+	if ( typeof icon === 'string' ) {
+		return ICON_REGISTRY[ icon ] || null;
+	}
+	return icon;
+};
+
+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();
+		window.scrollTo( 0, 0 );
+	}, [ location.pathname, resetHeaderData ] );
+
+	return null;
+};
 
 /**
  * @typedef  {Object}     WizardProps
@@ -49,17 +79,26 @@ 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, sectionMenu, 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.
@@ -80,6 +119,10 @@ const Wizard = (
 		];
 	}
 
+	// When plugins are required but not yet satisfied, `displayedSections` is replaced with
+	// the PluginInstaller. Use it for routing so the installer actually mounts and runs.
+	const routedSections = pluginRequirementsSatisfied ? sections : displayedSections;
+
 	const urlWithoutHash = window.location.href.split( '#' )[ 0 ];
 
 	return (
@@ -87,11 +130,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 +153,64 @@ 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 }
+										className="newspack-wizard__header__actions__main"
+										href={ action.href }
+										icon={ resolveIcon( action.icon ) }
+										variant={ action.type }
+										onClick={ action.action }
+										disabled={ action.disabled || false }
+										isDestructive={ action.destructive || false }
+									>
+										{ action.label }
+									</Button>
+								) ) }
+								<DropdownMenu
+									className={ moreActions?.length === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '' }
+									icon={ moreVertical }
+									label={ __( 'More', 'newspack-plugin' ) }
+									popoverProps={ { className: 'newspack-wizard__header__actions__more' } }
+								>
+									{ () =>
+										actions.map( ( action, index ) => (
+											<MenuItem
+												key={ index }
+												className={
+													action.type === 'primary' || action.type === 'secondary'
+														? 'newspack-wizard__header__actions__more__main'
+														: 'newspack-wizard__header__actions__more__more'
+												}
+												icon={ action.icon }
+												href={ action.href }
+												onClick={ action.action }
+												disabled={ action.disabled || false }
+												isDestructive={ action.destructive || false }
+											>
+												{ action.label }
+											</MenuItem>
+										) )
+									}
+								</DropdownMenu>
+							</div>
+						) }
 					</div>
 
 					{ displayedSections.length > 1 && (
@@ -123,21 +220,55 @@ const Wizard = (
 					) }
 					<HandoffMessage />
 
-					<Switch>
-						{ displayedSections.map( ( section, index ) => {
-							const SectionComponent = section.render;
-							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>
-							);
-						} ) }
-						<Redirect to={ displayedSections[ 0 ].path } />
-					</Switch>
+					{ sections.length > 1 && <ResetHeaderData /> }
+
+					<div className="newspack-wizard__main">
+						<Switch>
+							{ routedSections.map( ( section, index ) => {
+								const SectionComponent = section.render;
+								const sectionProps = section.props || {};
+								return (
+									<Route
+										key={ index }
+										exact={ section.exact ?? false }
+										path={ section.path }
+										render={ routerProps => (
+											<div
+												className={ classnames( 'newspack-wizard__content', className, {
+													'newspack-wizard__content--full-width': section.fullWidth,
+												} ) }
+											>
+												{ '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 }
+														menu={ sectionMenu || section.menu }
+														primaryAction={ sectionPrimaryAction || section.primaryAction }
+														secondaryAction={ sectionSecondaryAction || section.secondaryAction }
+														heading={ 1 }
+														noMargin
+													/>
+												) }
+												<SectionComponent { ...routerProps } { ...sectionProps } { ...sharedProps } />
+											</div>
+										) }
+									/>
+								);
+							} ) }
+							<Redirect to={ displayedSections[ 0 ].path } />
+						</Switch>
+					</div>
 				</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>