feat: shared mock-up banner across all research prototypes#18
Merged
Conversation
Standalone CSS+JS pair under design-system/v1/ that any prototype can load to render a consistent "this is a mock" banner. Loaded outside .ds so prototypes that opt out of the design system can still use it. JS auto-injects the markup, sets body padding-top, and supports a data-banner-text override. Co-authored-by: Claude <noreply@anthropic.com>
scripts/check-mock-banners.mjs scans docs/public/projects/**/*.html and fails if any prototype does not reference the shared mock-banner.js. An ALLOWLIST keeps deliberate exceptions (deltag-aarhus uses a red banner that mimics aarhus.dk staging). Wired into verify_build.yml as "npm run lint:mocks". Co-authored-by: Claude <noreply@anthropic.com>
Removes per-prototype banner copies (six different inline implementations across yellow/blue/minimal styles) and switches every mock HTML to load the shared design-system/v1/mock-banner component. Prototypes with custom labels (salary-negotiation, climate-nudging × 3, agentic-orchestration) keep their text via data-banner-text. Three prototypes that previously had no banner at all (book-aarhus, deltag-aarhus-timeline, wcag-contrast-checker) gain the default banner. deltag-aarhus is unchanged — it stays on the lint allowlist with its intentional red staging-style banner. Co-authored-by: Claude <noreply@anthropic.com>
Adds a "Mock banner" section to the design-system components page, notes the new files in the v1 README, extends the CLAUDE.md "Adding a new research project" checklist with the banner requirement, and records the change under [Unreleased] in CHANGELOG.md. Co-authored-by: Claude <noreply@anthropic.com>
yepzdk
force-pushed
the
feature/shared-mock-banner
branch
from
f75e531 to
22fb01d
Compare
jeppekroghitk
approved these changes
Apr 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
docs/public/design-system/v1/mock-banner.{css,js}) so every research prototype renders a consistent "this is a mock" strip from one placenpm run lint:mocks, wired intoverify_build.yml) that fails the build if a new prototype HTML forgets the banner; supports an allowlist for deliberate exceptionsbook-aarhus,deltag-aarhus-timeline,wcag-contrast-checkera banner for the first time);deltag-aarhusis allowlisted and keeps its intentional red staging-style bannerNotes
.dsso prototypes that opt out of the design system can still use itdata-banner-textdocs/projects/design-system/components.md→ "Mock banner" for the full usage docsTest plan
npm run docs:build— passes locallynpm run lint:mocks— exit 0 with all banners present; verified exit 1 when banner is removed from a single filetask dev/npm run docs:dev, especially:salary-negotiation(dropped.app-layout { padding-top: 32px }— body padding now set by JS)agentic-orchestration(dropped.sidebar { padding-top: 28px })deltag-aarhusred banner still renders unchanged🤖 Generated with Claude Code