Componenten-overzicht voor stijlgids

[Robbert]

Als developer wil en designer wil je weten wat de precieze kleur of andere property van een component.

Bijvoorbeeld:

• Wat is de placeholder color van de Text Input?
• Wat is de border color van de Button?
• Wat is de font size van de Heading 2?

We willen mensen nudgen om de basis token te gebruiken, zodat fonts ook werken voor een fluid font size scale, en dat kleuren ook werken voor dark mode. Maar dat is niet altijd mogelijk, en daarom moet ook de kleur zichtbaar zijn in de uiteindelijke CSS waarde.

De themes-repository heeft al een overzicht dat hier al veel mogelijkheden toe biedt. Mogelijk kan het design simpeler dan dit:

Overpeinzingen:

• "Detected type" uit dit overzicht is niet nodig voor de stijlgids.
• Niet alles is makkelijk om te previewen
• De waarden en property names kunnen nogal lang worden, waardoor het niet goed op het scherm past
  • nl.button.primary.pressed.hover.background-color
  • "Fira Sans", "Fallback 1", "Fallback 2", "Fallback 3", "Fallback 4", sans-serif

Acceptatiecriteria

MVP:

• De volgende componenten worden getoond:
  • nl-link
  • nl-button als 'ie Candidate is geworden inmiddels
  • tbd
• Alle componenten die horen bij de component zijn zichtbaar
• Er is een kolom met de naam van de token
• Er is een kolom met een preview van een kleur
• Er is een kolom met de CSS waarde
• Alle tokens staan in één tabel, maar ze zijn wel in volgorde gezet om de schijn van groepering te wekken. Bijvoorbeeld:
  • Eerst alle property tokens op hoofdniveau, zoals nl.button.border-width.
  • Dan alle interactieve states van componenten, zoals nl.button.hover.color.
  • Dan alle states van de component, zoals pressed en disabled
  • Dan alle varianten van componenten, zoals primary, secondary.
  • Dan alle tokens van dat niveau, in dezelfde volgorde: property tokens / interactive states / states
• De volgorde van tokens kan nu gebaseerd op metadata die we zelf hardcoded hebben, maar later kan die uit $extensions komen uit de componenten. Bijvoorbeeld uit de npm package @nl-design-system-candidate/link-tokens/tokens.json.

Buiten scope, voor een volgend level:

• Binnen de component kun je groepjes en hierarchie zien van design tokens:
  • Bij de default variant zie je de tokens die voor de hele component gelden
  • Tokens van varianten hebben een eigen kopje
  • Tokens van interactieve states hebben een subkopje
• Je kunt op de CSS waarde klikken om 'm te kopieren naar het clipboard
• Je kunt op een knopje klikken om de CSS variable te kopieren naar het clipboard