@thewhatmatters/wmds 0.4.8 → 0.4.27

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.27 · 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.27 · 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.27 · 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.27",
   "patterns": [
     {
       "id": "components-accordion--flush",
@@ -10,6 +10,14 @@
       "storybook": "?path=/story/components-accordion--flush",
       "source": "src/components/molecules/Accordion/Accordion.stories.tsx"
     },
+    {
+      "id": "components-appshell--portal-dashboard-pattern",
+      "title": "Components/AppShell",
+      "name": "Pattern — portal dashboard",
+      "file": "patterns/components-appshell--portal-dashboard-pattern.tsx",
+      "storybook": "?path=/story/components-appshell--portal-dashboard-pattern",
+      "source": "src/components/organisms/AppShell/AppShell.stories.tsx"
+    },
     {
       "id": "components-avatar--dropdown-row",
       "title": "Components/Avatar",
@@ -26,6 +34,14 @@
       "storybook": "?path=/story/components-badge--outline-tags",
       "source": "src/components/atoms/Badge/Badge.stories.tsx"
     },
+    {
+      "id": "components-badge--status-pill",
+      "title": "Components/Badge",
+      "name": "Pattern — status pill",
+      "file": "patterns/components-badge--status-pill.tsx",
+      "storybook": "?path=/story/components-badge--status-pill",
+      "source": "src/components/atoms/Badge/Badge.stories.tsx"
+    },
     {
       "id": "components-badge--with-avatar",
       "title": "Components/Badge",
@@ -234,6 +250,14 @@
       "storybook": "?path=/story/components-card-card--pinned-height",
       "source": "src/components/molecules/Card/Card.stories.tsx"
     },
+    {
+      "id": "components-card-card--terminal-frame",
+      "title": "Components/Card/Card",
+      "name": "Pattern — terminal frame",
+      "file": "patterns/components-card-card--terminal-frame.tsx",
+      "storybook": "?path=/story/components-card-card--terminal-frame",
+      "source": "src/components/molecules/Card/Card.stories.tsx"
+    },
     {
       "id": "components-card-selectablecard--selectable-cards-pattern",
       "title": "Components/Card/SelectableCard",
@@ -298,6 +322,22 @@
       "storybook": "?path=/story/components-chart--ranked-audience-breakdown",
       "source": "src/components/organisms/Chart/Chart.stories.tsx"
     },
+    {
+      "id": "components-chart--revenue-by-line",
+      "title": "Components/Chart",
+      "name": "Pattern — revenue by line",
+      "file": "patterns/components-chart--revenue-by-line.tsx",
+      "storybook": "?path=/story/components-chart--revenue-by-line",
+      "source": "src/components/organisms/Chart/Chart.stories.tsx"
+    },
+    {
+      "id": "components-chart--segmented-ring-pattern",
+      "title": "Components/Chart",
+      "name": "Pattern — segmented ring",
+      "file": "patterns/components-chart--segmented-ring-pattern.tsx",
+      "storybook": "?path=/story/components-chart--segmented-ring-pattern",
+      "source": "src/components/organisms/Chart/Chart.stories.tsx"
+    },
     {
       "id": "components-chart--unit-grid-composition",
       "title": "Components/Chart",
@@ -370,6 +410,38 @@
       "storybook": "?path=/story/components-checkbox-checkboxgroup--option-counts",
       "source": "src/components/molecules/CheckboxGroup/CheckboxGroup.stories.tsx"
     },
+    {
+      "id": "components-copyfield--clipboard-blocked",
+      "title": "Components/CopyField",
+      "name": "Pattern — clipboard blocked",
+      "file": "patterns/components-copyfield--clipboard-blocked.tsx",
+      "storybook": "?path=/story/components-copyfield--clipboard-blocked",
+      "source": "src/components/molecules/CopyField/CopyField.stories.tsx"
+    },
+    {
+      "id": "components-copyfield--copied",
+      "title": "Components/CopyField",
+      "name": "Pattern — copied",
+      "file": "patterns/components-copyfield--copied.tsx",
+      "storybook": "?path=/story/components-copyfield--copied",
+      "source": "src/components/molecules/CopyField/CopyField.stories.tsx"
+    },
+    {
+      "id": "components-copyfield--copy-key",
+      "title": "Components/CopyField",
+      "name": "Pattern — copy key",
+      "file": "patterns/components-copyfield--copy-key.tsx",
+      "storybook": "?path=/story/components-copyfield--copy-key",
+      "source": "src/components/molecules/CopyField/CopyField.stories.tsx"
+    },
+    {
+      "id": "components-copyfield--on-navy",
+      "title": "Components/CopyField",
+      "name": "Pattern — on a navy field",
+      "file": "patterns/components-copyfield--on-navy.tsx",
+      "storybook": "?path=/story/components-copyfield--on-navy",
+      "source": "src/components/molecules/CopyField/CopyField.stories.tsx"
+    },
     {
       "id": "components-descriptionlist--details",
       "title": "Components/DescriptionList",
@@ -418,6 +490,14 @@
       "storybook": "?path=/story/components-displaycontrols--page-utilities",
       "source": "src/components/molecules/DisplayControls/DisplayControls.stories.tsx"
     },
+    {
+      "id": "components-displaycontrols--theme-switch",
+      "title": "Components/DisplayControls",
+      "name": "Pattern — theme switch",
+      "file": "patterns/components-displaycontrols--theme-switch.tsx",
+      "storybook": "?path=/story/components-displaycontrols--theme-switch",
+      "source": "src/components/molecules/DisplayControls/DisplayControls.stories.tsx"
+    },
     {
       "id": "components-field--horizontal-input",
       "title": "Components/Field",
@@ -618,6 +698,22 @@
       "storybook": "?path=/story/components-linktile--router-link",
       "source": "src/components/molecules/LinkTile/LinkTile.stories.tsx"
     },
+    {
+      "id": "components-logview--detail-pane",
+      "title": "Components/LogView",
+      "name": "Pattern — detail pane",
+      "file": "patterns/components-logview--detail-pane.tsx",
+      "storybook": "?path=/story/components-logview--detail-pane",
+      "source": "src/components/molecules/LogView/LogView.stories.tsx"
+    },
+    {
+      "id": "components-logview--log-viewer",
+      "title": "Components/LogView",
+      "name": "Pattern — log viewer",
+      "file": "patterns/components-logview--log-viewer.tsx",
+      "storybook": "?path=/story/components-logview--log-viewer",
+      "source": "src/components/molecules/LogView/LogView.stories.tsx"
+    },
     {
       "id": "components-moremenu--action-menu",
       "title": "Components/MoreMenu",
@@ -634,6 +730,14 @@
       "storybook": "?path=/story/components-moremenu--in-card-header",
       "source": "src/components/organisms/MoreMenu/MoreMenu.stories.tsx"
     },
+    {
+      "id": "components-navlist--app-sidebar",
+      "title": "Components/NavList",
+      "name": "Pattern — app sidebar",
+      "file": "patterns/components-navlist--app-sidebar.tsx",
+      "storybook": "?path=/story/components-navlist--app-sidebar",
+      "source": "src/components/molecules/NavList/NavList.stories.tsx"
+    },
     {
       "id": "components-navlist--side-nav-settings",
       "title": "Components/NavList",
@@ -754,6 +858,30 @@
       "storybook": "?path=/story/components-sheet--end-sheet",
       "source": "src/components/organisms/Sheet/Sheet.stories.tsx"
     },
+    {
+      "id": "components-sheet--side-sheet",
+      "title": "Components/Sheet",
+      "name": "Pattern — side sheet",
+      "file": "patterns/components-sheet--side-sheet.tsx",
+      "storybook": "?path=/story/components-sheet--side-sheet",
+      "source": "src/components/organisms/Sheet/Sheet.stories.tsx"
+    },
+    {
+      "id": "components-sheet--side-sheet-header-actions",
+      "title": "Components/Sheet",
+      "name": "Pattern — side sheet header actions",
+      "file": "patterns/components-sheet--side-sheet-header-actions.tsx",
+      "storybook": "?path=/story/components-sheet--side-sheet-header-actions",
+      "source": "src/components/organisms/Sheet/Sheet.stories.tsx"
+    },
+    {
+      "id": "components-sheet--side-sheet-url-deep-link",
+      "title": "Components/Sheet",
+      "name": "Pattern — side sheet URL deep link",
+      "file": "patterns/components-sheet--side-sheet-url-deep-link.tsx",
+      "storybook": "?path=/story/components-sheet--side-sheet-url-deep-link",
+      "source": "src/components/organisms/Sheet/Sheet.stories.tsx"
+    },
     {
       "id": "components-sitenav--brand-and-cta",
       "title": "Components/SiteNav",
@@ -794,6 +922,14 @@
       "storybook": "?path=/story/components-sitenav--mega-menu",
       "source": "src/components/organisms/SiteNav/SiteNav.stories.tsx"
     },
+    {
+      "id": "components-stat--hero-stat",
+      "title": "Components/Stat",
+      "name": "Pattern — hero stat",
+      "file": "patterns/components-stat--hero-stat.tsx",
+      "storybook": "?path=/story/components-stat--hero-stat",
+      "source": "src/components/molecules/Stat/Stat.stories.tsx"
+    },
     {
       "id": "components-stat--insights-row",
       "title": "Components/Stat",
@@ -834,6 +970,30 @@
       "storybook": "?path=/story/components-tab--settings-pages",
       "source": "src/components/organisms/Tab/Tab.stories.tsx"
     },
+    {
+      "id": "components-table--approvals",
+      "title": "Components/Table",
+      "name": "Pattern — approvals queue",
+      "file": "patterns/components-table--approvals.tsx",
+      "storybook": "?path=/story/components-table--approvals",
+      "source": "src/components/atoms/Table/Table.stories.tsx"
+    },
+    {
+      "id": "components-table--approvals-with-sheet",
+      "title": "Components/Table",
+      "name": "Pattern — approvals with sheet",
+      "file": "patterns/components-table--approvals-with-sheet.tsx",
+      "storybook": "?path=/story/components-table--approvals-with-sheet",
+      "source": "src/components/atoms/Table/Table.stories.tsx"
+    },
+    {
+      "id": "components-table--basic",
+      "title": "Components/Table",
+      "name": "Pattern — basic table",
+      "file": "patterns/components-table--basic.tsx",
+      "storybook": "?path=/story/components-table--basic",
+      "source": "src/components/atoms/Table/Table.stories.tsx"
+    },
     {
       "id": "components-taskrows--action-details",
       "title": "Components/TaskRows",
@@ -874,6 +1034,14 @@
       "storybook": "?path=/story/components-taskrows--custom-slots",
       "source": "src/components/molecules/TaskRows/TaskRows.stories.tsx"
     },
+    {
+      "id": "components-taskrows--needs-you-table",
+      "title": "Components/TaskRows",
+      "name": "Pattern — needs you",
+      "file": "patterns/components-taskrows--needs-you-table.tsx",
+      "storybook": "?path=/story/components-taskrows--needs-you-table",
+      "source": "src/components/molecules/TaskRows/TaskRows.stories.tsx"
+    },
     {
       "id": "components-taskrows--status-list",
       "title": "Components/TaskRows",
@@ -890,6 +1058,14 @@
       "storybook": "?path=/story/components-taskrows--tag-chips",
       "source": "src/components/molecules/TaskRows/TaskRows.stories.tsx"
     },
+    {
+      "id": "components-textarea--save-status",
+      "title": "Components/TextArea",
+      "name": "Pattern — save status",
+      "file": "patterns/components-textarea--save-status.tsx",
+      "storybook": "?path=/story/components-textarea--save-status",
+      "source": "src/components/atoms/TextArea/TextArea.stories.tsx"
+    },
     {
       "id": "components-textlink--external-destination",
       "title": "Components/TextLink",

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.27",
   "type": "module",
   "license": "MIT",
   "repository": {