newspack-components 4.8.0 → 4.8.1-alpha.1

package/src/notice/style.scss

@@ -22,25 +22,6 @@
 		margin-right: 4px;
 	}
 
-	&__is-debug {
-		background: np-colors.$primary-600;
-		border-radius: 50%;
-		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba(black, 0.08);
-		color: white;
-		font-weight: bold;
-		margin: 0 16px;
-		padding: 6px;
-		position: fixed;
-		text-transform: uppercase;
-		z-index: 9997;
-
-		> svg {
-			fill: white;
-			margin: 0;
-		}
-	}
-
 	&__is-error {
 		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 

package/src/plugin-toggle/index.js

@@ -99,7 +99,7 @@ class PluginToggle extends Component {
 					toggleChecked={ this.isPluginInstalledAndActive( plugin ) }
 					toggleOnChange={ value => this.managePlugin( slug, value ) }
 					notification={ error }
-					notificationHTML={ error }
+					notificationHTML
 					notificationLevel="error"
 				/>
 			);

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

@@ -6,7 +6,7 @@ import { cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button, Handoff, Notice, HandoffMessage, TabbedNavigation, Page } from '../';
+import { Button, DebugBadge, Handoff, HandoffMessage, TabbedNavigation, Page } from '../';
 import { activeBreadcrumbs } from '../wizard/breadcrumbs-select';
 import { buttonProps } from '../button-props';
 import Router from '../proxied-imports/router';
@@ -112,7 +112,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton,
 			}
 			return (
 				<>
-					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
+					<DebugBadge />
 					{ hideHeader ? (
 						// Without the Page shell the tabs still own the content: it
 						// renders inside the active tab's panel.

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

@@ -9,8 +9,6 @@ import { HashRouter } from 'react-router-dom';
  */
 import withWizardScreen from './';
 
-global.newspack_aux_data = { is_debug_mode: false };
-
 describe( 'withWizardScreen', () => {
 	it( 'falls back to a single headerText breadcrumb when no breadcrumbItems are provided', () => {
 		const WrappedComponent = () => <div>Body content</div>;

package/src/wizard/index.js

@@ -6,26 +6,25 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-// Notice is aliased: `Notice` below is Newspack's own, which this file also uses.
 import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	Notice as CoreNotice,
+	Notice,
 	SlotFillProvider,
 	createSlotFill,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, createInterpolateElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, createInterpolateElement, isValidElement, useLayoutEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
+import { Footer, DebugBadge, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page, Waiting } from '../';
 import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
@@ -92,7 +91,9 @@ const ResetHeaderData = () => {
 	const location = useLocation();
 	const { resetHeaderData } = useDispatch( WIZARD_STORE_NAMESPACE );
 
-	useEffect( () => {
+	// Must stay before paint: a passive effect here would run after a section that
+	// publishes from a layout effect, wiping the header it just set.
+	useLayoutEffect( () => {
 		resetHeaderData();
 		window.scrollTo( 0, 0 );
 	}, [ location.pathname, resetHeaderData ] );
@@ -177,6 +178,7 @@ const Wizard = (
 		actions,
 		backNav,
 		badges,
+		fullWidth: headerFullWidth,
 		sectionDescription,
 		sectionMenu,
 		sectionName,
@@ -269,7 +271,7 @@ const Wizard = (
 	// as page chrome rather than as content.
 	const inertGating = window.newspack_aux_data?.inert_gating;
 	const inertGatingNotice = inertGating?.show && (
-		<CoreNotice status="warning" isDismissible={ false } className="newspack-wizard__inert-gating-notice">
+		<Notice status="warning" isDismissible={ false } className="newspack-wizard__inert-gating-notice">
 			{ /* The conversion map takes childless elements and fills them from the
 			     translated string, so jsx-a11y can't see the content they end up with. */ }
 			{ interpolateOrPlainText( inertGating.message, {
@@ -279,7 +281,7 @@ const Wizard = (
 				/* eslint-enable jsx-a11y/anchor-has-content */
 				strong: <strong />,
 			} ) }
-		</CoreNotice>
+		</Notice>
 	);
 
 	const content = (
@@ -303,7 +305,7 @@ const Wizard = (
 								render={ routerProps => (
 									<div
 										className={ classnames( 'newspack-wizard__content', className, {
-											'newspack-wizard__content--full-width': section.fullWidth,
+											'newspack-wizard__content--full-width': headerFullWidth ?? section.fullWidth,
 										} ) }
 									>
 										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
@@ -403,7 +405,7 @@ const Wizard = (
 					} ) }
 				>
 					<HashRouter hashType="slash">
-						{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
+						<DebugBadge />
 						<WizardHeaderRegion
 							hideHeader={ hideHeader }
 							headerText={ headerText }

package/src/wizard/index.test.js

@@ -7,19 +7,22 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
  * WordPress dependencies.
  */
 import apiFetch from '@wordpress/api-fetch';
+import { select, useDispatch } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
  */
 import Wizard from './';
 import { useWizardData } from './store/utils';
+import { WIZARD_STORE_NAMESPACE } from './store';
 
 jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = { is_debug_mode: false };
+// Localized onto every real wizard screen; the footer's ExternalLink needs a
+// string href.
 window.newspack_urls = { support: 'https://help.newspack.com/' };
+window.scrollTo = jest.fn();
 
 const SETTINGS = { minimumDonation: '5' };
 
@@ -154,3 +157,93 @@ describe( 'Wizard', () => {
 		expect( counts.wizard ).toBe( 0 );
 	} );
 } );
+
+const NarrowingSection = () => {
+	const { setHeaderData } = useDispatch( WIZARD_STORE_NAMESPACE );
+	useLayoutEffect( () => {
+		setHeaderData( { fullWidth: false } );
+	}, [ setHeaderData ] );
+	return <div>Narrowing section</div>;
+};
+
+const RecoveringSection = () => {
+	const { setHeaderData } = useDispatch( WIZARD_STORE_NAMESPACE );
+	const [ failed, setFailed ] = useState( true );
+	useLayoutEffect( () => {
+		setHeaderData( { fullWidth: failed ? false : undefined } );
+	}, [ setHeaderData, failed ] );
+	return <button onClick={ () => setFailed( false ) }>Retry</button>;
+};
+
+// Two sections, because that is what mounts ResetHeaderData: a single-section
+// wizard never exercises the reset these overrides have to survive.
+const widthSections = renderSection => [
+	{ label: 'List', path: '/', exact: true, fullWidth: true, render: renderSection },
+	{ label: 'Other', path: '/other', render: () => <div>Other section</div> },
+];
+
+describe( 'Wizard content width', () => {
+	beforeEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'renders full-width when the section declares it and nothing overrides it', async () => {
+		const { container } = render(
+			<Wizard
+				headerText="Test wizard"
+				sections={ widthSections( () => (
+					<div>List content</div>
+				) ) }
+			/>
+		);
+
+		expect( await screen.findByText( 'List content' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.newspack-wizard__content' ) ).toHaveClass( 'newspack-wizard__content--full-width' );
+	} );
+
+	it( 'falls back to the standard width when a section overrides fullWidth before paint', async () => {
+		const { container } = render(
+			<Wizard
+				headerText="Test wizard"
+				sections={ widthSections( () => (
+					<NarrowingSection />
+				) ) }
+			/>
+		);
+
+		expect( await screen.findByText( 'Narrowing section' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.newspack-wizard__content' ) ).not.toHaveClass( 'newspack-wizard__content--full-width' );
+	} );
+
+	it( 'restores the declared width when the section clears its override', async () => {
+		const { container } = render(
+			<Wizard
+				headerText="Test wizard"
+				sections={ widthSections( () => (
+					<RecoveringSection />
+				) ) }
+			/>
+		);
+
+		const retry = await screen.findByRole( 'button', { name: 'Retry' } );
+		expect( container.querySelector( '.newspack-wizard__content' ) ).not.toHaveClass( 'newspack-wizard__content--full-width' );
+
+		fireEvent.click( retry );
+
+		await waitFor( () => expect( container.querySelector( '.newspack-wizard__content' ) ).toHaveClass( 'newspack-wizard__content--full-width' ) );
+	} );
+
+	it( 'keeps a section header published from a layout effect through the mount reset', async () => {
+		render(
+			<Wizard
+				headerText="Test wizard"
+				sections={ widthSections( () => (
+					<NarrowingSection />
+				) ) }
+			/>
+		);
+
+		expect( await screen.findByText( 'Narrowing section' ) ).toBeInTheDocument();
+		expect( select( WIZARD_STORE_NAMESPACE ).getHeaderData().fullWidth ).toBe( false );
+	} );
+} );

package/src/wizard/store/index.js

@@ -16,6 +16,8 @@ import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 
 const DEFAULT_STATE = {
+	// `fullWidth` is deliberately absent: a default here would narrow every
+	// full-width section on reset, since Wizard only falls back when it is unset.
 	headerData: {
 		actions: [],
 		backNav: '',