From 6cf75ad29cae72098746882ea909cecd73c35ba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 10 Oct 2023 14:47:43 +0200 Subject: [PATCH] Feat(web-react): Make BreadcrumbsItem href optional #DS-957 --- .../components/Breadcrumbs/Breadcrumbs.tsx | 4 +-- .../Breadcrumbs/BreadcrumbsItem.tsx | 20 ++++++++------ .../src/components/Breadcrumbs/README.md | 22 +++++++++------- .../__tests__/BreadcrumbsItem.test.tsx | 23 ++++++++++++++++ .../demo/BreadcrumbsCurrentWithoutLink.tsx | 26 +++++++++++++++++++ .../src/components/Breadcrumbs/demo/index.tsx | 6 ++++- packages/web-react/src/types/breadcrumbs.ts | 4 +-- 7 files changed, 82 insertions(+), 23 deletions(-) create mode 100644 packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentWithoutLink.tsx diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx index d622e13a1c..e5c9d9b59f 100644 --- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -30,11 +30,11 @@ export const Breadcrumbs = (props: SpiritBreadcru items?.map((item, index) => ( {index === items.length - 2 && goBackTitle && ( - + {goBackTitle} )} - + {item.title} diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 0185dd3344..0dc8eebf03 100644 --- a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -21,14 +21,18 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => { return (
  • {restProps.isGoBackOnly && iconNameStart && } - - {children} - + {!href && isCurrent ? ( + children + ) : ( + + {children} + + )} {!isCurrent && !restProps.isGoBackOnly && iconNameEnd && }
    • ); diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index d430cbd392..4bdb3fb4bb 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/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 diff --git a/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx index 3c84b9a8b0..ed88d014fa 100644 --- a/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx +++ b/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(test_title); + 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( + + test_title + , + ); + const anchorElement = dom.container.querySelector('a') as HTMLAnchorElement; + + expect(anchorElement).toHaveTextContent('test_title'); + expect(anchorElement).toBeDefined(); + }); + }); }); diff --git a/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentWithoutLink.tsx b/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCurrentWithoutLink.tsx new file mode 100644 index 0000000000..50723414c7 --- /dev/null +++ b/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 ; +}; + +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 index 22ede20f0f..e32c69316e 100644 --- a/packages/web-react/src/components/Breadcrumbs/demo/index.tsx +++ b/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( @@ -19,6 +20,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + , ); diff --git a/packages/web-react/src/types/breadcrumbs.ts b/packages/web-react/src/types/breadcrumbs.ts index 7f3d9fe33c..6847f5a942 100644 --- a/packages/web-react/src/types/breadcrumbs.ts +++ b/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;