feat: add Callout component with 5 types, semantic HTML, and design tokens

2026-05-26 23:01:09 +00:00
parent 3fd814256e
commit 25fd0ea9fe
2 changed files with 204 additions and 0 deletions
@@ -0,0 +1,62 @@
+---
+interface Props {
+  type?: 'note' | 'pattern' | 'antipattern' | 'warning' | 'tip';
+}
+
+const { type = 'note' } = Astro.props;
+
+const config: Record<string, { borderColor: string; labelColor: string; label: string }> = {
+  note: { borderColor: 'var(--border-default)', labelColor: 'var(--text-secondary)', label: 'Note' },
+  pattern: { borderColor: 'var(--accent-primary)', labelColor: 'var(--accent-primary)', label: 'Pattern' },
+  antipattern: { borderColor: 'var(--error-border)', labelColor: 'var(--error-text)', label: 'Anti-pattern' },
+  warning: { borderColor: 'var(--warning-border)', labelColor: 'var(--warning-text)', label: 'Warning' },
+  tip: { borderColor: 'var(--accent-secondary)', labelColor: 'var(--accent-secondary)', label: 'Tip' },
+};
+
+const { borderColor, labelColor, label } = config[type];
+---
+
+<aside class="callout" role="note" aria-label={`${label} callout`} style={`border-left-color: ${borderColor};`}>
+  <span class="callout-label" aria-hidden="true" style={`color: ${labelColor};`}>{label}</span>
+  <div class="callout-body"><slot /></div>
+</aside>
+
+<style>
+  .callout {
+    max-width: var(--width-prose);
+    background-color: var(--surface-inset);
+    border: 1px solid var(--border-subtle);
+    border-left: 3px solid;
+    border-radius: var(--rounded-lg);
+    padding: var(--space-3);
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-4);
+  }
+
+  .callout-label {
+    display: block;
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: var(--leading-normal);
+    margin-bottom: var(--space-1);
+  }
+
+  .callout-body {
+    font-family: var(--font-prose);
+    font-size: var(--type-base);
+    font-weight: 400;
+    line-height: var(--leading-prose);
+    color: var(--text-primary);
+  }
+
+  .callout-body :global(p) {
+    margin-bottom: var(--space-3);
+  }
+
+  .callout-body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+</style>
@@ -0,0 +1,142 @@
+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/Callout.astro');
+
+function readComponent() {
+  return readFileSync(componentPath, 'utf-8');
+}
+
+describe('Callout component', () => {
+  it('should exist at src/components/Callout.astro', () => {
+    // Will throw if file doesn't exist
+    const content = readComponent();
+    assert.ok(content.length > 0, 'Component file should not be empty');
+  });
+
+  describe('Props interface', () => {
+    it('should define type prop with 5 allowed values', () => {
+      const content = readComponent();
+      assert.match(content, /type\?/, 'type should be an optional prop');
+      assert.match(content, /note/, 'should include note type');
+      assert.match(content, /pattern/, 'should include pattern type');
+      assert.match(content, /antipattern/, 'should include antipattern type');
+      assert.match(content, /warning/, 'should include warning type');
+      assert.match(content, /tip/, 'should include tip type');
+    });
+
+    it('should default type to note', () => {
+      const content = readComponent();
+      assert.match(content, /=\s*['"]note['"]/, 'type should default to note');
+    });
+  });
+
+  describe('Config record mapping', () => {
+    it('should map note to border-default, text-secondary, Note', () => {
+      const content = readComponent();
+      assert.match(content, /border-default/, 'note should use border-default');
+      assert.match(content, /text-secondary/, 'note should use text-secondary');
+    });
+
+    it('should map pattern to accent-primary, accent-primary, Pattern', () => {
+      const content = readComponent();
+      assert.match(content, /accent-primary/, 'pattern should use accent-primary');
+    });
+
+    it('should map antipattern to error-border, error-text, Anti-pattern', () => {
+      const content = readComponent();
+      assert.match(content, /error-border/, 'antipattern should use error-border');
+      assert.match(content, /error-text/, 'antipattern should use error-text');
+      assert.match(content, /Anti-pattern/, 'antipattern should have Anti-pattern label');
+    });
+
+    it('should map warning to warning-border, warning-text, Warning', () => {
+      const content = readComponent();
+      assert.match(content, /warning-border/, 'warning should use warning-border');
+      assert.match(content, /warning-text/, 'warning should use warning-text');
+    });
+
+    it('should map tip to accent-secondary, accent-secondary, Tip', () => {
+      const content = readComponent();
+      assert.match(content, /accent-secondary/, 'tip should use accent-secondary');
+    });
+  });
+
+  describe('Semantic HTML', () => {
+    it('should use aside element with role=note', () => {
+      const content = readComponent();
+      assert.match(content, /<aside/, 'should use aside element');
+      assert.match(content, /role=["']note["']/, 'should have role=note');
+    });
+
+    it('should have aria-label with callout type', () => {
+      const content = readComponent();
+      assert.match(content, /aria-label=/, 'should have aria-label');
+      assert.match(content, /callout/, 'aria-label should include callout');
+    });
+
+    it('should have label span with aria-hidden=true', () => {
+      const content = readComponent();
+      assert.match(content, /class=["']callout-label["']/, 'should have callout-label class');
+      assert.match(content, /aria-hidden=["']true["']/, 'label should have aria-hidden=true');
+    });
+
+    it('should have callout-body div with slot', () => {
+      const content = readComponent();
+      assert.match(content, /class=["']callout-body["']/, 'should have callout-body class');
+      assert.match(content, /<slot\s*\/>/, 'should include a slot for content');
+    });
+  });
+
+  describe('Styles', () => {
+    it('should style .callout with prose max-width', () => {
+      const content = readComponent();
+      assert.match(content, /\.callout\s*\{/, 'should have .callout selector');
+      assert.match(content, /--width-prose/, 'should use prose width token');
+    });
+
+    it('should style .callout with surface-inset background', () => {
+      const content = readComponent();
+      assert.match(content, /--surface-inset/, 'should use surface-inset token');
+    });
+
+    it('should style .callout with border-subtle and 3px left border', () => {
+      const content = readComponent();
+      assert.match(content, /--border-subtle/, 'should use border-subtle token');
+      assert.match(content, /3px/, 'should have 3px left border');
+    });
+
+    it('should style .callout with rounded-lg, space-3 padding, space-4 margin', () => {
+      const content = readComponent();
+      assert.match(content, /--rounded-lg/, 'should use rounded-lg token');
+      assert.match(content, /--space-3/, 'should use space-3 for padding');
+      assert.match(content, /--space-4/, 'should use space-4 for margins');
+    });
+
+    it('should style .callout-label correctly', () => {
+      const content = readComponent();
+      assert.match(content, /\.callout-label/, 'should have .callout-label selector');
+      assert.match(content, /--font-structure/, 'label should use structure font');
+      assert.match(content, /--type-xs/, 'label should use type-xs size');
+      assert.match(content, /uppercase/, 'label should be uppercase');
+      assert.match(content, /0\.05em/, 'label should have 0.05em tracking');
+    });
+
+    it('should style .callout-body correctly', () => {
+      const content = readComponent();
+      assert.match(content, /\.callout-body/, 'should have .callout-body selector');
+      assert.match(content, /--font-prose/, 'body should use prose font');
+      assert.match(content, /--type-base/, 'body should use type-base size');
+      assert.match(content, /--leading-prose/, 'body should use leading-prose');
+      assert.match(content, /--text-primary/, 'body should use text-primary color');
+    });
+
+    it('should have nested paragraph styles with space-3 bottom margin', () => {
+      const content = readComponent();
+      assert.match(content, /:global\(p\)/, 'should have global p style for nested paragraphs');
+      assert.match(content, /last-child/, 'should handle last-child paragraph');
+    });
+  });
+});