feat!: Rename Breadcrumb Item to Link (#1232)

packages/css/src/components/breadcrumb/breadcrumb.scss

@@ -41,14 +41,14 @@
 }
 
 .ams-breadcrumb__link {
-  color: var(--ams-breadcrumb-item-link-color);
-  outline-offset: var(--ams-breadcrumb-item-link-outline-offset);
-  text-decoration-line: var(--ams-breadcrumb-item-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-breadcrumb-item-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-breadcrumb-item-link-text-underline-offset);
+  color: var(--ams-breadcrumb-link-color);
+  outline-offset: var(--ams-breadcrumb-link-outline-offset);
+  text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);
 
   &:hover {
-    color: var(--ams-breadcrumb-item-link-hover-color);
-    text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
+    color: var(--ams-breadcrumb-link-hover-color);
+    text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
   }
 }

packages/react/src/Breadcrumb/Breadcrumb.test.tsx

@@ -24,18 +24,18 @@ describe('Breadcrumb', () => {
   })
 
   it('renders Breadcrumb component with children', () => {
-    const breadcrumbItems = [
-      { label: 'Item 1', href: '/item-1' },
-      { label: 'Item 2', href: '/item-2' },
-      { label: 'Item 3', href: '/item-3' },
+    const breadcrumbLinks = [
+      { label: 'Link 1', href: '/link-1' },
+      { label: 'Link 2', href: '/link-2' },
+      { label: 'Link 3', href: '/link-3' },
     ]
 
     const { container } = render(
       <Breadcrumb>
-        {breadcrumbItems.map((item, index) => (
-          <Breadcrumb.Item key={index} href={item.href}>
-            {item.label}
-          </Breadcrumb.Item>
+        {breadcrumbLinks.map((link, index) => (
+          <Breadcrumb.Link key={index} href={link.href}>
+            {link.label}
+          </Breadcrumb.Link>
         ))}
       </Breadcrumb>,
     )
@@ -52,7 +52,7 @@ describe('Breadcrumb', () => {
 
     const { container } = render(
       <Breadcrumb ref={ref}>
-        <Breadcrumb.Item href="/item-1">Valid Item</Breadcrumb.Item>
+        <Breadcrumb.Link href="/link-1">Valid Link</Breadcrumb.Link>
       </Breadcrumb>,
     )
 

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -6,7 +6,7 @@
 import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { BreadcrumbItem } from './BreadcrumbItem'
+import { BreadcrumbLink } from './BreadcrumbLink'
 
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
@@ -20,4 +20,4 @@ const BreadcrumbRoot = forwardRef(
 
 BreadcrumbRoot.displayName = 'Breadcrumb'
 
-export const Breadcrumb = Object.assign(BreadcrumbRoot, { Item: BreadcrumbItem })
+export const Breadcrumb = Object.assign(BreadcrumbRoot, { Link: BreadcrumbLink })

packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx → packages/react/src/Breadcrumb/BreadcrumbLink.test.tsx

@@ -1,18 +1,21 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { BreadcrumbItem } from './BreadcrumbItem'
+import { BreadcrumbLink } from './BreadcrumbLink'
 import '@testing-library/jest-dom'
 
-describe('Breadcrumb item', () => {
+describe('Breadcrumb link', () => {
   it('renders', () => {
-    render(<BreadcrumbItem href="/" />)
+    render(<BreadcrumbLink href="/" />)
+
     const component = screen.getByRole('listitem')
+
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    render(<BreadcrumbItem href="/" />)
+    render(<BreadcrumbLink href="/" />)
+
     const item = screen.getByRole('listitem')
     expect(item).toHaveClass('ams-breadcrumb__item')
 
@@ -21,21 +24,25 @@ describe('Breadcrumb item', () => {
   })
 
   it('renders an additional class name', () => {
-    render(<BreadcrumbItem href="/" className="extra" />)
-    const component = screen.getByRole('listitem')
-    expect(component).toHaveClass('ams-breadcrumb__item extra')
+    render(<BreadcrumbLink href="/" className="extra" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('ams-breadcrumb__link extra')
   })
 
   it('renders the href attribute', () => {
-    render(<BreadcrumbItem href="/" />)
+    render(<BreadcrumbLink href="/" />)
     const component = screen.getByRole('link')
     expect(component).toHaveAttribute('href', '/')
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLLIElement>()
-    render(<BreadcrumbItem href="/" ref={ref} />)
-    const component = screen.getByRole('listitem')
+    const ref = createRef<HTMLAnchorElement>()
+    render(<BreadcrumbLink href="/" ref={ref} />)
+
+    const component = screen.getByRole('link')
+
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { clsx } from 'clsx'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
+
+export type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
+
+export const BreadcrumbLink = forwardRef(
+  ({ children, className, ...restProps }: BreadcrumbLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
+    <li className="ams-breadcrumb__item">
+      <a {...restProps} className={clsx('ams-breadcrumb__link', className)} ref={ref}>
+        {children}
+      </a>
+    </li>
+  ),
+)
+
+BreadcrumbLink.displayName = 'Breadcrumb.Link'

packages/react/src/Breadcrumb/index.ts

@@ -1,3 +1,3 @@
 export { Breadcrumb } from './Breadcrumb'
 export type { BreadcrumbProps } from './Breadcrumb'
-export type { BreadcrumbItemProps } from './BreadcrumbItem'
+export type { BreadcrumbLinkProps } from './BreadcrumbLink'

proprietary/tokens/src/components/ams/breadcrumb.tokens.json

@@ -10,7 +10,7 @@
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
         }
       },
-      "item-link": {
+      "link": {
         "color": { "value": "{ams.link-appearance.color}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },

storybook/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -18,15 +18,15 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: [
-      <Breadcrumb.Item href="#" key={1}>
+      <Breadcrumb.Link href="#" key={1}>
         Home
-      </Breadcrumb.Item>,
-      <Breadcrumb.Item href="#" key={2}>
+      </Breadcrumb.Link>,
+      <Breadcrumb.Link href="#" key={2}>
         Nieuws
-      </Breadcrumb.Item>,
-      <Breadcrumb.Item href="#" key={3}>
+      </Breadcrumb.Link>,
+      <Breadcrumb.Link href="#" key={3}>
         Kennisgevingen en bekendmakingen
-      </Breadcrumb.Item>,
+      </Breadcrumb.Link>,
     ],
   },
 }