Breadcrumb

[AlineNap]

Component implementatie

In deze discussie definiëren en bespreken we de specificaties en implementatiekeuzes van dit component. Het doel is om één consistente en reproduceerbare beschrijving te schrijven, waarmee elke developer onafhankelijk van programmeertaal of framework, hetzelfde component kan bouwen.

Voeg hier een visuele referentie toe, zodat in één oogopslag duidelijk is over welk component het gaat.

Korte omschrijving

Beschrijf in één of twee zinnen wat dit component doet en waarvoor het bedoeld is.

Voorbeeld: Korte sectie die als geheel een link is naar een gerelateerde pagina.

Naamgeving

Leg vast welke naamgeving wordt gebruikt, afgestemd op context (documentatie, CSS, frameworks). Dit bevordert herkenning en consistentie.

Gebruik	Naam
Documentatie	Voorbeeld: Card as Link
CSS-klasse	Voorbeeld: .rhc-card-as-link
React	Voorbeeld: <CardAsLink />
Angular	Voorbeeld: <rhc-card-as-link />
Web Component	Voorbeeld: <card-as-link />

• Bestaat dit component in het Estafettemodel van NL Design System? Ja, in deze component GitHub discussion/Nee
• Indien nee: Licht toe waarom het afwijkt of niet bestaat.

Eigenschappen

Leg alle relevante properties vast die nodig zijn voor consistente implementatie.

Eigenschap	Type	Beschrijving	Verplicht	Standaard
label	string	De tekst die in de component verschijnt.	Ja	–
variant	string	Bijvoorbeeld: primary, secondary.	Nee	primary
disabled	boolean	Maakt de component niet-interactief.	Nee	false
onClick	functie	Wordt aangeroepen bij interactie.	Nee	–

Voeg alle benodigde properties toe, inclusief types, defaults en of ze verplicht zijn.

Design tokens

Beschrijf welke design tokens de component beschikbaar heeft vanuit Token Studio.

Gedrag

Beschrijf het verwachte gedrag van het component in verschillende staten (hover, focus, active, disabled). Geef ook aan hoe het zich gedraagt bij toetsenbordnavigatie of responsieve weergave.

Implementatie keuzes

Geef context bij technische of functionele keuzes. Benoem ook afwijkingen van standaarden of andere implementaties als die er zijn. Voeg hier onderwerpen aan toe indien van toepassing.

Basis

• Is dit component gebaseerd op een bestaand component van een organisatie? Welke en waarom?
• Of is dit een geheel nieuw component? Wat is de reden om het zelf te ontwikkelen?

Afwijkingen

• Benoem afwijkingen ten opzichte van bestaande implementaties of richtlijnen (bijv. NLDS, Rijkshuisstijl).
• Licht toe waarom deze keuzes zijn gemaakt.

Vragen of discussiepunten

Noteer hier openstaande vragen of beslissingen die nog besproken moeten worden.

Relevante links

Onderstaande links helpen bij oriëntatie en besluitvorming.

Bekijk dit component op het Rijkshuisstijl Community - Community Components board [hier]. Hier kan je vinden:

• Dit component op de NL Design System Backlog. Hier vind je meer informatie over de keuzes voor dit component binnen het Estafettemodel van het NL Design System.
• De organisatie prefix.
• De naam van de component.
• De status van de verschillende stappen in het Estafettemodel binnen het middels de stappenplannen.
• Relevante links naar onder andere de Figma, NPM Package Registry, GitHub en Storybook.