Split Navigation component stories to improve their consumption

WordPress · Sep 24, 2020 · 38dd301 · 38dd301
1 parent bc4304a
commit 38dd301
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 197 deletions.
diff --git a/packages/components/src/navigation/stories/controlled-state.js b/packages/components/src/navigation/stories/controlled-state.js
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Navigation from '..';
+import NavigationItem from '../item';
+import NavigationMenu from '../menu';
+
+export function ControlledStateStory() {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	// Mock navigation link
+	const Link = ( { href, children } ) => (
+		<Button
+			href={ href }
+			// Since we're not actually navigating pages, simulate it with on onClick
+			onClick={ ( event ) => {
+				event.preventDefault();
+				const item = href.replace( 'https://example.com/', '' );
+				setActiveItem( item );
+			} }
+		>
+			{ children }
+		</Button>
+	);
+
+	return (
+		<>
+			<Navigation
+				activeItem={ activeItem }
+				activeMenu={ activeMenu }
+				className="navigation-story"
+				onActivateMenu={ setActiveMenu }
+			>
+				<NavigationMenu title="Home">
+					<NavigationItem item="item-1" title="Item 1">
+						<Link href="https://example.com/item-1">Item 1</Link>
+					</NavigationItem>
+					<NavigationItem item="item-2">
+						<Link href="https://example.com/item-2">Item 2</Link>
+					</NavigationItem>
+					<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"
+						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"
+						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>
+
+			<div className="navigation-story__aside">
+				<p>
+					Menu <code>{ activeMenu }</code> is active.
+					<br />
+					Item <code>{ activeItem }</code> is active.
+				</p>
+				<p>
+					<Button
+						isSecondary
+						onClick={ () => {
+							setActiveMenu( 'nested-sub-menu' );
+						} }
+					>
+						Open the Nested Sub-Menu menu
+					</Button>
+				</p>
+				<p>
+					<Button
+						isSecondary
+						onClick={ () => {
+							setActiveItem( 'child-2' );
+							setActiveMenu( 'sub-menu' );
+						} }
+					>
+						Navigate to Child 2 item
+					</Button>
+				</p>
+			</div>
+		</>
+	);
+}
diff --git a/packages/components/src/navigation/stories/default.js b/packages/components/src/navigation/stories/default.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+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 DefaultStory() {
+	return (
+		<Navigation activeItem="item-1" 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>
+			</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-nested-sub-menu"
+					navigateToMenu="nested-sub-menu"
+					title="Nested Sub-Menu"
+				/>
+			</NavigationMenu>
+
+			<NavigationMenu
+				backButtonLabel="Custom Back Button Label"
+				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" />
+			</NavigationMenu>
+		</Navigation>
+	);
+}