Let Button handle logic and add LinkComponent

WordPress · Aug 19, 2020 · 8864e06 · 8864e06
1 parent 52cf7ef
commit 8864e06
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git 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
@@ -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() {