From 38dd3016feb63f932f2423a4f58bc856c27d9f67 Mon Sep 17 00:00:00 2001
From: Copons <Copons@users.noreply.github.com>
Date: Wed, 23 Sep 2020 17:10:51 +0200
Subject: [PATCH 1/4] Split Navigation component stories to improve their
 consumption

---
 .../navigation/stories/controlled-state.js    | 123 ++++++++++
 .../src/navigation/stories/default.js         |  71 ++++++
 .../src/navigation/stories/index.js           | 211 ++----------------
 .../src/navigation/stories/more-examples.js   |  38 ++++
 .../src/navigation/stories/style.css          |  14 ++
 5 files changed, 260 insertions(+), 197 deletions(-)
 create mode 100644 packages/components/src/navigation/stories/controlled-state.js
 create mode 100644 packages/components/src/navigation/stories/default.js
 create mode 100644 packages/components/src/navigation/stories/more-examples.js
 create mode 100644 packages/components/src/navigation/stories/style.css

diff --git a/packages/components/src/navigation/stories/controlled-state.js b/packages/components/src/navigation/stories/controlled-state.js
new file mode 100644
index 00000000000000..b9619769e9148c
--- /dev/null
+++ b/packages/components/src/navigation/stories/controlled-state.js
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Navigation from '..';
+import NavigationItem from '../item';
+import NavigationMenu from '../menu';
+
+export function ControlledStateStory() {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	// Mock navigation link
+	const Link = ( { href, children } ) => (
+		<Button
+			href={ href }
+			// Since we're not actually navigating pages, simulate it with on onClick
+			onClick={ ( event ) => {
+				event.preventDefault();
+				const item = href.replace( 'https://example.com/', '' );
+				setActiveItem( item );
+			} }
+		>
+			{ children }
+		</Button>
+	);
+
+	return (
+		<>
+			<Navigation
+				activeItem={ activeItem }
+				activeMenu={ activeMenu }
+				className="navigation-story"
+				onActivateMenu={ setActiveMenu }
+			>
+				<NavigationMenu title="Home">
+					<NavigationItem item="item-1" title="Item 1">
+						<Link href="https://example.com/item-1">Item 1</Link>
+					</NavigationItem>
+					<NavigationItem item="item-2">
+						<Link href="https://example.com/item-2">Item 2</Link>
+					</NavigationItem>
+					<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"
+						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"
+						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>
+
+			<div className="navigation-story__aside">
+				<p>
+					Menu <code>{ activeMenu }</code> is active.
+					<br />
+					Item <code>{ activeItem }</code> is active.
+				</p>
+				<p>
+					<Button
+						isSecondary
+						onClick={ () => {
+							setActiveMenu( 'nested-sub-menu' );
+						} }
+					>
+						Open the Nested Sub-Menu menu
+					</Button>
+				</p>
+				<p>
+					<Button
+						isSecondary
+						onClick={ () => {
+							setActiveItem( 'child-2' );
+							setActiveMenu( 'sub-menu' );
+						} }
+					>
+						Navigate to Child 2 item
+					</Button>
+				</p>
+			</div>
+		</>
+	);
+}
diff --git a/packages/components/src/navigation/stories/default.js b/packages/components/src/navigation/stories/default.js
new file mode 100644
index 00000000000000..00081aeebd11d1
--- /dev/null
+++ b/packages/components/src/navigation/stories/default.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+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 DefaultStory() {
+	return (
+		<Navigation activeItem="item-1" 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>
+			</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-nested-sub-menu"
+					navigateToMenu="nested-sub-menu"
+					title="Nested Sub-Menu"
+				/>
+			</NavigationMenu>
+
+			<NavigationMenu
+				backButtonLabel="Custom Back Button Label"
+				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" />
+			</NavigationMenu>
+		</Navigation>
+	);
+}
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index db0e05a17c89d0..09094c914cc939 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -1,210 +1,27 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import Navigation from '..';
+import NavigationBackButton from '../back-button';
 import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
+import { DefaultStory } from './default';
+import { ControlledStateStory } from './controlled-state';
+import { MoreExamplesStory } from './more-examples';
+import './style.css';
 
 export default {
 	title: 'Components/Navigation',
 	component: Navigation,
+	subcomponents: {
+		NavigationBackButton,
+		NavigationGroup,
+		NavigationItem,
+		NavigationMenu,
+	},
 };
 
-const Container = styled.div`
-	max-width: 246px;
-`;
-
-function Example() {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ activeMenu, setActiveMenu ] = useState( 'root' );
-
-	const [ delayedBadge, setDelayedBadge ] = useState();
-	useEffect( () => {
-		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
-		return () => clearTimeout( timeout );
-	} );
-
-	// Mock navigation link
-	const Link = ( { href, children } ) => (
-		<a
-			className="components-button"
-			href={ href }
-			// Since we're not actually navigating pages, simulate it with on onClick
-			onClick={ ( event ) => {
-				event.preventDefault();
-				const item = href.replace( 'https://example.com/', '' );
-				setActiveItem( item );
-			} }
-		>
-			{ children }
-		</a>
-	);
-
-	return (
-		<Container>
-			<Navigation
-				activeItem={ activeItem }
-				activeMenu={ activeMenu }
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu title="Home">
-					<NavigationGroup title="Group 1">
-						<NavigationItem item="item-1" title="Item 1">
-							<Link href="https://example.com/item-1">
-								Item 1
-							</Link>
-						</NavigationItem>
-						<NavigationItem item="item-2">
-							<Link href="https://example.com/item-2">
-								Item 2
-							</Link>
-						</NavigationItem>
-						<NavigationItem
-							badge="2"
-							item="item-3"
-							navigateToMenu="category"
-							title="Category"
-						/>
-						<NavigationItem
-							badge={ delayedBadge }
-							item="item-3-fetching-badge"
-							navigateToMenu="category"
-							title="Delayed badge"
-						/>
-						<NavigationItem
-							item="item-pointing-non-existing-menu"
-							title="Navigate to a non existing menu"
-							navigateToMenu="non-existing-menu"
-						/>
-					</NavigationGroup>
-					<NavigationGroup title="Group 2">
-						<NavigationItem
-							href="https://wordpress.org/"
-							item="item-4"
-							target="_blank"
-							title="External link"
-						/>
-						<NavigationItem item="item-5">
-							<a
-								href="https://wordpress.org/"
-								// Since we're not actually navigating pages, simulate it with on onClick
-								onClick={ ( event ) => {
-									event.preventDefault();
-									setActiveItem( 'item-5' );
-								} }
-							>
-								<img
-									alt="WordPress Logo"
-									src="https://s.w.org/style/images/about/WordPress-logotype-wmark-white.png"
-									style={ { width: 50, height: 50 } }
-								/>
-							</a>
-						</NavigationItem>
-					</NavigationGroup>
-				</NavigationMenu>
-
-				<NavigationMenu
-					backButtonLabel="Home"
-					menu="category"
-					parentMenu="root"
-					title="Category"
-				>
-					<NavigationItem
-						badge="1"
-						item="child-1"
-						title="Child 1"
-						onClick={ () => setActiveItem( 'child-1' ) }
-					/>
-					<NavigationItem
-						item="child-2"
-						title="Child 2"
-						onClick={ () => setActiveItem( 'child-2' ) }
-					/>
-					<NavigationItem
-						navigateToMenu="nested-category"
-						item="child-3"
-						title="Nested Category"
-					/>
-					<NavigationItem
-						navigateToMenu="custom-back"
-						item="child-4"
-						title="Custom back"
-					/>
-					<NavigationItem
-						navigateToMenu="automatic-back"
-						item="child-5"
-						title="Automatic back"
-					/>
-				</NavigationMenu>
-
-				<NavigationMenu
-					backButtonLabel="Category"
-					menu="nested-category"
-					parentMenu="category"
-					title="Nested Category"
-				>
-					<NavigationItem
-						item="sub-child-1"
-						title="Sub Child 1"
-						onClick={ () => setActiveItem( 'sub-child-1' ) }
-					/>
-					<NavigationItem
-						item="sub-child-2"
-						title="Sub Child 2"
-						onClick={ () => setActiveItem( 'sub-child-2' ) }
-					/>
-				</NavigationMenu>
-
-				<NavigationMenu
-					backButtonLabel="Custom back"
-					menu="custom-back"
-					parentMenu="category"
-					title="Custom backButtonLabel"
-				>
-					<NavigationItem item="sub-2-child-1" title="Sub Child 1" />
-					<NavigationItem item="sub-2-child-2" title="Sub Child 2" />
-				</NavigationMenu>
-
-				<NavigationMenu
-					menu="automatic-back"
-					parentMenu="category"
-					title="Automatic backButtonLabel"
-				>
-					<NavigationItem item="sub-3-child-1" title="Sub Child 1" />
-					<NavigationItem item="sub-3-child-2" title="Sub Child 2" />
-				</NavigationMenu>
-			</Navigation>
-
-			<div style={ { margin: '48px 0 0 24px' } }>
-				<p>
-					Item <code>{ activeItem }</code> is active.
-				</p>
-
-				<Button
-					isSecondary
-					onClick={ () => {
-						setActiveItem( 'child-2' );
-						setActiveMenu( 'category' );
-					} }
-					style={ { marginTop: '12px' } }
-				>
-					Link to Child 2
-				</Button>
-			</div>
-		</Container>
-	);
-}
-
-export const _default = () => <Example />;
+export const _default = () => <DefaultStory />;
+export const controlledState = () => <ControlledStateStory />;
+export const moreExamples = () => <MoreExamplesStory />;
diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
new file mode 100644
index 00000000000000..c10a4135e83f5e
--- /dev/null
+++ b/packages/components/src/navigation/stories/more-examples.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Navigation from '..';
+import NavigationItem from '../item';
+import NavigationMenu from '../menu';
+
+export function MoreExamplesStory() {
+	const [ delayedBadge, setDelayedBadge ] = useState();
+	useEffect( () => {
+		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
+		return () => clearTimeout( timeout );
+	} );
+
+	return (
+		<Navigation className="navigation-story">
+			<NavigationMenu title="Home">
+				<NavigationItem item="item-1" title="Item 1" />
+				<NavigationItem item="item-2" title="Item 2" />
+				<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"
+				/>
+			</NavigationMenu>
+		</Navigation>
+	);
+}
diff --git a/packages/components/src/navigation/stories/style.css b/packages/components/src/navigation/stories/style.css
new file mode 100644
index 00000000000000..5a2b33ff1294b2
--- /dev/null
+++ b/packages/components/src/navigation/stories/style.css
@@ -0,0 +1,14 @@
+.navigation-story {
+	max-width: 300px;
+}
+
+.navigation-story__aside {
+	margin: 48px 0 0 24px;
+}
+
+.navigation-story__wordpress-icon svg {
+	fill: #949494;
+}
+.navigation-story__wordpress-icon:hover svg {
+	fill: #ddd;
+}

From 32899fa13369af23419f6aa15395ebd122950011 Mon Sep 17 00:00:00 2001
From: Copons <Copons@users.noreply.github.com>
Date: Wed, 23 Sep 2020 17:26:57 +0200
Subject: [PATCH 2/4] Move the custom back label to More Examples

---
 .../components/src/navigation/stories/default.js  |  1 -
 .../src/navigation/stories/more-examples.js       | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/stories/default.js b/packages/components/src/navigation/stories/default.js
index 00081aeebd11d1..a3eed640a6cda5 100644
--- a/packages/components/src/navigation/stories/default.js
+++ b/packages/components/src/navigation/stories/default.js
@@ -58,7 +58,6 @@ export function DefaultStory() {
 			</NavigationMenu>
 
 			<NavigationMenu
-				backButtonLabel="Custom Back Button Label"
 				menu="nested-sub-menu"
 				parentMenu="sub-menu"
 				title="Nested Sub-Menu"
diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
index c10a4135e83f5e..466a8573170037 100644
--- a/packages/components/src/navigation/stories/more-examples.js
+++ b/packages/components/src/navigation/stories/more-examples.js
@@ -22,6 +22,11 @@ export function MoreExamplesStory() {
 			<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"
@@ -33,6 +38,16 @@ export function MoreExamplesStory() {
 					title="Item with a Delayed Badge"
 				/>
 			</NavigationMenu>
+
+			<NavigationMenu
+				backButtonLabel="Custom Back Button Label"
+				menu="sub-menu"
+				parentMenu="root"
+				title="Sub-Menu"
+			>
+				<NavigationItem item="child-1" title="Child 1" />
+				<NavigationItem item="child-2" title="Child 2" />
+			</NavigationMenu>
 		</Navigation>
 	);
 }

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 3/4] 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;

From 33c0183cf6d469f2b0b249da5fcb01ba640657b8 Mon Sep 17 00:00:00 2001
From: Copons <Copons@users.noreply.github.com>
Date: Fri, 25 Sep 2020 16:33:35 +0200
Subject: [PATCH 4/4] Update mock link component name

---
 .../src/navigation/stories/controlled-state.js         | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/navigation/stories/controlled-state.js b/packages/components/src/navigation/stories/controlled-state.js
index b9619769e9148c..c4aa3aedf02711 100644
--- a/packages/components/src/navigation/stories/controlled-state.js
+++ b/packages/components/src/navigation/stories/controlled-state.js
@@ -16,7 +16,7 @@ export function ControlledStateStory() {
 	const [ activeMenu, setActiveMenu ] = useState( 'root' );
 
 	// Mock navigation link
-	const Link = ( { href, children } ) => (
+	const MockLink = ( { href, children } ) => (
 		<Button
 			href={ href }
 			// Since we're not actually navigating pages, simulate it with on onClick
@@ -40,10 +40,14 @@ export function ControlledStateStory() {
 			>
 				<NavigationMenu title="Home">
 					<NavigationItem item="item-1" title="Item 1">
-						<Link href="https://example.com/item-1">Item 1</Link>
+						<MockLink href="https://example.com/item-1">
+							Item 1
+						</MockLink>
 					</NavigationItem>
 					<NavigationItem item="item-2">
-						<Link href="https://example.com/item-2">Item 2</Link>
+						<MockLink href="https://example.com/item-2">
+							Item 2
+						</MockLink>
 					</NavigationItem>
 					<NavigationItem
 						item="item-sub-menu"