feat(#3904): Add release notes page

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

@@ -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/content/config.ts

@@ -274,11 +274,84 @@ const getStarted = defineCollection({
   }),
 });
 
+/**
+ * Release Notes Collection
+ * One entry per coordinated release, date-spined (not per-package). Each
+ * change has a `type` (breaking / addition / feature-change / fix /
+ * website) used to group changes under category headings within a
+ * release, in that priority order. The orthogonal `experimental` flag
+ * marks status (still gathering feedback) and shows an inline badge
+ * inside a low-emphasis information callout. Affected package versions
+ * are quiet metadata, listed only for the packages that actually changed.
+ *
+ * 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 grouped by `type` within each release (priority order:
+    // breaking -> addition -> feature-change -> fix -> website).
+    changes: z.array(
+      z.object({
+        title: z.string(),
+        // Category for grouping inside a release.
+        type: z.enum([
+          "breaking",
+          "addition",
+          "feature-change",
+          "fix",
+          "website",
+        ]),
+        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(),
+        // Status flag: still gathering feedback. Shows an inline "Experimental"
+        // badge with the title, inside a low-emphasis information callout.
+        // Orthogonal to type (an experimental addition is type: "addition" +
+        // experimental: true).
+        experimental: z.boolean().optional(),
+        // Migration help for type: "breaking" changes: optional before/after
+        // snippets and/or a link to a fuller migration guide.
+        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/release-notes/2023-01-31.json

@@ -0,0 +1,49 @@
+{
+  "date": "2023-01-31",
+  "versions": [
+    { "package": "react", "version": "4.5.0" },
+    { "package": "web-components", "version": "1.5.0" }
+  ],
+  "changes": [
+    {
+      "title": "Stylesheet import path changed",
+      "type": "breaking",
+      "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.",
+      "migration": {
+        "before": "@import \"@abgov/styles/styles.esm.css\";",
+        "after": "@import \"@abgov/web-components/index.css\";"
+      }
+    },
+    {
+      "title": "Pagination component",
+      "type": "addition",
+      "detail": "A new Pagination component is now available.",
+      "components": ["pagination"]
+    },
+    {
+      "title": "Design tokens across the system",
+      "type": "feature-change",
+      "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",
+      "type": "feature-change",
+      "detail": "The background colour for input components is now white.",
+      "components": ["input"]
+    },
+    {
+      "title": "Dynamic dropdown items",
+      "type": "fix",
+      "detail": "Items populated dynamically now update correctly in the dropdown.",
+      "components": ["dropdown"]
+    },
+    {
+      "title": "Documentation updates",
+      "type": "website",
+      "bullets": [
+        "New Skeleton examples for line count and max width.",
+        "Added documentation on our supported browsers."
+      ]
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,21 @@
+{
+  "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",
+      "type": "fix",
+      "detail": "Tooltips no longer clip at the edge of a scrolling container.",
+      "components": ["tooltip"]
+    },
+    {
+      "title": "Dropdown keyboard navigation",
+      "type": "fix",
+      "detail": "Arrow keys now move through filtered options in the correct order.",
+      "components": ["dropdown"]
+    }
+  ]
+}

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

@@ -0,0 +1,69 @@
+{
+  "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",
+      "type": "addition",
+      "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",
+      "type": "addition",
+      "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",
+      "type": "addition",
+      "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",
+      "type": "fix",
+      "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",
+      "type": "fix",
+      "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",
+      "type": "fix",
+      "detail": "Progress and indeterminate notification types now render their progress indicators correctly.",
+      "components": ["temporary-notification"]
+    },
+    {
+      "title": "Visual design refinements",
+      "type": "feature-change",
+      "detail": "Container, Drawer, and Dropdown were updated to better match the latest visual design.",
+      "components": ["container", "drawer", "dropdown"]
+    },
+    {
+      "title": "Documentation updates",
+      "type": "website",
+      "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."
+      ]
+    }
+  ]
+}

docs/src/lib/get-started-nav.ts

@@ -63,6 +63,11 @@ export async function getGetStartedNav(): Promise<GetStartedNav> {
   const published = entries.filter((e) => e.data.status !== "deprecated");
 
   const topPages = bySection(published, "intro").map(entryToItem);
+  // Release notes lives in its own collection/page (/release-notes), not a
+  // get-started entry, so surface it in the Get Started nav right after
+  // "Start with the design system" (the /get-started landing).
+  const startIndex = topPages.findIndex((p) => p.url === "/get-started");
+  topPages.splice(startIndex + 1, 0, { label: "Release notes", url: "/release-notes" });
   const bottomPages = bySection(published, "appendix").map(entryToItem);
 
   const groups = GROUP_ORDER.filter((slug) =>

docs/src/pages/release-notes/index.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * /release-notes - Release Notes Page (Brief 123)
+ *
+ * Uses the shared DocumentationPageLayout like other content pages.
+ * section="parent" => no false nav highlight (release-notes isn't a nav section).
+ * The month headings drive the layout's standard right-side table of contents.
+ */
+import DocumentationPageLayout from '../../layouts/DocumentationPageLayout.astro';
+import { ReleaseNotesFeed } from '../../components/ReleaseNotesFeed';
+import { getCollection } from 'astro:content';
+
+const entries = await getCollection('release-notes');
+const releases = entries
+  .map((entry) => entry.data)
+  .sort((a, b) => b.date.localeCompare(a.date));
+
+const title = 'Release notes';
+const description =
+  'What changed in each release of the GoA Design System: new components, features, fixes, and documentation updates.';
+---
+
+<DocumentationPageLayout
+  title={title}
+  description={description}
+  section="parent"
+  tocQuery="goa-text[id][as='h2']"
+>
+  <goa-text as="h1" size="heading-xl" mt="none" mb="m">Release notes</goa-text>
+  <goa-text as="p" size="body-l" mt="none" mb="2xl">
+    What changed in each release of the GoA Design System. Each entry covers a
+    coordinated release across the web components, React, Angular, and common packages.
+  </goa-text>
+
+  <ReleaseNotesFeed client:load releases={releases} />
+</DocumentationPageLayout>