feat(#3904): add release notes page

Author: twjeffery

docs/src/components/ReleaseNotesFeed.tsx

@@ -22,7 +22,7 @@ export const quickLinks: QuickLink[] = [
   { label: "Components", href: "/components", icon: "shapes" },
   { label: "Design tokens", href: "/tokens", icon: "code-slash" },
   { label: "Get support", href: "/support", icon: "help-circle" },
-  { label: "Release notes", href: "https://github.com/GovAlta/ui-components/releases", icon: "open" },
+  { label: "Release notes", href: "/release-notes", icon: "flag" },
 ];
 
 /**

docs/src/components/search/quick-links.ts

@@ -274,11 +274,72 @@ const getStarted = defineCollection({
   }),
 });
 
+/**
+ * Release Notes Collection
+ * One entry per coordinated release, date-spined (not per-package). Changes are
+ * authored as title + detail (Claude/Notion changelog style), not grouped by
+ * change-type. Affected package versions are quiet metadata, listed only for
+ * the packages that actually changed. Reserved treatments (highlight card,
+ * breaking callout) are opt-in per change via `major` / `breaking`, so the feed
+ * stays calm and the emphasis means something.
+ *
+ * Deliberately loose, provisional schema for the v1 in-site mock (Brief 123).
+ * A `data` collection (not MDX) so changes stay structured. Finalized schema,
+ * history backfill, and GitHub scaffold automation are deferred to later PRs.
+ */
+const releaseNotes = defineCollection({
+  type: "data",
+  schema: z.object({
+    // Date-spine: ISO date of the coordinated release (newest sorts first).
+    date: z.string(),
+    // Optional one-line intro/context Dustin sometimes adds.
+    intro: z.string().optional(),
+    // Packages that actually changed this release (quiet version line, not badges).
+    versions: z.array(
+      z.object({
+        package: z.enum(["web-components", "react", "angular", "common"]),
+        version: z.string(),
+      }),
+    ),
+    // Changes as title + detail. Plain text by default; major/breaking opt into
+    // the reserved card/callout treatments.
+    changes: z.array(
+      z.object({
+        title: z.string(),
+        detail: z.string().optional(),
+        // Optional sub-points (Claude/Notion-style bullets under a title).
+        bullets: z.array(z.string()).optional(),
+        // Component slug(s) this change touches -> quiet live links.
+        components: z.array(z.string()).optional(),
+        // Optional issue/PR reference for developers (number or URL).
+        issue: z.string().optional(),
+        // Doc / "learn more" links: internal docs (e.g. /get-started/...) or
+        // external URLs. Internal links navigate in-place; external open in a tab.
+        links: z
+          .array(z.object({ label: z.string(), href: z.string() }))
+          .optional(),
+        // Reserved treatments: experimental -> low-emphasis information callout;
+        // breaking -> low-emphasis emergency callout (+ migration).
+        experimental: z.boolean().optional(),
+        breaking: z.boolean().optional(),
+        migration: z
+          .object({
+            before: z.string().optional(),
+            after: z.string().optional(),
+            link: z.string().optional(),
+          })
+          .optional(),
+      }),
+    ),
+  }),
+});
+
 export const collections = {
   components,
   guidance,
   examples,
   foundations,
   productTypes,
   "get-started": getStarted,
+  "release-notes": releaseNotes,
 };

docs/src/content/config.ts

@@ -0,0 +1,44 @@
+{
+  "date": "2023-01-31",
+  "versions": [
+    { "package": "react", "version": "4.5.0" },
+    { "package": "web-components", "version": "1.5.0" }
+  ],
+  "changes": [
+    {
+      "title": "Stylesheet import path changed",
+      "detail": "If you update web-components, your styles need a small change: remove @abgov/styles from your package.json, then point your stylesheet import at the web-components package instead.",
+      "breaking": true,
+      "migration": {
+        "before": "@import \"@abgov/styles/styles.esm.css\";",
+        "after": "@import \"@abgov/web-components/index.css\";"
+      }
+    },
+    {
+      "title": "Pagination component",
+      "detail": "A new Pagination component is now available.",
+      "components": ["pagination"]
+    },
+    {
+      "title": "Design tokens across the system",
+      "detail": "The whole design system now uses design tokens, so colour, font, and other value updates reach your team quickly and easily."
+    },
+    {
+      "title": "Input background colour",
+      "detail": "The background colour for input components is now white.",
+      "components": ["input"]
+    },
+    {
+      "title": "Dynamic dropdown items",
+      "detail": "Items populated dynamically now update correctly in the dropdown.",
+      "components": ["dropdown"]
+    },
+    {
+      "title": "Documentation updates",
+      "bullets": [
+        "New Skeleton examples for line count and max width.",
+        "Added documentation on our supported browsers."
+      ]
+    }
+  ]
+}

docs/src/content/release-notes/2023-01-31.json

@@ -0,0 +1,13 @@
+{
+  "date": "2024-07-22",
+  "versions": [
+    { "package": "web-components", "version": "1.23.1" }
+  ],
+  "changes": [
+    {
+      "title": "App Header link alignment",
+      "detail": "Active header links are now vertically centered.",
+      "components": ["app-header"]
+    }
+  ]
+}

docs/src/content/release-notes/2024-07-22.json

@@ -0,0 +1,19 @@
+{
+  "date": "2026-05-14",
+  "versions": [
+    { "package": "web-components", "version": "2.1.2" },
+    { "package": "react", "version": "7.1.2" }
+  ],
+  "changes": [
+    {
+      "title": "Tooltip clipping near scroll edges",
+      "detail": "Tooltips no longer clip at the edge of a scrolling container.",
+      "components": ["tooltip"]
+    },
+    {
+      "title": "Dropdown keyboard navigation",
+      "detail": "Arrow keys now move through filtered options in the correct order.",
+      "components": ["dropdown"]
+    }
+  ]
+}

docs/src/content/release-notes/2026-05-14.json

@@ -0,0 +1,61 @@
+{
+  "date": "2026-05-20",
+  "versions": [
+    { "package": "web-components", "version": "2.2.0" },
+    { "package": "react", "version": "7.2.0" },
+    { "package": "angular", "version": "5.2.0" },
+    { "package": "common", "version": "2.2.0" }
+  ],
+  "changes": [
+    {
+      "title": "Dark mode",
+      "detail": "Components now support dark mode. This is experimental while we gather feedback. Try it in your service and share what you learn, it will help shape the production version.",
+      "experimental": true,
+      "issue": "3873",
+      "links": [
+        { "label": "Designing for dark mode", "href": "/get-started/designers/designing-for-dark-mode" },
+        { "label": "Dark mode theme for developers", "href": "/get-started/developers/dark-mode-theme" }
+      ]
+    },
+    {
+      "title": "Accordion actions slot and filled heading",
+      "detail": "Added support for an actions slot in the Accordion header, plus a new headingType property that can be set to \"filled\".",
+      "components": ["accordion"]
+    },
+    {
+      "title": "Badges in the Work Side Menu Item",
+      "detail": "Added a trailingContent slot so you can place badges in a work side menu item.",
+      "components": ["work-side-menu-item"],
+      "issue": "3814"
+    },
+    {
+      "title": "Consistent file upload validation",
+      "detail": "Invalid uploaded files now render consistently as FileUploadCard components, including their validation error states.",
+      "components": ["file-upload-card"]
+    },
+    {
+      "title": "Interactive components no longer close their parent",
+      "detail": "Fixed bubbling close events, so using a popover, date picker, dropdown, or drawer inside a parent component no longer closes the parent.",
+      "components": ["popover", "date-picker", "dropdown", "drawer"]
+    },
+    {
+      "title": "Temporary Notification progress indicators",
+      "detail": "Progress and indeterminate notification types now render their progress indicators correctly.",
+      "components": ["temporary-notification"]
+    },
+    {
+      "title": "Visual design refinements",
+      "detail": "Container, Drawer, and Dropdown were updated to better match the latest visual design.",
+      "components": ["container", "drawer", "dropdown"]
+    },
+    {
+      "title": "Documentation updates",
+      "bullets": [
+        "Corrected all React and Angular property and event documentation.",
+        "Added documentation for the Notification Panel component.",
+        "Added a new \"Updating your product\" guide.",
+        "Fixed the Work Side Menu \"with user profile\" example to include the profile menu."
+      ]
+    }
+  ]
+}