Ga naar hoofdinhoud

Componenten bijdragen

Stappenplan: Help Wanted

Volg dit stappenplan om een component van alle checkpoints 🚩 te voorzien die nodig zijn voor de 'Help Wanted' status van het Estafettemodel.

Naam bepaald op basis van NL Design System naamgeving

Begin met het bepalen van een naam.

Baseer de naam van de component indien mogelijk, op herkenbare termen uit webstandaarden. Liever termen uit HTML, CSS, SVG en WAI-ARIA dan uit 'UI frameworks' die op het moment populair zijn. We schrijven componenten over het algemeen als enkelvoud.

Kijk voor inspiratie bij:

Zijn er meerdere namen voor de component? Kies de meest gangbare. De andere namen kun je later toevoegen aan de documentatie.

🚩 Checkpoint: Naam

Doel van component is in één zin beschreven

Doel: Vanuit het componentenoverzicht kan men de juiste component uitzoeken.

Het doel (nut) van de component beschrijft in één zin waar de component voor dient.

Kijk ter inspiratie bij:

Beschrijf specifiek, kort en bondig wat het doel is voor de component. Bekijk het overzicht ter inspiratie.

🚩 Checkpoint: Doel

Afbeelding gemaakt om de component visueel duidelijk te maken

Doel: De component is visueel duidelijk.

Om de community letterlijk een beeld te geven van de component voegen we een afbeelding toe. Het kernteam maakt deze in het Figma 'Schetsboek'. Zelf kun je een eigen afbeelding maken, huisstijl maakt niet uit.

🚩 Checkpoint: Afbeelding

Aangemaakt als een GitHub Discussion

Doel: Een plek om input te verzamelen.

We gebruiken Github 'Discussions' van NL Design System om input te verzamelen.

  • Start een GitHub Discussion voor de component.
  • Vul als titel in: {naam-component}.
  • Vul als beschrijving onderstaande template in en start de GitHub Discussion.
## Naam


{naam-component}


## Doel


{doel-component}


## Ook bekend als (niet verplicht)


{andere namen die je bent tegengekomen toen je de naam bepaalde}


## Gerelateerde componenten (niet verplicht)


{zie hieronder}


## Onderzoek

Gerelateerde componenten

Het kan voorkomen dat andere componenten sterk gerelateerd zijn aan dit component. Denk bijvoorbeeld aan Button en Action group. Dan is het handig om deze componenten naar elkaar te laten verwijzen, indien mogelijk via een link. Noteer gerelateerde componenten als volgt:

## Gerelateerde componenten


X, Y, of Z.

🚩 Checkpoint: Discussion URL

Staat in de publieke backlog van NL Design System

Doel: Zichtbaarheid en overzicht creëren zodat componenten niet dubbel worden toevoegd.

We gebruiken 'Issues' in de Github 'Backlog' repository van NL Design System om onze backlog te beheren.

  • Maak een 'Issue voor de component.
  • Vul als titel in: {naam-component}.
  • Vul als beschrijving onderstaande template in en maak het issue aan.
## Naam


{naam-component}


[Link naar GitHub Discussion]({link-naar-github-discussion})

Selecteer bij 'Labels' het label: Component. Selecteer bij 'Projects' het project: Components - 1 - Help Wanted.

🚩 Checkpoint: Backlog

Tip: Checkpoints afvinken

Door de vorige stap is de component toegevoegd aan het Help Wanted bord. Je kunt nu de reeds behaalde checkpoints afvinken door per kolom de juiste waarde in te vullen.

Bewijs verzameld dat de component algemeen bruikbaar is

Doel: Alleen componenten die naar verwachting in de Hall of Fame kunnen komen willen we toevoegen als Help Wanted.

Community om hulp vragen

Om meer te leren over de component vragen we de community om hulp. Deze oproep doen we via de GitHub Discussion en Slack.

Oproep via GitHub Discussion

Vul de beschrijving van de GitHub Discussion aan met de onderstaande oproep. Plaats deze boven de informatie die daar al stond zoals Naam, Doel, etc.

  • Voeg de afbeelding toe.
  • Wijzig de 'alt text' die automatisch door Github wordt toegevoegd. Bijvoorbeeld:
    • verschillende vormen van een {naam-component} component
    • visuele weergave van een {naam-component} component
  • Voeg onderstaande tekst toe, vul aan waar nodig en 'Update' de GitHub Discussion.
We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?


Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.


Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!


[Link naar bericht in Slack]({link-naar-Slack-bericht})


---

Oproep via Slack

Plaats de oproep in het Slack channel #nl-design-system.

Hey community 👋


We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?


Deel een link naar Figma, Storybook, Github of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.


Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Vergeet niet de link naar het Slack bericht toe te voegen aan de oproep in de GitHub Discussion.

Zelf op onderzoek uit

Niet elke organisatie zal op de oproep reageren. Ga daarom ook zelf op onderzoek uit. Duik in Figma, Storybook, Github en documentatie omgevingen voor een 'Screenshot-Safari 📸'. Maak screenshots van de component, varianten en states. Het gaat om bewijs verzamelen dat de component bestaat en in welke vorm, of vormen, deze wordt toegepast.

  • Kom je de component niet tegen in Figma, Storybook, Github of documentatie omgevingen? Dan zou je ook de website van de organisatie kunnen bekijken.
  • Kom je de component maar op 1 plek tegen? Documenteer het nut en noodzaak voor de component met een uitgebreide doelbeschrijving. Gebruikersonderzoek zou je hierbij goed kunnen helpen.

Het kernteam houdt deze set van organisaties aan. Hiermee hebben we een mooie mix te pakken van gemeentes, leveranciers en overige overheidsorganisaties. Zelf kun je deze lijst ook gebruiken, maar gebruik gerust andere bronnen.

Amsterdam

Den Haag

DSO

DUO

Documentatie website

Open Formulieren

Storybook

OpenGemeenten

Gebruik in Patternlab het linkadres van de h2 of h3 om naar een specifiek onderdeel te linken.

Rotterdam

RVO

Utrecht

Bevindingen vastleggen

Voeg per organisatie een losse comment toe aan de GitHub Discussion. Gebruik onderstaande tekst als basis.

## {Naam-organisatie}


<!-- Links naar component implementatie (niet verplicht) -->


- [Documentatie website]({link-naar-component-in-documentatie-website})
- [Storybook]({link-naar-component-in-storybook})
- [Figma]({link-naar-component-in-figma})
- [Github]({link-naar-component-in-github})


---


### Screenshots / Varianten


**{Omgeving}**


{Naam variant}
{Rationale variant}
{Screenshot}


---


### Notities


<!--
- Vul aan waar nodig.
- Laat weg wat niet van toepassing is.
- Noteer wat je opvalt.
  - Zijn er specifieke opties (properties) beschikbaar?
  - Zijn er specifieke design keuzes gemaakt?
  - Is er documentatie beschikbaar?
  - Heeft de component een andere naam?
  - Is er onderzoek beschikbaar?
  - etc.
 -->

🚩 Checkpoint: Bruikbaar

Doel: Er is niet alleen een schets beschikbaar, maar tenminste één uitgewerkte implementatie.

In de stap Bevindingen vastleggen zijn er waarschijnlijk al links beschikbaar. Dan is deze stap al gedaan. Voeg anders een linkje van je eigen implementatie in Figma of Storybook toe in de discussion. Zorg ervoor dat dit linkje te bekijken is zonder in te loggen.

🚩 Checkpoint: Link

Naam en doel van benodigde varianten beschreven

Doel: Alleen varianten die algemeen nut hebben zijn vastgelegd. Daarnaast is het duidelijk waarvoor de variant bedoeld is.

In de stap Bevindingen vastleggen zijn er waarschijnlijk al beschrijvingen van varianten beschikbaar. Dan is deze stap al gedaan.

Beschrijf anders de naam en het doel van de algemeen nuttige varianten. Als je twijfelt over de rationale van een variant kun je de betreffende organisatie eventueel om aanvullende toelichting vragen. Als je twijfelt over het algemeen nut van een variant kun je deze altijd later nog toevoegen.

🚩 Checkpoint: Varianten

Nut van component is onderbouwd door gebruikersonderzoek

Doel: We kunnen aantonen dat dit een component is dat voor eindgebruikers werkt.

Zijn er inzichten rondom de component beschikbaar omdat deze een rol heeft gespeeld bij gebruikersonderzoek? Super! Daarnaast kun je 'desk-research' doen om inzichten en 'best-practices' te verzamelen.

Kijk bijvoorbeeld bij:

Plaats verwijzingen naar onderzoek onderaan in de beschrijving van de GitHub Discussion. Noteer deze als volgt:

## Onderzoek


[Titel - Afzender](link)
Korte beschrijving


[Titel - Afzender](link)
Korte beschrijving


[Titel - Afzender (PDF, 124 kb](link)
Korte beschrijving

🚩 Checkpoint: Onderzoek

Nut van component is door het kernteam bevestigd

Doel: kernteam verwacht dat dit component tot Hall of Fame kan komen.

Dit is het moment om de component in zijn geheel nog eens af te stemmen met het kernteam. Deel een link naar de GitHub Discussion met het kernteam via Slack. Na akkoord voert het kernteam de laatste stap uit.

Stuur dit bericht naar #nl-design-system op Slack:

Hiep hoi!


Het is zover, de volgende component is helemaal klaar voor een Help Wanted stempel.


Naam: {naam-component}
Doel: {doel-component}


[GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion})


Er is nog 1 stap over, namelijk: verwachten we dat deze in de Hall of Fame zou kunnen komen? Laat het weten via een emoticon.


🤩 Top, doen! (hetzelfde als niets zeggen).
😭 Nee, deze moet nooit naar de Hall of Fame.
🤨 Ik snap de naam of het nut niet.

Kernteam hakt knoop door

Deze stap kan enkel worden uitgevoerd door het kernteam.

Iedereen mag wat vinden, maar de verschillende specialismes uit het kernteam moeten wat vinden. Dus post een linkje naar het 'Hiep hoi' bericht in het #nl-design-system-kernteam kanaal. Je kan @here gebruiken om iedereen even wakker te schudden.

Het kernteam bespreekt de component aan het eind van de eerstvolgende weekly. Eventueel benodigde acties worden ter plekke doorgevoerd of voor een volgende sprint vastgelegd.

Akkoord?

Ga verder bij Status naar Help Wanted.

🚩 Checkpoint: Kernteam = 'Done'

Niet akkoord?

Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig.

❌ Het kernteam heeft besloten dat de naam en het doel van dit component duidelijk zijn, maar niet voldoende nuttig is voor meerdere organisaties.


Dit hoeft niet te betekenen dat {naam-component} nooit de Help Wanted status krijgt. De [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek.

🚩 Checkpoint: Kernteam = 'Declined'

Vindbaar op de NL Design System website

Doel: Hierdoor kan de component worden opgepakt door de community.

Deze stap kan enkel worden uitgevoerd door het kernteam.

🚩 Checkpoint: nldesignsystem.nl

Status bijgewerkt naar Help Wanted

Doel: iedereen kan zien dat de component nu richting Candidate wil.

Deze stap kan enkel worden uitgevoerd door het kernteam.

  1. Voeg het 'Help Wanted' label toe aan de GitHub Discussion.
  2. Voeg het 'Help Wanted' label toe aan het backlog issue.
  3. Selecteer bij ‘Projects’ de volgende extra projecten:
  • Components - 2 - Community
  • Components - 3 - Candidate
  • Components - 4 - Hall of Fame
  1. Filter het Community bord op de component door op {naam-component} te zoeken.
  2. Kopieer de url na het filteren.
  3. Voeg onderstaande tekst toe als comment aan de GitHub Discussion.
## ✨ Dit component is nu Help Wanted ✨


Help je mee hem door de Community stappen te krijgen?
[{naam-component} op het Community bord]({url-community-bord})

Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig.

✅ Het kernteam heeft besloten dat de naam en het doel van dit component duidelijk zijn en de component algemeen nuttig is voor meerdere organisaties.


✨ **Dit component is nu Help Wanted** ✨


Help je mee hem door de Community stappen te krijgen?
[{naam-component} op het Community bord]({url-community-bord})


De [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek.

🚩 Checkpoint: Status

🏁 Finish

Zo wat een werk! Je hebt alle stappen genomen en zo alle checkpoints behaald die nodig zijn voor de 'Help Wanted' status van het Estafettemodel. De component gaat nu door voor de 'Community' status.