chore: the breadcrumb separator moved outside link

packages/ui/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react';
+import Link from 'next/link';
+import { Breadcrumbs } from './index';
+import '@testing-library/jest-dom';
+
+describe('Breadcrumb navigation', () => {
+  const props = {
+    label: 'Kruimelpad',
+    links: [
+      {
+        href: 'https://www.utrecht.nl/',
+        label: 'Home',
+        current: false,
+        rel: 'home',
+      },
+      {
+        href: '/',
+        label: 'Online loket',
+        current: true,
+      },
+    ],
+    backLink: {
+      href: '/',
+      label: 'Online loket',
+      current: false,
+    },
+    Link: Link,
+  };
+
+  it('renders a navigation landmark', () => {
+    render(<Breadcrumbs {...props} />);
+
+    const navigation = screen.getByRole('navigation', { name: 'Kruimelpad' });
+
+    expect(navigation).toBeInTheDocument();
+  });
+
+  it('renders links', () => {
+    render(<Breadcrumbs {...props} />);
+
+    const links = screen.getAllByRole('link');
+
+    expect(links.length).toBe(props.links.length);
+  });
+
+  it('renders a link', () => {
+    render(<Breadcrumbs {...props} />);
+
+    const link = screen.getByRole('link', { name: 'Home' });
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://www.utrecht.nl/');
+    expect(link).toHaveAttribute('rel', 'home');
+  });
+
+  it('renders a current link', () => {
+    render(<Breadcrumbs {...props} />);
+
+    const link = screen.getByRole('link', { name: 'Online loket', current: 'page' });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it('renders no separator for one link', () => {
+    const { container } = render(<Breadcrumbs {...props} links={props.links.slice(0, 1)} />);
+
+    const separator = container.querySelector('.utrecht-breadcrumb-nav__separator');
+
+    expect(separator).not.toBeInTheDocument();
+  });
+
+  it('renders separators between items', () => {
+    const { container } = render(<Breadcrumbs {...props} />);
+
+    const separators = container.querySelectorAll(
+      '.utrecht-breadcrumb-nav__item + .utrecht-breadcrumb-nav__separator + .utrecht-breadcrumb-nav__item',
+    );
+
+    expect(separators.length).toBe(props.links.length - 1);
+  });
+
+  it('renders a custom Link component', () => {
+    const { container } = render(
+      <Breadcrumbs {...props} Link={({ props }) => <a {...props} className="custom-link" />} />,
+    );
+
+    const links = container.querySelectorAll('.custom-link');
+
+    expect(links.length).toBe(props.links.length);
+  });
+
+  // TODO: Test small screen breadcrumb
+});

packages/ui/src/components/Breadcrumb/index.module.scss

@@ -16,6 +16,12 @@
   margin-inline-end: 8px;
 }
 
+@media (width >= 360px) {
+  .utrecht-breadcrumb-nav__separator {
+    margin-inline-end: var(--utrecht-space-inline-xs);
+  }
+}
+
 .utrecht-breadcrumb-nav__link {
   --utrecht-link-focus-color: var(--utrecht-color-black);
 

packages/ui/src/components/Breadcrumb/index.tsx

@@ -12,21 +12,24 @@ import './index.module.scss';
 import styles from './index.module.scss';
 import { useScreenSize } from '../../hooks';
 
+export const extendLink = (link: BreadcrumbLinkType) => ({
+  // Use default `rel`, but actual optional rel should override this
+  rel: link.current ? undefined : link.href === '/' ? 'home' : 'up',
+  ...link,
+});
+
 const css = classnames.bind(styles);
 type BreadcrumbLinkType = {
   href: string;
   label: string;
   current: boolean;
+  rel?: string;
 };
 
 interface BreadcrumbProps extends BreadcrumbNavProps {
   links: BreadcrumbLinkType[];
   Link?: ComponentType<any>;
-  backLink?: {
-    href: string;
-    label: string;
-    current: boolean;
-  };
+  backLink?: BreadcrumbLinkType;
   breakpoint?: number;
 }
 
@@ -41,59 +44,51 @@ export const Breadcrumbs = ({
 
   const smallScreen = Number(screenSize) <= breakpoint;
 
-  if (smallScreen && backLink?.href && backLink.label) {
+  const linkData = links.map(extendLink);
+  const backLinkData = backLink && extendLink(backLink);
+
+  if (
+    (smallScreen && backLinkData?.href && backLinkData.label) ||
+    (links.length === 1 && backLinkData?.href && backLinkData.label)
+  ) {
     return (
-      <BreadcrumbNav className={css('utrecht-breadcrumb-nav-theme')} {...restBreadcrumbProps}>
-        <Fragment>
-          <BreadcrumbNavLink
-            className={css('utrecht-link', 'utrecht-link--html-a', 'utrecht-breadcrumb-nav__link-custom')}
-            href={backLink.href}
-            rel={backLink.href === '/' ? 'home' : 'up'}
-            current={backLink.current}
-            Link={Link}
-          >
-            {backLink?.label?.toLowerCase() !== 'home' && (
-              <BreadcrumbNavSeparator>
-                <UtrechtIconChevronLeft />
-              </BreadcrumbNavSeparator>
-            )}
-            {backLink.label}
-          </BreadcrumbNavLink>
-        </Fragment>
+      <BreadcrumbNav {...restBreadcrumbProps}>
+        <BreadcrumbNavLink
+          className={css('utrecht-link', 'utrecht-link--html-a')}
+          href={backLinkData.href}
+          rel={backLinkData.rel}
+          current={backLinkData.current}
+          Link={Link}
+        >
+          {backLinkData?.rel === 'up' && <UtrechtIconChevronLeft />} {backLinkData.label}
+        </BreadcrumbNavLink>
       </BreadcrumbNav>
     );
   }
 
   return (
-    <BreadcrumbNav className={css('utrecht-breadcrumb-nav-theme')} {...restBreadcrumbProps}>
-      {links &&
-        links.length > 0 &&
-        links
-          .filter(({ label }) => label)
-          .map(({ href, label, current }: any, index: number) => (
-            <Fragment key={`${href}-${index}`}>
-              <BreadcrumbNavLink
-                className={css('utrecht-link', 'utrecht-link--html-a', 'utrecht-breadcrumb-nav__link-custom')}
-                href={href}
-                rel={href === '/' ? 'home' : 'up'}
-                index={index}
-                current={current}
-                Link={UtrechtLink}
-              >
-                {links.length === 1 && label?.toLowerCase() !== 'home' && (
-                  <BreadcrumbNavSeparator>
-                    <UtrechtIconChevronLeft />
-                  </BreadcrumbNavSeparator>
-                )}
-                {label}
-                {index !== links.length - 1 && (
-                  <BreadcrumbNavSeparator>
-                    <UtrechtIconChevronRight />
-                  </BreadcrumbNavSeparator>
-                )}
-              </BreadcrumbNavLink>
-            </Fragment>
-          ))}
+    <BreadcrumbNav {...restBreadcrumbProps}>
+      {linkData
+        .filter(({ label }) => label)
+        .map(({ href, label, current, rel }: any, index: number) => (
+          <Fragment key={`${href}-${index}`}>
+            <BreadcrumbNavLink
+              className={css('utrecht-link', 'utrecht-link--html-a')}
+              href={href}
+              rel={rel}
+              index={index}
+              current={current}
+              Link={Link}
+            >
+              {label}
+            </BreadcrumbNavLink>
+            {index !== links.length - 1 && (
+              <BreadcrumbNavSeparator>
+                <UtrechtIconChevronRight />
+              </BreadcrumbNavSeparator>
+            )}
+          </Fragment>
+        ))}
     </BreadcrumbNav>
   );
 };