Example story for navigator in modal

packages/components/src/modal/stories/index.story.tsx

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
+import type { CSSProperties } from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { starEmpty, starFilled } from '@wordpress/icons';
+import { useId, useState } from '@wordpress/element';
+import { chevronLeft, close, starEmpty, starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,6 +17,13 @@ import Button from '../../button';
 import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorButton,
+	NavigatorToParentButton,
+	useNavigator,
+} from '../../navigator';
 
 const meta: Meta< typeof Modal > = {
 	component: Modal,
@@ -123,3 +131,148 @@ WithHeaderActions.args = {
 WithHeaderActions.parameters = {
 	...Default.parameters,
 };
+
+export const WithNavigator: StoryFn< typeof Modal > = () => {
+	const fonts = new Map( [
+		[ 'a', { name: 'Font A', variants: [ 'Italic 100', 'Regular 400' ] } ],
+		[ 'b', { name: 'Font B', variants: [ 'Regular 100', 'Regular 400' ] } ],
+		[ 'c', { name: 'Font C', variants: [ 'Regular 100', 'Bold 100' ] } ],
+	] );
+
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+	const modalHeaderId = useId();
+	const headerStyle: CSSProperties = { display: 'flex' };
+	const titleStyle: CSSProperties = { margin: 0 };
+	const listStyle: CSSProperties = {
+		listStyle: 'none',
+		margin: '1em 0',
+		padding: 0,
+	};
+	const itemStyle: CSSProperties = {
+		display: 'flex',
+		padding: '6px 12px',
+		fontSize: 14,
+		alignItems: 'stretch',
+		boxSizing: 'border-box',
+		justifyContent: 'space-between',
+	};
+
+	function FontNavigator() {
+		return (
+			<NavigatorProvider initialPath="/">
+				<NavigatorScreen path="/">
+					<FontList />
+				</NavigatorScreen>
+
+				<NavigatorScreen path="/:font">
+					<FontPage />
+				</NavigatorScreen>
+			</NavigatorProvider>
+		);
+	}
+
+	function FontList() {
+		return (
+			<div>
+				<header style={ headerStyle }>
+					<h1 id={ modalHeaderId } style={ titleStyle }>
+						Font Manager
+					</h1>
+				</header>
+				<ol style={ listStyle }>
+					{ Array.from( fonts.entries(), ( [ id, { name } ] ) => (
+						<li>
+							<NavigatorButton
+								path={ `/${ id }` }
+								key={ id }
+								style={ itemStyle }
+							>
+								{ name }
+							</NavigatorButton>
+						</li>
+					) ) }
+				</ol>
+			</div>
+		);
+	}
+
+	function FontPage() {
+		const {
+			params: { font: id },
+		} = useNavigator();
+		const font = fonts.get( id.toString() );
+
+		if ( ! font ) {
+			return (
+				<div>
+					<header style={ headerStyle }>
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							label="Back"
+						/>
+						<h1 id={ modalHeaderId } style={ titleStyle }>
+							Not found
+						</h1>
+					</header>
+				</div>
+			);
+		}
+
+		const { name, variants } = font;
+
+		return (
+			<div>
+				<header style={ headerStyle }>
+					<NavigatorToParentButton
+						icon={ chevronLeft }
+						label="Back"
+					/>
+					<h1 id={ modalHeaderId } style={ titleStyle }>
+						{ name }
+					</h1>
+				</header>
+				<ul style={ listStyle }>
+					{ variants.map( ( variant, index ) => (
+						<li key={ index }>
+							{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
+							<label style={ itemStyle }>
+								{ variant }
+								<input type="checkbox" />
+							</label>
+						</li>
+					) ) }
+				</ul>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Open Font Manager
+			</Button>
+			{ isOpen && (
+				<Modal
+					__experimentalHideHeader={ true }
+					aria-labelledby={ modalHeaderId }
+					size="large"
+					onRequestClose={ closeModal }
+				>
+					<FontNavigator />
+					<Button
+						icon={ close }
+						label="Close"
+						onClick={ closeModal }
+						style={ {
+							position: 'absolute',
+							right: 32,
+							top: 32,
+						} }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+};