🎨👀 Design review: Alert component (2)

[AlineNap]

Bevindingen

1. Icoon uitlijning

• Het icoon graag centreren met de heading.
• Als er geen heading is, dan het icoon centreren met de eerste regel van de paragraaf.
• De token utrecht.alert.icon.inset-block-start lijkt te ontbreken voor het correct positioneren van het icoon.

2. Typography tokens voor heading toepassen

De titel moet de LUX-component tokens krijgen zoals besproken in Alert #237 (comment).

Toe te passen tokens:

• lux.alert.heading.font-family
• lux.alert.heading.font-size
• lux.alert.heading.font-weight
• lux.alert.heading.line-height

3. Thema NLdoc controle

• Bij het inschakelen van het NLdoc-thema wordt de font-size van de titel groter.
• Dit wordt waarschijnlijk opgelost door het correct toepassen van de Typography tokens voor de heading (zie punt 3).

4. Visual regressiontest uitbreiden

In de huidige visual regressiontest ontbreekt de heading. Graag een variant toevoegen met heading. Hiermee kunnen we de positionering van het icoon en de styling van de titel goed testen.