Feat/simplify visual regression testing

packages/storybook/config/main.ts

@@ -29,7 +29,7 @@ const config: StorybookConfig = {
   managerHead(head) {
     return `
       ${head}
-      <style>div[data-item-id$="--visual"] { display: none; }</style>
+      <style>div[data-item-id*="--visual"] { display: none; }</style>
     `;
   },
   features: {},

packages/storybook/package.json

@@ -61,15 +61,16 @@
     "@utrecht/form-field-error-message-css": "1.3.1",
     "@utrecht/form-label-css": "1.3.0",
     "@utrecht/heading-css": "1.2.0",
-    "@utrecht/pre-heading-css": "1.2.0",
     "@utrecht/heading-group-css": "1.2.0",
-    "@utrecht/select-css": "1.2.0",
     "@utrecht/link-css": "1.1.0",
     "@utrecht/paragraph-css": "1.1.0",
+    "@utrecht/pre-heading-css": "1.2.0",
     "@utrecht/radio-button-css": "1.3.1",
+    "@utrecht/select-css": "1.2.0",
     "@utrecht/textbox-css": "1.3.1",
     "@vitejs/plugin-react": "4.3.1",
     "chromatic": "11.7.0",
+    "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "require-from-string": "2.0.2",

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

@@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualTypes } from './visual/Types';
 import { BADGES } from '../../../config/preview';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import { createVisualRegressionStory, VisualRegressionTest, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -116,6 +116,8 @@ export const ErrorAlert: Story = {
   },
 };
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualTypes} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

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

@@ -6,7 +6,12 @@ import tokensDefinition from '@utrecht/button-css/src/tokens.json';
 import { InteractiveStates, PropertyStates } from './visual/States';
 import { Appearances, Sizes } from './visual/Variants';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -248,7 +253,7 @@ export const Busy: Story = {
   parameters: {
     docs: {
       description: {
-        story: `Een busy button zet je met het \`busy\`-attribute (\`true\`/\`false\`, default: \`undefined\`). Toont een \`wait\` cursor en \`aria-busy\`-attribute. Dit gebruik je 
+        story: `Een busy button zet je met het \`busy\`-attribute (\`true\`/\`false\`, default: \`undefined\`). Toont een \`wait\` cursor en \`aria-busy\`-attribute. Dit gebruik je
           bijvoorbeeld als een gebruiker met een knop een actie in gang zet die langer kan duren, zoals een download.`,
       },
     },
@@ -326,6 +331,20 @@ export const ButtonWithIconAtPositionEnd: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => (
+  <VisualRegressionTest
+    products={['eva']}
+    testCase={() => (
+      <>
+        <Appearances />
+        <Sizes />
+        <InteractiveStates />
+        <PropertyStates />
+      </>
+    )}
+  />
+));
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-checkbox/form-field-checkbox.stories.tsx

@@ -3,7 +3,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 import CheckboxMeta from '../checkbox/checkbox.stories';
 import FormFieldDescriptionMeta from '../form-field-description/form-field-description.stories';
 import FormFieldErrorMessageMeta from '../form-field-error-message/form-field-error-message.stories';
@@ -118,6 +123,8 @@ export const withLongTexts: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-description/form-field-description.stories.tsx

@@ -3,7 +3,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 const CustomStyleBlock = () => (
   <style>
@@ -152,6 +157,8 @@ export const LongDescription: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-error-message/form-field-error-message.stories.tsx

@@ -4,7 +4,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { forwardRef, PropsWithChildren } from 'react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 const WrappedLuxFormFieldErrorMessage = forwardRef<
   HTMLParagraphElement,
@@ -77,6 +82,8 @@ export const Distanced: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-label/form-field-label.stories.tsx

@@ -4,7 +4,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { type LabelHTMLAttributes, type PropsWithChildren } from 'react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 const LuxFormFieldLabel = (
   props: PropsWithChildren<LuxFormFieldLabelProps> & LabelHTMLAttributes<HTMLLabelElement>,
@@ -115,6 +120,8 @@ export const CheckedLabel: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <div className="utrecht-document">
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx

@@ -2,7 +2,7 @@ import { LuxFormFieldRadioGroup } from '@lux-design-system/components-react';
 import { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import { createVisualRegressionStory, VisualRegressionTest, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -211,6 +211,8 @@ export const WithLongLabels: Story = {
   },
 };
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <div className="utrecht-document">
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-radio-option/form-field-radio-option.stories.tsx

@@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import { createVisualRegressionStory, VisualRegressionTest, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -153,6 +153,8 @@ export const FocusVisible: Story = {
   },
 };
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <div className="utrecht-document">
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-radio-option/visual/States.tsx

@@ -1,6 +1,7 @@
 import { LuxFormFieldRadioOption } from '@lux-design-system/components-react';
+import { LuxMode } from '../../../utils';
 
-export const VisualStates = ({ mode }: { mode: 'light' | 'dark' }) => (
+export const VisualStates = ({ mode }: { mode: LuxMode }) => (
   <>
     <LuxFormFieldRadioOption name={`radiooption-default-${mode}`} label="Radio Option" />
     <LuxFormFieldRadioOption name={`radiooption-descriptions-${mode}`} label="Radio Option" description="Description" />

packages/storybook/src/react-components/form-field-select/form-field-select.stories.tsx

@@ -7,7 +7,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 import FormFieldDescriptionMeta from '../form-field-description/form-field-description.stories';
 import FormFieldErrorMessageMeta from '../form-field-error-message/form-field-error-message.stories';
 import SelectMeta from '../select/select.stories';
@@ -104,6 +109,10 @@ export const Focus: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => (
+  <VisualRegressionTest testCase={() => <VisualStates options={options} />} />
+));
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field-textbox/form-field-textbox.stories.tsx

@@ -3,7 +3,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VisualStates } from './visual/States';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 import FormFieldDescriptionMeta from '../form-field-description/form-field-description.stories';
 import FormFieldErrorMessageMeta from '../form-field-error-message/form-field-error-message.stories';
 import TextboxMeta from '../textbox/textbox.stories';
@@ -59,6 +64,8 @@ export const Playground: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

packages/storybook/src/react-components/form-field/form-field.stories.tsx

@@ -10,7 +10,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormFieldType } from './visual/FormFieldTypes';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 const meta = {
   title: 'React Components/Form Field',
@@ -146,6 +151,35 @@ export const FormFieldError: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => (
+  <>
+    <LuxParagraph>
+      <strong>Note:</strong> Dit is alleen een test voor het FormField, de verschillende inputs hebben hun eigen tests.
+    </LuxParagraph>
+    <VisualRegressionTest
+      testCase={() => (
+        <>
+          <h5 className="utrecht-heading-4">Type: text</h5>
+          <FormFieldType type="text" />
+          <FormFieldType type="text" show={{ description: false }} />
+          <FormFieldType type="text" show={{ extra: true }} />
+          <FormFieldType type="text" invalid />
+          <h5 className="utrecht-heading-4">Type: checkbox</h5>
+          <FormFieldType type="checkbox" />
+          <FormFieldType type="checkbox" show={{ description: false }} />
+          <FormFieldType type="checkbox" show={{ extra: true }} />
+          <FormFieldType type="checkbox" invalid />
+          <h5 className="utrecht-heading-4">Type: radio</h5>
+          <FormFieldType type="radio" />
+          <FormFieldType type="radio" show={{ description: false }} />
+          <FormFieldType type="radio" show={{ extra: true }} />
+          <FormFieldType type="radio" invalid />
+        </>
+      )}
+    />
+  </>
+));
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <LuxParagraph>

packages/storybook/src/react-components/heading-group/heading-group.stories.tsx

@@ -2,7 +2,7 @@ import { LuxHeading, LuxHeading1, LuxHeadingGroup, LuxPreHeading } from '@lux-de
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { BADGES } from '../../../config/preview';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import { createVisualRegressionStory, VisualRegressionTest, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -51,6 +51,17 @@ export const Playground: Story = {
   tags: ['!autodocs'],
 };
 
+export const VisualNew = createVisualRegressionStory(() => (
+  <VisualRegressionTest
+    testCase={() => (
+      <LuxHeadingGroup>
+        <LuxHeading1>LuxHeading1</LuxHeading1>
+        <LuxPreHeading>LuxPreHeading</LuxPreHeading>
+      </LuxHeadingGroup>
+    )}
+  />
+));
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>

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

@@ -12,7 +12,12 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokensDefinition from '@utrecht/heading-css/src/tokens.json';
 import { BADGES } from '../../../config/preview';
-import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+import {
+  createDesignTokensStory,
+  createVisualRegressionStory,
+  VisualRegressionTest,
+  VisualRegressionWrapper,
+} from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -99,6 +104,29 @@ export const HeadingWithDifferentAppearance: Story = {
 
 export const DesignTokens = createDesignTokensStory(meta);
 
+export const VisualNew = createVisualRegressionStory(() => (
+  <VisualRegressionTest
+    testCase={() => (
+      <>
+        {[1, 2, 3, 4, 5, 6].map((level) => (
+          <>
+            <LuxHeading level={level as LuxHeadingProps['level']} key={'light-level-' + level}>
+              H{level}: {headingText}
+            </LuxHeading>
+            <LuxHeading
+              level={99 as LuxHeadingProps['level']}
+              appearance={level as LuxHeadingProps['appearance']}
+              key={'light-appeareance-' + level}
+            >
+              Lijkt op een H{level}: {headingText}
+            </LuxHeading>
+          </>
+        ))}
+      </>
+    )}
+  />
+));
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="utrecht-heading-3">Light</h4>