We hebben deze zomer niet stilgezeten, maar in het zonnetje gewerkt aan het verbeteren van de documentatie en vindbaarheid van onze componenten.
Documentatie per component
De documentatie van onze componenten wordt langzaam opgebouwd uit overwegingen voor toegankelijkheid, bruikbaarheid en functionaliteit. Ons eerste gepubliceerde voorbeeld hiervan is te bekijken op de nieuwe website van het NL Design System. We hebben al hele waardevolle feedback gekregen van Pieternel de Jonge (consultant en onderzoeker digitale toegankelijkheid), dus er komt binnenkort een nog een mooiere versie aan.
Daarnaast zijn we bezig geweest met: typography, skip link, link, form-label, breadcrumb navigation en table. Omdat wij publiek werken is alles alvast te bekijken via Github.
Thema storybook uitgebreid
We werken aan een uitbreiding van het thema Storybook, waar we per ontwikkelde component de thema’s van verschillende organisaties laten zien. Zo kunnen wij zien welke design tokens er nodig zijn om alle huisstijlen te ondersteunen én hebben we een hele goeie basis om visuele regressie tests op uit te voeren.
Daarnaast zijn we bezig om de design tokens ook gelijk te laten zien en interactief te maken. Een voorbeeld van hoe dat eruit gaat zien is de button van Utrecht.
Visuele regressietests bij gemeenten Utrecht en Den Haag
Visuele regressietests zijn tests die valideren dat een wijziging in de code (componentenbibliotheek in dit geval) niet altijd leiden tot visuele wijzigingen
In de praktijk is het veel te arbeidsintensief, omdat je dan per wijziging de oude en de nieuwe versie van alle componenten naast elkaar moet houden en dan de verschillen moet zoeken. Vooral voor een componentenbibliotheek met tientallen componenten is dat haast niet te doen.
Daarom maken we sinds deze zomer gebruik ven Chromatic voor visuele regressietests bij de componentenbibliotheek van gemeenten Utrecht én Den Haag. Chromatic sponsort het NL Design System hiervoor met 35.000 screenshots per maand.
Meer weten?
Heb jij nog specifieke kennis over een component, heeft jouw organisatie super goede documentatie die wij kunnen (her)gebruiken als inspiratie of ga je binnenkort een component ontwikkelen/ontwerpen waar je onze expertise voor kunt gebruiken? Laat het ons weten!
Dit artikel is geschreven door Yolijn van der Kolk – kernteamlid NL Design System
