Proces voor het gebruik van componenten of eventuele uitbreidingen

[jeffreylauwers]

Vanuit de community kwam naar voren dat de flowchart 'Bestaand of nieuw component gebruiken' nog te onduidelijk is rondom use cases waar communityleden vanuit starten. Dit zijn 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 overeen komt met een reeds bestaand community component. Wat nu?

Hierbij een voorstel. De flowchart is opgeknipt in vier vijf losse flowcharts in de hoop het geheel zo overzichtelijk te houden. Daarnaast biedt dit de mogelijkheid om iemand, die start vanuit bovenstaande vragen, direct naar de juiste flowchart te verwijzen.

We hopen het proces rondom het gebruik van componenten of eventuele uitbreidingen dusdanig inzichtelijk te maken dat de community hiermee autonoom en weloverwogen beslissingen kan maken. We ontvangen dan ook graag feedback op het voorstel.

Dit mag in deze GitHub Discussion, of als comment in de FigJam. Alvast bedank!

Update 31 oktober: Na feedback hebben we de flowcharts bijgewerkt.

• De flowchart 'Ik mis een functionaliteit...' is opgeknipt. Er is zijn nu specifieke flowcharts voor Community en Candidate / Hall of Fame componenten.
• Hoe je maintainers om aanpassing kan vragen is extra onder de aandacht gebracht.
• De flowchart voor als men een component heeft dat overeenkomt met een reeds bestaand component is versimpeld.

[jeffreylauwers]

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

[jeffreylauwers]

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?

[jeffreylauwers]

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.
• Maak een Figma component aan. Plaats deze naast de reeds bestaande Community component.
• 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.

Bekijk een vergroting de flowchart: Ik mis een functionaliteit binnen een Community component. Wat nu?

---

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.

Bekijk een vergroting de flowchart: Ik mis een functionaliteit binnen een Candidate of Hall of Fame component. Wat nu?

[Robbert]

Het is ook best waarschijnlijk dat je hier in een situatie komt waarbij je feature A en B heeft, waarbij Community Component A feature A heeft, en component B feature B, en je één van beide community componenten moet uitbreiden met de feature van de ander.

[jeffreylauwers]

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.

Bekijk een vergroting de flowchart: Ik mis een functionaliteit binnen een Candidate component. Wat nu?

[JeroenduC]

Misschien een onderscheid maken tussen mensen die een component in Figma nodig hebben versus een component in Storybook?

[jeffreylauwers]

Hey Jeroen, deze flowcharts zijn juist bedoelt voor designers én developers. Omdat we design en code zoveel mogelijk in-sync willen hebben. Dat geldt ook voor processen zoals deze. Uiteraard staat het elke designer vrij om een component, of uitbreiding op een component, in Figma te ontwerpen. Daar kunnen vervolgens prototypes en onderzoek mee gedaan worden.