From fb6cbe7d9007dc7e89fb6875e1e868f6e5a05df8 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Tue, 15 Sep 2020 17:02:01 +1200
Subject: [PATCH] add fake link

---
 .../src/navigation/stories/index.js           | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index 3d0eb16a164f11..bf0a3cf3680345 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -26,14 +26,17 @@ const Container = styled.div`
 	max-width: 246px;
 `;
 
-const CustomComponent = ( { onClick } ) => (
-	<Button onClick={ onClick }>
-		<img
-			alt="WordPress Logo"
-			src="https://s.w.org/style/images/about/WordPress-logotype-wmark-white.png"
-			style={ { width: 50, height: 50 } }
-		/>
-	</Button>
+// Mock navigation link
+const Link = ( { href, children, onClick } ) => (
+	<a
+		href={ href }
+		onClick={ ( event ) => {
+			event.preventDefault();
+			onClick();
+		} }
+	>
+		{ children }
+	</a>
 );
 
 function Example() {
@@ -67,9 +70,18 @@ function Example() {
 							title="External link"
 						/>
 						<NavigationItem item="item-5">
-							<CustomComponent
+							<Link
+								href="https://wordpress.org/"
+								item="item-5"
+								// Since we're not actually navigating pages, simulate it with on onClick
 								onClick={ () => 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 } }
+								/>
+							</Link>
 						</NavigationItem>
 					</NavigationGroup>
 				</NavigationMenu>