feat: add ArticleCard component with card layout, hover/active/focus states, and design tokens

- ArticleCard.astro: Props {title, date, type, summary?, slug, readingTime?} - HTML: article.card > a.card-link wrapping badge-row, h2.title, p.summary, time - Uses BASE_URL for link construction: {base}posts/{slug}/ - Hover: shadow-md, title accent-primary; Active: translateY(1px); Focus-visible: focus-ring - All styles reference design tokens (fonts, sizes, colors, spacing, shadows, motion) - 32 tests covering props, structure, date formatting, and styles
2026-05-26 23:18:15 +00:00
parent 62fe16623b
commit 6b754d1646
2 changed files with 335 additions and 0 deletions
@@ -0,0 +1,122 @@
+---
+interface Props {
+  title: string;
+  date: Date;
+  type: string;
+  summary?: string;
+  slug: string;
+  readingTime?: number;
+}
+
+const { title, date, type, summary, slug, readingTime } = Astro.props;
+const base = import.meta.env.BASE_URL;
+
+const formattedDate = date.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+});
+const isoDate = date.toISOString().split('T')[0];
+---
+
+<article class="card" aria-label={`${type}: ${title}`}>
+  <a href={`${base}posts/${slug}/`} class="card-link">
+    <div class="badge-row">
+      <span class="badge">{type}</span>
+      {readingTime && <span class="reading-time">{readingTime} min read</span>}
+    </div>
+    <h2 class="title">{title}</h2>
+    {summary && <p class="summary">{summary}</p>}
+    <time datetime={isoDate}>{formattedDate}</time>
+  </a>
+</article>
+
+<style>
+  .card {
+    max-width: var(--width-prose);
+  }
+
+  .card-link {
+    display: block;
+    background-color: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--rounded-lg);
+    padding: var(--space-3);
+    box-shadow: var(--shadow-sm);
+    text-decoration: none;
+    color: inherit;
+    transition:
+      box-shadow var(--duration-fast) var(--ease-default),
+      transform var(--duration-fast) var(--ease-default);
+  }
+
+  .card-link:hover {
+    box-shadow: var(--shadow-md);
+    text-decoration: none;
+  }
+
+  .card-link:hover .title {
+    color: var(--accent-primary);
+  }
+
+  .card-link:active {
+    box-shadow: var(--shadow-sm);
+    transform: translateY(1px);
+  }
+
+  .card-link:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  .badge-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .badge {
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 600;
+    color: var(--accent-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: var(--leading-normal);
+  }
+
+  .reading-time {
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 400;
+    color: var(--text-tertiary);
+    line-height: var(--leading-normal);
+  }
+
+  .title {
+    font-family: var(--font-structure);
+    font-size: var(--type-xl);
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: var(--leading-snug);
+    margin-bottom: var(--space-1);
+    transition: color var(--duration-fast) var(--ease-default);
+  }
+
+  .summary {
+    font-family: var(--font-prose);
+    font-size: var(--type-base);
+    font-weight: 400;
+    color: var(--text-secondary);
+    line-height: var(--leading-prose);
+    margin-bottom: var(--space-2);
+  }
+
+  time {
+    font-family: var(--font-structure);
+    font-size: var(--type-sm);
+    font-weight: 400;
+    color: var(--text-tertiary);
+    line-height: var(--leading-normal);
+  }
+</style>
@@ -0,0 +1,213 @@
+import { describe, it } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const componentPath = resolve('src/components/ArticleCard.astro');
+
+function readComponent() {
+  return readFileSync(componentPath, 'utf-8');
+}
+
+describe('ArticleCard component', () => {
+  it('should exist at src/components/ArticleCard.astro', () => {
+    const content = readComponent();
+    assert.ok(content.length > 0, 'Component file should not be empty');
+  });
+
+  // --- Props ---
+  describe('Props interface', () => {
+    it('should define title as string', () => {
+      const content = readComponent();
+      assert.match(content, /title:\s*string/, 'should have title: string prop');
+    });
+
+    it('should define date as Date', () => {
+      const content = readComponent();
+      assert.match(content, /date:\s*Date/, 'should have date: Date prop');
+    });
+
+    it('should define type as string', () => {
+      const content = readComponent();
+      assert.match(content, /type:\s*string/, 'should have type: string prop');
+    });
+
+    it('should define summary as optional string', () => {
+      const content = readComponent();
+      assert.match(content, /summary\?:\s*string/, 'should have summary?: string prop');
+    });
+
+    it('should define slug as string', () => {
+      const content = readComponent();
+      assert.match(content, /slug:\s*string/, 'should have slug: string prop');
+    });
+
+    it('should define readingTime as optional number', () => {
+      const content = readComponent();
+      assert.match(content, /readingTime\?:\s*number/, 'should have readingTime?: number prop');
+    });
+  });
+
+  // --- BASE_URL ---
+  describe('BASE_URL usage', () => {
+    it('should read BASE_URL from import.meta.env', () => {
+      const content = readComponent();
+      assert.match(content, /import\.meta\.env\.BASE_URL/, 'should read BASE_URL');
+    });
+  });
+
+  // --- Date formatting ---
+  describe('Date formatting', () => {
+    it('should format date with toLocaleDateString en-US', () => {
+      const content = readComponent();
+      assert.match(content, /toLocaleDateString\s*\(\s*'en-US'/, 'should use en-US locale');
+    });
+
+    it('should use numeric year/month/day options', () => {
+      const content = readComponent();
+      assert.match(content, /year:\s*'numeric'/, 'should have year: numeric');
+      assert.match(content, /month:\s*'numeric'/, 'should have month: numeric');
+      assert.match(content, /day:\s*'numeric'/, 'should have day: numeric');
+    });
+
+    it('should generate ISO date string', () => {
+      const content = readComponent();
+      assert.match(content, /toISOString/, 'should generate ISO date for datetime attr');
+    });
+  });
+
+  // --- HTML structure ---
+  describe('HTML structure', () => {
+    it('should have article element with class card and aria-label', () => {
+      const content = readComponent();
+      assert.match(content, /<article\s+class="card"/, 'should have <article class="card">');
+      assert.match(content, /aria-label=/, 'should have aria-label on article');
+    });
+
+    it('should have aria-label combining type and title', () => {
+      const content = readComponent();
+      assert.match(content, /aria-label=\{`\$\{type\}:\s*\$\{title\}`\}/, 'aria-label should be {type}: {title}');
+    });
+
+    it('should have anchor with card-link class wrapping content', () => {
+      const content = readComponent();
+      assert.match(content, /<a\s+href=/, 'should have anchor element');
+      assert.match(content, /class="card-link"/, 'anchor should have card-link class');
+    });
+
+    it('should link to base + posts/slug/', () => {
+      const content = readComponent();
+      assert.match(content, /posts\/.*slug/, 'link should point to posts/{slug}');
+    });
+
+    it('should have badge-row div with badge span', () => {
+      const content = readComponent();
+      assert.match(content, /class="badge-row"/, 'should have badge-row class');
+      assert.match(content, /class="badge"/, 'should have badge class');
+    });
+
+    it('should conditionally render reading time', () => {
+      const content = readComponent();
+      assert.match(content, /readingTime/, 'should reference readingTime');
+      assert.match(content, /class="reading-time"/, 'should have reading-time class');
+    });
+
+    it('should have h2 with title class', () => {
+      const content = readComponent();
+      assert.match(content, /<h2\s+class="title"/, 'should have <h2 class="title">');
+    });
+
+    it('should conditionally render summary paragraph', () => {
+      const content = readComponent();
+      assert.match(content, /summary/, 'should reference summary');
+      assert.match(content, /<p\s+class="summary"/, 'should have <p class="summary">');
+    });
+
+    it('should have time element with datetime attribute', () => {
+      const content = readComponent();
+      assert.match(content, /<time\s+datetime=/, 'should have <time datetime=...>');
+    });
+  });
+
+  // --- Styles ---
+  describe('Styles', () => {
+    it('should have .card with prose max-width', () => {
+      const content = readComponent();
+      assert.match(content, /\.card\s*\{/, 'should have .card selector');
+      assert.match(content, /--width-prose/, 'should use --width-prose for max-width');
+    });
+
+    it('should style .card-link with card bg, border, rounded-lg, shadow-sm, padding', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link\s*\{/, 'should have .card-link selector');
+      assert.match(content, /--surface-card/, 'should use --surface-card bg');
+      assert.match(content, /--border-subtle/, 'should use --border-subtle border');
+      assert.match(content, /--rounded-lg/, 'should use --rounded-lg radius');
+      assert.match(content, /--shadow-sm/, 'should use --shadow-sm shadow');
+      assert.match(content, /--space-3/, 'should use --space-3 padding');
+    });
+
+    it('should have .card-link block display, no underline, inherit color, fast transition', () => {
+      const content = readComponent();
+      assert.match(content, /display:\s*block/, 'should be display block');
+      assert.match(content, /text-decoration:\s*none/, 'should have no text-decoration');
+      assert.match(content, /color:\s*inherit/, 'should inherit color');
+      assert.match(content, /--duration-fast/, 'should use --duration-fast transition');
+    });
+
+    it('should have hover state with shadow-md and no underline', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:hover/, 'should have .card-link:hover');
+      assert.match(content, /--shadow-md/, 'should use --shadow-md on hover');
+    });
+
+    it('should change title color on hover to accent-primary', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:hover\s+\.title/, 'should have .card-link:hover .title');
+    });
+
+    it('should have active state with shadow-sm and translateY(1px)', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:active/, 'should have .card-link:active');
+      assert.match(content, /translateY\(1px\)/, 'should translateY(1px) on active');
+    });
+
+    it('should have focus-visible with focus-ring outline', () => {
+      const content = readComponent();
+      assert.match(content, /\.card-link:focus-visible/, 'should have .card-link:focus-visible');
+      assert.match(content, /--focus-ring/, 'should use --focus-ring for outline');
+    });
+
+    it('should style .badge with structure font, type-xs, weight 600, accent-primary, uppercase, 0.05em tracking', () => {
+      const content = readComponent();
+      assert.match(content, /\.badge\s*\{/, 'should have .badge selector');
+    });
+
+    it('should style .reading-time with structure font, type-xs, weight 400, tertiary', () => {
+      const content = readComponent();
+      assert.match(content, /\.reading-time\s*\{/, 'should have .reading-time selector');
+      assert.match(content, /--text-tertiary/, 'reading-time should use --text-tertiary');
+    });
+
+    it('should style .title with structure font, type-xl, weight 600, primary, leading-snug, space-1 bottom, fast color transition', () => {
+      const content = readComponent();
+      assert.match(content, /\.title\s*\{/, 'should have .title selector');
+      assert.match(content, /--font-structure/, 'title should use --font-structure');
+      assert.match(content, /--type-xl/, 'title should use --type-xl');
+      assert.match(content, /--leading-snug/, 'title should use --leading-snug');
+    });
+
+    it('should style .summary with prose font, type-base, weight 400, secondary, leading-prose, space-2 bottom', () => {
+      const content = readComponent();
+      assert.match(content, /\.summary\s*\{/, 'should have .summary selector');
+      assert.match(content, /--font-prose/, 'summary should use --font-prose');
+      assert.match(content, /--text-secondary/, 'summary should use --text-secondary');
+      assert.match(content, /--leading-prose/, 'summary should use --leading-prose');
+    });
+
+    it('should style time with structure font, type-sm, weight 400, tertiary', () => {
+      const content = readComponent();
+      assert.match(content, /--type-sm/, 'time should use --type-sm');
+    });
+  });
+});