Skip to content

Commit 3ee9b08

Browse files
yepzdkyepzdk
authored
Merge pull request #18 from itk-dev/feature/shared-mock-banner
feat: shared mock-up banner across all research prototypes
2 parents 9e5b412 + 22fb01d commit 3ee9b08

21 files changed

Lines changed: 208 additions & 118 deletions

File tree

‎.github/workflows/verify_build.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ on:
44
pull_request:
55
paths:
66
- "docs/**"
7+
- "scripts/**"
78
- "package.json"
89
- "package-lock.json"
910

@@ -21,5 +22,8 @@ jobs:
2122
- name: Install dependencies
2223
run: npm ci
2324

25+
- name: Check mock banner inclusion
26+
run: npm run lint:mocks
27+
2428
- name: Build site
2529
run: npx vitepress build docs

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
66

77
## [Unreleased]
88

9+
### Added — Shared mock banner
10+
- New shared mock banner under `docs/public/design-system/v1/mock-banner.{css,js}` — auto-injects a "this is a mock" strip across the top of every prototype, with optional `data-banner-text` override
11+
- CI check `npm run lint:mocks` (wired into `.github/workflows/verify_build.yml`) fails the build if a prototype HTML file under `docs/public/projects/` doesn't reference the shared banner; allowlist supported for deliberate exceptions (currently `deltag-aarhus`)
12+
- Migrated all eight prototypes (opkraevningsoverblik, salary-negotiation, climate-nudging × 3, agentic-orchestration, book-aarhus, deltag-aarhus-timeline, wcag-contrast-checker) onto the shared component, removing six per-prototype banner copies
13+
914
### Added — Opkrævningsoverblik BBR-beregner
1015
- New "Beregner" tab in the Opkrævningsoverblik prototype that calculates four BBR-driven municipal fees: rottebekæmpelse (with the >250 m² rate split), renovation, skorstensfejer, and ejendomsskat (grundskyld)
1116
- Editable mock-BBR data (grundareal, grundværdi, bygninger med type/m²/ildsteder) per test user with per-field reset and live recalculation

‎CLAUDE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ Pages sharing the same `passwordGroup` only prompt once per browser session. The
108108
- Place mock HTML files in `docs/public/projects/<project-name>/mocks/`
109109
- Link to mocks with the base path prefix: `/research-projects/projects/<name>/mocks/file.html`
110110
- Use `target="_blank"` on all mock links to bypass VitePress's client-side router
111+
- Include the shared mock banner in each HTML file (CI enforces this — see `docs/projects/design-system/components.md` → "Mock banner")
111112
6. Update `CHANGELOG.md`
112113

113114
## Building locally

‎docs/projects/design-system/components.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,3 +237,30 @@ a stat. Tint by setting `color` on the parent (or via
237237
<path d="M0,18 L10,14 L20,16 L30,8 L40,10 L50,4 L60,6 L70,2 L80,3"/>
238238
</svg>
239239
```
240+
241+
## Mock banner
242+
243+
A shared "this is a mock" banner that every research prototype is
244+
expected to load. Lives outside `.ds` so prototypes that opt out of the
245+
design system can still use it. The companion script auto-injects the
246+
markup and reserves 32 px of `padding-top` on `<body>`.
247+
248+
```html
249+
<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
250+
<script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
251+
```
252+
253+
Override the text with `data-banner-text`:
254+
255+
```html
256+
<script src="/research-projects/design-system/v1/mock-banner.js" defer
257+
data-banner-text="MOCK — Custom prototype label"></script>
258+
```
259+
260+
The default text is `"Dette er en mock-up, ikke det rigtige eller endelige produkt."`
261+
262+
A CI check (`npm run lint:mocks`) verifies that every HTML file under
263+
`docs/public/projects/` references the script. If a prototype
264+
deliberately uses a different banner — for example one that mimics an
265+
external product's staging warning — add its path to the `ALLOWLIST` in
266+
`scripts/check-mock-banners.mjs`.

‎docs/public/design-system/v1/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ prototypes that mix this with Tailwind or another framework.
2525
(`ds-container`, `ds-stack`, `ds-cluster`, `ds-grid`).
2626
- **components.css** — buttons, badges, cards, form inputs, tables, modals,
2727
sidebar nav, stat cards, alerts.
28+
- **mock-banner.css** + **mock-banner.js** — shared "this is a mock"
29+
banner. Loaded standalone (not part of `index.css`) so any prototype
30+
can use it, whether or not it opts into `.ds`. CI fails if a prototype
31+
HTML under `docs/public/projects/` doesn't reference the script.
2832
- **playground.html** — live gallery of every component.
2933

3034
## Playground

‎docs/public/design-system/v1/mock-banner.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Shared mock banner for ITKdev Research prototypes.
3+
*
4+
* Loaded standalone — not part of .ds — so any prototype can use it,
5+
* including those that opt out of the design system. Uses :where()
6+
* for low specificity so prototypes can override locally if needed.
7+
*
8+
* Pair with mock-banner.js, which auto-injects the markup and adds
9+
* the matching body padding-top.
10+
*/
11+
12+
:where(.mock-banner) {
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
right: 0;
17+
height: 32px;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
padding: 0 16px;
22+
background: #fef9e7;
23+
color: #666;
24+
text-align: center;
25+
font-size: 12px;
26+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
27+
letter-spacing: 0.3px;
28+
border-bottom: 1px solid #f0e6c0;
29+
z-index: 1000;
30+
pointer-events: none;
31+
}
32+
33+
:where(.mock-banner strong) {
34+
font-weight: 600;
35+
margin-right: 4px;
36+
}

‎docs/public/design-system/v1/mock-banner.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* Auto-injects a "this is a mock" banner at the top of the page.
3+
*
4+
* Usage:
5+
* <link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
6+
* <script src="/research-projects/design-system/v1/mock-banner.js" defer
7+
* data-banner-text="Optional override"></script>
8+
*
9+
* Idempotent: a second invocation is a no-op.
10+
* Text priority: data-banner-text on the script tag > existing
11+
* .mock-banner markup in the page > built-in default.
12+
*/
13+
(function () {
14+
const DEFAULT_TEXT = 'Dette er en mock-up, ikke det rigtige eller endelige produkt.';
15+
const BANNER_HEIGHT = '32px';
16+
17+
function init() {
18+
if (!document.body) return;
19+
20+
const existing = document.querySelector('.mock-banner');
21+
const script = document.currentScript
22+
|| document.querySelector('script[src*="mock-banner.js"]');
23+
const override = script && script.getAttribute('data-banner-text');
24+
25+
let banner = existing;
26+
if (!banner) {
27+
banner = document.createElement('div');
28+
banner.className = 'mock-banner';
29+
banner.setAttribute('role', 'note');
30+
document.body.insertBefore(banner, document.body.firstChild);
31+
}
32+
33+
if (override) {
34+
banner.textContent = override;
35+
} else if (!banner.textContent.trim()) {
36+
banner.textContent = DEFAULT_TEXT;
37+
}
38+
39+
document.body.style.paddingTop = BANNER_HEIGHT;
40+
}
41+
42+
if (document.readyState === 'loading') {
43+
document.addEventListener('DOMContentLoaded', init, { once: true });
44+
} else {
45+
init();
46+
}
47+
})();

‎docs/public/projects/agentic-orchestration/mocks/unified-platform.css‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,13 @@ body {
2323
flex-shrink: 0;
2424
}
2525

26-
/* ── Mock banner ── */
27-
.mock-banner {
28-
position: fixed;
29-
top: 0;
30-
left: 0;
31-
right: 0;
32-
background: #fef9e7;
33-
color: #666;
34-
text-align: center;
35-
padding: 4px 16px;
36-
border-bottom: 1px solid #f0e6c0;
37-
font-size: 12px;
38-
z-index: 200;
39-
}
40-
4126
/* ── Sidebar ── */
4227
.sidebar {
4328
width: 230px;
4429
background: #fff;
4530
border-right: 1px solid #e5e7eb;
4631
display: flex;
4732
flex-direction: column;
48-
padding-top: 28px;
4933
flex-shrink: 0;
5034
}
5135

‎docs/public/projects/agentic-orchestration/mocks/unified-platform.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Agentic Orchestration Studio — Unified Platform Mock</title>
77
<link rel="stylesheet" href="unified-platform.css">
8+
<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
9+
<script src="/research-projects/design-system/v1/mock-banner.js" defer
10+
data-banner-text="MOCK — Agentic Orchestration Studio: Unified Platform (Flowable + n8n + Grafana)"></script>
811
</head>
912
<body>
1013

11-
<div class="mock-banner">
12-
<strong>MOCK</strong> — Agentic Orchestration Studio: Unified Platform (Flowable + n8n + Grafana)
13-
</div>
14-
1514
<!-- Sidebar -->
1615
<div class="sidebar">
1716
<div class="sidebar-brand">

‎docs/public/projects/book-aarhus/mocks/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Book Aarhus - Ressource Booking</title>
7+
<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
8+
<script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
79
<script src="https://cdn.tailwindcss.com"></script>
810
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
911
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

0 commit comments

Comments
 (0)