Heading

[MrSkippy]

Omschrijving

Utrecht Heading naar LUX Heading
Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.

Features die overgenomen worden:

• level nummers 1 tm 6; renders <h1> t/m <h6>
• appearance nummers 1 tm 6; zet de classname utrecht-heading-1 t/m utrecht-heading-6
• Geen of verkeerd level/appearance wordt H6

Note:
De Heading1 t/m Heading6 zijn componenten die hieruit kunnen worden ontwikkeld.
Bijvoorbeeld

export const Heading3 = <Heading level="3" appearance="3" />

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 (Note: ook beschikbaar bij Utrecht)
Figma NLDS met lux tokens: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=153-1039
Utrecht: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-heading--docs

[rwittenberns]

We willen 2 features op een heading component: level en appearance zodat we zowel html element en stijling apart kunnen instellen. Nagaan of dit bij Utrecht Heading component mogelijk is. Aangeven bij Utrecht dat Heading component mogelijk herbruikbaarder kunnen opzetten.

[MrSkippy]

Vragen voor de planning?

• willen we voor appearance-waarden "utrecht-heading-1" etc. of "1" t/m "6". Imho de laatste is beter ivm dat het later de class name nl-heading-1 wordt.
• hoe gaan we NLdoc's oneindige headings oplossen? Utrecht maakt er altijd een H1 van, NLdoc wil dat een H8 (iets wat in Word kan...) een H6 wordt.

[rwittenberns]

Vragen voor de planning?

• willen we voor appearance-waarden "utrecht-heading-1" etc. of "1" t/m "6". Imho de laatste is beter ivm dat het later de class name nl-heading-1 wordt.
  LUX: voorstel is vendor agnostisch ("heading-1" of "1"). Om breaking change te voorkomen beide ondersteunen. Voor LUX oplossen maar ook bij Utrecht discussie starten over gewenste wijziging.

• hoe gaan we NLdoc's oneindige headings oplossen? Utrecht maakt er altijd een H1 van, NLdoc wil dat een H8 (iets wat in Word kan...) een H6 wordt.
  Max level is altijd 6. Appearance bepaalt dan het zichtbare verschil.

[remypar5]

We willen 2 features op een heading component: level en appearance zodat we zowel html element en stijling apart kunnen instellen. Nagaan of dit bij Utrecht Heading component mogelijk is. Aangeven bij Utrecht dat Heading component mogelijk herbruikbaarder kunnen opzetten.

Ik ben voor om de appearance optioneel te maken. Als standaard moet die de zelfde waarde hebben als level. Die is dus alléén nodig als level en appearance van elkaar afwijken.