Heading - Candidate - Figma in lijn

[Robbert]

Beschrijving

De NL Design System Figma bibliotheek komt overeen met de implementatie van de component in code wat betreft varianten, states, design tokens en naamgeving.

Bron: Definition of Done.

Taken

• Bouw de component op in de NLDS - Voorbeeld - Bibliotheek zoals deze beschikbaar is in de Candidate Storybook.
• Geef het frame de naam nl-{naam-van-de-component}.
• Maak de tokens aan in Token Studio zoals deze beschikbaar zijn in de tokens.json van de component in GitHub. Voorzie de tokens van designkeuzes voor het Voorbeeld thema.
• Bekijk de json weergave binnen Token Studio en zorg ervoor dat de tokens juist geordend zijn.
• Plaats de candidate tokens boven reeds bestaande community tokens.
• Pas de tokens toe op de component.
• Maak indien nodig de benodigde varianten voor het interactie gedrag met als property 'States' (Hover, Active, Checked, etc.)
• Maak indien nodig de benodigde varianten voor het resposive gedrag met als propery 'Container' (Small, Large).
• Maak indien nodig varianten zoals deze ook beschikbaar zijn in het 'Controls block' in de Candidate Storybook
• Pas auto-layout toe op de gehele frame (sizing is 'Hug', spacing is '48').
• Pas de common token utrecht.document.background-color toe op de gehele frame.
• Pas de benodigde prototyping interacties toe.
• Gebruik de 'Documentation Tokens' functionaliteit van Token Studio om de lijst met beschikbare tokens op te bouwen.
• Selecteer per regel welk token 'type' het betreft.
• Voeg de Estafettemodel Badge toe en geef deze het level 'Candidate'.
• Push de tokens vanuit Token Studio naar GitHub gebruik hierbij de volgende opzet:

Commit Message

style: candidate tokens for {naam-van-de-component}

Branch

style/candidate-tokens-for-{naam-van-de-component}

• Maak de PR aan en geef een developer uit het kernteam via Slack een seintje dat deze klaar staat.