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

lmc-eu · Oct 10, 2023 · 31a5ef0 · 31a5ef0
1 parent 8587f79
commit 31a5ef0
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 13 deletions.
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -30,13 +30,13 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
           items?.map((item, index) => (
             <React.Fragment key={`BreadcrumbsItem_${item.title}`}>
               {index === items.length - 2 && goBackTitle && (
-                <BreadcrumbsItem href={item.url} iconNameStart="chevron-left" isGoBackOnly>
+                <BreadcrumbsItem href={item.url || undefined} iconNameStart="chevron-left" isGoBackOnly>
                   {goBackTitle}
                 </BreadcrumbsItem>
               )}
               <BreadcrumbsItem
                 key={`BreadcrumbsItem_${item.title}`}
-                href={item.url}
+                href={item.url || undefined}
                 isCurrent={isLast(index, items?.length)}
               >
                 {item.title}

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

diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md
@@ -83,7 +83,7 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 | Name               | Type            | Default         | Required | Description                                           |
 | ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
 | `children`         | `ReactNode`     | —               | ✕        | Custom content to override items rendering from array |
-| `href`             | `string`        | —               | ✔        | URL                                                   |
+| `href`             | `string`        | —               | ✕        | URL, if not set, the item is rendered as a plain text |
 | `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon component on the end of the item wrapper         |
 | `iconNameStart`    | `string`        | -               | ✕        | Icon component on the start of the item               |
 | `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page                  |

diff --git a/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
@@ -41,4 +41,17 @@ describe('BreadcrumbsItem', () => {
 
     classNamePrefixProviderTest(BreadcrumbsItemGoBack, 'd-tablet-none');
   });
+
+  describe('BreadcrumbsItem without a link', () => {
+    const BreadcrumbsItemWithoutLink = () => <BreadcrumbsItem isCurrent>test_title</BreadcrumbsItem>;
+
+    const dom = render(<BreadcrumbsItemWithoutLink />);
+    const listElement = dom.container.querySelector('li') as HTMLLIElement;
+
+    it('should render BreadcrumbsItem with go back title', () => {
+      expect(listElement).toHaveTextContent('test_title');
+    });
+
+    classNamePrefixProviderTest(BreadcrumbsItemWithoutLink, 'd-none');
+  });
 });
diff --git a/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentNotLink.tsx b/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentNotLink.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;
diff --git a/packages/web-react/src/components/Breadcrumbs/demo/index.tsx b/packages/web-react/src/components/Breadcrumbs/demo/index.tsx
@@ -8,6 +8,7 @@ import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
 import BreadcrumbsDefault from './BreadcrumbsDefault';
+import BreadcrumbsCurrentNotLink from './BreadcrumbsCurrentNotLink';
 import BreadcrumbsCustom from './BreadcrumbsCustom';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
@@ -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">
+        <BreadcrumbsCurrentNotLink />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );
diff --git a/packages/web-react/src/types/breadcrumbs.ts b/packages/web-react/src/types/breadcrumbs.ts
@@ -3,11 +3,11 @@ import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 export type BreadcrumbsItem = {
   title: string;
-  url: string;
+  url?: string;
 };
 
 export interface SpiritBreadcrumbsItemProps extends ChildrenProps {
-  href: string;
+  href?: string;
   iconNameStart?: string;
   iconNameEnd?: string;
   isCurrent: boolean;