newspack-components 4.5.0 → 4.6.0

package/src/wizard/index.js

@@ -8,14 +8,15 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage } from '../';
+import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page } from '../';
+import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import WizardSnackbar from './components/WizardSnackbar';
@@ -53,6 +54,37 @@ const ResetHeaderData = () => {
 	return null;
 };
 
+/**
+ * Wizard header + content region. Rendered inside the wizard's HashRouter so it
+ * can read the current route and derive the active-tab breadcrumb.
+ */
+const WizardHeaderRegion = ( { hideHeader, headerText, sections, sectionName, subTitle, actions, tabbedNavigation, children } ) => {
+	const { pathname } = useLocation();
+
+	if ( hideHeader ) {
+		// Without the Page shell the tabs still own the content: it renders
+		// inside the active tab's panel.
+		if ( isValidElement( tabbedNavigation ) ) {
+			return cloneElement( tabbedNavigation, { content: children } );
+		}
+		return children;
+	}
+
+	let breadcrumbItems = activeBreadcrumbs( sections, pathname );
+	if ( ! breadcrumbItems.length && headerText ) {
+		breadcrumbItems = [ { label: headerText } ];
+	}
+	// Append any render-time leaf crumb(s) the section supplied via
+	// headerData.sectionName (deduped against the current trailing label).
+	breadcrumbItems = appendSectionName( breadcrumbItems, sectionName );
+
+	return (
+		<Page breadcrumbItems={ breadcrumbItems } subTitle={ subTitle } actions={ actions } tabbedNavigation={ tabbedNavigation }>
+			{ children }
+		</Page>
+	);
+};
+
 /**
  * @typedef  {Object}     WizardProps
  * @property {string}     headerText                The header text.
@@ -86,7 +118,7 @@ const Wizard = (
 		renderAboveSections,
 		requiredPlugins = [],
 		isInitialFetchTriggered = true,
-		fixedHeader = false,
+		hideHeader = false,
 	},
 	ref
 ) => {
@@ -123,159 +155,141 @@ const Wizard = (
 	// 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 ];
+	const tabbedNavigation = displayedSections.length > 1 && (
+		<TabbedNavigation items={ displayedSections }>
+			<WizardError />
+		</TabbedNavigation>
+	);
+
+	const content = (
+		<>
+			<HandoffMessage />
+
+			{ 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={ 2 }
+												noMargin
+											/>
+										) }
+										<SectionComponent { ...routerProps } { ...sectionProps } { ...sharedProps } />
+									</div>
+								) }
+							/>
+						);
+					} ) }
+					<Redirect to={ displayedSections[ 0 ].path } />
+				</Switch>
+			</div>
+		</>
+	);
+
+	const headerActions =
+		actions?.length > 0 ? (
+			<>
+				{ mainActions.map( ( action, index ) => (
+					<Button
+						key={ index }
+						className="newspack-wizard__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__actions__more--primary-only' : '' }
+					icon={ moreVertical }
+					label={ __( 'More', 'newspack-plugin' ) }
+					popoverProps={ { className: 'newspack-wizard__actions__more' } }
+				>
+					{ () =>
+						// Split actions into groups whenever an action opts in via `separator: true`.
+						// Consecutive MenuGroups render the WordPress-standard divider between them.
+						actions
+							.reduce( ( groups, action ) => {
+								if ( action.separator || groups.length === 0 ) {
+									groups.push( [] );
+								}
+								groups[ groups.length - 1 ].push( action );
+								return groups;
+							}, [] )
+							.map( ( group, groupIndex ) => (
+								<MenuGroup key={ groupIndex }>
+									{ group.map( ( action, index ) => (
+										<MenuItem
+											key={ index }
+											className={
+												action.type === 'primary' || action.type === 'secondary'
+													? 'newspack-wizard__actions__more__main'
+													: 'newspack-wizard__actions__more__more'
+											}
+											icon={ action.icon }
+											href={ action.href }
+											onClick={ action.action }
+											disabled={ action.disabled || false }
+											isDestructive={ action.destructive || false }
+										>
+											{ action.label }
+										</MenuItem>
+									) ) }
+								</MenuGroup>
+							) )
+					}
+				</DropdownMenu>
+			</>
+		) : undefined;
 
 	return (
 		<div ref={ ref }>
 			<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="newspack-wizard__header">
-						<div className="newspack-wizard__header__inner">
-							<div className="newspack-wizard__title">
-								{ newspack_urls.dashboard !== urlWithoutHash ? (
-									<Button
-										isLink
-										href={ newspack_urls.dashboard }
-										label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
-										showTooltip={ true }
-										icon={ category }
-										iconSize={ 36 }
-									>
-										<NewspackIcon size={ 36 } />
-									</Button>
-								) : (
-									<NewspackIcon size={ 36 } />
-								) }
-								<div>
-									{ 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' } }
-								>
-									{ () =>
-										// Split actions into groups whenever an action opts in via `separator: true`.
-										// Consecutive MenuGroups render the WordPress-standard divider between them.
-										actions
-											.reduce( ( groups, action ) => {
-												if ( action.separator || groups.length === 0 ) {
-													groups.push( [] );
-												}
-												groups[ groups.length - 1 ].push( action );
-												return groups;
-											}, [] )
-											.map( ( group, groupIndex ) => (
-												<MenuGroup key={ groupIndex }>
-													{ group.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>
-													) ) }
-												</MenuGroup>
-											) )
-									}
-								</DropdownMenu>
-							</div>
-						) }
-					</div>
-
-					{ displayedSections.length > 1 && (
-						<TabbedNavigation items={ displayedSections }>
-							<WizardError />
-						</TabbedNavigation>
-					) }
-					<HandoffMessage />
-
-					{ 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>
+					<WizardHeaderRegion
+						hideHeader={ hideHeader }
+						headerText={ headerText }
+						sections={ routedSections }
+						sectionName={ sectionName }
+						subTitle={ subHeaderText }
+						actions={ headerActions }
+						tabbedNavigation={ tabbedNavigation }
+					>
+						{ content }
+					</WizardHeaderRegion>
 				</HashRouter>
 				{ notices?.length > 0 && (
 					<div className="newspack-wizard__snackbar-list">

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "newspack-scripts/config/tsconfig.json",
+	"include": [
+		"src",
+		"node_modules/newspack-scripts/types"
+	]
+}