Feat(web-react): Make BreadcrumbsItem href optional #DS-957

packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -30,11 +30,11 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
           items?.map((item, index) => (
             <Fragment key={`BreadcrumbsItem_${item.title}`}>
               {index === items.length - 2 && goBackTitle && (
-                <BreadcrumbsItem href={item.url} isGoBackOnly>
+                <BreadcrumbsItem href={item.url || undefined} isGoBackOnly>
                   {goBackTitle}
                 </BreadcrumbsItem>
               )}
-              <BreadcrumbsItem href={item.url} isCurrent={isLast(index, items?.length)}>
+              <BreadcrumbsItem href={item.url || undefined} isCurrent={isLast(index, items?.length)}>
                 {item.title}
               </BreadcrumbsItem>
             </Fragment>

packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -21,14 +21,18 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => {
   return (
     <li {...transferProps} {...styleProps} className={classNames(classProps.item, styleProps.className)}>
       {restProps.isGoBackOnly && iconNameStart && <Icon name={iconNameStart} />}
-      <Link
-        href={href}
-        color={isCurrent ? 'secondary' : 'primary'}
-        isUnderlined={!isCurrent}
-        aria-current={isCurrent ? 'page' : undefined}
-      >
-        {children}
-      </Link>
+      {!href && isCurrent ? (
+        children
+      ) : (
+        <Link
+          href={href}
+          color={isCurrent ? 'secondary' : 'primary'}
+          isUnderlined={!isCurrent}
+          aria-current={isCurrent ? 'page' : undefined}
+        >
+          {children}
+        </Link>
+      )}
       {!isCurrent && !restProps.isGoBackOnly && iconNameEnd && <Icon name={iconNameEnd} />}
     </li>
   );

packages/web-react/src/components/Breadcrumbs/README.md

@@ -80,16 +80,18 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 
 ### API
 
-| Name               | Type            | Default         | Required | Description                                 |
-| ------------------ | --------------- | --------------- | -------- | ------------------------------------------- |
-| `children`         | `ReactNode`     | —               | ✕        | Children node                               |
-| `href`             | `string`        | —               | ✔        | URL                                         |
-| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon name at the end of the item            |
-| `iconNameStart`    | `string`        | `chevron-left`  | ✕        | Icon name at the start of the item          |
-| `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page        |
-| `isGoBackOnly`     | `boolean`       | `false`         | ✕        | Whether should be displayed in go back mode |
-| `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                   |
-| `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                        |
+| Name               | Type            | Default         | Required | Description                                           |
+| ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
+| `children`         | `ReactNode`     | —               | ✕        | Children node                                         |
+| `href`             | `string`        | —               | ✕ \*     | URL, if not set, the item is rendered as a plain text |
+| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon name at the end of the item                      |
+| `iconNameStart`    | `string`        | `chevron-left`  | ✕        | Icon name at the start of the item                    |
+| `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page                  |
+| `isGoBackOnly`     | `boolean`       | `false`         | ✕        | Whether should be displayed in go back mode           |
+| `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                             |
+| `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                                  |
+
+(\*) Optional only for the current page.
 
 ### Dealing with long titles
 

packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx

@@ -70,4 +70,27 @@ describe('BreadcrumbsItem', () => {
       expect(lastElement.tagName).not.toBe('svg');
     });
   });
+
+  describe('BreadcrumbsItem without a link', () => {
+    it('should render BreadcrumbsItem as a plain text', () => {
+      const dom = render(<BreadcrumbsItem isCurrent>test_title</BreadcrumbsItem>);
+      const listElement = dom.container.querySelector('li') as HTMLLIElement;
+      const anchorElement = dom.container.querySelector('a') as HTMLAnchorElement;
+
+      expect(listElement).toHaveTextContent('test_title');
+      expect(anchorElement).toBeNull();
+    });
+
+    it('should render BreadcrumbsItem as a Link', () => {
+      const dom = render(
+        <BreadcrumbsItem href="/" isCurrent>
+          test_title
+        </BreadcrumbsItem>,
+      );
+      const anchorElement = dom.container.querySelector('a') as HTMLAnchorElement;
+
+      expect(anchorElement).toHaveTextContent('test_title');
+      expect(anchorElement).toBeDefined();
+    });
+  });
 });

packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentWithoutLink.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Breadcrumbs } from '../Breadcrumbs';
+
+const BreadcrumbsDefault = () => {
+  const items = [
+    {
+      title: 'Root',
+      url: '#rootUrl',
+    },
+    {
+      title: 'Category',
+      url: '#categoryUrl',
+    },
+    {
+      title: 'Subcategory',
+      url: '#subcategoryUrl',
+    },
+    {
+      title: 'Current page',
+    },
+  ];
+
+  return <Breadcrumbs items={items} goBackTitle="Back" />;
+};
+
+export default BreadcrumbsDefault;

packages/web-react/src/components/Breadcrumbs/demo/index.tsx

@@ -7,8 +7,9 @@ import ReactDOM from 'react-dom/client';
 import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
-import BreadcrumbsDefault from './BreadcrumbsDefault';
+import BreadcrumbsCurrentWithoutLink from './BreadcrumbsCurrentWithoutLink';
 import BreadcrumbsCustom from './BreadcrumbsCustom';
+import BreadcrumbsDefault from './BreadcrumbsDefault';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -19,6 +20,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Custom">
         <BreadcrumbsCustom />
       </DocsSection>
+      <DocsSection title="Current page is not a link">
+        <BreadcrumbsCurrentWithoutLink />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );

packages/web-react/src/types/breadcrumbs.ts

@@ -3,13 +3,13 @@ import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 type BreadcrumbsItem = {
   title: string;
-  url: string;
+  url?: string;
 };
 
 export type BreadcrumbsItems = BreadcrumbsItem[];
 
 export interface SpiritBreadcrumbsItemProps extends ChildrenProps {
-  href: string;
+  href?: string;
   iconNameEnd?: string;
   iconNameStart?: string;
   isCurrent?: boolean;