Candidate - Figma in lijn ## 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](https://nldesignsystem.nl/handboek/component-bijdragen/definition-of-done/). ## Taken - [ ] Bouw de component op in de [NLDS - Voorbeeld - Bibliotheek](https://www.figma.com/design/shhwGcqPLi2CapK0P1zz8O/NLDS---Voorbeeld---Bibliotheek?node-id=153-1039&t=RTO0YWdfD203Mn2c-1) zoals deze beschikbaar is in de [Candidate Storybook](nl-design-system.github.io/candidate/). - [ ] 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](https://github.com/nl-design-system/candidate/tree/main/packages/tokens). 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](nl-design-system.github.io/candidate/) - [ ] 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](https://docs.tokens.studio/tokens/documentation-tokens) 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.