feat(lab-card): group columns by kind, not per-link

Rework the column layout so each column represents a distinct link
kind (Demo, Repository, Case study), with same-kind links stacking
vertically within the column in document order.

This makes the Forms Lab card read cleanly — one "Demo" column with
Forms Platform above Forms Lab (experiment), one "Repository" column
with flexion/forms above flexion/forms-lab. Matching list positions
across columns refer to the same project. Headings no longer repeat,
so they carry real categorical weight.

Other cards adjust naturally: Messaging has one Repository column,
Document Extractor has Repository and Case study columns.

- `LabCard`: groups links by kind, preserves per-kind document order,
  emits one column per present kind in fixed order (Demo → Repository
  → Case study).
- Styles: columns container auto-fits at 14rem minimum above 32rem;
  stacks below. Inner link list is a vertical flex stack with the
  icon-prefixed anchors.
- Update home and component view tests to match; update the home test
  fixture to include the required `kind` field.
- Update docs/featured-content.md to describe the group-by-kind layout.

Author: danielnaab

docs/featured-content.md

@@ -37,7 +37,9 @@ links:
 
 ## Rendering
 
-The home page renders one `<LabCard />` per lab. Each card places the title and tagline on top, with a horizontal row of columns below it — one column per link. Each column has a small uppercase kind heading ("Demo", "Repository", or "Case study") and the link itself, prefixed with an icon (globe for `demo`, GitHub mark for `repo`, document for `case-study`). Columns flow from 1 → 2 → 4 based on card width via container queries at 32rem and 56rem. The home page's featured list is constrained to `72rem` to keep cards at a readable width on wide displays.
+The home page renders one `<LabCard />` per lab. Each card places the title and tagline on top, with a horizontal row of columns below it — **one column per distinct link kind**, in fixed order (Demo → Repository → Case study). Links sharing a kind stack vertically within their column in document order; matching positions across columns (first demo ↔ first repo) refer to the same project, so a lab with multiple projects should list them in the same order under each kind.
+
+Each link is prefixed with an icon (globe for `demo`, GitHub mark for `repo`, document for `case-study`). The columns container collapses to a single column below 32rem; above it, columns auto-fit at a minimum of 14rem wide. The home page's featured list is constrained to `72rem` to keep cards at a readable width on wide displays.
 
 ## Adding a featured lab
 

src/design/components/lab-card/examples.tsx

@@ -37,9 +37,11 @@ export function LabCardExamples() {
     <section id="lab-card">
       <h2>Lab card</h2>
       <p>
-        Featured-lab card on the home page. Title and tagline sit on top; each link becomes
-        its own column below, titled with the link kind (Demo, Repository, or Case study).
-        Columns flow from 1 → 2 → 4 based on card width.
+        Featured-lab card on the home page. Title and tagline sit on top; links group into one
+        column per distinct kind (Demo, Repository, or Case study) below. Columns always appear
+        in kind order (Demo → Repository → Case study), and multiple links of the same kind
+        stack vertically within their column in document order. Links with matching list
+        positions across columns (first Demo ↔ first Repository) refer to the same project.
       </p>
       <div class="l-stack" data-space="md">
         <LabCard lab={multiProject} />

src/design/components/lab-card/index.tsx

@@ -1,30 +1,55 @@
-import type { FeaturedLab, FeaturedLinkKind } from '../../../build/featured'
+import type { FeaturedLab, FeaturedLink, FeaturedLinkKind } from '../../../build/featured'
 
 const KIND_HEADING: Record<FeaturedLinkKind, string> = {
   demo: 'Demo',
   repo: 'Repository',
   'case-study': 'Case study',
 }
 
+// Column order whenever these kinds are present.
+const KIND_ORDER: readonly FeaturedLinkKind[] = ['demo', 'repo', 'case-study']
+
+type Column = { kind: FeaturedLinkKind; links: FeaturedLink[] }
+
+function groupByKind(links: readonly FeaturedLink[]): Column[] {
+  const byKind = new Map<FeaturedLinkKind, FeaturedLink[]>()
+  for (const link of links) {
+    const bucket = byKind.get(link.kind) ?? []
+    bucket.push(link)
+    byKind.set(link.kind, bucket)
+  }
+  return KIND_ORDER.filter((k) => byKind.has(k)).map((kind) => ({
+    kind,
+    links: byKind.get(kind)!,
+  }))
+}
+
 export function LabCard({ lab }: { lab: FeaturedLab }) {
+  const columns = groupByKind(lab.links)
   return (
     <article class="lab-card">
       <div class="lab-card__intro">
         <h3 class="lab-card__title">{lab.title}</h3>
         <p class="lab-card__tagline">{lab.tagline}</p>
       </div>
       <ul class="lab-card__columns">
-        {lab.links.map((link) => (
+        {columns.map((column) => (
           <li class="lab-card__column">
-            <p class="lab-card__column-heading">{KIND_HEADING[link.kind]}</p>
-            <a
-              class="lab-card__column-link"
-              href={link.url}
-              rel="noopener external"
-            >
-              <LinkIcon kind={link.kind} />
-              <span>{link.label}</span>
-            </a>
+            <p class="lab-card__column-heading">{KIND_HEADING[column.kind]}</p>
+            <ul class="lab-card__column-links">
+              {column.links.map((link) => (
+                <li>
+                  <a
+                    class="lab-card__column-link"
+                    href={link.url}
+                    rel="noopener external"
+                  >
+                    <LinkIcon kind={column.kind} />
+                    <span>{link.label}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
           </li>
         ))}
       </ul>

src/design/components/lab-card/styles.css

@@ -45,7 +45,7 @@
   .lab-card__column {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
+    gap: var(--space-3);
     min-inline-size: 0;
   }
 
@@ -58,6 +58,15 @@
     margin: 0;
   }
 
+  .lab-card__column-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
   .lab-card__column-link {
     display: inline-flex;
     align-items: center;
@@ -86,17 +95,10 @@
     color: var(--color-link-hover);
   }
 
-  /* Flow to 2 columns once the card is wide enough to host them cleanly. */
+  /* Wide enough for a multi-column layout — one column per link kind. */
   @container (min-width: 32rem) {
     .lab-card__columns {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  /* And to a row of 4 on wide cards, so Forms Lab's four links sit side-by-side. */
-  @container (min-width: 56rem) {
-    .lab-card__columns {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
     }
   }
 }

tests/views/components.test.tsx

@@ -100,35 +100,54 @@ describe('LabCard', () => {
     expect(html).toContain('Digitize forms to create modern, accessible experiences')
   })
 
-  test('renders one column per link with kind heading, icon, and external anchor', async () => {
+  test('groups links by kind — one column per distinct kind', async () => {
     const html = await renderToHtml(<LabCard lab={multiProject} />)
-    expect(html.match(/class="lab-card__column"/g)?.length).toBe(4)
-    expect(html.match(/class="lab-card__column-heading"/g)?.length).toBe(4)
+    // Two distinct kinds (demo, repo) → two columns
+    expect(html.match(/class="lab-card__column"/g)?.length).toBe(2)
+    expect(html.match(/class="lab-card__column-heading"/g)?.length).toBe(2)
+
+    // Four links total, each with its own anchor + icon + external rel
     expect(html.match(/class="lab-card__column-link"/g)?.length).toBe(4)
     expect(html.match(/class="lab-card__icon"/g)?.length).toBe(4)
     expect(html.match(/rel="noopener external"/g)?.length).toBe(4)
+  })
 
-    // Kind headings match each link's kind in order: demo, repo, demo, repo
-    expect(html).toContain('Demo')
-    expect(html).toContain('Repository')
+  test('column order is Demo, Repository, Case study (only kinds present)', async () => {
+    const html = await renderToHtml(<LabCard lab={multiProject} />)
+    const demoIdx = html.indexOf('>Demo<')
+    const repoIdx = html.indexOf('>Repository<')
+    expect(demoIdx).toBeGreaterThan(-1)
+    expect(repoIdx).toBeGreaterThan(-1)
+    expect(demoIdx).toBeLessThan(repoIdx)
+    // No case-study heading in this lab
+    expect(html).not.toContain('>Case study<')
+  })
 
-    // Labels come through as the visible link text
-    expect(html).toContain('>Forms Platform<')
-    expect(html).toContain('>flexion/forms<')
-    expect(html).toContain('>Forms Lab (experiment)<')
-    expect(html).toContain('>flexion/forms-lab<')
+  test('same-kind links stack in document order inside their column', async () => {
+    const html = await renderToHtml(<LabCard lab={multiProject} />)
+    // In the Demo column: "Forms Platform" appears before "Forms Lab (experiment)"
+    expect(html.indexOf('>Forms Platform<')).toBeLessThan(
+      html.indexOf('>Forms Lab (experiment)<'),
+    )
+    // In the Repository column: "flexion/forms" appears before "flexion/forms-lab"
+    expect(html.indexOf('>flexion/forms<')).toBeLessThan(
+      html.indexOf('>flexion/forms-lab<'),
+    )
   })
 
   test('a single-link lab renders a single column', async () => {
     const html = await renderToHtml(<LabCard lab={singleLink} />)
     expect(html.match(/class="lab-card__column"/g)?.length).toBe(1)
-    expect(html).toContain('Repository')
+    expect(html).toContain('>Repository<')
     expect(html).toContain('href="https://github.com/flexion/flexion-notify"')
   })
 
-  test('case-study kind renders its own heading', async () => {
+  test('case-study kind renders its own column and heading', async () => {
     const html = await renderToHtml(<LabCard lab={caseStudy} />)
-    expect(html).toContain('Case study')
+    // Repository + Case study → two columns in that order
+    expect(html.match(/class="lab-card__column"/g)?.length).toBe(2)
+    expect(html).toContain('>Case study<')
+    expect(html.indexOf('>Repository<')).toBeLessThan(html.indexOf('>Case study<'))
     expect(html).toContain('href="https://flexion.us/case-study/"')
   })
 })

tests/views/home.test.tsx

@@ -21,24 +21,24 @@ const featured: FeaturedLab[] = [
     tagline: 'Digitize forms to create modern, accessible experiences for public outreach.',
     order: 1,
     links: [
-      { label: 'Demo (Forms Platform)', url: 'https://pp4cc7kwbf.us-east-1.awsapprunner.com/' },
-      { label: 'GitHub repository — Forms Platform', url: 'https://github.com/flexion/forms' },
+      { label: 'Forms Platform', url: 'https://pp4cc7kwbf.us-east-1.awsapprunner.com/', kind: 'demo' },
+      { label: 'flexion/forms', url: 'https://github.com/flexion/forms', kind: 'repo' },
     ],
   },
   {
     title: 'Messaging Lab',
     tagline: 'Text messaging services to deliver critical updates to the people you serve.',
     order: 2,
     links: [
-      { label: 'GitHub repository', url: 'https://github.com/flexion/flexion-notify' },
+      { label: 'flexion/flexion-notify', url: 'https://github.com/flexion/flexion-notify', kind: 'repo' },
     ],
   },
   {
     title: 'Document Extractor Lab',
     tagline: 'Accurately extract data from PDFs and images for faster application processing.',
     order: 3,
     links: [
-      { label: 'GitHub repository', url: 'https://github.com/flexion/document-extractor' },
+      { label: 'flexion/document-extractor', url: 'https://github.com/flexion/document-extractor', kind: 'repo' },
     ],
   },
 ]