From 2edb1d4c4dbc9635961535f62940a96c0c3e88ae Mon Sep 17 00:00:00 2001
From: Copons <Copons@users.noreply.github.com>
Date: Thu, 24 Sep 2020 10:51:20 +0200
Subject: [PATCH] Make Default more default and move less interesting examples
 to More Examples

---
 .../src/navigation/stories/default.js         | 78 +++++++++----------
 .../src/navigation/stories/more-examples.js   | 77 +++++++++++++-----
 .../src/navigation/stories/style.css          |  5 ++
 3 files changed, 100 insertions(+), 60 deletions(-)

diff --git a/packages/components/src/navigation/stories/default.js b/packages/components/src/navigation/stories/default.js
index a3eed640a6cda5..17792bca804dd9 100644
--- a/packages/components/src/navigation/stories/default.js
+++ b/packages/components/src/navigation/stories/default.js
@@ -1,69 +1,69 @@
 /**
  * WordPress dependencies
  */
-import { Icon, wordpress } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Navigation from '..';
-import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
 export function DefaultStory() {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+
 	return (
-		<Navigation activeItem="item-1" className="navigation-story">
+		<Navigation activeItem={ activeItem } className="navigation-story">
 			<NavigationMenu title="Home">
-				<NavigationGroup title="Menu Group">
-					<NavigationItem item="item-1" title="Item 1" />
-					<NavigationItem item="item-2" title="Item 2" />
-					<NavigationItem
-						badge="5"
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu"
-					/>
-					<NavigationItem item="item-3" title="Item 3" />
-				</NavigationGroup>
-				<NavigationGroup title="External Links">
-					<NavigationItem
-						href="https://wordpress.org/"
-						item="item-4"
-						target="_blank"
-						title="WordPress.org"
-					/>
-					<NavigationItem item="item-5">
-						<a
-							className="navigation-story__wordpress-icon"
-							href="https://wordpress.org/"
-							target="_blank"
-							rel="noreferrer"
-						>
-							<Icon icon={ wordpress } />
-						</a>
-					</NavigationItem>
-				</NavigationGroup>
+				<NavigationItem
+					item="item-1"
+					onClick={ () => setActiveItem( 'item-1' ) }
+					title="Item 1"
+				/>
+				<NavigationItem
+					item="item-2"
+					onClick={ () => setActiveItem( 'item-2' ) }
+					title="Item 2"
+				/>
+				<NavigationItem
+					item="item-sub-menu"
+					navigateToMenu="sub-menu"
+					title="Sub-Menu"
+				/>
 			</NavigationMenu>
-
 			<NavigationMenu menu="sub-menu" parentMenu="root" title="Sub-Menu">
-				<NavigationItem item="child-1" title="Child 1" />
-				<NavigationItem item="child-2" title="Child 2" />
 				<NavigationItem
-					badge="2"
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
+				<NavigationItem
 					item="child-nested-sub-menu"
 					navigateToMenu="nested-sub-menu"
 					title="Nested Sub-Menu"
 				/>
 			</NavigationMenu>
-
 			<NavigationMenu
 				menu="nested-sub-menu"
 				parentMenu="sub-menu"
 				title="Nested Sub-Menu"
 			>
-				<NavigationItem item="sub-child-1" title="Sub-Child 1" />
-				<NavigationItem item="sub-child-2" title="Sub-Child 2" />
+				<NavigationItem
+					item="sub-child-1"
+					onClick={ () => setActiveItem( 'sub-child-1' ) }
+					title="Sub-Child 1"
+				/>
+				<NavigationItem
+					item="sub-child-2"
+					onClick={ () => setActiveItem( 'sub-child-2' ) }
+					title="Sub-Child 2"
+				/>
 			</NavigationMenu>
 		</Navigation>
 	);
diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
index 466a8573170037..d8c1cfd01bd38f 100644
--- a/packages/components/src/navigation/stories/more-examples.js
+++ b/packages/components/src/navigation/stories/more-examples.js
@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { Icon, wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Navigation from '..';
+import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
 export function MoreExamplesStory() {
+	const [ activeItem, setActiveItem ] = useState( 'child-1' );
 	const [ delayedBadge, setDelayedBadge ] = useState();
 	useEffect( () => {
 		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
@@ -18,35 +21,67 @@ export function MoreExamplesStory() {
 	} );
 
 	return (
-		<Navigation className="navigation-story">
+		<Navigation activeItem={ activeItem } className="navigation-story">
 			<NavigationMenu title="Home">
-				<NavigationItem item="item-1" title="Item 1" />
-				<NavigationItem item="item-2" title="Item 2" />
-				<NavigationItem
-					item="item-sub-menu"
-					navigateToMenu="sub-menu"
-					title="Sub-Menu"
-				/>
-				<NavigationItem
-					item="item-nonexistent-menu"
-					navigateToMenu="nonexistent-menu"
-					title="Navigate to Nonexistent Menu"
-				/>
-				<NavigationItem
-					badge={ delayedBadge }
-					item="item-delayed-badge"
-					title="Item with a Delayed Badge"
-				/>
+				<NavigationGroup title="Items without Active State">
+					<NavigationItem item="item-1" title="Item 1" />
+					<NavigationItem item="item-2" title="Item 2" />
+				</NavigationGroup>
+				<NavigationGroup title="Items with Unusual Features">
+					<NavigationItem
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu with Custom Back Label"
+					/>
+					<NavigationItem
+						item="item-nonexistent-menu"
+						navigateToMenu="nonexistent-menu"
+						title="Navigate to Nonexistent Menu"
+					/>
+					<NavigationItem
+						badge={ delayedBadge }
+						item="item-delayed-badge"
+						onClick={ () => setActiveItem( 'item-delayed-badge' ) }
+						title="Item with a Delayed Badge"
+					/>
+				</NavigationGroup>
+				<NavigationGroup title="External Links">
+					<NavigationItem
+						href="https://wordpress.org/"
+						item="item-4"
+						target="_blank"
+						title="WordPress.org"
+					/>
+					<NavigationItem item="item-5">
+						<a
+							className="navigation-story__wordpress-icon"
+							href="https://wordpress.org/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<Icon icon={ wordpress } />
+							<em>Custom Content</em>
+						</a>
+					</NavigationItem>
+				</NavigationGroup>
 			</NavigationMenu>
 
 			<NavigationMenu
 				backButtonLabel="Custom Back Button Label"
 				menu="sub-menu"
 				parentMenu="root"
-				title="Sub-Menu"
+				title="Sub-Menu with Custom Back Label"
 			>
-				<NavigationItem item="child-1" title="Child 1" />
-				<NavigationItem item="child-2" title="Child 2" />
+				<NavigationItem
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
 			</NavigationMenu>
 		</Navigation>
 	);
diff --git a/packages/components/src/navigation/stories/style.css b/packages/components/src/navigation/stories/style.css
index 5a2b33ff1294b2..a702a797b771ad 100644
--- a/packages/components/src/navigation/stories/style.css
+++ b/packages/components/src/navigation/stories/style.css
@@ -6,8 +6,13 @@
 	margin: 48px 0 0 24px;
 }
 
+.navigation-story__wordpress-icon {
+	align-items: center;
+	display: inline-flex;
+}
 .navigation-story__wordpress-icon svg {
 	fill: #949494;
+	margin-right: 8px;
 }
 .navigation-story__wordpress-icon:hover svg {
 	fill: #ddd;