Simplify nav components to bare essentials

packages/components/src/navigation/index.js

@@ -8,6 +8,8 @@ const Navigation = ( { activeId, children, items: rawItems, rootTitle } ) => {
 				...item,
 				children: itemChildren,
 				parent: item.parent || 'root',
+				isActive: item.id === activeId,
+				hasChildren: itemChildren.length > 0,
 			};
 		} );
 	};
@@ -28,12 +30,14 @@ const Navigation = ( { activeId, children, items: rawItems, rootTitle } ) => {
 		: items.filter( ( item ) => item.parent === 'root' );
 	const parentItems = parentLevel
 		? items.filter( ( item ) => item.parent === parentLevel.id )
-		: items.filter( ( item ) => item.parent === 'root' );
+		: [];
+	const backItem = parentItems.length ? parentItems[ 0 ] : null;
 
 	return (
 		<div className="components-navigation">
 			{ children( {
 				activeId,
+				backItem,
 				currentItems,
 				currentLevel,
 				parentItems,

packages/components/src/navigation/menu-item.js

@@ -14,16 +14,21 @@ import { Icon, chevronRight } from '@wordpress/icons';
 import Button from '../button';
 import Text from '../text';
 
-const NavigationMenuItem = ( { children, hasChildren, isActive, onClick } ) => {
+const NavigationMenuItem = ( props ) => {
+	const { children, hasChildren, isActive, onClick, title } = props;
 	const classes = classnames( 'components-navigation__menu-item', {
 		'is-active': isActive,
 	} );
 
+	const handleClick = () => {
+		onClick( children.length ? children[ 0 ] : props );
+	};
+
 	return (
 		<li className={ classes }>
-			<Button className={ classes } onClick={ onClick }>
+			<Button className={ classes } onClick={ handleClick }>
 				<Text variant="body.small">
-					<span>{ children }</span>
+					<span>{ title }</span>
 				</Text>
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>

packages/components/src/navigation/menu.js

@@ -1,28 +1,5 @@
-/**
- * Internal dependencies
- */
-import NavigationMenuItem from './menu-item';
-
-const NavigationMenu = ( { activeId, children, items, onSelect } ) => {
-	return (
-		<ul className="components-navigation__menu">
-			{ children }
-			{ items.map( ( item ) => (
-				<NavigationMenuItem
-					hasChildren={ item.children.length > 0 }
-					isActive={ item.id === activeId }
-					key={ item.id }
-					onClick={ () =>
-						item.children.length
-							? onSelect( item.children[ 0 ] )
-							: onSelect( item )
-					}
-				>
-					{ item.title }
-				</NavigationMenuItem>
-			) ) }
-		</ul>
-	);
+const NavigationMenu = ( { children } ) => {
+	return <ul className="components-navigation__menu">{ children }</ul>;
 };
 
 export default NavigationMenu;

packages/components/src/navigation/stories/index.js

@@ -1,127 +1,77 @@
 /**
  * WordPress dependencies
  */
+import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Navigation from '../';
-import NavigationBackButton from '../back-button';
-import NavigationPane from '../pane';
 import NavigationMenu from '../menu';
-import NavigationTitle from '../title';
+import NavigationMenuItem from '../menu-item';
 
 export default {
 	title: 'Components/Navigation',
 	component: Navigation,
 };
 
 const data = [
-	{ title: 'Home', id: 'home' },
 	{
-		title: 'Analytics',
-		id: 'analytics',
+		title: 'Item 1',
+		id: 'item-1',
 	},
 	{
-		title: 'Orders',
-		id: 'orders',
+		title: 'Item 2',
+		id: 'item-2',
 	},
 	{
-		title: 'Overview',
-		id: 'overview',
-		parent: 'analytics',
+		title: 'Category',
+		id: 'item-3',
 	},
 	{
-		title: 'Products report',
-		id: 'products',
-		parent: 'analytics',
+		title: 'Child 1',
+		id: 'child-1',
+		parent: 'item-3',
 	},
 	{
-		title: 'All orders',
-		id: 'all_orders',
-		parent: 'orders',
-	},
-	{
-		title: 'Payouts',
-		id: 'payouts',
-		parent: 'orders',
-	},
-	{
-		title: 'Settings',
-		id: 'settings',
-		menu: 'secondary',
-	},
-	{
-		title: 'Extensions',
-		id: 'extensions',
-		menu: 'secondary',
-	},
-	{
-		title: 'General',
-		id: 'general',
-		parent: 'settings',
-	},
-	{
-		title: 'Tax',
-		id: 'tax',
-		parent: 'settings',
-	},
-	{
-		title: 'My extensions',
-		id: 'my_extensions',
-		parent: 'extensions',
-	},
-	{
-		title: 'Marketplace',
-		id: 'marketplace',
-		parent: 'extensions',
+		title: 'Child 2',
+		id: 'child-2',
+		parent: 'item-3',
 	},
 ];
 
 function Example() {
-	const [ active, setActive ] = useState( 'home' );
+	const [ active, setActive ] = useState( 'item-1' );
 
 	return (
-		<Navigation
-			activeId={ active }
-			items={ data }
-			rootTitle="WooCommerce Home"
-		>
-			{ ( { currentItems, currentLevel, parentItems, parentLevel } ) => {
+		<Navigation activeId={ active } items={ data } rootTitle="Home">
+			{ ( { currentItems, currentLevel, backItem } ) => {
 				return (
-					<NavigationPane>
-						<NavigationBackButton
-							onClick={ () =>
-								parentLevel
-									? setActive( parentItems[ 0 ].id )
-									: ( window.location =
-											'https://wordpress.com' )
-							}
-						>
-							{ ! parentLevel ? 'Dashboard' : parentLevel.title }
-						</NavigationBackButton>
-						<NavigationTitle>
-							{ currentLevel.id === 'root'
-								? 'WooCommerce'
-								: currentLevel.title }
-						</NavigationTitle>
-						<NavigationMenu
-							activeId={ active }
-							items={ currentItems.filter(
-								( item ) => item.menu !== 'secondary'
-							) }
-							onSelect={ ( item ) => setActive( item.id ) }
-						/>
-						<br />
-						<NavigationMenu
-							activeId={ active }
-							items={ currentItems.filter(
-								( item ) => item.menu === 'secondary'
-							) }
-							onSelect={ ( item ) => setActive( item.id ) }
-						/>
-					</NavigationPane>
+					<>
+						{ backItem && (
+							<Button
+								isPrimary
+								onClick={ () => setActive( backItem.id ) }
+							>
+								Back
+							</Button>
+						) }
+						<h1>{ currentLevel.title }</h1>
+						<NavigationMenu>
+							{ currentItems.map( ( item ) => {
+								return (
+									<NavigationMenuItem
+										{ ...item }
+										key={ item.id }
+										onClick={ ( selected ) =>
+											setActive( selected.id )
+										}
+									/>
+								);
+							} ) }
+						</NavigationMenu>
+					</>
 				);
 			} }
 		</Navigation>