breadcrumb composition

Author: ntsekouras

client/dashboard/components/page-header/index.stories.tsx

@@ -1,3 +1,4 @@
+import { Breadcrumbs } from '@automattic/components/src/breadcrumbs';
 import { Meta, StoryObj } from '@storybook/react';
 import { Button, Icon, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { help, wordpress, moreVertical } from '@wordpress/icons';
@@ -37,61 +38,36 @@ export const WithActions: Story = {
 	},
 };
 
-export const FullExample: Story = {
+export const ImageDecoration: Story = {
 	args: {
 		title: 'Site Customization',
 		description: 'Make your site look exactly how you want it to',
-		decoration: <Icon icon={ wordpress } />,
-		breadcrumbItems: [
-			{ label: 'Dashboard', href: 'javascript:void(0)' },
-			{ label: 'Appearance', href: 'javascript:void(0)' },
-			{ label: 'Customize', href: 'javascript:void(0)' },
-			{ label: 'Theme', href: 'javascript:void(0)' },
-			{ label: 'Advanced', href: 'javascript:void(0)' },
-		],
+		decoration: <img src="https://placecats.com/300/200" alt="Cat" />,
 		actions: (
 			<>
-				<Button icon={ help } variant="tertiary" __next40pxDefaultSize>
-					Help
-				</Button>
-				<Button variant="secondary" __next40pxDefaultSize>
-					Preview
-				</Button>
-				<DropdownMenu
-					icon={ moreVertical }
-					label="More actions"
-					toggleProps={ { __next40pxDefaultSize: true } }
-				>
-					{ () => (
-						<>
-							<MenuGroup>
-								<MenuItem>Import</MenuItem>
-								<MenuItem>Export</MenuItem>
-								<MenuItem>Settings</MenuItem>
-							</MenuGroup>
-							<MenuGroup>
-								<MenuItem>Help</MenuItem>
-							</MenuGroup>
-						</>
-					) }
-				</DropdownMenu>
+				<Button variant="secondary">Cancel</Button>
+				<Button variant="primary">Save Changes</Button>
 			</>
 		),
 	},
 };
 
-export const ImageDecoration: Story = {
+export const FullExample: Story = {
 	args: {
 		title: 'Site Customization',
 		description: 'Make your site look exactly how you want it to',
-		decoration: <img src="https://placecats.com/300/200" alt="Cat" />,
-		breadcrumbItems: [
-			{ label: 'Dashboard', href: 'javascript:void(0)' },
-			{ label: 'Appearance', href: 'javascript:void(0)' },
-			{ label: 'Customize', href: 'javascript:void(0)' },
-			{ label: 'Theme', href: 'javascript:void(0)' },
-			{ label: 'Advanced', href: 'javascript:void(0)' },
-		],
+		decoration: <Icon icon={ wordpress } />,
+		breadcrumb: (
+			<Breadcrumbs
+				items={ [
+					{ label: 'Dashboard', href: 'javascript:void(0)' },
+					{ label: 'Appearance', href: 'javascript:void(0)' },
+					{ label: 'Customize', href: 'javascript:void(0)' },
+					{ label: 'Theme', href: 'javascript:void(0)' },
+					{ label: 'Advanced', href: 'javascript:void(0)' },
+				] }
+			/>
+		),
 		actions: (
 			<>
 				<Button icon={ help } variant="tertiary" __next40pxDefaultSize>

client/dashboard/components/page-header/index.tsx

@@ -1,4 +1,3 @@
-import { Breadcrumbs } from '@automattic/components/src/breadcrumbs';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
@@ -37,11 +36,11 @@ export const PageHeader = ( {
 	description,
 	actions,
 	decoration,
-	breadcrumbItems,
+	breadcrumb,
 }: PageHeaderProps ) => {
 	return (
 		<VStack spacing={ 2 }>
-			{ !! breadcrumbItems?.length && <Breadcrumbs items={ breadcrumbItems } /> }
+			{ breadcrumb }
 			<HStack spacing={ 4 } justify="flex-start" alignment="flex-start">
 				{ decoration && (
 					<span className="client-dashboard-components-page-header__decoration">

client/dashboard/components/page-header/test/index.tsx

@@ -1,6 +1,7 @@
 /**
  * @jest-environment jsdom
  */
+import { Breadcrumbs } from '@automattic/components/src/breadcrumbs';
 import { render, screen } from '@testing-library/react';
 import { Button, Icon } from '@wordpress/components';
 import { cog } from '@wordpress/icons';
@@ -43,11 +44,15 @@ describe( 'PageHeader', () => {
 		render(
 			<PageHeader
 				title="Test Title"
-				breadcrumbItems={ [
-					{ label: 'Home', href: '/' },
-					{ label: 'Products', href: '/products' },
-					{ label: 'Categories', href: '/products/categories' },
-				] }
+				breadcrumb={
+					<Breadcrumbs
+						items={ [
+							{ label: 'Home', href: '/' },
+							{ label: 'Products', href: '/products' },
+							{ label: 'Categories', href: '/products/categories' },
+						] }
+					/>
+				}
 			/>
 		);
 		expect( screen.getByRole( 'heading', { name: 'Test Title' } ).tagName ).toBe( 'H1' );

client/dashboard/components/page-header/types.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { BreadcrumbItemProps } from '@automattic/components/src/breadcrumbs/types';
 
 export interface PageHeaderProps {
 	/**
@@ -22,9 +21,8 @@ export interface PageHeaderProps {
 	 */
 	decoration?: React.ReactNode;
 	/**
-	 * An optional breadcrumb trail used to indicate the user's current position
+	 * An optional breadcrumb component used to indicate the user's current position
 	 * in a complex navigational structure and allow quick access to parent levels.
-	 * Internally it uses the `Breadcrumbs` component.
 	 */
-	breadcrumbItems?: BreadcrumbItemProps[];
+	breadcrumb?: React.ReactNode[];
 }