newspack-components 4.10.0 → 4.12.0-alpha.1

package/src/tooltip-badge/index.test.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TooltipBadge from './';
+
+describe( 'TooltipBadge', () => {
+	it( 'describes its focusable trigger with the tooltip text, keeping it out of a surrounding heading name', () => {
+		render(
+			<h3>
+				Registration wall
+				<TooltipBadge label="Overrides paid access" tooltip="This grants registered readers access." intent="low" />
+			</h3>
+		);
+
+		expect( screen.getByRole( 'heading', { name: 'Registration wall Overrides paid access' } ) ).toBeInTheDocument();
+		const trigger = screen.getByText( 'Overrides paid access' ).closest( '[tabindex="0"]' );
+		expect( trigger ).toHaveAccessibleDescription( 'This grants registered readers access.' );
+	} );
+} );

package/src/tooltip-badge/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { Badge, Tooltip } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import type { BadgeIntent } from '../types';
+
+type TooltipBadgeProps = {
+	label: string;
+	tooltip: string;
+	intent?: BadgeIntent;
+};
+
+/**
+ * A badge whose tooltip explains it. The tooltip serves mouse and keyboard users;
+ * screen readers get the same text as the trigger's description, which keeps it
+ * out of the accessible name of a heading the badge sits in.
+ */
+const TooltipBadge = ( { label, tooltip, intent = 'none' }: TooltipBadgeProps ) => {
+	const descriptionId = useInstanceId( TooltipBadge, 'newspack-tooltip-badge' );
+	return (
+		<>
+			<Tooltip.Root>
+				<Tooltip.Trigger render={ <span tabIndex={ 0 } aria-describedby={ descriptionId } /> }>
+					<Badge intent={ intent }>{ label }</Badge>
+				</Tooltip.Trigger>
+				<Tooltip.Popup>{ tooltip }</Tooltip.Popup>
+			</Tooltip.Root>
+			<span id={ descriptionId } hidden>
+				{ tooltip }
+			</span>
+		</>
+	);
+};
+
+export default TooltipBadge;

package/src/wizard/index.js

@@ -6,16 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Notice,
-	SlotFillProvider,
-	createSlotFill,
-	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { DropdownMenu, MenuGroup, MenuItem, Notice, SlotFillProvider, createSlotFill } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { cloneElement, createInterpolateElement, isValidElement, useLayoutEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -111,6 +103,7 @@ const WizardHeaderRegion = ( {
 	sections,
 	sectionName,
 	subTitle,
+	headerSubTitle,
 	actions,
 	tabbedNavigation: wizardTabbedNavigation,
 	children,
@@ -134,6 +127,17 @@ const WizardHeaderRegion = ( {
 		}
 	}
 
+	// WizardError normally mounts inside the tab bar, so a route without one renders it itself.
+	if ( activeSection( sections, pathname )?.hideTabbedNavigation && tabbedNavigation ) {
+		tabbedNavigation = null;
+		children = (
+			<>
+				<WizardError />
+				{ children }
+			</>
+		);
+	}
+
 	if ( hideHeader ) {
 		// Without the Page shell the tabs still own the content: it renders
 		// inside the active tab's panel.
@@ -154,7 +158,12 @@ const WizardHeaderRegion = ( {
 	const sectionSubTitle = activeSection( sections, pathname )?.subHeaderText;
 
 	return (
-		<Page breadcrumbItems={ breadcrumbItems } subTitle={ sectionSubTitle ?? subTitle } actions={ actions } tabbedNavigation={ tabbedNavigation }>
+		<Page
+			breadcrumbItems={ breadcrumbItems }
+			subTitle={ headerSubTitle || ( sectionSubTitle ?? subTitle ) }
+			actions={ actions }
+			tabbedNavigation={ tabbedNavigation }
+		>
 			{ children }
 		</Page>
 	);
@@ -166,7 +175,7 @@ const WizardHeaderRegion = ( {
  * @property {string}     [subHeaderText]           The sub-header text, optional.
  * @property {string}     [apiSlug]                 The API slug, optional.
  * @property {string}     [className]               CSS classes, optional.
- * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active.
+ * @property {any[]}      sections                  Array of sections. A section's own `subHeaderText` replaces the wizard's while it is active, and `hideTabbedNavigation` hides the tab bar on its route.
  *                                                  Its optional `tabbedNavigation( params )` returns the tab items shown while its route matches.
  * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
  * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
@@ -215,6 +224,7 @@ const Wizard = (
 		sectionTitle,
 		sectionPrimaryAction,
 		sectionSecondaryAction,
+		subTitle: headerSubTitle,
 	} = headerData;
 
 	const mainActions = actions?.filter( action => action.type === 'primary' || action.type === 'secondary' );
@@ -268,10 +278,10 @@ const Wizard = (
 					<>
 						{ ! pluginRequirementsKnown && (
 							<div className="newspack-wizard__loader">
-								<VStack alignment="center" spacing={ 2 }>
+								<Stack direction="column" align="center" gap="sm">
 									<Waiting noMargin />
 									<strong>{ __( 'Fetching…', 'newspack-plugin' ) }</strong>
-								</VStack>
+								</Stack>
 							</div>
 						) }
 						<div hidden={ ! pluginRequirementsKnown }>
@@ -443,6 +453,7 @@ const Wizard = (
 							sections={ routedSections }
 							sectionName={ sectionName }
 							subTitle={ subHeaderText }
+							headerSubTitle={ headerSubTitle }
 							actions={ headerActions }
 							tabbedNavigation={ tabbedNavigation }
 						>

package/src/wizard/index.test.js

@@ -320,3 +320,41 @@ describe( 'Wizard section subtitle', () => {
 		expect( subtitle() ).toBe( 'Wizard intro' );
 	} );
 } );
+
+describe( 'Wizard tab bar on hidden routes', () => {
+	beforeEach( () => {
+		apiFetch.mockReset();
+		apiFetch.mockResolvedValue( {} );
+	} );
+
+	it( 'hides the tab bar on a hideTabbedNavigation route and restores it on a tab route', async () => {
+		window.location.hash = '#/list';
+		render(
+			<Wizard
+				headerText="Test wizard"
+				sections={ [
+					{ label: 'List', path: '/list', exact: true, render: () => <div>List view</div> },
+					{ label: 'Other', path: '/other', exact: true, render: () => <div>Other view</div> },
+					{ path: '/list/:id', isHidden: true, hideTabbedNavigation: true, render: () => <div>Item view</div> },
+				] }
+			/>
+		);
+
+		expect( await screen.findByText( 'List view' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'tab', { name: 'Other' } ) ).toBeInTheDocument();
+
+		act( () => {
+			window.location.hash = '#/list/esp';
+			window.dispatchEvent( new HashChangeEvent( 'hashchange' ) );
+		} );
+		expect( await screen.findByText( 'Item view' ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'tab' ) ).not.toBeInTheDocument();
+
+		act( () => {
+			window.location.hash = '#/list';
+			window.dispatchEvent( new HashChangeEvent( 'hashchange' ) );
+		} );
+		expect( await screen.findByText( 'List view' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'tab', { name: 'Other' } ) ).toBeInTheDocument();
+	} );
+} );

package/src/wizard/store/index.js

@@ -25,6 +25,7 @@ const DEFAULT_STATE = {
 		sectionDescription: '',
 		sectionName: '',
 		sectionTitle: '',
+		subTitle: '',
 	},
 	isLoading: false,
 	isQuietLoading: false,