feat(NavigationBreadcrumbs): allow executing onNavigate when pressing…

… a link (#1233)

src/__tests__/navigation-breadcrumbs-test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import NavigationBreadcrumbs from '../navigation-breadcrumbs';
+import userEvent from '@testing-library/user-event';
+
+test('Breadcrumbs onNavigate is called when pressing a link', async () => {
+    const navigateSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <NavigationBreadcrumbs
+                title="Title"
+                breadcrumbs={[
+                    {title: 'breadcrumb 1', url: '#', onNavigate: () => navigateSpy('breadcrumb 1')},
+                    {title: 'breadcrumb 2', url: '#', onNavigate: () => navigateSpy('breadcrumb 2')},
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    const firstLink = await screen.findByRole('link', {name: 'breadcrumb 1'});
+    const secondLink = await screen.findByRole('link', {name: 'breadcrumb 2'});
+
+    await userEvent.click(firstLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 1');
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(secondLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 2');
+    expect(navigateSpy).toHaveBeenCalledTimes(2);
+});

src/navigation-breadcrumbs.tsx

@@ -21,6 +21,7 @@ export type NavigationBreadcrumbsProps = {
     breadcrumbs: ReadonlyArray<{
         readonly title: string;
         readonly url: string;
+        onNavigate?: () => void;
     }>;
     children?: void;
     dataAttributes?: DataAttributes;
@@ -37,7 +38,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
     return (
         <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
             <ol className={styles.list}>
-                {breadcrumbs.map(({title, url}, index) => (
+                {breadcrumbs.map(({title, url, onNavigate}, index) => (
                     <li key={index} className={styles.listItem}>
                         <Text1 regular>
                             <TextLink
@@ -48,6 +49,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
                                         : vars.colors.textPrimary,
                                 }}
                                 className={styles.link}
+                                onNavigate={onNavigate}
                             >
                                 {title}
                             </TextLink>