033d6f0317
Atoms/molecules/organisms/templates/pages composing the NL Design System (Utrecht) CSS themed Rijkshuisstijl via @rijkshuisstijl-community tokens. Login -> dashboard -> registration detail, mock JSON over HttpClient, Storybook organized by atomic layer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
2.1 KiB
Markdown
49 lines
2.1 KiB
Markdown
# BIG-register Self Service Portal — Atomic Design POC
|
|
|
|
An Angular POC showing how **atomic design** makes a frontend cheap to build and
|
|
reuse. Domain: the **BIG-register** self-service portal (NL register of healthcare
|
|
professionals). Styled with the **Rijkshuisstijl** via the NL Design System /
|
|
Utrecht component CSS — no hand-written theme.
|
|
|
|
## The atomic-design story (folder = layer)
|
|
|
|
```
|
|
src/app/
|
|
atoms/ button · text-input · heading · link · alert · status-badge
|
|
molecules/ form-field (label+input+error) · data-row
|
|
organisms/ site-header · site-footer · login-form · registration-summary
|
|
registration-table · change-request-form
|
|
templates/ page-layout (header + content + footer)
|
|
pages/ login · dashboard · registration-detail
|
|
core/ models · registration.service (HttpClient → public/mock/*.json)
|
|
```
|
|
|
|
**Reuse in action** — the same building blocks appear everywhere:
|
|
- `page-layout` wraps all three pages.
|
|
- `site-header` + `site-footer` render on every page.
|
|
- `form-field` + `text-input` + `button` are shared by the login form *and* the
|
|
change-request form.
|
|
- `status-badge` shows on both the dashboard and the detail page.
|
|
|
|
Adding a new page is just composing existing organisms inside the layout — see
|
|
`pages/` for how little code each page is.
|
|
|
|
## Styling / theming
|
|
|
|
`@rijkshuisstijl-community/design-tokens` + `@rijkshuisstijl-community/components-css`
|
|
provide Rijkshuisstijl-themed Utrecht components as CSS. The theme is applied by the
|
|
`rhc-theme lintblauw` classes on `<body>` (see `src/index.html`). Atoms are thin
|
|
Angular wrappers that apply these CSS classes — so the design system does the visual
|
|
work and we only own the component API.
|
|
|
|
> POC shortcuts: free **Fira Sans** stands in for the licensed Rijksoverheid font, a
|
|
> text wordmark stands in for the logo, login is mocked, and data is static JSON.
|
|
|
|
## Run
|
|
|
|
```bash
|
|
npm install
|
|
npm start # ng serve → http://localhost:4200 (login → dashboard → detail)
|
|
npm run storybook # component library, organized by atomic layer
|
|
```
|