newspack-components 4.11.0 → 4.12.0-alpha.1

package/src/drawer/style.scss

@@ -80,10 +80,7 @@ $drawer-size-x-large: 640px;
 }
 
 .newspack-drawer__header {
-	align-items: center;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-30 wp-vars.$grid-unit-30 wp-vars.$grid-unit-20;
 }
 
@@ -139,23 +136,8 @@ $drawer-size-x-large: 640px;
 
 .newspack-drawer__footer {
 	background: wp-colors.$white;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-20 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
-
-	> .components-button {
-		flex: 1;
-		justify-content: center;
-	}
-
-	&:has(> :nth-child(3)) {
-		flex-direction: column;
-
-		> .components-button {
-			flex: 0 0 auto;
-		}
-	}
 }
 
 @keyframes newspack-drawer-slide-in {

package/src/drawer/types.ts

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import type { Stack } from '@wordpress/ui';
+
 export type DrawerSize = 'small' | 'medium' | 'large' | 'x-large' | 'full';
 
 /** `text` is null unless the title's children are a plain string. */
@@ -39,10 +44,10 @@ export type DrawerCloseIconProps = {
 };
 
 export type DrawerContentProps = {
-	/** 4px scale, as VStack's `spacing`. `0` for a flush section. */
+	/** 4px scale: `6` is 24px, `0` a flush section. */
 	padding?: number;
-	/** 4px scale, as VStack's `spacing`. */
-	gap?: number;
+	/** A `Stack` gap token from `@wordpress/ui`. */
+	gap?: React.ComponentProps< typeof Stack >[ 'gap' ];
 	className?: string;
 	children?: React.ReactNode;
 };

package/src/index.js

@@ -51,6 +51,7 @@ export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TableCard } from './table-card';
 export { default as TextControl } from './text-control';
+export { default as TooltipBadge } from './tooltip-badge';
 export { default as Waiting } from './waiting';
 export { default as WebPreview } from './web-preview';
 export { default as Wizard } from './wizard';

package/src/page/index.js

@@ -49,15 +49,19 @@ const Page = ( { breadcrumbItems = [], badges, subTitle, actions, tabbedNavigati
 		<>
 			<Stack direction="column" className="newspack-page__header-region">
 				<Stack direction="column" className="newspack-page__header">
-					<Stack direction="row" gap="sm" justify="space-between">
-						<Stack direction="row" gap="sm" align="center" justify="start">
+					<Stack direction="row" gap="sm" justify="space-between" wrap="wrap">
+						<Stack direction="row" gap="sm" align="start" justify="start" className="newspack-page__header-title">
 							<div className="newspack-page__header-visual" aria-hidden="true">
 								<Icon icon={ newspack } />
 							</div>
 							<HStack className="newspack-page__breadcrumbs" justify="flex-start">
 								<Breadcrumbs items={ breadcrumbItems } />
 							</HStack>
-							{ badges }
+							{ badges && (
+								<Stack direction="row" gap="sm" align="center" className="newspack-page__header-badges">
+									{ badges }
+								</Stack>
+							) }
 						</Stack>
 						{ actions && (
 							<Stack direction="row" gap="sm" align="center" className="newspack-page__header-actions">

package/src/page/style.scss

@@ -56,8 +56,29 @@
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 }
 
+.newspack-page__header-title {
+	min-width: 0;
+}
+
 .newspack-page__header-actions {
+	flex-basis: 100%;
+	flex-shrink: 0;
+	justify-content: flex-end;
+	margin-inline-start: auto;
+
+	@include wp-mixins.break-medium {
+		flex-basis: auto;
+	}
+
+	&:empty,
+	&:has(> :only-child:empty) {
+		display: none;
+	}
+}
+
+.newspack-page__header-badges {
 	flex-shrink: 0;
+	min-height: wp-vars.$button-size;
 }
 
 .newspack-page__header-subtitle {
@@ -68,7 +89,7 @@
 .newspack-page__header-visual {
 	display: grid;
 	flex-shrink: 0;
-	height: 24px;
+	height: wp-vars.$button-size;
 	place-items: center;
 	width: 24px;
 
@@ -80,5 +101,6 @@
 }
 
 .newspack-page__breadcrumbs {
-	min-height: wp-vars.$button-size;
+	min-width: 0;
+	padding-block: calc((#{wp-vars.$button-size} - var(--wpds-typography-line-height-md)) / 2);
 }

package/src/tabbed-navigation/style.scss

@@ -21,6 +21,11 @@
 	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
 	--wpds-color-stroke-interactive-neutral-strong: #{np-colors.$primary-600};
 
+	[role="tablist"] {
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
 	a[role="tab"] {
 		text-decoration: none;
 

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,