Update Navigator stories to work with focus restoration

WordPress · Dec 9, 2021 · 4493d59 · 4493d59
1 parent 6bdf19a
commit 4493d59
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
@@ -18,17 +18,34 @@ export default {
 	component: NavigatorProvider,
 };
 
-function NavigatorButton( { path, isBack = false, ...props } ) {
-	const navigator = useNavigator();
+function NavigatorButton( { path, ...props } ) {
+	const { push } = useNavigator();
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
 
-	const handleOnClick = () =>
-		isBack ? navigator.pop() : navigator.push( path );
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const buttonProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
 
 	return (
-		<Button variant="secondary" onClick={ handleOnClick } { ...props } />
+		<Button
+			variant="secondary"
+			onClick={ () =>
+				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+			}
+			{ ...buttonProps }
+		/>
 	);
 }
 
+function NavigatorBackButton( { ...props } ) {
+	const { pop } = useNavigator();
+	return <Button variant="secondary" onClick={ pop } { ...props } />;
+}
+
 const MyNavigation = () => {
 	const cx = useCx();
 	return (
@@ -74,19 +91,15 @@ const MyNavigation = () => {
 				<Card>
 					<CardBody>
 						<p>This is the child screen.</p>
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 					</CardBody>
 				</Card>
 			</NavigatorScreen>
 
 			<NavigatorScreen path="/overflow-child">
 				<Card>
 					<CardBody>
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 						<div
 							className={ cx(
 								css( `
@@ -114,9 +127,7 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/stickies">
 				<Card>
 					<Sticky as={ CardHeader } z="2">
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 					</Sticky>
 					<CardBody>
 						<Sticky top="69px" colors="papayawhip/peachpuff">