From 8864e0641b07d48969a4e1074b1eecd38ad90bd3 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 19 Aug 2020 13:28:12 +1200
Subject: [PATCH] Let Button handle logic and add LinkComponent

---
 .../components/src/navigation/menu-item.js    | 44 ++++++++++++-------
 .../src/navigation/stories/index.js           | 17 +++++--
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index 28cc71d0f3f13..f070ba063d0d9 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -23,8 +23,8 @@ const NavigationMenuItem = ( props ) => {
 		href,
 		id,
 		isActive,
-		linkTag,
-		linkTagProps,
+		LinkComponent,
+		linkProps,
 		onClick,
 		setActiveLevel,
 		title,
@@ -41,22 +41,36 @@ const NavigationMenuItem = ( props ) => {
 		onClick( props );
 	};
 
-	const LinkTagName = linkTag || Button;
+	const linkContents = (
+		<>
+			<Text variant="body.small">
+				<span>{ title }</span>
+			</Text>
+			{ badge && <BadgeUI>{ badge }</BadgeUI> }
+			{ hasChildren ? <Icon icon={ chevronRight } /> : null }
+		</>
+	);
 
 	return (
 		<MenuItemUI className={ classes }>
-			<LinkTagName
-				className={ classes }
-				href={ href }
-				onClick={ handleClick }
-				{ ...linkTagProps }
-			>
-				<Text variant="body.small">
-					<span>{ title }</span>
-				</Text>
-				{ badge && <BadgeUI>{ badge }</BadgeUI> }
-				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
-			</LinkTagName>
+			{ LinkComponent ? (
+				<LinkComponent
+					className={ classes }
+					onClick={ handleClick }
+					{ ...linkProps }
+				>
+					{ linkContents }
+				</LinkComponent>
+			) : (
+				<Button
+					className={ classes }
+					href={ href }
+					onClick={ handleClick }
+					{ ...linkProps }
+				>
+					{ linkContents }
+				</Button>
+			) }
 		</MenuItemUI>
 	);
 };
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index 316a5bfd793ab..17284b91c2649 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -16,6 +16,13 @@ export default {
 	component: Navigation,
 };
 
+// Example Link component from a router such as React Router
+const CustomRouterLink = ( { children, onClick } ) => {
+	// Here I'm passing the onClick prop for simplicity, but behavior can be
+	// anything here.
+	return <Button onClick={ onClick }>{ children }</Button>;
+};
+
 const data = [
 	{
 		title: 'Item 1',
@@ -42,14 +49,18 @@ const data = [
 		parent: 'item-3',
 	},
 	{
-		title: 'Custom link',
+		title: 'External link',
 		id: 'item-4',
-		linkTag: 'a',
 		href: 'https://wordpress.com',
-		linkTagProps: {
+		linkProps: {
 			target: '_blank',
 		},
 	},
+	{
+		title: 'Internal link',
+		id: 'item-5',
+		LinkComponent: CustomRouterLink,
+	},
 ];
 
 function Example() {