Make Default more default and move less interesting examples to More …

…Examples
WordPress · Sep 24, 2020 · 2edb1d4 · 2edb1d4
1 parent 32899fa
commit 2edb1d4
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 60 deletions.
diff --git a/packages/components/src/navigation/stories/default.js b/packages/components/src/navigation/stories/default.js
@@ -1,69 +1,69 @@
 /**
  * WordPress dependencies
  */
-import { Icon, wordpress } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Navigation from '..';
-import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
 export function DefaultStory() {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+
 	return (
-		<Navigation activeItem="item-1" className="navigation-story">
+		<Navigation activeItem={ activeItem } className="navigation-story">
 			<NavigationMenu title="Home">
-				<NavigationGroup title="Menu Group">
-					<NavigationItem item="item-1" title="Item 1" />
-					<NavigationItem item="item-2" title="Item 2" />
-					<NavigationItem
-						badge="5"
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu"
-					/>
-					<NavigationItem item="item-3" title="Item 3" />
-				</NavigationGroup>
-				<NavigationGroup title="External Links">
-					<NavigationItem
-						href="https://wordpress.org/"
-						item="item-4"
-						target="_blank"
-						title="WordPress.org"
-					/>
-					<NavigationItem item="item-5">
-						<a
-							className="navigation-story__wordpress-icon"
-							href="https://wordpress.org/"
-							target="_blank"
-							rel="noreferrer"
-						>
-							<Icon icon={ wordpress } />
-						</a>
-					</NavigationItem>
-				</NavigationGroup>
+				<NavigationItem
+					item="item-1"
+					onClick={ () => setActiveItem( 'item-1' ) }
+					title="Item 1"
+				/>
+				<NavigationItem
+					item="item-2"
+					onClick={ () => setActiveItem( 'item-2' ) }
+					title="Item 2"
+				/>
+				<NavigationItem
+					item="item-sub-menu"
+					navigateToMenu="sub-menu"
+					title="Sub-Menu"
+				/>
 			</NavigationMenu>
-
 			<NavigationMenu menu="sub-menu" parentMenu="root" title="Sub-Menu">
-				<NavigationItem item="child-1" title="Child 1" />
-				<NavigationItem item="child-2" title="Child 2" />
 				<NavigationItem
-					badge="2"
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
+				<NavigationItem
 					item="child-nested-sub-menu"
 					navigateToMenu="nested-sub-menu"
 					title="Nested Sub-Menu"
 				/>
 			</NavigationMenu>
-
 			<NavigationMenu
 				menu="nested-sub-menu"
 				parentMenu="sub-menu"
 				title="Nested Sub-Menu"
 			>
-				<NavigationItem item="sub-child-1" title="Sub-Child 1" />
-				<NavigationItem item="sub-child-2" title="Sub-Child 2" />
+				<NavigationItem
+					item="sub-child-1"
+					onClick={ () => setActiveItem( 'sub-child-1' ) }
+					title="Sub-Child 1"
+				/>
+				<NavigationItem
+					item="sub-child-2"
+					onClick={ () => setActiveItem( 'sub-child-2' ) }
+					title="Sub-Child 2"
+				/>
 			</NavigationMenu>
 		</Navigation>
 	);

diff --git a/packages/components/src/navigation/stories/more-examples.js b/packages/components/src/navigation/stories/more-examples.js
@@ -2,51 +2,86 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { Icon, wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Navigation from '..';
+import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
 export function MoreExamplesStory() {
+	const [ activeItem, setActiveItem ] = useState( 'child-1' );
 	const [ delayedBadge, setDelayedBadge ] = useState();
 	useEffect( () => {
 		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
 		return () => clearTimeout( timeout );
 	} );
 
 	return (
-		<Navigation className="navigation-story">
+		<Navigation activeItem={ activeItem } className="navigation-story">
 			<NavigationMenu title="Home">
-				<NavigationItem item="item-1" title="Item 1" />
-				<NavigationItem item="item-2" title="Item 2" />
-				<NavigationItem
-					item="item-sub-menu"
-					navigateToMenu="sub-menu"
-					title="Sub-Menu"
-				/>
-				<NavigationItem
-					item="item-nonexistent-menu"
-					navigateToMenu="nonexistent-menu"
-					title="Navigate to Nonexistent Menu"
-				/>
-				<NavigationItem
-					badge={ delayedBadge }
-					item="item-delayed-badge"
-					title="Item with a Delayed Badge"
-				/>
+				<NavigationGroup title="Items without Active State">
+					<NavigationItem item="item-1" title="Item 1" />
+					<NavigationItem item="item-2" title="Item 2" />
+				</NavigationGroup>
+				<NavigationGroup title="Items with Unusual Features">
+					<NavigationItem
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu with Custom Back Label"
+					/>
+					<NavigationItem
+						item="item-nonexistent-menu"
+						navigateToMenu="nonexistent-menu"
+						title="Navigate to Nonexistent Menu"
+					/>
+					<NavigationItem
+						badge={ delayedBadge }
+						item="item-delayed-badge"
+						onClick={ () => setActiveItem( 'item-delayed-badge' ) }
+						title="Item with a Delayed Badge"
+					/>
+				</NavigationGroup>
+				<NavigationGroup title="External Links">
+					<NavigationItem
+						href="https://wordpress.org/"
+						item="item-4"
+						target="_blank"
+						title="WordPress.org"
+					/>
+					<NavigationItem item="item-5">
+						<a
+							className="navigation-story__wordpress-icon"
+							href="https://wordpress.org/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<Icon icon={ wordpress } />
+							<em>Custom Content</em>
+						</a>
+					</NavigationItem>
+				</NavigationGroup>
 			</NavigationMenu>
 
 			<NavigationMenu
 				backButtonLabel="Custom Back Button Label"
 				menu="sub-menu"
 				parentMenu="root"
-				title="Sub-Menu"
+				title="Sub-Menu with Custom Back Label"
 			>
-				<NavigationItem item="child-1" title="Child 1" />
-				<NavigationItem item="child-2" title="Child 2" />
+				<NavigationItem
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
 			</NavigationMenu>
 		</Navigation>
 	);

diff --git a/packages/components/src/navigation/stories/style.css b/packages/components/src/navigation/stories/style.css
@@ -6,8 +6,13 @@
 	margin: 48px 0 0 24px;
 }
 
+.navigation-story__wordpress-icon {
+	align-items: center;
+	display: inline-flex;
+}
 .navigation-story__wordpress-icon svg {
 	fill: #949494;
+	margin-right: 8px;
 }
 .navigation-story__wordpress-icon:hover svg {
 	fill: #ddd;