{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "EnhancedProjectCard", "status": "stable", "description": "Portfolio project card with image or video media and metadata; video is a paused preview unless autoPlayVideo loops it while on screen.", "props": { "title": { "type": "string", "optional": false, "description": "Project title" }, "slug": { "type": "string", "optional": false, "description": "URL slug for project detail page" }, "thumbnail": { "type": "string", "optional": false, "description": "Thumbnail image URL" }, "videoThumbnail": { "type": "string | string[]", "optional": true, "description": "Video thumbnail: one URL, or several in preference order (for example\nWebM then MP4). `thumbnail` is its poster. Paused unless `autoPlayVideo`." }, "description": { "type": "string", "optional": true, "description": "Short description" }, "category": { "type": "string", "optional": true, "description": "Project category" }, "tags": { "type": "string[]", "optional": true, "description": "Project tags; only the first three render." }, "aspectRatio": { "type": "union", "values": [ "video", "square", "portrait", "landscape" ], "optional": true, "description": "Image aspect ratio" }, "showCategory": { "type": "boolean", "optional": true, "description": "Show category in caption. Defaults to true." }, "showDescription": { "type": "boolean", "optional": true, "description": "Show description on hover. Defaults to true; when false the description is\nscreen-reader-only and becomes the link's accessible description." }, "autoPlayVideo": { "type": "boolean", "optional": true, "description": "Loop the video like a GIF: muted, inline, playing only while on screen,\nand never for visitors who prefer reduced motion (they see the poster).\nKeep such clips short." }, "comingSoon": { "type": "boolean", "optional": true, "description": "Render as a non-interactive teaser with a \"coming soon\" badge over the media" }, "comingSoonLabel": { "type": "string", "optional": true, "description": "Visible badge label for the coming-soon overlay. Defaults to the translated \"Coming soon\" (`workComingSoon`)." }, "contentLanguage": { "type": "string", "optional": true, "description": "BCP 47 language tag for project-authored title and metadata" }, "coverGlow": { "type": "boolean", "optional": true, "description": "Glow the cover in its own colours on hover. Off by default; the work index\nopts in, other surfaces (home, related work) stay quiet. Default false." }, "className": { "type": "string", "optional": true, "description": "Custom className" } }, "accessibility": { "criteria": [ { "id": "axe-no-violations", "statement": "Required stories produce no axe violations at the configured severity.", "verification": "automated", "wcag": [ "2.5.8" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:32.743Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.332Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:46.514Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.349Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.935Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:47.170Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.681Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:20.219Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:47.513Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.052Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.634Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:46.849Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "accessibility-tree", "statement": "The accessibility tree (role, name, state) matches the committed snapshot for every required story.", "verification": "automated", "wcag": [ "1.3.1", "4.1.2" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:32.743Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:18.644Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.332Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:46.514Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.349Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:19.623Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.935Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:47.170Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.681Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:20.284Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:20.219Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:47.513Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:38:33.052Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:18.950Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:19:19.634Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:25:46.849Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "forced-colors-real-browser", "statement": "The component remains legible and operable under a real browser forced-colors: active pass.", "verification": "automated", "check": "npm run test:stories:hc", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-default.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:18.644Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:19.623Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:20.284Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/EnhancedProjectCard/__a11y-evidence__/site-enhancedprojectcard-playground.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:45:18.950Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "keyboard-contract", "statement": "Every documented keyboard interaction works as specified.", "verification": "unverified", "wcag": [ "2.1.1", "2.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "aria-requirements", "statement": "Documented ARIA roles, states, and properties are present on the rendered output.", "verification": "unverified", "wcag": [ "4.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "human-a11y-review", "statement": "A human completed an end-to-end accessibility review of this component.", "verification": "manual", "note": "2026-05-28 — Breadth beta port: keyboard/ARIA contract reviewed, ForcedColors story added, Storybook axe gate (parameters.a11y.test: error). 2026-07-05 (beta→stable) — re-verified independently: axe-clean across all stories in all four modes; AT snapshots bootstrapped (had none) compare-clean; Controls operable + 0 inert; eyeballed the card surface in light and dark. Fixed a real defect: `element` was \"div\" but the root render is an `` (next/link). Declared the `aspectRatio` styling axis as a propSourced variant. 2026-09-27 — video media changed to a static paused preview so project cards never introduce automatic motion.", "reviewedAt": "2026-11-04" } ] }, "governance": { "owner": "design-system", "lastReviewed": "2026-11-04", "note": "Reviewed by Petri Lahdelma; prepared by Claude from a code review on 2026-11-03" }, "source": [ "../../../nextjs-app/shared/components/EnhancedProjectCard/EnhancedProjectCard.module.css", "../../../nextjs-app/shared/components/EnhancedProjectCard/EnhancedProjectCard.tsx" ] }