feat(design): add LabCard component

Author: danielnaab

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

@@ -0,0 +1,18 @@
+import { Link } from '../link'
+import type { FeaturedLab } from '../../../build/featured'
+
+export function LabCard({ lab }: { lab: FeaturedLab }) {
+  return (
+    <article class="lab-card">
+      <h3 class="lab-card__title">{lab.title}</h3>
+      <p class="lab-card__tagline">{lab.tagline}</p>
+      <ul class="lab-card__links">
+        {lab.links.map((link) => (
+          <li class="lab-card__link">
+            <Link href={link.url} external>{link.label}</Link>
+          </li>
+        ))}
+      </ul>
+    </article>
+  )
+}

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

@@ -0,0 +1,39 @@
+@layer components {
+  .lab-card {
+    padding: var(--space-6);
+    border-inline-start: 3px solid var(--color-accent);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-card);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .lab-card__title {
+    font-size: var(--step-2);
+    line-height: 1.2;
+    margin: 0;
+    color: var(--color-ink);
+  }
+
+  .lab-card__tagline {
+    font-size: var(--step-0);
+    color: var(--color-ink-subtle);
+    max-inline-size: var(--measure-prose);
+    margin: 0;
+  }
+
+  .lab-card__links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .lab-card__link {
+    font-size: var(--step--1);
+  }
+}

tests/views/components.test.tsx

@@ -52,3 +52,40 @@ describe('StandardsList', () => {
     expect(html.match(/standards-list__item/g)!.length).toBe(5)
   })
 })
+
+import { LabCard } from '../../src/design/components/lab-card'
+import type { FeaturedLab } from '../../src/build/featured'
+
+describe('LabCard', () => {
+  const lab: FeaturedLab = {
+    title: 'Forms Lab',
+    tagline: 'Digitize forms to create modern, accessible experiences for public outreach.',
+    order: 1,
+    links: [
+      { label: 'Demo (Forms Platform)', url: 'https://example.com/demo' },
+      { label: 'GitHub repository — Forms Platform', url: 'https://github.com/flexion/forms' },
+    ],
+  }
+
+  test('renders the title as an h3 with no link', async () => {
+    const html = await renderToHtml(<LabCard lab={lab} />)
+    expect(html).toMatch(/<h3[^>]*class="lab-card__title"[^>]*>Forms Lab<\/h3>/)
+    // Title should not be wrapped in an anchor
+    expect(html).not.toMatch(/<h3[^>]*>[^<]*<a/)
+  })
+
+  test('renders the tagline', async () => {
+    const html = await renderToHtml(<LabCard lab={lab} />)
+    expect(html).toContain('Digitize forms to create modern, accessible experiences')
+  })
+
+  test('renders one link per entry with external treatment', async () => {
+    const html = await renderToHtml(<LabCard lab={lab} />)
+    expect(html).toContain('href="https://example.com/demo"')
+    expect(html).toContain('href="https://github.com/flexion/forms"')
+    expect(html).toContain('Demo (Forms Platform)')
+    expect(html).toContain('GitHub repository — Forms Platform')
+    // Uses the Link component with external variant
+    expect(html.match(/data-variant="external"/g)?.length).toBe(2)
+  })
+})