Radio Group

[AlineNap]

Omschrijving

Biedt de mogelijkheid om één optie te selecteren uit een lijst.

Beoogde Oplossing

Maak een LuxRadioGroup component die m.b.v. alleen props een lijst met opties kan weergeven. Iets in de vorm van:

<LuxRadioGroup
  name="contact-method"
  label="Voorkeur contactmethode"
  options={[{
    value: 'email',
    label: 'E-mail',
  }, {
    value: 'phone',
    label: 'Telefoon',
  }, {
    value: 'smoke',
    label: 'Rooksignalen',
  }]}
/>

Component bestaat uit:
Radio-button

• Issue: Radio button #317
• Figma
• Storybook

Form-field-radio-option

• Figma
• Storybook: RadioButton + FormLabel[type="radio"], hoe werkt dit in utrecht?

Definition of ready

• Code check op community component gedaan door lux devs
• Stijling check op community component gedaan door Aline
• Plan voor missende features of bugs van het community component beschreven in het ticket
• Component tokens zijn beschikbaar
• Ticket doorgenomen met Vlad & Mark

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
  • Basis van het component (bijv Utrecht)
  • Aanpassingen en/of uitbreidingen
  • 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)

Links

• Component: https://nldesignsystem.nl/radio-group/
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=954-1910
• Community component:
  • CSS:
  • React:
  • Code:

[AlineNap]

Besproken tijdens LUX/NLDS op 9 oktober.
Hiervoor is een PR nodig op Utrecht. Dit doet lux waarschijnlijk. LUX devs zullen ticket aanvullen.

[AlineNap]

Robbert wil deze code gebruiken voor zijn praatje volgende week op NLDS week. Dus voor die tijd niet handig om deze op te pakken.

[AlineNap]

Stijling check vragen:

• Hoe wordt de radio-button gepositioneerd ten opzicht van het label, gaat dit goed bij verschillende font-sizes? Bij RHC lijkt dat van niet. --> @remypar5 zoekt dit uit. Houd vraagstuk van Spike: Positionering van elementen naast tekst a la icoon, radio en checkbox gelijktrekken rijkshuisstijl-community#776 in je achterhoofd.
• Form-field-radio-option component bestaat niet bij utrecht. Willen wij dat wel? Gaan jullie dit toevoegen aan utrecht code nav ons gesprek van 9 oktober? --> @remypar5 zoekt uit hoe dit zit, in welk component wordt het label toegevoegd aan de radio-button.
• Kunnen we token toevoegen voor spacing tussen de form-field-radio-options? Op Utrecht of bij onszelf? --> we maken een eigen radio-button-group component.
• Hoe wordt het label gestijld van de radiogroep? --> via tokens van de form-field component

[AlineNap]

• We maken eigen lux-radio-group. Want teveel breaking changes op Utrecht repo.
• @remypar5 vult ticket aan met code eisen.

[remypar5]

• Hoe wordt de radio-button gepositioneerd ten opzicht van het label, gaat dit goed bij verschillende font-sizes? Bij RHC lijkt dat van niet.

De eerste regel van het label is gecentreerd op de Radio button. Tijdens de bouw van dit component gaan we uitzoeken wat de beste manier is.

• Form-field-radio-option component bestaat niet bij utrecht. Willen wij dat wel? Gaan jullie dit toevoegen aan utrecht code nav ons gesprek van 9 oktober?

We kunnen gebruik maken van FormLabel[type="radio"] (zie beschrijving)

• Kunnen we token toevoegen voor spacing tussen de form-field-radio-options? Op Utrecht of bij onszelf?

Omdat we het component zelf gaan bouwen komt deze spacing token in de lux namespace, niet die van utrecht.

• Hoe wordt het label gestijld van de radiogroep?

Met behulp van de FormLabel van utrecht