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

• 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://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. nl-design-system/utrecht#2549