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
- Klaar om van de backlog opgepakt te worden
- Community
- Door de community gebouwd volgens NLDS richtlijnen
- Candidate
- NLDS component, maar is nog in ontwikkeling
- Hall of Fame
- NLDS component volgens onze Definition of Done
Help wanted
Dit component bestaat nog niet, maar de rationale is duidelijk, elke organisatie die hem nodig heeft kan hem ontwikkelen volgens NL Design System architectuur:
- Staat in de publieke Backlog van NL Design System.
- Rationale opgesteld voor naam en doel.
- Screenshots verzameld voor diverse huisstijlen, van alle belangrijke varianten en states.
- Varianten van het component opgeschreven en beschreven wanneer je ze gebruikt.
- Kernteam en community verwachten dat het component voor meerdere organisaties inzetbaar kan zijn.
- Rationale is onderbouwd door gebruikersonderzoek (eigen of van anderen).
- Doel uit de rationale is duidelijk onderscheidend van andere componenten.
- Rationale is door het kernteam bevestigd.
- Vindbaar op de NL Design System website.
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 het component naast alle 'Help wanted' criteria aan de volgende voorwaarden voldoen:
- Implementatie van 1 of meer varianten voldoen aan de rationale.
- Code is publiek beschikbaar via versiebeheer, zoals git.
- CSS is gepubliceerd in een publieke package registry, zoals NPM
- Tellen welke varianten veel gebruikt worden.
- Varianten hebben voldoende design tokens om de huisstijlen uit de verzamelde screenshots mogelijk te maken.
- Component heeft de EUPL-1.2 licentie.
- Documentatie heeft de Creative Commons 0 licentie (CC0).
- Als HTML/CSS component beschikbaar.
- API's hebben een prefix van de verantwoordelijke organisatie.
- Beschikbaar in de publieke Storybook van de verantwoordelijke organisatie.
- 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.
- Storybook en Figma links zijn toegevoegd aan de component index.
- Beschikbaar in de NL Design System Component Assessment (Figma).
- Status is aangepast naar Community.
- Component is in een Heartbeat, Slack en in de nieuwsbrief geïntroduceerd.
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 het 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. Het component moet mogelijk nog extra goed getest en stabiel gemaakt worden. Omdat het 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 het component in code wat betreft varianten, states, design tokens en naamgeving.
- Aliassen van alternatieve namen voor het component zijn vastgelegd in documentatie.
- Anatomie van het 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 is aangepast 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. Het 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 het component in context is goed gedocumenteerd, zodat developers en designers in staat zijn het component op de juiste manier in te zetten binnen hun eigen project. Ook kan je ervan uitgaan dat de API's van het 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 is aangepast naar Hall of Fame. 🍾
Bekijk de status op het projectbord voor de Hall of fame componenten.