eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: README + Storybook mdx describe the CIBG Huisstijl setup

Browse Source 
Replace stale @rijkshuisstijl-community package/theming claims with the
vendored CIBG Huisstijl + token-bridge reality (ADR-0003); system-font
stack instead of Fira Sans; embed the now-existing document-upload story
in atomic-design.mdx.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Edwin van den Houdt
2026-07-03 10:44:00 +02:00
parent cf44bda0ce
commit 922f9ec8cf
2 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/docs/atomic-design.mdx
View File

@@ -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';
<Meta title="Foundations/Atomic Design" />
@@ -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) => (
<div key={name} style={{ background: bg, color: '#fff', padding: '0.75rem 1rem', borderRadius: '6px', marginLeft: `${i * 1.5}rem` }}>
<strong>{name}</strong> <span style={{ opacity: 0.85 }}>— {why}</span>
@@ -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.
<Canvas of={ButtonStories.Primary} />
@@ -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.
<Canvas of={DocumentUploadStories.Default} />
### Template — `page-shell`