add fake link

WordPress · Sep 15, 2020 · fb6cbe7 · fb6cbe7
1 parent 2c3e9c8
commit fb6cbe7
Showing 1 changed file with 22 additions and 10 deletions.
diff --git 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>