From 693f137e95bb2d882b7ff4d3a8b860548d7434a3 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Tue, 18 Aug 2020 12:30:12 +0300
Subject: [PATCH] Add nav badges (#24528)

* Migrate styles to css-in-js

* Add spacing to navigation child items

* Add badge property and styles to navigation items

* Update UI component naming

* newLine

Co-authored-by: Paul Sealock <psealock@gmail.com>
---
 packages/components/src/navigation/menu-item.js     |  4 +++-
 packages/components/src/navigation/stories/index.js |  2 ++
 .../src/navigation/styles/navigation-styles.js      | 13 +++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
index 737156fb3eb70d..a20d2876c7707c 100644
--- a/packages/components/src/navigation/menu-item.js
+++ b/packages/components/src/navigation/menu-item.js
@@ -12,11 +12,12 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
-import { MenuItemUI } from './styles/navigation-styles';
+import { MenuItemUI, BadgeUI } from './styles/navigation-styles';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
 	const {
+		badge,
 		children,
 		hasChildren,
 		id,
@@ -43,6 +44,7 @@ const NavigationMenuItem = ( props ) => {
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
+				{ badge && <BadgeUI>{ badge }</BadgeUI> }
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
 		</MenuItemUI>
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index c18d0a6e7e2e73..afdd8ce43cc139 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -28,11 +28,13 @@ const data = [
 	{
 		title: 'Category',
 		id: 'item-3',
+		badge: '2',
 	},
 	{
 		title: 'Child 1',
 		id: 'child-1',
 		parent: 'item-3',
+		badge: '1',
 	},
 	{
 		title: 'Child 2',
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
index b20663d920ad04..12b8520cef26f8 100644
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ b/packages/components/src/navigation/styles/navigation-styles.js
@@ -3,6 +3,11 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { LIGHT_GRAY } from '../../utils/colors-values';
+
 export const Root = styled.div`
 	width: 100%;
 `;
@@ -22,3 +27,11 @@ export const MenuItemUI = styled.li`
 		border-bottom: 2px solid var( --wp-admin-theme-color );
 	}
 `;
+
+export const BadgeUI = styled.span`
+	margin-left: 8px;
+	display: inline-flex;
+	padding: 4px 12px;
+	border-radius: 2px;
+	background-color: ${ LIGHT_GRAY[ 300 ] };
+`;