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.
Doelen
- Teams aan elkaar koppelen die hetzelfde willen.
- In een vroeg stadium acceptatiecriteria vastleggen met kennis uit de community en het kernteam.
- Nieuwe ideeën kunnen meegenomen worden door de community wanneer zij gebruikersonderzoek doen.
- Bewijs verzamelen dat een onderdeel door meerdere organisaties en producten gebruikt kan worden.
- Zeker stellen dat een onderdeel aan de toegankelijkheidseisen kan voldoen en gebruiksvriendelijk kan zijn. Anders zal het als "Discouraged" aangemerkt worden.
Definition of Done
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.
Doelen
- Teams kunnen met vertrouwen een onderdeel van elkaar gebruiken.
- Teams kunnen zelfstandig aan de slag zonder te hoeven wachten op het kernteam.
- Teams kunnen concurrerende versies hebben van hetzelfde onderdeel.
- Validatie dat een onderdeel door meerdere organisaties en producten gebruikt wordt.
- Teams kunnen op elkaars onderdeel doorontwikkelen zodat de overlap duidelijk wordt voor doorontwikkeling naar "Candidate".
- Innovatie op bestaande NL Design System "Candidate" of "Hall of Fame" mogelijk door "Community" uitbreiding op het bestaande onderdeel.
Definition of Done
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.
Doelen
- Teams kunnen met vertrouwen het onderdeel van NL Design System gebruiken.
- Gedeeld ownership tussen kernteam en meerdere andere teams.
- Voorstel voor een onderdeel zonder controversiële delen. Verschillende ideeën in de community teruggebracht tot één gemene deler.
- Controversiële delen met "Community" status kunnen in de community blijven bestaan of worden aangepast naar een aanvulling op het nieuwe "Candidate" onderdeel.
- Zichtbaarheid geven tijdens "request for comments" periode. Zo kunnen essentiële aanvullingen en aanpassingen getest worden voordat het onderdeel volledig stabiel moet zijn.
- Bruikbaar voor meeste huisstijlen in de publieke sector.
- Naamgeving in lijn met conventies van bestaande NL Design System "Candidate" en "Hall of Fame" onderdelen.
- Robuust maken. Onderdeel kan in verschillende omgevingen ingezet worden en heeft een duidelijke beschrijving wanneer het van toepassing is.
- Onderdeel is behoorlijk stabiel en er zijn vanaf nu nog weinig veranderingen nodig.
- Best effort op toegankelijkheid. Specialisten uit het kernteam hebben het onderdeel gevalideerd en eventuele documentatie en verbeteringen zijn toegevoegd.
- Voor componenten: Samenwerking tussen developers en designers is mogelijk gemaakt.
Definition of Done
- 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.
Doelen
- Teams kunnen met garanties het onderdeel van NL Design System gebruiken.
- Goed gedocumenteerd.
- Veilig om vaak te updaten.
- Goede versionering.
- Grondig getest.
- Makkelijk in gebruik.
- Garantie op toegankelijkheid.
- Garantie op bruikbaarheid.
- Voor componenten zijn automatische tests beschikbaar om regressies te voorkomen.
- Richtlijnen zijn onderbouwd met referenties naar gebruikersonderzoek en toegankelijkheidsaudits.
Definition of Done
- 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.