diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 6e04436804f30..6a2302b31f603 100644 --- 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 ( - + + push( path, { focusRestorationSelector: dataAttrCssSelector } ) + } + { ...buttonProps } + /> ); } +function NavigatorBackButton( { ...props } ) { + const { pop } = useNavigator(); + return ; +} + const MyNavigation = () => { const cx = useCx(); return ( @@ -74,9 +91,7 @@ const MyNavigation = () => { This is the child screen. - - Go back - + Go back @@ -84,9 +99,7 @@ const MyNavigation = () => { - - Go back - + Go back { - - Go back - + Go back
This is the child screen.