Ga naar hoofdinhoud

Componenten bijdragen

Stappenplan: Community

Het kernteam volgt dit stappenplan om een component van alle checkpoints 🚩 te voorzien die nodig zijn voor de 'Community' status van het Estafettemodel. Organisaties die een component bij willen dragen kunnen het Stappenplan voor organisaties gebruiken.

Onderstaande stappen zijn van toepassing op 1 implementatie uit de community. Alle checks die je uitvoert gelden dus voor deze ene implementatie.

Er kunnen meerdere community implementaties zijn die volledig voldoen, maar voor dit bord kijken we naar een component die het meest ver is. De component heeft een Community status als er minimaal één implementatie beschikbaar is die aan alle checkpoints voldoet. Voordat je begint kies je het Community Componenten bord op GitHub waar het component de meeste checks heeft behaald. Dit bord gebruik je vervolgens om de checks die kijken naar "tenminste één organisatie" mee te beoordelen.

Beschikbaar in CSS

Doel: De component kan ingezet worden in een framework naar keuze.

De component moet beschikbaar zijn in code. Minimaal als HTML/CSS.

Tenminste één organisatie heeft zijn GitHub URL (CSS) ingevuld. Bekijk hiervoor de Communityborden.

De GitHub omgeving moet te bekijken zijn zonder te hoeven inloggen.

🚩 Checkpoint: GitHub (CSS)

Publiek beschikbaar in Storybook

Doel: Men kan de component vinden, bekijken, gebruiken, forken en verbeteren.

De component moet publiek beschikbaar zijn in Storybook.

Plaats de component in de Storybook omgeving van jouw organisatie. Of controleer de Storybook omgevingen van organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

Tenminste één organisatie heeft zijn Storybook URL (CSS) ingevuld. Bekijk hiervoor de Communityborden.

De Storybook omgeving moet te bekijken zijn zonder te hoeven inloggen.

🚩 Checkpoint: Storybook (CSS)

Implementatie voldoet aan naam en doel uit de GitHub Discussion

Doel: De component is de component dat we als kernteam verwachten.

In de GitHub Discussion van de component staan de naam en het doel genoteerd. Check of de implementatie van jouw organisatie hieraan voldoet. Of controleer de implementaties van organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

Noteer de implementatie bijvoorbeeld utrecht-paragraph of ams-paragraph in de kolom voor 'Implementatie'.

Tip! Met implementatie bedoelen we bijvoorbeeld utrecht-button of ams-button. Een specifiek type van een implementatie, bijvoorbeeld zonnedael-sparkly-button, noemen we een variant.

🚩 Checkpoint: Implementatie voldoet

Implementatie heeft minimaal kleur en typografie beslissingen met design tokens geïmplementeerd

Doel: Meerdere organisaties kunnen de component naar hun huisstijl omzetten.

Door met design tokens te werken zorgen we ervoor dat meerdere organisaties de component van een eigen huisstijl kunnen voorzien. Minimaal zouden er design tokens beschikbaar moeten zijn om kleur en typografie beslissingen door te voeren.

Zorg ervoor dat de component van jouw organisatie gebruik maakt van design tokens. Of controleer de implementaties van organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

Tip! Om te controleren of er design tokens zijn toegepast kun je gebruik maken van de 'Inspect' functionaliteit van je browser. Wanneer je in de CSS verwijzingen ziet naar CSS variabelen zoals bijvoorbeeld --denhaag-button-primary-action-background-color of --ams-button-font-family kun je er vanuit gaan dat er design tokens zijn gebruikt.

🚩 Checkpoint: Minimale design tokens

API's zoals design tokens hebben een prefix van de verantwoordelijke organisatie

Doel: Organisaties kunnen componenten naast elkaar gebruiken zonder dat deze met elkaar conflicteren. Developers en designers kunnen zien waar de component vandaan komt.

Om componenten van elkaar te kunnen gebruiken is het toevoegen van een prefix zoals bijvoorbeeld utrecht- of ams- verplicht.

Zorg ervoor dat de prefix van jouw organisatie is toegevoegd aan onderstaande onderdelen. Of controleer de organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

  • CSS class selectors.
  • Design tokens in JSON.
  • CSS variables.

🚩 Checkpoint: Prefix

Gebruikte design tokens voldoen aan naamgeving conventie van NL Design System

Doel: Een voorspelbare naamgeving van design tokens.

Voor NL Design System zijn er afspraken gemaakt voor duidelijke en voorspelbare namen. De beschikbare design tokens van een component moeten voldoen aan de naamgeving conventie van NL Design System. Zo is een component herbruikbaar voor alle verschillende thema's.

Zorg ervoor dat de design tokens van de component van jouw organisatie voldoen aan de naamgeving conventie. Of controleer de implementaties van organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

🚩 Checkpoint: Naamgeving design tokens

EUPL-1.2 licentie toegepast

Doel: De component mag door andere organisaties gebruikt worden. Producten die ermee gemaakt worden hoeven niet per se open source te zijn.

Binnen het NL Design System werken we voor componenten met de Openbare Licentie van de Europese Unie (EUPL-1.2).

Zorg ervoor dat jouw organisatie naar de EUPL-1.2 licentie verwijst op de onderstaande posities. Of controleer de organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

  • GitHub repository: Als één van de repository details onder 'About' in de sidebar.
  • Package in npm: Onder 'License' in de sidebar.
  • Storybook: Als een aparte pagina binnen de sidebar, of binnen de introductiepagina danwel README.
  • Figma (optioneel): Op de cover of direct naast de cover van de Figma bibliotheek.

🚩 Checkpoint: Licentie component

Documentatie heeft de Creative Commons 0 licentie (CC0)

Doel: De documentatie van een component mag door andere organisaties hergebruikt of gecombineerd worden zonder enige bronvermelding.

Binnen het NL Design System werken we voor de documentatie met de Creative Commons 0 licentie (CC0).

Zorg ervoor dat jouw organisatie de CC0 licentie benoemt in het README.md bestand van de component in GitHub. Of controleer de organisaties die aan de GitHub Discussion van de component zijn toegevoegd.

Tip! Door de 'Code' of 'Raw' weergave van het README.md bestand te bekijken zou je bovenaan <!-- @license CC0-1.0 --> moeten zien staan.

🚩 Checkpoint: Licentie documentatie

Beschikbaar in de Storybook met alle NL Design System thema's

Doel: De component wordt beter vindbaar voor andere organisaties en kan makkelijk worden voorzien van een eigen thema.

Neem contact op met het kernteam om deze stap uit te voeren.

Het kernteam maakt de component beschikbaar in de 'Themes' repository, waardoor deze terug te vinden is in de Storybook met alle NL Design System thema's. Andere organisaties kunnen vervolgens de component gaan gebruiken.

🚩 Checkpoint: Storybook thema's

Visuele regressietests zijn beschikbaar in de Thema Storybook

Doel: De component wordt voorzien van het Voorbeeld thema, en organisaties worden geïnformeerd wanneer aanpassingen in de component gevolgen hebben voor hun thema.

  • Component wordt voorzien van het Voorbeeld thema.
  • Communiceren dat men de component kan gaan gebruiken en dat daar automatisch visuele regressietests op zullen plaatsvinden.

🚩 Checkpoint: Visuele regressietest

Beschikbaar in de NL Design System Figma bibliotheek

Doel: De component wordt beschikbaar in de NL Design System Figma bibliotheek. Designers van andere organisaties kunnen de component overnemen en gaan gebruiken.

Neem contact op met het kernteam om deze stap uit te voeren.

Het kernteam neemt de component over uit de Figma omgeving van jouw organisatie, inclusief bijbehorende design tokens, en plaatst deze in de NL Design System Figma bibliotheek. Daarbij wordt de component voorzien van het Voorbeeld thema. Als er geen Figma component is, dan ontwikkelt het kernteam dit zelf.

Organisaties die de NL Design System Figma bibliotheek vanaf dat moment dupliceren, krijgen de component direct meegeleverd. Organisaties die de NL Design System Figma bibliotheek al hadden gedupliceerd, worden tijdens de volgende 'Bieb sync video' geïnformeerd over hoe ze dit component ook kunnen overnemen.

Kopieer de URL van de component pagina door in Figma met rechtermuisknop op de component in de sidebar te klikken (Copy link to page). Kun je dat niet doen, vraag dan iemand met edit rechten om de URL.

🚩 Checkpoint: Figma URL

Informatie van de component beschikbaar op nldesignsystem.nl

Doel: Op nldesignsystem.nl zijn er verwijzingen beschikbaar naar de component met het Voorbeeld thema.

Het kernteam maakt de laatste informatie van de GitHub projectborden beschikbaar in het npm pakketje @nl-design-system/component-progress.

  • Draai het script in de main branch opnieuw te draaien met Run Workflow in GitHub Actions van de Index repository
  • Wacht tot component-progress op npm is bijgewerkt. Dat zie je door naar Last publish te kijken.
  • Update @nl-design-system/component-progress in de documentatie repository. Dat doe je door pnpm install @nl-design-system/component-progress@latest --save-dev -w te draaien. Dit update de devDependency en de lockfile.

🚩 Checkpoint: nldesignsystem.nl

Beschikbaar in de NL Design System Component assessment (Figma)

Doel: Organisaties worden bij een onboarding snel naar de juiste component verwezen.

Het kernteam voegt een 'Component sticker' toe aan het Figma bestand 'NL Design System Component assessment'. Deze sticker linkt naar de documentatiepagina van de component op nldesignsystem.nl.

Door deze 'Component stickers' op screenshots te plakken, kan het kernteam geïnteresseerden organisaties inzicht bieden welke componenten beschikbaar zijn om hun website of applicatie mee op te bouwen.

🚩 Checkpoint: Component assessment

Status bijgewerkt naar Community

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

Deze stap kan enkel worden uitgevoerd door het kernteam.

  • Verander het 'Help Wanted' label van het backlog issue naar 'Community'.
  • Verander het 'Help Wanted' label van de GitHub Discussion naar 'Community'.
  • Filter het Candidate bord op de component door op Component: {naam-component} te zoeken.
  • Kopieer de URL na het filteren.
  • Voeg onderstaande tekst toe als comment aan de GitHub Discussion.
## ✨ Dit component is nu Community ✨


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

🚩 Checkpoint: Status naar Community

Gebruik van component uit de community gepromoot

Doel: Credits geven aan mensen die hebben bijgedragen vanuit de community. De rest van community informeren en enthousiasmeren om ook naar Community, Candidate en Hall of Fame toe te werken.

Deze stap kan enkel worden uitgevoerd door het kernteam.

  • Voeg de component toe aan het Communicatie & PR project. Zo wordt hij meegenomen in de volgende Heartbeat, Nieuwsbrief en op LinkedIn
  • We zetten het checkpoint op Done vóór de promotie echt is gedaan, omdat het component pas na die statusaanpassing dan als “Community” op de website staat.

🚩 Checkpoint: Promotie

Website geupdate met nieuwe status

Slack

  • Zeg het volgende in #nl-design-system.
✨ {naam-component} is nu Community ✨


[Bekijk {naam-component}]({link-naar-component-op-nldesignsystem.nl}): {doel van het component}


Help ons de component naar Candidate te brengen door ons in de [GitHub Discussion voor het {naam-component} component]({link-naar-discussion}) te laten weten waar je het gebruikt.

Communityleden selecteren voor credits

Het kernteam selecteert communityleden om credits aan uit te delen. Denk bijvoorbeeld aan de maintainer van Storybook en de betrokken designer. Dat kan door activiteit in de Discussion te zien en naar commits te kijken in de code van het community component.

Nieuwe status bevestigen met credit

Plaats na het selecteren een comment in het issue voor dit component. Meld dat het component nu Community status heeft en bedank de betrokkenen, bijvoorbeeld:

Met dank aan {persoon/personen} van {organisatie} is {component} nu beschikbaar in de Community!


[Bekijk {naam-component} op nldesignsystem.nl]({link-naar-component-op-nldesignsystem.nl})

Heartbeat, Nieuwsbrief en LinkedIn

Het kernteam benadert de organisatie die de component heeft ontwikkeld. We vragen of zij de component tijdens een Heartbeat willen presenteren. Mocht dit niet mogelijk zijn doen wij dit als kernteam zelf.

Daarnaast plaatsen we een bericht in de nieuwsbrief en op LinkedIn. Daarin nemen we de volgende elementen in op:

  • Link naar component op nldesignsystem.nl.
  • Link naar GitHub Discussion.
  • Credits.
  • Eventueel in combinatie met een kort interview.

De updates in de Heartbeat, nieuwsbrief en op LinkedIn kunnen worden gecombineerd als er meerdere componenten van status veranderen.

🏁 Finish

Zo wat een werk! Je hebt alle stappen genomen en je hebt alle checkpoints kunnen afvinken die nodig zijn voor de 'Community' status van het Estafettemodel. De component gaat nu door voor de 'Candidate' status.