@thewhatmatters/wmds 0.4.8 → 0.4.9

package/docs/patterns/guides-post-page--post-page.tsx

@@ -1,8 +1,8 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — post page
+// @thewhatmatters/wmds@0.4.9 · Pattern — post page
 // Storybook: Guides/Post page → Pattern — post page (?path=/story/guides-post-page--post-page)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 
-import { useEffect, useId, useState, type ReactNode } from "react";
+import { useEffect, useId, useState, type ReactElement, type ReactNode } from "react";
 import { Copy, FileText } from "lucide-react";
 import {
   Badge,
@@ -107,6 +107,11 @@ export interface PostPageProps {
    * and tab order at every width, so pair "after" with metadataSide="end" and "before" with "start".
    */
   metadataStack?: PostMetadataStack;
+  /**
+   * The router's link for the breadcrumb and the category tags, in place of a plain anchor —
+   * (link) => <Link href={link.href} />.
+   */
+  renderLink?: (link: { label: string; href: string }) => ReactElement;
   /** Page-level layers inside the page grid — for example a GridOverlay. */
   overlay?: ReactNode;
 }
@@ -118,6 +123,7 @@ export function PostPage({
   metadataSide = "start",
   metadataColumns = 4,
   metadataStack = "after",
+  renderLink,
   overlay,
 }: PostPageProps) {
   const metadataHeadingId = useId();
@@ -153,7 +159,12 @@ export function PostPage({
         <DescriptionList.Item name="Reading time">{post.readingTime}</DescriptionList.Item>
         <DescriptionList.Item name="Categories">
           {post.categories.map((category) => (
-            <Badge key={category.href} emphasis="outline" mono render={<a href={category.href} />}>
+            <Badge
+              key={category.href}
+              emphasis="outline"
+              mono
+              render={renderLink != null ? renderLink(category) : <a href={category.href} />}
+            >
               {category.label}
             </Badge>
           ))}
@@ -191,7 +202,13 @@ export function PostPage({
       {overlay}
       <article className="band py-6 sm:py-10 lg:py-14">
         <header className="col-span-full mb-4 flex flex-col gap-3 sm:mb-8 lg:col-span-10">
-          <Breadcrumb items={post.breadcrumb} variant="mono" separator="slash" className="mb-3" />
+          <Breadcrumb
+            items={post.breadcrumb}
+            variant="mono"
+            separator="slash"
+            renderLink={renderLink}
+            className="mb-3"
+          />
           <h1 className="type-display-2 text-balance text-fg">{post.title}</h1>
           <p className="type-reading max-w-[40rem] text-muted">{post.description}</p>
           {stackedAfter ? (

package/docs/patterns/guides-profile-typography--editorial-profile.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — editorial profile
+// @thewhatmatters/wmds@0.4.9 · Pattern — editorial profile
 // Storybook: Guides/Profile typography → Pattern — editorial profile (?path=/story/guides-profile-typography--editorial-profile)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/guides-resource-detail--detail.tsx

@@ -1,8 +1,8 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — resource detail
+// @thewhatmatters/wmds@0.4.9 · Pattern — resource detail
 // Storybook: Guides/Resource detail → Pattern — resource detail (?path=/story/guides-resource-detail--detail)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 
-import { useEffect, useId, type ReactNode } from "react";
+import { useEffect, useId, type ReactElement, type ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import {
   Badge,
@@ -12,6 +12,7 @@ import {
   Dialog,
   IconButton,
   type BreadcrumbItemDef,
+  type BreadcrumbLinkItem,
 } from "@thewhatmatters/wmds";
 
 export interface ResourceImage {
@@ -233,6 +234,8 @@ export interface ResourceDetailPageProps {
   item: ResourceDetailItem;
   /** The path to this resource, ending with it — Home, Resources, this resource. */
   breadcrumb: BreadcrumbItemDef[];
+  /** The router's link for the breadcrumb, in place of a plain anchor — (item) => <Link href={item.href} />. */
+  renderLink?: (item: BreadcrumbLinkItem) => ReactElement;
   /** The app's image component, in place of img — (image) => <Image {...image} sizes="…" />. */
   renderImage?: (image: ResourceImage) => ReactNode;
   /** Page-level layers inside the page grid — for example a GridOverlay. */
@@ -240,14 +243,20 @@ export interface ResourceDetailPageProps {
 }
 
 /** The detail as its own page: opened directly, or from a shared link. */
-export function ResourceDetailPage({ item, breadcrumb, renderImage, overlay }: ResourceDetailPageProps) {
+export function ResourceDetailPage({ item, breadcrumb, renderLink, renderImage, overlay }: ResourceDetailPageProps) {
   const headingId = useId();
 
   return (
     <main className="grid-page bg-body">
       {overlay}
       <article aria-labelledby={headingId} className="band py-6 sm:py-10 lg:py-14">
-        <Breadcrumb items={breadcrumb} variant="mono" separator="slash" className="col-span-full mb-6" />
+        <Breadcrumb
+          items={breadcrumb}
+          variant="mono"
+          separator="slash"
+          renderLink={renderLink}
+          className="col-span-full mb-6"
+        />
         <div className="col-span-full lg:col-span-8">
           <ResourceMedia item={item} renderImage={renderImage} />
         </div>

package/docs/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "@thewhatmatters/wmds",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "patterns": [
     {
       "id": "components-accordion--flush",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thewhatmatters/wmds",
   "description": "WhatMatters Design System — React components, Tailwind v4 theme, and Storybook patterns",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "type": "module",
   "license": "MIT",
   "repository": {