Heading group

[AlineNap]

Omschrijving

Toont een combinatie van een titel en ondersteunende tekst.

De benodigde componenten:

Heading group van utrecht Preheading van utrecht

Definition of ready

• [x] Code check op community component gedaan door lux devs
• [x] Stijling check op community component gedaan door Aline
• [ ] Plan voor missende features of bugs van het community component beschreven in het ticket
• [x] Component tokens zijn beschikbaar
• [x] 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://www.nldesignsystem.nl/heading-group
• Figma NLDS: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=15707-80970
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-heading-group--docs
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-heading-group--docs
  • Code: https://github.com/nl-design-system/utrecht/blob/main/packages/component-library-react/src/HeadingGroup.tsx

---

Is voor dit design:

[AlineNap]

Zie vragen in de comments van Figma.

---

Ik heb dit besproken tijdens de design open hour van 8 oktober. Stap x van x is de pre heading, daarna komt de titel en de paragraph daaronder is geen onderdeel van de heading groep. Aan de token row-gap hadden meerdere designers behoefte aan.

[AlineNap]

We bereiden de utrecht heading group uit met row-gap zodat er spacing tussen de pre-heading en heading gezet kan worden. https://github.com/nl-design-system/utrecht/issues/2549