test(components-react): add visual baseline section

[remypar5]

Contents

Maak een baseline voor de visuele regressietests voor het LuxSection React component.

Checklist

• New features/components and bugfixes are covered by tests
• Changesets are created
• Definition of Done is checked

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lux	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 1:20pm

[AlineNap]

Is het mogelijk om de canvas kleur toe te voegen aan het voorbeeld in de playground van Storybook? Dan zie je naast het kleurverschil ook de border-radius.

Verder top!

[remypar5]

Is het mogelijk om de canvas kleur toe te voegen aan het voorbeeld in de playground van Storybook? Dan zie je naast het kleurverschil ook de border-radius.

@AlineNap Zeker. Je kan verschillende achtergrondkleuren of zelfs een -patroon kiezen. Dat doe je met het 2e knopje links van de theme switcher. Voor jou zelfs een paarse kleur beschikbaar gemaakt

[AlineNap]

Ik zie niks veranderen als ik paars selecteer.

Wat ik bedoel is dat ik graag in de playground de token lux.color.canvas toegepast zie als achtergrond kleur met daarop de section. Dan is het duidelijk dat de section een border radius heeft en waar die stopt qua padding.

Dus dan zou de paarse omlijning (zie screenshots) de section zijn en de achtergrond is dan de canvas kleur. Als ik dan switch naar darkmode zal de canvas kleur zich ook aanpassen.

[remypar5]

Wat ik bedoel is dat ik graag in de playground de token lux.color.canvas toegepast zie als achtergrond kleur met daarop de section. Dan is het duidelijk dat de section een border radius heeft en waar die stopt qua padding.

@AlineNap Ik snap m en heb canvas als optie toegevoegd om als achtergrond in te stellen. Deze ook voor de Section als standaard ingesteld.

Ik begrijp alleen niet waarom je geen verandering ziet als je boundaries als achtergrond kiest. Er zou dus een paarse rand om de section heen moeten komen te staan.