feat(shared): Tier 3 wave 2 (12 components) + self-hosted fonts
Two changes in one commit because they were prepared together and the component demos depend on the new self-hosted fonts.css. Tier 3 wave 2 — 12 new components --------------------------------- Adds components-tier3-supplement.css (886 lines) and 12 isolated demo HTML pages under shared/playground-examples/components/: toxic-flow chain, fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and-transform, cycle-ribbon, persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore, FormProgress, Aspirational-vs-Committed. Reuses existing tokens — no new CSS custom properties. Honors the Phase 1 feedback rules: no large pink areas for body text, severity-red distinct from failure-red, dark mode via existing [data-theme="dark"]. Provenance: components-tier3-supplement.css and the 12 demo bodies were authored by claude.ai/design (separate Anthropic instance) on 2026-05-03. This commit only integrates them — path rewrites, font swap, generic name substitution in fleet-overview demo data, README updates. base.css from the export was deliberately NOT taken in because it reverted the inline-message contrast fix from v0.1. Self-hosted fonts (Inter, JetBrains Mono, Source Serif 4) --------------------------------------------------------- Replaces all fonts.googleapis.com / fonts.gstatic.com requests with .woff2 files bundled at shared/playground-design-system/fonts/. Why: - No data leaked to Google about end-user IPs and User-Agents. - GDPR-safe for Norwegian public-sector deployments. - Works offline / behind air-gapped firewalls. - Forkers downloading the marketplace get a complete bundle. All three families are SIL Open Font License 1.1 — license texts included alongside the woff2 files. Source Serif 4 woff2 generated locally from the upstream OTF release using fonttools ttLib.woff2 compress; Inter and JetBrains Mono are unmodified upstream webfont releases. Total bundle: 9 woff2 files, ~940 KB. New fonts.css declares all @font-face rules with font-display: swap. All 6 example HTMLs and 12 new component demos load it via a single relative path. Verified -------- - Privacy grep returns empty across plugins/ and shared/ - Google Fonts grep returns empty across shared/*.html - Smoke test via python -m http.server: HTML + 7 stylesheets + Inter-Regular.woff2 all return 200 Doc updates ----------- - shared/playground-design-system/README.md: file tree updated, Quick start snippet shows fonts.css link, "Self-hosted fonts" section added - shared/playground-design-system/fonts/LICENSES.md: combined attribution - README.md (root): Tier 3 wave 1+2 component list, Privacy-first bullet - CLAUDE.md (root): tree entry expanded for new components + fonts Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen
parent
5b6c1da8fc
commit
f1fecf39b8
36 changed files with 2470 additions and 29 deletions
59
shared/playground-examples/components/read-more.html
Normal file
59
shared/playground-examples/components/read-more.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html lang="nb">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ReadMore · Tier 3 supp</title>
|
||||
<link rel="stylesheet" href="../../playground-design-system/tokens.css" />
|
||||
<link rel="stylesheet" href="../../playground-design-system/base.css" />
|
||||
<link rel="stylesheet" href="../../playground-design-system/components.css" />
|
||||
<link rel="stylesheet" href="../../playground-design-system/components-tier2.css" />
|
||||
<link rel="stylesheet" href="../../playground-design-system/components-tier3-supplement.css" />
|
||||
<link rel="stylesheet" href="../../playground-design-system/fonts.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<a href="../index.html" class="app-header__brand"><span class="app-header__brand-mark">P</span><span>Playground</span></a>
|
||||
<span class="app-header__breadcrumb">/ Komponenter / ReadMore</span>
|
||||
</header>
|
||||
|
||||
<main class="container container--narrow" style="padding: var(--space-8) 0;">
|
||||
<div style="margin-bottom: var(--space-6);">
|
||||
<span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); font-weight: var(--font-weight-semibold);">Aksel · inline disclosure</span>
|
||||
<h1 style="margin: 4px 0 6px;">ReadMore</h1>
|
||||
<p class="text-secondary">Inline-trigger for å skjule lange forklaringer mid-tekst.</p>
|
||||
</div>
|
||||
|
||||
<article style="font-size: var(--font-size-md); line-height: var(--line-height-normal); color: var(--color-text-primary);">
|
||||
<p>Sensitivity Labels brukes til å klassifisere dokumenter etter konfidensialitetsnivå.
|
||||
<span class="read-more" aria-expanded="false">
|
||||
<button type="button" class="read-more__trigger" onclick="toggleRm(this)">Les mer om hvordan dette håndheves <span class="read-more__chev">▾</span></button>
|
||||
<span class="read-more__body">
|
||||
Når et dokument merkes "Konfidensielt — intern", vil M365 Copilot ikke oppsummere innholdet for brukere uten samme tilgangsnivå.
|
||||
DLP-policyen sjekker label-attributter ved hver prompt-respons og avbryter generering hvis cross-label data flyter sammen.
|
||||
For Lier kommune betyr dette at saksbehandlere på Helse-avdelingen ikke utilsiktet kan dra inn HR-relatert informasjon i samme svar.
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: var(--space-4);">Schrems II-vurdering kreves for cross-tenant data-flyt.
|
||||
<span class="read-more" aria-expanded="false">
|
||||
<button type="button" class="read-more__trigger" onclick="toggleRm(this)">Hva betyr Schrems II i praksis? <span class="read-more__chev">▾</span></button>
|
||||
<span class="read-more__body">
|
||||
EU-domstolen kjente Privacy Shield ugyldig i 2020. Overføring av personopplysninger til USA krever supplerende tiltak (TIAs, krypteringsnøkler i EU).
|
||||
For Microsoft 365-tenants betyr dette at EU Data Boundary må være aktivert, og at audit-logger må bekrefte at prompt-data ikke forlater EØS.
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleRm(btn) {
|
||||
const sec = btn.parentElement;
|
||||
const open = sec.getAttribute('aria-expanded') === 'true';
|
||||
sec.setAttribute('aria-expanded', open ? 'false' : 'true');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue