Component/breadcrumb (#547)

apps/rhc-templates/src/app/collage/page.tsx

@@ -1,6 +1,14 @@
 'use client';
 
-import { AccordionProvider, Blockquote, Heading, Link, Paragraph } from '@rijkshuisstijl-community/components-react';
+import {
+  AccordionProvider,
+  BreadcrumbNav,
+  BreadcrumbNavLink,
+  Blockquote,
+  Heading,
+  Link,
+  Paragraph,
+} from '@rijkshuisstijl-community/components-react';
 import { Avatar, Pagination } from '@amsterdam/design-system-react';
 import {
   IconAlertTriangle,
@@ -13,8 +21,6 @@ import {
 import {
   Alert,
   BadgeCounter,
-  BreadcrumbNav,
-  BreadcrumbNavLink,
   Button,
   Checkbox,
   DataList,
@@ -50,7 +56,7 @@ import {
 export default function Collage() {
   return (
     <>
-      <div className="unfinished">
+      <div>
         <BreadcrumbNav>
           <BreadcrumbNavLink href="/" rel="home" index={0}>
             Label

apps/rhc-templates/src/app/details/page.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { Heading, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
+import { BreadcrumbNav, BreadcrumbNavLink, Heading, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import {
-  BreadcrumbNav,
-  BreadcrumbNavLink,
   Figure,
   FigureCaption,
   Image,

packages/components-css/breadcrumb-nav/index.scss

@@ -0,0 +1,24 @@
+@import "../node_modules/@utrecht/components/breadcrumb-nav/src/";
+.utrecht-breadcrumb-nav {
+  &__link {
+    &--current {
+      color: var(--utrecht-breadcrumb-nav-link-current-color) !important;
+      text-decoration: var(--utrecht-breadcrumb-nav-link-current-text-decoration) !important;
+    }
+    &--active {
+      color: var(--utrecht-breadcrumb-nav-link-active-color) !important;
+      text-decoration: underline !important;
+      text-decoration-color: var(--utrecht-breadcrumb-nav-link-active-color) !important;
+    }
+    &--arrow-wrapper {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+    }
+  }
+  &__separator {
+    --utrecht-breadcrumb-nav-separator-icon-size: 12px;
+    --utrecht-breadcrumb-nav-separator-color: --utrecht-breadcrumb-nav-divider-color;
+  }
+}

packages/components-css/index.scss

@@ -8,3 +8,4 @@
 @import "alert/index";
 @import "link/index";
 @import "logo/index";
+@import "breadcrumb-nav/index";

packages/components-react/src/BreadcrumbNavLink.tsx

@@ -0,0 +1,62 @@
+import {
+  Icon,
+  BreadcrumbNavLink as UtrechtBreadcrumbNavLink,
+  type BreadcrumbNavLinkProps as UtrechtBreadcrumbNavLinkProps,
+} from '@utrecht/component-library-react/dist/css-module';
+import clsx from 'clsx';
+import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+
+interface BreadcrumbNavLinkProps extends UtrechtBreadcrumbNavLinkProps {
+  arrow?: boolean;
+  active?: boolean;
+}
+
+export const BreadcrumbNavLink = forwardRef(
+  (
+    { children, className, href, arrow, active, ...restProps }: PropsWithChildren<BreadcrumbNavLinkProps>,
+    ref: ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    return (
+      <UtrechtBreadcrumbNavLink
+        href={href}
+        className={clsx({
+          'utrecht-breadcrumb-nav__link--active': active,
+          className,
+        })}
+        {...restProps}
+        ref={ref}
+      >
+        {arrow ? (
+          <span className="utrecht-breadcrumb-nav__link--arrow-wrapper">
+            <Icon>
+              <Arrow />
+            </Icon>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </UtrechtBreadcrumbNavLink>
+    );
+  },
+);
+
+BreadcrumbNavLink.displayName = 'BreadcrumbNavLink';
+const Arrow = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 12l14 0" />
+    <path d="M5 12l4 4" />
+    <path d="M5 12l4 -4" />
+  </svg>
+);

packages/components-react/src/Logo.tsx

@@ -24,7 +24,7 @@ export const Logo = forwardRef(
   ) => {
     return (
       <div ref={ref} className={clsx('rhc-logo', className)} {...restProps}>
-        <div className="rhc-logo__emblem">
+        <div>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -12 44 88">
             <rect x="0" y="-12" fill="var(--rhc-logo-emblem-background-color, #154273)" width="44" height="88" />
             <path

packages/components-react/src/index.ts

@@ -16,5 +16,6 @@ export {
 export { Link } from './Link';
 export { ActionGroup } from './ActionGroup';
 export { Logo } from './Logo';
+export { BreadcrumbNavLink } from './BreadcrumbNavLink';
 export { Alert } from './Alert';
 export type { LogoProps } from './Logo';

packages/storybook/src/community/breadcrumb..md

@@ -0,0 +1,38 @@
+<!-- @license CC0-1.0 -->
+
+# Rijkshuisstijl Community Breadcrumb navigation component
+
+[NL Design System](https://www.nldesignsystem.nl/breadcrumb-navigation/) | [Figma](https://www.figma.com/design/txFX5MGRf4O904dtIFcGTF/NLDS---Rijkshuisstijl---Bibliotheek?node-id=1862-9575&t=YSjs9i2uQ5Eq3wto-0) | [GitHub](https://github.com/nl-design-system/rijkshuisstijl-community/issues/443)
+
+Breadcrumb navigation, ook wel "kruimelpad" genoemd, gebruik je als de pagina's van je site georganiseerd zijn in een boomstructuur. Als je site teveel pagina's heeft om naar elke pagina een link te maken op de homepage bijvoorbeeld. De eerste link is altijd naar de homepage.
+
+Het kruimelpad moet alleen links bevatten naar hogere niveau's of eerdere stappen. De pagina zelf is niet onderdeel van het kruimelpad. Gebruik geen breadcrumb navigation op de homepage, want die heeft geen hogere niveaus.
+
+## Usage
+
+```tsx
+import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator } from '@rijkshuisstijl-community/components-react';
+
+<BreadcrumbNav>
+  <BreadcrumbNavLink href="/" rel="home" index={0}>
+    Home
+  </BreadcrumbNavLink>
+  <BreadcrumbNavLink href="/a/" index={1}>
+    Label
+  </BreadcrumbNavLink>
+  <BreadcrumbNavLink href="/a/b/" index={2}>
+    Label
+  </BreadcrumbNavLink>
+</BreadcrumbNav>;
+```
+
+## Rel
+
+Stel je voor: je hebt _breacrumb navigation_ op de derde pagina met zoekresultaten voor “openingstijden zwembad”.
+De huidige URL is `https://example.com/search?q=example?page=3`.
+Dan kan het handig zijn om terug te gaan naar de eerste pagina van de zoekresultaten.
+Het kan ook handig zijn om terug te gaan naar de zoekpagina, om andere zoektermen te kiezen.
+
+- **Home**: `rel="home"`
+- **Zoeken**: `rel="up"`
+- **Example 1** van “example”: `rel="first"`

packages/storybook/src/community/breadcrumb.stories.tsx

@@ -0,0 +1,124 @@
+import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator } from '@rijkshuisstijl-community/components-react';
+import { Meta, StoryObj } from '@storybook/react';
+import { UtrechtIconChevronRight } from '@utrecht/web-component-library-react';
+import readme from './breadcrumb..md?raw';
+
+const meta = {
+  title: 'Rijkshuisstijl/Breadcrumb navigation',
+  id: 'rijkshuisstijl-breadcrumb-nav',
+  component: BreadcrumbNav,
+
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof BreadcrumbNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink href="https://example.com/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="https://example.com/search" rel="up" index={1}>
+        Zoeken
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="https://example.com/search?q=example" rel="first" index={2}>
+        Example
+      </BreadcrumbNavLink>,
+    ],
+  },
+};
+
+export const Current: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Label
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/b/" index={2} current>
+        Label
+      </BreadcrumbNavLink>,
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `For accessibility specify the \`current\` property, to render \`aria-current="page"\`.`,
+      },
+    },
+  },
+};
+
+export const Separator: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <UtrechtIconChevronRight />
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Label
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavSeparator>
+        <UtrechtIconChevronRight />
+      </BreadcrumbNavSeparator>,
+      <BreadcrumbNavLink href="/a/b/" index={2}>
+        Label
+      </BreadcrumbNavLink>,
+    ],
+  },
+};
+export const Arrow: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink arrow href="/a" rel="label" index={0}>
+        Label
+      </BreadcrumbNavLink>,
+    ],
+  },
+};
+
+export const Active: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Label
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/b/" index={2} active current>
+        Label
+      </BreadcrumbNavLink>,
+    ],
+  },
+};
+
+export const DisabledAndCurrent: Story = {
+  args: {
+    children: [
+      <BreadcrumbNavLink href="/" rel="home" index={0}>
+        Home
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/" index={1}>
+        Label
+      </BreadcrumbNavLink>,
+      <BreadcrumbNavLink href="/a/b/" index={2} current disabled>
+        Label
+      </BreadcrumbNavLink>,
+    ],
+  },
+};