Componenten gebruiken
Stel je hebt een nieuwe wens voor een component of functionaliteit. Dan wil je natuurlijk weten hoe je NL Design System hiervoor kunt gebruiken.
We hebben het proces rondom het gebruiken, uitbreiden en verbeteren van componenten uitgeschreven in stappen en deze visueel aangevuld met flowcharts. Hierdoor kan de community zelfstandig en weloverwogen keuzes maken.
Deze processen helpen je antwoord te vinden op vragen zoals:
- Ik mis een component. Wat nu?
- Ik mis een functionaliteit. Bijvoorbeeld een sluit-optie in de Alert. Of de mogelijkheid om Form Field Label en Form Field Description dichter bij elkaar te kunnen plaatsen. Wat nu?
- Ik mis een design token. Wat nu?
- Ik wil een verbetering voorstellen voor een component. Wat nu?
- Ik wil een verbetering voorstellen voor een bestaande design token. Wat nu?
- Ik heb een component dat overeenkomt met een reeds bestaand community component. Wat nu?
Het kernteam ziet het toevoegen van één of meerdere design tokens óók als het toevoegen van een functionaliteit.
Ik wil een component uit NL Design System gebruiken.
Volg onderstaande stappen als je een component uit NL Design System wilt gebruiken.
Stappen
Stap 1: Bekijk het Componenten overzicht.
Stap 2: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is het component bedoeld als input voor algemeen deskresearch.
Stap 3: Heb je de component gevonden?
- Ja: Ga verder bij stap 4.
- Nee: Ga verder bij: Ik mis een component. Wat nu?
Stap 4: Voldoet de component aan je wensen?
- Ja: Fijn! Vermeld in de GitHub Discussion dat jij dit component ook gebruikt.
- Nee: Ga verder bij stap 5.
Stap 5: Betreft het een Community component?
- Ja: Ga verder bij: Ik mis een functionaliteit binnen een Community component. Wat nu?
- Nee: Ga verder bij: Ik mis een functionaliteit binnen een Candidate of Hall of Fame component. Wat nu?
Flowchart
De stappen die je kunt nemen als je een component uit NL Design System wilt gebruiken zijn ook als flowchart gevisualiseerd.
Bekijk een vergroting van de flowchart: Ik wil een component uit NL Design System gebruiken
Ik mis een component. Wat nu?
Volg onderstaande stappen als je een component mist.
Stappen
Stap 1: Heb je het Componenten overzicht bekeken?
- Ja: Ga verder bij stap 2.
- Nee: Bekijk het Componenten overzicht om te zien of de component die je zoekt er toch tussen staat.
Stap 2: Heb je rondgekeken bij de aangesloten organisaties?
- Ja: Ga verder bij stap 3.
- Nee: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is het component bedoeld als input voor algemeen deskresearch.
Stap 3: Maak je component zelf (code en/of design).
Gebruik de component in je prototype en doe onderzoek. Deel je onderzoek idealiter op gebruikersonderzoeken.nl. Pakt de component goed uit? Vervolg het proces.
Stap 4: Start met het Help Wanted stappenplan.
Stap 5: Wil je de component aanbieden aan de Community?
- Ja: Ga verder bij stap 6.
- Nee: OK. Veel plezier met je component.
Stap 6: Ontwikkel de component zelf volgens NL Design System architectuur.
Stap 7: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Flowchart
De stappen die je kunt nemen als je een component mist zijn ook als flowchart gevisualiseerd.
Bekijk een vergroting de flowchart: Ik mis een component. Wat nu?
Ik mis een functionaliteit binnen een Community component. Wat nu?
Volg onderstaande stappen als je een functionaliteit mist binnen een Community component.
Stappen
Stap 1: Bekijk het Componenten overzicht.
Stap 2: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is het component bedoeld als input voor algemeen deskresearch.
Stap 3: Is er een ander Community component die de functionaliteit wél heeft?
- Ja: Gebruik dat component uit de community.
- Nee: Ga verder bij stap 4.
Stap 4: Vraag de maintainers van de Community component of zij de functionaliteit willen toevoegen.
Hoe vraag je dit?
- Maak een issue aan in de betreffende repository.
- Maak een fork en een pull request aan.
- Breid de Figma component uit door een duplicaat onder de reeds bestaande Community component te plaatsen.
- Plaats een link naar het issue, de PR of ontwerp in het Slack kanaal #nl-design-system-developers of #nl-design-system-designers en noem hier de naam van de organisatie. Kernteamleden volgen deze kanalen ook. Zij kunnen eventueel specifieke personen op de hoogte brengen van de wens.
- Bespreek je wens tijdens een Developer of Design Open Hour wanneer mensen van de betreffende organisatie aanwezig zijn.
Stap 5: Wordt de functionaliteit toegevoegd?
- Ja: Bedankt voor het vollediger maken van de Community component.
- Nee: Ga verder bij stap 6.
Stap 6: Kun je zelf een ‘extensie’ (uitbreiding op de component) maken?
- Ja: Maak een ‘extensie’. Plaats de link naar je uitbreiding als reactie op je eerdere beschrijving in de GitHub Discussion.
- Nee: Ga verder bij stap 8.
Stap 7: Trots op je extensie? Plaats een link naar je beschrijving in de GitHub Discussion in het Slack kanaal #nl-design-system-developers of #nl-design-system-designers.
Stap 8: Maak de component zelf.
Stap 9: Wil je de component aanbieden aan de Community?
- Ja: Ontwikkel de component zelf inclusief de functionaliteit volgens NL Design System architectuur.
- Nee: OK. Veel plezier met je component.
Stap 10: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Flowchart
De stappen die je kunt nemen als je een functionaliteit binnen een Community component mist zijn ook als flowchart gevisualiseerd.
Ik mis een functionaliteit binnen een Candidate of Hall of Fame component. Wat nu?
Volg onderstaande stappen als je een functionaliteit mist binnen een Candidate of Hall of Fame component.
Stappen
Stap 1: Bekijk in de GitHub Discussion of iemand anders deze wens al eerder heeft uitgesproken.
Stap 2: Is er al een ‘extensie’ (uitbreiding op de component) gemaakt en kun je deze gebruiken?
- Ja: Gebruik de ‘extensie’. En geef in de GitHub Discussion aan dat jij deze uitbreiding ook gebruikt.
- Nee: Ga verder bij stap 3.
Stap 3: Beschrijf de wens voor het toevoegen van deze functionaliteit in de GitHub Discussion van de component.
Tip! Plaats een link naar je beschrijving in het Slack kanaal #nl-design-system-developers of #nl-design-system-designers.
Stap 4: Wordt de functionaliteit door het kernteam toegevoegd?
- Ja: Bedankt voor het vollediger maken van de Candidate component.
- Nee: Maak een ‘extensie’. Plaats de link naar je uitbreiding als antwoord op je eerdere beschrijving in de GitHub Discussion.
Stap 5: Trots op je extensie? Plaats een link naar je beschrijving in de GitHub Discussion in het Slack kanaal #nl-design-system-developers of #nl-design-system-designers.
Flowchart
De stappen die je kunt nemen als je een functionaliteit binnen een Candidate of Hall of Fame component mist zijn ook als flowchart gevisualiseerd.
Ik heb een component dat overeenkomt met een reeds bestaand Community component. Wat nu?
Volg onderstaande stappen als je een component hebt dat overeenkomt met een reeds bestaand Community component.
Stappen
Stap 1: Is je component ontwikkeld volgens de NL Design System architectuur?
- Ja: Ga direct verder bij Stap 3.
- Nee: Ga verder bij Stap 2.
Stap 2: Ontwikkel de component volgens NL Design System architectuur.
Stap 3: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Flowchart
De stappen die je kunt nemen als je een component hebt dat overeenkomt met een reeds bestaand Community component zijn ook als flowchart gevisualiseerd.
Help deze documentatie te verbeteren
Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via GitHub. Daarnaast zijn we specifiek voor deze processen een GitHub Discussion gestart waar je feedback kunt geven.
Vragen
Heb je een vraag? Twijfel niet en neem contact op met het kernteam.