Checkbox

[AlineNap]

Omschrijving

Invoerveld voor het kiezen van een optie uit een groep van opties, of om te kiezen tussen "wel" of "niet".

Let op: Dit alleen het input-element, om het een label, description en foutmelding te geven, moet het samengesteld worden met een FormField en FormField* componenten

Links

• Component: https://nldesignsystem.nl/checkbox
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=944-1535
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-checkbox--docs
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-checkbox--docs
  • Code: https://github.com/nl-design-system/utrecht/blob/main/packages/component-library-react/src/Checkbox.tsx

Checks

Definition of ready

• Code check op community component (door LUX)
• Styling check op community component (door LUX)
• Plan voor missende features of bugs community component beschreven in ticket
• Component tokens zijn beschikbaar op main
• Ticket doorgenomen met uitvoerder

Definition of done

Component

• Component is beschikbaar in de index
• Design tokens worden gebruikt

Storybook

• Playground story
• States en properties stories
• Korte beschrijving van het component
  • Wat doet het
  • Wat doen (speciale) features
  • Relatie met andere componenten (bijv. Form field label en Form field)

Tests

• Het component rendert
• Aanpassingen en/of uitbreidingen werken (zie ook Testing components)
• Visual regression test (door LUX)

[AlineNap]

Styling check

• Filled variant is nog niet mogelijk met design tokens op utrecht. Dit mogen we toevoegen op utrecht code. Jullie hebben eerder met Robbert gesproken over hoe dit component verbeterd kan worden. Graag issue maken op utrecht repo.
  • Update: https://github.com/orgs/nl-design-system/projects/60/views/3?filterQuery=&pane=issue&itemId=84217064&issue=nl-design-system%7Cutrecht%7C2578, devs graag aanvullen.
• Doen we tussenoplossing voor Mijn Aansluitingen? En wat is die oplossing dan?

[AlineNap]

Design review 18 December

1. Waar komt de variant with target vandaan? Te vinden helemaal onderin Storybook, zie dit niet terug bij Utrecht doc. Verder wel nice, maar hoe werkt dit? Kan de achtergrond worden gestijlt? Wanneer is de target zichtbaar? etc.
2. De checkbox is 24px bij 24px, zou 18px verwachten omdat de token utrecht.checkbox.size daarop is ingesteld. Hoe komt dit?
3. Om de checkbox staat een div utrecht document die 28px hoog is. Waarom is die 2px hoger dan de checkbox zelf? Levert dat geen problemen op als het component wordt gebruikt in context?