diff --git a/README.md b/README.md index 86416df..fdfb6a3 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,15 @@ A small Angular app that shows how **atomic design** makes a frontend cheap to build, reuse and extend. The domain is the **BIG-register** self-service portal (the Dutch -register of healthcare professionals, run by CIBG). It looks like an NL Design System -app, branded **Rijkshuisstijl**, and demonstrates a robust **async-state pattern** where -the UI can never reach an inconsistent state. +register of healthcare professionals, run by CIBG). It is styled with the **CIBG +Huisstijl** design system (a customized Bootstrap 5.2 build, vendored — see ADR-0003), +and demonstrates a robust **async-state pattern** where the UI can never reach an +inconsistent state. > Demo / POC — **no real login** (DigiD is faked) and synthetic seed data. The > business rules and data *are* served by a real **ASP.NET Core backend** > (`backend/`) consumed through a generated typed client, so the BFF + DDD design -> is demonstrable, not hand-waved. Free **Fira Sans** stands in for the licensed +> is demonstrable, not hand-waved. A system-font stack stands in for the licensed > Rijksoverheid font and a text wordmark for the logo. --- @@ -70,9 +71,9 @@ the folder structure *is* the hierarchy (`src/app/`): | **templates/** | page skeletons that define layout; content is projected in | `page-layout` (header/content/footer chrome), `page-shell` (back-link + heading + intro + content) | | **pages/** | a template filled with real data | `login`, `dashboard`, `registration-detail`, `herregistratie` | -Each atom is a thin Angular standalone component that applies the Utrecht/Rijkshuisstijl -CSS classes — so the design system does the visual work and we only own a small, typed -component API. +Each atom is a thin Angular standalone component that applies CIBG Huisstijl +(Bootstrap 5.2) CSS classes (`btn`, `form-control`, `card`, …) — so the design system +does the visual work and we only own a small, typed component API. --- @@ -102,10 +103,14 @@ were all reused. That's the payoff: new screens cost almost nothing. Every page used to repeat its own back-link + heading + intro markup. `page-shell` captures that once; pages now read like `…`. -**4. Theming is one import.** -The look comes from `@rijkshuisstijl-community/design-tokens`. `src/styles.scss` imports -the `lintblauw` palette and applies `rhc-theme lintblauw` on ``. Swap the palette -import to re-theme the whole app — no component changes. +**4. Theming is one stylesheet + a token bridge.** +The look comes from **CIBG Huisstijl**, vendored under `public/cibg-huisstijl/` and +loaded via a `` in `index.html`; `body.brand--cibg` activates CIBG's +robijn/lintblauw palette. `src/styles.scss` is a **token bridge** mapping the app's +semantic `--rhc-*` token vocabulary onto CIBG/`--bs-*` values, so components keep +referencing tokens — swap the vendored CSS and re-point the bridge to re-theme the +whole app, no component changes (ADR-0003). `npm run check:tokens` fails the build +on any hardcoded colour outside that bridge. --- @@ -158,8 +163,9 @@ degrade to an instant navigation. - Angular 22 (standalone components, signals, `httpResource`, view transitions, control flow `@if/@for`). -- Styling: `@rijkshuisstijl-community/{design-tokens,components-css}` (Utrecht + RHC CSS, - pre-themed Rijkshuisstijl) — imported in `src/styles.scss`, no hand-written theme. +- Styling: **CIBG Huisstijl** (customized Bootstrap 5.2) vendored in + `public/cibg-huisstijl/`, loaded via ``; `src/styles.scss` holds the + `--rhc-*` → CIBG/`--bs-*` token bridge (ADR-0003). No styling npm dependency. - Data: ASP.NET Core backend (`backend/`, in-memory seeded) exposed via an OpenAPI contract; the FE consumes an **NSwag-generated** typed client (`npm run gen:api`). The `?scenario=` toggle (`shared/infrastructure/scenario.interceptor.ts`) is @@ -179,4 +185,5 @@ We do **not** run `npm audit fix --force`: its proposed fix downgrades Angular 2 ### Deliberately out of scope (POC) Real auth/DigiD, real BRP/DUO upstreams, a database/persisted audit store, i18n, -NgRx, licensed Rijkshuisstijl fonts/logo. (The backend itself *is* implemented.) +NgRx, licensed RO/Rijks fonts + logo (system-font stack; text wordmark). (The backend +itself *is* implemented.) diff --git a/src/docs/atomic-design.mdx b/src/docs/atomic-design.mdx index 9594ee4..8d219d0 100644 --- a/src/docs/atomic-design.mdx +++ b/src/docs/atomic-design.mdx @@ -2,6 +2,7 @@ import { Meta, Canvas } from '@storybook/addon-docs/blocks'; import * as ButtonStories from '../app/shared/ui/button/button.stories'; import * as FormFieldStories from '../app/shared/ui/form-field/form-field.stories'; import * as PageShellStories from '../app/shared/layout/page-shell/page-shell.stories'; +import * as DocumentUploadStories from '../app/shared/ui/upload/document-upload/document-upload.stories'; @@ -16,7 +17,7 @@ atoms — that is the whole point: fewer things to understand, nothing bespoke p ['Templates', 'shared/layout', 'shell, page-shell, wizard-shell — the page skeleton', '#1e3a5f'], ['Organisms', 'shared/ui/upload/document-upload …', 'self-contained sections that own a bit of behaviour', '#2a5a8a'], ['Molecules', 'shared/ui/form-field, async …', 'a label + control + error, grouped', '#3f7cb5'], - ['Atoms', 'shared/ui/button, text-input …', 'thin wrappers over Utrecht/RHC CSS classes', '#6aa6d8'], + ['Atoms', 'shared/ui/button, text-input …', 'thin wrappers over CIBG Huisstijl (Bootstrap) CSS classes', '#6aa6d8'], ].map(([name, where, why, bg], i) => (
{name} — {why} @@ -39,7 +40,7 @@ story below; click through to the sidebar entries to explore every variant. ### Atom — `button` -A thin wrapper: we own a typed `variant` input, the RHC CSS owns the pixels. +A thin wrapper: we own a typed `variant` input, the CIBG CSS owns the pixels. @@ -53,8 +54,9 @@ composes atoms; it adds no new visual primitives of its own. ### Organism — `document-upload` `shared/ui/upload/document-upload` composes molecules (a file input, status banner, -progress bar, chips) into a section that owns real upload behaviour. It has no story yet -(Track A backlog); read it at `src/app/shared/ui/upload/document-upload/`. +progress bar, chips) into a section that owns real upload behaviour. + + ### Template — `page-shell`