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

tests/callout.test.mjs

@@ -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');
+    });
+  });
+});