@wordpress/components 21.2.0 → 21.3.0

package/src/navigator/stories/index.js

@@ -1,194 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Card, CardBody, CardFooter, CardHeader } from '../../card';
-import { HStack } from '../../h-stack';
-import Dropdown from '../../dropdown';
-import { useCx } from '../../utils/hooks/use-cx';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-} from '../';
-
-export default {
-	title: 'Components (Experimental)/Navigator',
-	component: NavigatorProvider,
-};
-
-const MyNavigation = () => {
-	const cx = useCx();
-	return (
-		<NavigatorProvider
-			initialPath="/"
-			className={ cx( css( `height: 100vh; max-height: 450px;` ) ) }
-		>
-			<NavigatorScreen path="/">
-				<Card>
-					<CardBody>
-						<p>This is the home screen.</p>
-
-						<HStack justify="flex-start" wrap>
-							<NavigatorButton variant="secondary" path="/child">
-								Navigate to child screen.
-							</NavigatorButton>
-
-							<NavigatorButton
-								variant="secondary"
-								path="/overflow-child"
-							>
-								Navigate to screen with horizontal overflow.
-							</NavigatorButton>
-
-							<NavigatorButton
-								variant="secondary"
-								path="/stickies"
-							>
-								Navigate to screen with sticky content.
-							</NavigatorButton>
-
-							<Dropdown
-								renderToggle={ ( { isOpen, onToggle } ) => (
-									<Button
-										onClick={ onToggle }
-										aria-expanded={ isOpen }
-										variant="primary"
-									>
-										Open test dialog
-									</Button>
-								) }
-								renderContent={ () => (
-									<Card>
-										<CardHeader>Go</CardHeader>
-										<CardBody>Stuff</CardBody>
-									</Card>
-								) }
-							/>
-						</HStack>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/child">
-				<Card>
-					<CardBody>
-						<p>This is the child screen.</p>
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/overflow-child">
-				<Card>
-					<CardBody>
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-						<div
-							className={ cx(
-								css( `
-									display: inline-block;
-									background: papayawhip;
-								` )
-							) }
-						>
-							<span
-								className={ cx(
-									css( `
-										color: palevioletred;
-										white-space: nowrap;
-										font-size: 42vw;
-									` )
-								) }
-							>
-								¯\_(ツ)_/¯
-							</span>
-						</div>
-					</CardBody>
-				</Card>
-			</NavigatorScreen>
-
-			<NavigatorScreen path="/stickies">
-				<Card>
-					<Sticky as={ CardHeader } z="2">
-						<NavigatorBackButton variant="secondary">
-							Go back
-						</NavigatorBackButton>
-					</Sticky>
-					<CardBody>
-						<Sticky top="69px" colors="papayawhip/peachpuff">
-							<h2>A wild sticky element appears</h2>
-						</Sticky>
-						<MetaphorIpsum quantity={ 3 } />
-					</CardBody>
-					<CardBody>
-						<Sticky top="69px" colors="azure/paleturquoise">
-							<h2>Another wild sticky element appears</h2>
-						</Sticky>
-						<MetaphorIpsum quantity={ 3 } />
-					</CardBody>
-					<Sticky as={ CardFooter } colors="mistyrose/pink">
-						<Button variant="primary">Primary noop</Button>
-					</Sticky>
-				</Card>
-			</NavigatorScreen>
-		</NavigatorProvider>
-	);
-};
-
-export const _default = () => {
-	return <MyNavigation />;
-};
-
-function Sticky( {
-	as: Tag = 'div',
-	bottom = 0,
-	colors = 'whitesmoke/lightgrey',
-	top = 0,
-	z: zIndex = 1,
-	...props
-} ) {
-	const cx = useCx();
-	const [ bgColor, dotColor ] = colors.split( '/' );
-	const className = cx(
-		css( {
-			top,
-			bottom,
-			zIndex,
-			display: 'flex',
-			position: 'sticky',
-			background: `radial-gradient(${ dotColor } 1px, ${ bgColor } 2px) 50%/1em 1em`,
-		} ),
-		props.className
-	);
-	const propsOut = { ...props, className };
-	return <Tag { ...propsOut } />;
-}
-
-function MetaphorIpsum( { quantity } ) {
-	const cx = useCx();
-	const list = [
-		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
-		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
-		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
-	];
-	quantity = Math.min( list.length, quantity );
-	return (
-		<>
-			{ list.slice( 0, quantity ).map( ( text, key ) => (
-				<p className={ cx( css( `max-width: 20em;` ) ) } key={ key }>
-					{ text }
-				</p>
-			) ) }
-		</>
-	);
-}

package/src/navigator/test/index.js

@@ -1,472 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-} from '../';
-
-jest.mock( 'framer-motion', () => {
-	const actual = jest.requireActual( 'framer-motion' );
-	return {
-		__esModule: true,
-		...actual,
-		AnimatePresence: ( { children } ) => <div>{ children }</div>,
-		motion: {
-			...actual.motion,
-			div: require( 'react' ).forwardRef( ( { children }, ref ) => (
-				<div ref={ ref }>{ children }</div>
-			) ),
-		},
-	};
-} );
-
-const INVALID_HTML_ATTRIBUTE = {
-	raw: ' "\'><=invalid_path',
-	escaped: " &quot;'&gt;<=invalid_path",
-};
-
-const PATHS = {
-	HOME: '/',
-	CHILD: '/child',
-	NESTED: '/child/nested',
-	INVALID_HTML_ATTRIBUTE: INVALID_HTML_ATTRIBUTE.raw,
-	NOT_FOUND: '/not-found',
-};
-
-function CustomNavigatorButton( { path, onClick, ...props } ) {
-	return (
-		<NavigatorButton
-			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goTo`.
-				onClick?.( { type: 'goTo', path } );
-			} }
-			path={ path }
-			{ ...props }
-		/>
-	);
-}
-
-function CustomNavigatorButtonWithFocusRestoration( {
-	path,
-	onClick,
-	...props
-} ) {
-	return (
-		<NavigatorButton
-			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goTo`.
-				onClick?.( { type: 'goTo', path } );
-			} }
-			path={ path }
-			{ ...props }
-		/>
-	);
-}
-
-function CustomNavigatorBackButton( { onClick, ...props } ) {
-	return (
-		<NavigatorBackButton
-			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goBack`.
-				onClick?.( { type: 'goBack' } );
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-const MyNavigation = ( {
-	initialPath = PATHS.HOME,
-	onNavigatorButtonClick,
-} ) => {
-	const [ inputValue, setInputValue ] = useState( '' );
-	return (
-		<NavigatorProvider initialPath={ initialPath }>
-			<NavigatorScreen path={ PATHS.HOME }>
-				<p>This is the home screen.</p>
-				<CustomNavigatorButton
-					path={ PATHS.NOT_FOUND }
-					onClick={ onNavigatorButtonClick }
-				>
-					Navigate to non-existing screen.
-				</CustomNavigatorButton>
-				<CustomNavigatorButton
-					path={ PATHS.CHILD }
-					onClick={ onNavigatorButtonClick }
-				>
-					Navigate to child screen.
-				</CustomNavigatorButton>
-				<CustomNavigatorButton
-					path={ PATHS.INVALID_HTML_ATTRIBUTE }
-					onClick={ onNavigatorButtonClick }
-				>
-					Navigate to screen with an invalid HTML value as a path.
-				</CustomNavigatorButton>
-			</NavigatorScreen>
-
-			<NavigatorScreen path={ PATHS.CHILD }>
-				<p>This is the child screen.</p>
-				<CustomNavigatorButtonWithFocusRestoration
-					path={ PATHS.NESTED }
-					onClick={ onNavigatorButtonClick }
-				>
-					Navigate to nested screen.
-				</CustomNavigatorButtonWithFocusRestoration>
-				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-					Go back
-				</CustomNavigatorBackButton>
-
-				<label htmlFor="test-input">This is a test input</label>
-				<input
-					name="test-input"
-					// eslint-disable-next-line no-restricted-syntax
-					id="test-input"
-					onChange={ ( e ) => {
-						setInputValue( e.target.value );
-					} }
-					value={ inputValue }
-				/>
-			</NavigatorScreen>
-
-			<NavigatorScreen path={ PATHS.NESTED }>
-				<p>This is the nested screen.</p>
-				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-					Go back
-				</CustomNavigatorBackButton>
-			</NavigatorScreen>
-
-			<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
-				<p>This is the screen with an invalid HTML value as a path.</p>
-				<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
-					Go back
-				</CustomNavigatorBackButton>
-			</NavigatorScreen>
-
-			{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-		</NavigatorProvider>
-	);
-};
-
-const getNavigationScreenByText = ( text, { throwIfNotFound = true } = {} ) => {
-	const fnName = throwIfNotFound ? 'getByText' : 'queryByText';
-	return screen[ fnName ]( text );
-};
-const getHomeScreen = ( { throwIfNotFound } = {} ) =>
-	getNavigationScreenByText( 'This is the home screen.', {
-		throwIfNotFound,
-	} );
-const getChildScreen = ( { throwIfNotFound } = {} ) =>
-	getNavigationScreenByText( 'This is the child screen.', {
-		throwIfNotFound,
-	} );
-const getNestedScreen = ( { throwIfNotFound } = {} ) =>
-	getNavigationScreenByText( 'This is the nested screen.', {
-		throwIfNotFound,
-	} );
-const getInvalidHTMLPathScreen = ( { throwIfNotFound } = {} ) =>
-	getNavigationScreenByText(
-		'This is the screen with an invalid HTML value as a path.',
-		{
-			throwIfNotFound,
-		}
-	);
-
-const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
-	const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
-	return screen[ fnName ]( 'button', { name: text } );
-};
-const getToNonExistingScreenButton = ( { throwIfNotFound } = {} ) =>
-	getNavigationButtonByText( 'Navigate to non-existing screen.', {
-		throwIfNotFound,
-	} );
-const getToChildScreenButton = ( { throwIfNotFound } = {} ) =>
-	getNavigationButtonByText( 'Navigate to child screen.', {
-		throwIfNotFound,
-	} );
-const getToNestedScreenButton = ( { throwIfNotFound } = {} ) =>
-	getNavigationButtonByText( 'Navigate to nested screen.', {
-		throwIfNotFound,
-	} );
-const getToInvalidHTMLPathScreenButton = ( { throwIfNotFound } = {} ) =>
-	getNavigationButtonByText(
-		'Navigate to screen with an invalid HTML value as a path.',
-		{
-			throwIfNotFound,
-		}
-	);
-const getBackButton = ( { throwIfNotFound } = {} ) =>
-	getNavigationButtonByText( 'Go back', {
-		throwIfNotFound,
-	} );
-
-describe( 'Navigator', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
-	it( 'should render', () => {
-		render( <MyNavigation /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect(
-			getChildScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'should show a different screen on the first render depending on the value of `initialPath`', () => {
-		render( <MyNavigation initialPath={ PATHS.CHILD } /> );
-
-		expect(
-			getHomeScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'should ignore changes to `initialPath` after the first render', () => {
-		const { rerender } = render( <MyNavigation /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect(
-			getChildScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-
-		rerender( <MyNavigation initialPath={ PATHS.CHILD } /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect(
-			getChildScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'should not rended anything if the `initialPath` does not match any available screen', () => {
-		render( <MyNavigation initialPath={ PATHS.NOT_FOUND } /> );
-
-		expect(
-			getHomeScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getChildScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'should navigate across screens', () => {
-		const spy = jest.fn();
-
-		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToChildScreenButton() ).toBeInTheDocument();
-
-		// Navigate to child screen.
-		fireEvent.click( getToChildScreenButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect( getBackButton() ).toBeInTheDocument();
-
-		// Navigate back to home screen.
-		fireEvent.click( getBackButton() );
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToChildScreenButton() ).toBeInTheDocument();
-
-		// Navigate again to child screen.
-		fireEvent.click( getToChildScreenButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect( getToNestedScreenButton() ).toBeInTheDocument();
-
-		// Navigate to nested screen.
-		fireEvent.click( getToNestedScreenButton() );
-
-		expect( getNestedScreen() ).toBeInTheDocument();
-		expect( getBackButton() ).toBeInTheDocument();
-
-		// Navigate back to child screen.
-		fireEvent.click( getBackButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect( getToNestedScreenButton() ).toBeInTheDocument();
-
-		// Navigate back to home screen.
-		fireEvent.click( getBackButton() );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToChildScreenButton() ).toBeInTheDocument();
-
-		// Check the values passed to `navigator.goTo()`.
-		expect( spy ).toHaveBeenCalledTimes( 6 );
-		expect( spy ).toHaveBeenNthCalledWith( 1, {
-			path: PATHS.CHILD,
-			type: 'goTo',
-		} );
-		expect( spy ).toHaveBeenNthCalledWith( 2, {
-			type: 'goBack',
-		} );
-		expect( spy ).toHaveBeenNthCalledWith( 3, {
-			path: PATHS.CHILD,
-			type: 'goTo',
-		} );
-		expect( spy ).toHaveBeenNthCalledWith( 4, {
-			path: PATHS.NESTED,
-			type: 'goTo',
-		} );
-		expect( spy ).toHaveBeenNthCalledWith( 5, {
-			type: 'goBack',
-		} );
-		expect( spy ).toHaveBeenNthCalledWith( 6, {
-			type: 'goBack',
-		} );
-	} );
-
-	it( 'should not rended anything if the path does not match any available screen', () => {
-		const spy = jest.fn();
-
-		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
-
-		expect( getToNonExistingScreenButton() ).toBeInTheDocument();
-
-		// Attempt to navigate to non-existing screen. No screens get rendered.
-		fireEvent.click( getToNonExistingScreenButton() );
-
-		expect(
-			getHomeScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getChildScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-		expect(
-			getNestedScreen( { throwIfNotFound: false } )
-		).not.toBeInTheDocument();
-
-		// Check the values passed to `navigator.goTo()`.
-		expect( spy ).toHaveBeenCalledTimes( 1 );
-		expect( spy ).toHaveBeenNthCalledWith( 1, {
-			path: PATHS.NOT_FOUND,
-			type: 'goTo',
-		} );
-	} );
-
-	it( 'should restore focus correctly', () => {
-		render( <MyNavigation /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-
-		// Navigate to child screen.
-		fireEvent.click( getToChildScreenButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-
-		// Navigate to nested screen.
-		fireEvent.click( getToNestedScreenButton() );
-
-		expect( getNestedScreen() ).toBeInTheDocument();
-
-		// Navigate back to child screen, check that focus was correctly restored.
-		fireEvent.click( getBackButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect( getToNestedScreenButton() ).toHaveFocus();
-
-		// Navigate back to home screen, check that focus was correctly restored.
-		fireEvent.click( getBackButton() );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToChildScreenButton() ).toHaveFocus();
-	} );
-
-	it( 'should escape the value of the `path` prop', () => {
-		render( <MyNavigation /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToInvalidHTMLPathScreenButton() ).toBeInTheDocument();
-
-		// The following line tests the implementation details, but it's necessary
-		// as this would be otherwise transparent to the user.
-		expect( getToInvalidHTMLPathScreenButton() ).toHaveAttribute(
-			'id',
-			INVALID_HTML_ATTRIBUTE.escaped
-		);
-
-		// Navigate to screen with an invalid HTML value for its `path`.
-		fireEvent.click( getToInvalidHTMLPathScreenButton() );
-
-		expect( getInvalidHTMLPathScreen() ).toBeInTheDocument();
-		expect( getBackButton() ).toBeInTheDocument();
-
-		// Navigate back to home screen, check that the focus restoration selector
-		// worked correctly despite the escaping.
-		fireEvent.click( getBackButton() );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToInvalidHTMLPathScreenButton() ).toHaveFocus();
-	} );
-
-	it( 'should keep focus on the element that is being interacted with, while re-rendering', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render( <MyNavigation /> );
-
-		expect( getHomeScreen() ).toBeInTheDocument();
-		expect( getToChildScreenButton() ).toBeInTheDocument();
-
-		// Navigate to child screen.
-		await user.click( getToChildScreenButton() );
-
-		expect( getChildScreen() ).toBeInTheDocument();
-		expect( getBackButton() ).toBeInTheDocument();
-		expect( getToNestedScreenButton() ).toHaveFocus();
-
-		// Interact with the input, the focus should stay on the input element.
-		const input = screen.getByLabelText( 'This is a test input' );
-		await user.type( input, 'd' );
-		expect( input ).toHaveFocus();
-	} );
-} );