Pre-heading component (zie comment design review)

[MeesD94]

Omschrijving

De pre-heading component is een component dat ervoor zorgt dat er een stukje tekst boven een header te komt staan, maar in de HTML onder de header staat. Dit i.v.m. accessibility.

De HTML ziet er dan als volgt uit:

<div>
    <heading level={2}>Introductie<heading>
    <pre-heading>Stap 1 van 8</pre-heading>
</div>

Op de pagina ziet het er dan zo uit:

Links

• Community component: Utrecht
• Figma: Link
• Template: Mijn Logius
• Discussions: Discussions
• Anders:

Checks

Definition of ready

• [x] Naam van de component is duidelijk.
• [x] Doel van component is beschreven.
• [x] Design is aanwezig.
• [x] Tokens zijn aanwezig.
• [x] Waar in de templates wordt deze component gebruikt? Zijn er praktijkvoorbeelden waarin de component al gebruikt wordt?
• [ ] Beschrijving gemaakt van wat er moet gebeuren om de taak succesvol af te ronden.
• [ ] Testcases / stappen om handmatig te testen.
• [ ] Welke maatregelen worden toegepast om aan de WCAG te voldoen.

Definition of done

Component

• [x] Component is beschikbaar in de index.
• [x] Design tokens worden gebruikt.

Storybook

• [x] Tenminste 1 default story.
• [x] States en properties stories.
• [x] Documentatie is toegepast, check template.

Tests

• [x] Het component rendert.
• [x] Tenminste de Basis functionaliteit van het component wordt getest.

[AlineNap]

Design review 15 November

• Ik vind geen design tokens van de pre-heading in TS, hoe wordt de pre-heading nu gestijlt?
• De pre-heading is onderdeel van de heading-group deze mis ik nog

To do:

• Ticket aanmaken voor toevoegen van heading group
• Design tokens toevoegen voor pre-heading (en heading-group)
• Design toevoegen van pre-heading & heading-group in Figma

[veslav3]

@AlineNap Zou je kunnen bevestigen of je de volgende punten gaat oppakken?

1. Het toevoegen van design tokens voor de pre-heading en heading-group.
2. Het toevoegen van het design voor de pre-heading en heading-group in Figma. Wij hebben de ticket aangemaakt voor de heading group. https://github.com/nl-design-system/rijkshuisstijl-community/issues/927