Documentation: Definition of done

[usethetics]

Document definition of done for a component; which checks does a component have to pass in order to be a candidate for release?

[usethetics]

Den Haag’s definition of done

Definition of Done

• Is het component in lijn met de huisstijl? (link naar design tokens)
• Is er documentatie aanwezig die het gedrag van het component beschrijft?
• Voldoet het component aan de WCAG 2.1 richtlijnen? (link naar WCAG 2.1)
• Zijn er risico's m.b.t. beveiliging (security)?
• Zijn er risico's m.b.t. privacy (AVG)?
• Werkt het component responsive (minimal 320 pixels)?
• Is het component getest in de laatste versie van:
  • IE, Edge, Firefox, Chrome op Windows
  • Safari, Chrome op Mac OSX
  • Safari op iOS
  • Chrome op Android
• Is er een codereview gedaan?
• Is de changelog aangepast? (link naar changelog)
• Is er documentatie aanwezig die omschrijft welk problem het component op lost?

[Yolijn]

Op basis van onze brainstorm in Miro:

---

NL Design System 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.

Help wanted

Dit component bestaat nog niet, maar een component wordt genoemd als 'help wanted' wanneer:

• [ ] Staat in de publieke Backlog van NL Design System
• [ ] Er is een rationale opgesteld wat het component is en waarom het nodig is
• [ ] Kernteam en community verwachten dat het component voor meerdere organisaties inzetbaar kan zijn
• [ ] De rationale is onderbouwd door gebruikersonderzoek (eigen of van andere design systems)
• [ ] De rationale is door het kernteam gereviewed

Community

Dit component bestaat in de community, om bij NL Design System als 'Community component' genoemd te worden moet het component naast alle 'Help wanted' criteria aan de volgende voorwaarden voldoen:

• [ ] Component implementatie voldoet aan de rationale
• [ ] Component is geclaimed door de organisatie in de publieke backlog
• [ ] Component heeft de EUPL-1.2 licentie
• [ ] Component UX en A11y documentatie heeft de Creative Commons 0 licentie (CC0)
• [ ] Component API's zijn geprefixed met de prefix van de verantwoordelijke organisatie
• [ ] Codebase van de component gebruikt linting en automatische code-formatting zoals Prettier
• [ ] Component is vindbaar op de NL Design System website
• [ ] Component staat in Storybook van de verantwoordelijke organisatie
• [ ] Component is opgenomen in de Storybook met alle NL Design System thema's
• [ ] Component is beschikbaar in de Figma bibliotheek van de verantwoordelijke organisatie
• [ ] Component is besproken in het UX-overleg en/of tijdens de heartbeat en is klaar om door de community gebruikt te worden
• [ ] Component voldoet aan de Definition of Done van de verantwoordelijke organisatie
• [ ] Visuele regressietests zijn beschikbaar voor het component in de thema-storybook

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 in de plaats komt. Omdat het component wel door het kernteam onderhouden wordt voldoet het naast de meeste Community DoD eisen al wel aan veel meer criteria voor stabiel hergebruik:

• [ ] Community component is ingezet door 2 of meer organisaties
• [ ] Figma component in de NL Design System bibliotheek is in lijn met het component in code
• [ ] Aliassen van (niet) geimplementeerde alternatieve componenten zijn vastgelegd in documentatie
• [ ] Verwijzing naar extern gebruikersonderzoek die tot de keuze van dit component leiden
• [ ] Component heeft documentatie in Storybook over hoe het te gebruiken
• [ ] Accessibility/inclusie toolkit documentatie is beschikbaar voor de overwegingen die op dit component van toepassing zijn
• [ ] Component is geschikt voor internationalisatie
• [ ] Component kan omgaan met verschillende soorten content, zoals heel veel of juist heel weinig tekst etc.
• [ ] Component implementatie is op toegankelijkheid getoetst door leden van het kernteam
• [ ] Semantiek van het component is goedgekeurd door het kernteam
• [ ] Design tokens en API's zijn geprefixed met nl
• [ ] Design tokens volgen conventies
• [ ] Hergebruik van logische common tokens is geïmplementeerd om theming makkelijk te houden.
• [ ] API volgt conventies
• [ ] NPM scope: @nl-design-system-unstable
• [ ] Het component heeft geen organisatie specifieke API's meer, alle API's zijn gebaseerd op een gemeenschappelijke usecase
• [ ] Alle design tokens zijn algemeen nuttig voor de thema's van bestaande publieke organisaties
• [ ] Het component is geen monster component waar de documentatie of API's veel te complex zijn. Als nodig wordt de code van het community component opgeknipt en/of versimpeld
• [ ] Component werkt in meerdere thema's
• [ ] Component heeft regressietests voor ten minste 2 thema's
• [ ] Changelog wordt gegenereerd
• [ ] Component is in een heartbeat, andere publieke demo of nieuwsbrief getoond

Hall of fame

• [ ] Toegankelijk volgens audit
• [ ] algemeen genoeg
• [ ] Richtlijnen voor design tokens invullen
• [ ] Richtlijnen voor toegankelijkheid inzetten
• [ ] Documentatie: Do's en don'ts
• [ ] Documentatie eventueel slecht gebruik met alternatieve component
• [ ] Richtlijnen voor redacteuren
• [ ] meerdere organisaties zijn tevreden
• [ ] meerdere organisaties hebben component in toegankelijkheids audit getest
• [ ] geen known issues voor a11y
• [ ] Risico's m.b.t. beveiliging (security) zijn gedocumenteerd
• [ ] Risico's m.b.t. privacy (AVG) zijn gedocumenteerd
• [ ] npm scope: @nl-design-system
• [ ] Getest met afnemers van design system: designer
• [ ] Getest met afnemers van design system: developer
• [ ] Getest met afnemers van design system: redacteur
• [ ] Community (2+ organisaties) is geswitcht van eigen naar candidate component
• [ ] Semver is goed geregeld
• [ ] Semver linting is 'waterdicht'
• [ ] Figma component is geversioneerd
• [ ] Documentatie over updaten van het Figma component is compleet
• [ ] Webcomponent of verschillende framework componenten beschikbaar
• [ ] Component logica is opgenomen in regressietests