test(components-react): add visual baseline section (#346)

Author: remypar5

packages/storybook/config/preview.tsx

@@ -53,6 +53,10 @@ const preview: Preview = {
           name: 'default',
           value: 'var(--lux-color-background-default)',
         },
+        {
+          name: 'canvas',
+          value: 'var(--lux-color-canvas)',
+        },
         {
           /*
           Deliberately provide a background which we'd never use in production.
@@ -65,7 +69,7 @@ const preview: Preview = {
         {
           name: 'transparent',
           value:
-            'fixed repeating-conic-gradient(#CCC 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px',
+            'fixed repeating-conic-gradient(#EFEFEF 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px',
         },
         {
           name: 'light',

packages/storybook/src/react-components/section/section.stories.tsx

@@ -1,12 +1,15 @@
 import {
   LuxHeading1,
+  LuxHeading2,
   LuxParagraph,
   type LuxSectionProps,
   LuxSection as Section,
 } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { VisualStates } from './visual/States';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 const LuxSection = (props: PropsWithChildren<LuxSectionProps> & HTMLAttributes<HTMLDivElement>) => (
   <Section {...props} />
@@ -18,7 +21,6 @@ const meta = {
   title: 'React Components/Section',
   id: 'react-components-section',
   component: LuxSection,
-  subcomponents: {},
   parameters: {
     tokens,
     tokensPrefix: 'react-section',
@@ -56,7 +58,7 @@ export const Playground: Story = {
         </LuxParagraph>
       </div>,
       <div>
-        <LuxHeading1>Morbi commodo</LuxHeading1>
+        <LuxHeading2>Morbi commodo</LuxHeading2>
         <LuxParagraph>
           Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero,
           sit amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin
@@ -70,9 +72,25 @@ export const Playground: Story = {
     ],
   },
   parameters: {
+    backgrounds: {
+      default: 'canvas',
+    },
     docs: {
       sourceState: 'shown',
     },
   },
   tags: ['!autodocs'],
 };
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-light">
+      <VisualStates />
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className="lux-theme--logius-dark">
+      <VisualStates />
+    </VisualRegressionWrapper>
+  </>
+));

packages/storybook/src/react-components/section/visual/States.tsx

@@ -0,0 +1,22 @@
+import { LuxHeading1, LuxHeading2, LuxParagraph, LuxSection } from '@lux-design-system/components-react';
+
+export const VisualStates = () => (
+  <LuxSection>
+    <LuxHeading1>Lorem ipsum</LuxHeading1>
+    <LuxParagraph>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Dolor ante id varius, aenean eu faucibus vitae
+      malesuada. Viverra malesuada aliquam et placerat justo porta ipsum parturient. Cursus nostra varius efficitur
+      lobortis aliquam lectus bibendum.
+    </LuxParagraph>
+    <LuxHeading2>Morbi commodo</LuxHeading2>
+    <LuxParagraph>
+      Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero, sit
+      amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin nisi
+      vulputate eu. Curabitur eget ante a orci efficitur commodo. Fusce lobortis laoreet tincidunt. Nam a massa quis
+      risus vestibulum vulputate nec eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+      inceptos himenaeos. Curabitur finibus semper congue. Integer in nulla venenatis quam luctus accumsan. Aliquam
+      molestie tincidunt erat a tincidunt. Donec posuere et dolor sit amet euismod. Praesent dolor justo, aliquet quis
+      nulla ac, ultrices dictum leo.
+    </LuxParagraph>
+  </LuxSection>
+);