Skip to content

Commit b25d232

Browse files
rogier-barendregtrogier-barendregt
authored
Merge pull request #6 from MinBZK/opschonen-prototype-onderzoeken-maart-2026
↩️ Tijdelijke pre-flow voor onderzoeken verwijderd 🧼 Eerste opschoning prototype post-maart 26 onderzoeken
2 parents 6a3b861 + 147c6b5 commit b25d232

File tree

29 files changed

+893
-1135
lines changed

29 files changed

+893
-1135
lines changed

‎README.md‎

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# MOx design systeem
1+
# MOZa proof of concept prototype
22

3-
## MOx omgeving installeren
3+
## Omgeving installeren
44

55
1. Clone deze repository lokaal
66
2. [Installeer Style Dictionary](https://styledictionary.com/getting-started/using_the_cli/#installation) in `/style-dictionary`, deze vertaald design tokens naar CSS variabelen
77
3. [Instaleer SD-Transforms](https://www.npmjs.com/package/@tokens-studio/sd-transforms#installation) in `/style-dictionary`, dit is een pakketje met extra transformatie-opties die nodig zijn om design tokens uit Figma [Tokens Studio](https://docs.tokens.studio/) te vertalen
88

9-
## Eleventy installeren
9+
## Statische site-generator installeren
1010

1111
[Eleventy](https://www.11ty.dev/) wordt gebruikt om herhalende componenten zoals headers en footers als includes te beheren. Installeer Eleventy in de root van het project:
1212

@@ -16,7 +16,7 @@ npm install @11ty/eleventy
1616

1717
### Pagina's bouwen
1818

19-
Om de HTML pagina's te bouwen voer je dit commando uit vanuit de root van het project:
19+
Om de HTML pagina's te bouwen voer je het commando uit vanuit de root van het project:
2020

2121
``` bash
2222
npx @11ty/eleventy
@@ -40,10 +40,10 @@ Herhalende componenten staan in de `_includes` map:
4040

4141
| Bestand | Beschrijving |
4242
| ------- | ------------ |
43-
| `base.njk` | Basis layout met `<html>`, `<head>` en `<body>` |
44-
| `header-rijksoverheid.njk` | Standaard header met logo en optionele navigatie |
45-
| `header-overheid.njk` | MijnOverheid Zakelijk header |
46-
| `footer-overheid.njk` | MijnOverheid Zakelijk footer |
43+
| `base.njk` | Basis layout |
44+
| `header-rijksoverheid.njk` | Rijksoverheid header met logo en navigatie |
45+
| `header-overheid.njk` | Overheid header header met logo |
46+
| `footer-overheid.njk` | Overheid footer |
4747

4848
Elke pagina selecteert zijn layout en opties via front matter bovenaan het bestand:
4949

@@ -69,6 +69,51 @@ npm install
6969
| `npm run dev` | Eleventy serve + token watcher | Beide parallel, met live reload |
7070
| `npm run build` | Tokens + Eleventy | Volledige productie-build |
7171
| `npm run tokens` | Alleen Style Dictionary | Handmatig tokens bouwen |
72+
| `npm run storybook` | Storybook dev server | Componentenbibliotheek lokaal bekijken |
73+
| `npm run build-storybook` | Storybook productie-build | Statische Storybook-site bouwen |
74+
75+
## Storybook
76+
77+
[Storybook](https://storybook.js.org/) is de omgeving om afzonderlijke componenten te bekijken, testen en documenteren.
78+
79+
### Lokaal opstarten
80+
81+
``` bash
82+
npm run storybook
83+
```
84+
85+
Storybook is vervolgens te bekijken op `http://localhost:6006`.
86+
87+
### Stories
88+
89+
De stories staan in de `stories/` map. Elk bestand beschrijft één component en toont varianten:
90+
91+
| Bestand | Beschrijving |
92+
| ------- | ------------ |
93+
| `Knop.stories.js` | Knopvarianten (primair, secundair, negatief) |
94+
| `Link.stories.js` | Linkvarianten |
95+
| `Tekstinvoer.stories.js` | Tekstinvoervelden |
96+
| `Selectie.stories.js` | Selectievakjes en keuzerondjes |
97+
| `Feedback.stories.js` | Notificaties en foutmeldingen |
98+
| `Navigatie.stories.js` | Navigatiecomponenten |
99+
| `Typografie.stories.js` | Koppen en tekststijlen |
100+
| `Tabel.stories.js` | Tabelopmaak |
101+
102+
### Publiceren naar Chromatic
103+
104+
[Chromatic](https://www.chromatic.com/) host Storybook online en biedt visuele regressietests. Eenmalige installatie:
105+
106+
``` bash
107+
npm install --save-dev chromatic
108+
```
109+
110+
Publiceren:
111+
112+
``` bash
113+
npx chromatic --project-token=<jouw-token>
114+
```
115+
116+
Het project token vind je na het aanmaken van een project op [chromatic.com](https://www.chromatic.com/). Chromatic bouwt en uploadt Storybook automatisch — je hoeft zelf niets te builden.
72117

73118
## Design tokens vertalen naar CSS variabelen
74119

‎_includes/header-overheid.njk‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<header>
2+
23
<figure class="logo">
34
<a href="/">
45
<img src="{{ '/assets/images/beeldmerk-rijksoverheid.svg' | url }}" alt="Naar de homepage van MijnOverheid Zakelijk">
56
</a>
67
</figure>
8+
79
<div class="page-head">
810
<span class="page-title">MijnOverheid Zakelijk</span>
911
<div class="user-menu">
@@ -26,10 +28,6 @@
2628
</div>
2729

2830
<!-- Proof of concept banner -->
29-
<!-- <a class="temp-moza-poc-banner" href="https://www.mijnoverheidzakelijk.nl/">Proof of Concept</a> -->
30-
<a class="temp-moza-poc-banner">Proof of Concept</a>
31-
32-
<a href="#" class="side-nav-secret-toggle" aria-label="Toggle navigatie" onclick="event.preventDefault(); const visible = sessionStorage.getItem('subnav-preview') === 'visible' ? '' : 'visible'; sessionStorage.setItem('subnav-preview', visible); document.querySelectorAll('.temp-moza-subnav-preview').forEach(el => el.classList.toggle('hidden', !visible));"></a>
33-
<script>document.addEventListener('DOMContentLoaded', function() { if (sessionStorage.getItem('subnav-preview') !== 'visible') document.querySelectorAll('.temp-moza-subnav-preview').forEach(el => el.classList.add('hidden')); });</script>
34-
31+
<a class="temp-moza-poc-banner" href="https://www.mijnoverheidzakelijk.nl/">Proof of Concept</a>
32+
3533
</header>

‎_includes/side-nav-overheid.njk‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,14 @@
33
<button class="side-nav-toggle" aria-expanded="false" aria-controls="side-nav-menu">Menu</button>
44
<ul id="side-nav-menu">
55
{% for item in subNav %}
6-
<li>
6+
<li{% if item.class %} class="{{ item.class }}"{% endif %}>
77
<a href="{{ item.url | url }}"{% if page.url == item.url or subNavActive == item.url %} aria-current="page"{% endif %}>
88
{% if item.icon %}{% icon item.icon %}{% endif %}
99
{{ item.label }}
1010
{% if item.badge %}<span class="badge">{{ item.badge }}</span>{% endif %}
1111
</a>
1212
</li>
13-
{% if loop.index == 3 %}{% include "side-nav-temp.njk" ignore missing %}{% endif %} <!-- tijdelijk, voor de preview van functionaliteit tijdens gebruikers onderzoeken -->
1413
{% endfor %}
1514
</ul>
1615
</nav>
17-
<script>
18-
document.querySelector(".side-nav-toggle").addEventListener("click", function () {
19-
const expanded = this.getAttribute("aria-expanded") === "true";
20-
this.setAttribute("aria-expanded", !expanded);
21-
});
22-
</script>
2316
</aside>

‎_includes/side-nav-temp.njk‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎_site/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,9 @@
4141
</style>
4242
</head>
4343
<body>
44-
<!-- <p>
44+
<p>
4545
U wordt doorgestuurd naar
4646
<a href="/moza/">MijnOverheid Zakelijk</a>.
47-
</p> -->
48-
<a class="mozres-link-1" href="/gebruikersonderzoek/inloggen.html" aria-label="Inloggen bij MijnOverheid Zakelijk"></a>
49-
<a class="mozres-link-2" href="/gebruikersonderzoek/inloggen.html" aria-label="Inloggen"></a>
47+
</p>
5048
</body>
5149
</html>

0 commit comments

Comments
 (0)