Definition of Done
Het NL Design System kent voor elke component vier verschillende statussen: ‘Help Wanted’, ‘Community’, ‘Candidate’ en ‘Hall of Fame’. Voor elk van deze statussen kun je een Definition of Done opstellen, waarbij het ultime doel van de ‘Hall of Fame’ status helemaal af is. Een ‘Hall of Fame’ component moet dus aan alle checks voldoen van ‘Help Wanted’ tot en met ‘Hall of Fame’.
Estafettemodel
De componenten van NL Design System worden met een estafette aanpak gemaakt. Daarom kan een component een van de volgende statussen hebben:
- Help Wanted
- Voorkomt misverstanden door informatie te verzamelen zoals naam, beschrijving en voorbeelden. Zo heb je het altijd over hetzelfde.
- Community
- Voorkomt dubbel werk doordat de ene organisatie beschikbaar maakt wat ze zelf nodig hebben en andere organisaties dit hergebruiken en verbeteren.
- Candidate
- Zorgt voor draagvlak door feedback te vragen op een voorstel op basis van de bijdragen uit de community.
- Hall of Fame
- Bewezen en stabiel, toegankelijk, gebruiksvriendelijk en herbruikbaar.
Help Wanted
Dit component of deze variatie bestaat nog niet, maar het nut ervan is duidelijk, elke organisatie die hem nodig heeft kan hem ontwikkelen volgens NL Design System architectuur:
1. Duidelijk waar het over gaat
- Naam bepaald op basis van NL Design System naamgeving.
- Component kort beschreven.
- Afbeelding gemaakt om de component visueel duidelijk te maken.
- Aangemaakt als een GitHub Discussion.
- Staat in de publieke backlog van NL Design System.
- Bewijs verzameld dat de component algemeen bruikbaar is.
- Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
- Naam en doel van benodigde varianten beschreven.
2. Besluit of het onderdeel van NL Design System moet worden
- Nut van component is onderbouwd door gebruikersonderzoek (eigen of van anderen).
- Nut van component is door het kernteam bevestigd.
3. Kernteam zet component op Help Wanted
- Vindbaar op de NL Design System website.
- Status bijgewerkt naar Help Wanted.
Bekijk de status op het projectbord voor de Help Wanted componenten.
Community
Dit component bestaat in de community, op één of meer plekken. Om bij NL Design System als ‘Community component’ genoemd te worden moet de component naast alle ‘Help Wanted’ criteria aan de volgende voorwaarden voldoen:
1. Component voldoet aan NL Design System architectuur
- Beschikbaar in CSS.
- Publiek in beschikbaar in Storybook.
- Implementatie voldoet aan naam en doel uit de GitHub Discussion.
- Implementatie heeft minimaal kleur en typografie beslissingen met design tokens geïmplementeerd.
- API’s zoals design tokens hebben een prefix van de verantwoordelijke organisatie.
- Gebruikte design tokens voldoen aan naamgeving conventie van NL Design System.
- EUPL-1.2 licentie toegepast.
- Documentatie heeft de Creative Commons 0 licentie (CC0).
2. Kernteam maakt component beschikbaar voor hergebruik
- Beschikbaar in de Storybook met alle NL Design System thema’s.
- Visuele regressietests zijn beschikbaar in de Thema Storybook.
- Beschikbaar in de NL Design System Figma bibliotheek.
- Beschikbaar in de NL Design System Component assessment (Figma).
3. Kernteam zet component op Community
- Status bijgewerkt naar Community.
- Informatie van de component bijgewerkt op nldesignsystem.nl
- Gebruik van component uit de community gepromoot.
Bekijk de status op het projectbord voor de Community componenten.
Candidate
Dit component is opgenomen in de @nl-design-system-unstable organisatie. Het kernteam verwacht dat de component uiteindelijk een Hall of Fame status krijgt, maar kan nog niet garanderen dat API’s niet wijzigen of er onverhoopt een ander vergelijkbaar component voor in de plaats komt.
De component moet mogelijk nog extra goed getest en stabiel gemaakt worden.
Omdat de component door het kernteam onderhouden wordt voldoet het, naast de meeste Community DoD eisen, al wel aan veel meer criteria voor stabiel hergebruik.
- Ingezet door 2 of meer organisaties met verschillende huisstijlen.
- De NL Design System Figma bibliotheek komt overeen met de implementatie van de component in code wat betreft varianten, states, design tokens en naamgeving.
- Aliassen van alternatieve namen voor de component zijn vastgelegd in documentatie.
- Anatomie van de component is vastgelegd.
- Component is, waar nodig, versimpeld of opgesplitst. Zodat er één of meerdere componenten over blijven met een duidelijke use case en documentatie.
- Geen organisatie specifieke API’s meer, alle API’s zijn gebaseerd op een gemeenschappelijke use case.
- API volgt conventies en is geprefixed met ‘nl’.
- Design tokens volgen conventies en zijn geprefixed met ‘nl’.
- Hergebruik van logische common tokens is geïmplementeerd om theming makkelijk te houden.
- Alle design tokens zijn algemeen nuttig voor de thema’s van bestaande publieke organisaties.
- Beschikbaar in de NL Design System Storybook.
- Beschikbaar in de NL Design System Figma bibliotheek.
- Component heeft dezelfde documentatie op de website en Storybook over gebruik.
- Figma verwijst naar de documentatie op de website.
- Storybook stories, Figma voorbeelden en unit tests hebben coverage van alle features.
- Verwijzing beschikbaar naar extern gebruikersonderzoek die tot de keuze van dit component leiden.
- Accessibility en inclusie documentatie beschikbaar voor de overwegingen die van toepassing zijn.
- Semantiek (roles, names, states in HTML/ARIA) is goedgekeurd door het kernteam.
- Implementatie en documentatie is op toegankelijkheid getest door leden van het kernteam.
- Getest op geschiktheid voor internationalisatie.
- Component kan omgaan met verschillende soorten content: bijvoorbeeld korte tekst, veel woorden, lange woorden, of juist ontbrekende content.
- Codebase gebruikt linting en automatische code-formatting met Prettier volgens NL Design System configuraties.
- Gepubliceerd op npm in de scope:
@nl-design-system-unstable. - Changelog wordt gepubliceerd bij nieuwe versies.
- Documentatie is getest bij de doelgroepen en goed bevonden.
- Status bijgewerkt naar naar Candidate.
Bekijk de status op het projectbord voor de Candidate componenten.
Hall of Fame
Een component met deze status is bewezen door gebruikname in productie bij ten minste twee verschillende organisaties. De component is daarmee in gebruik getest, zowel door developers en designers als door eindgebruikers en heeft een toegankelijkheids audit succesvol doorlopen.
Het gebruiksvriendelijk en toegankelijk gebruik van de component in context is goed gedocumenteerd, zodat developers en designers in staat zijn de component op de juiste manier in te zetten binnen hun eigen project. Ook kan je ervan uitgaan dat de API’s van de component, zoals design tokens en naamgeving stabiel blijven. Daarnaast worden updates vanaf nu voorzien van duidelijke changelogs en semantische versies die breaking changes goed communiceren.
- Do’s en don’ts als documentatie beschikbaar.
- Meegenomen in gebruikersonderzoek door de community of kernteam en inzichten beschikbaar.
- Als HTML/CSS component beschikbaar.
- Als Webcomponent beschikbaar.
- Als React component beschikbaar.
- API’s zijn opgenomen in unit tests.
- Bij meerdere organisaties toegankelijk volgens audit.
- Beschikbaar in npm scope:
@nl-design-system. - Semantic versioning is goed geregeld.
- Geversioneerd in de NL Design System Figma bibliotheek.
- Changelog voor Figma component is beschikbaar.
- Changelog voor coded component is beschikbaar.
- Richtlijnen voor invulling design tokens beschikbaar.
- Richtlijnen voor redacteuren beschikbaar.
- Risico’s met betrekking tot beveiliging (security) beschikbaar.
- Risico’s met betrekking tot privacy (AVG) beschikbaar.
- Succesvol getest met afnemers van design system: designers.
- Succesvol getest met afnemers van design system: developers.
- Succesvol getest met afnemers van design system: redacteuren.
- Community (2+ organisaties) is geswitcht van eigen naar candidate component.
- Status bijgewerkt naar naar Hall of Fame. 🍾
Bekijk de status op het projectbord voor de Hall of Fame componenten.