test(components-react): add visual baseline to all formfield components

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

@@ -4,7 +4,7 @@ import './FormFieldRadioGroup.css';
 import { LuxFormFieldRadioOption } from '../form-field-radio-option/FormFieldRadioOption';
 
 interface RadioOption {
-  value: string;
+  value: string | number;
   label: string;
   disabled?: boolean;
   description?: React.ReactNode;

packages/components-react/src/form-field-select/FormFieldSelect.tsx

@@ -8,7 +8,11 @@ import {
 } from '../form-field-description/FormFieldDescription';
 import { LuxFormFieldErrorMessage } from '../form-field-error-message/FormFieldErrorMessage';
 import { LuxFormFieldLabel } from '../form-field-label/FormFieldLabel';
-import { LuxSelect, type LuxSelectProps } from '../select/Select';
+import { LuxSelect, LuxSelectOption, type LuxSelectOptionProps, type LuxSelectProps } from '../select/Select';
+
+export type LuxFormFieldSelectOptionsProps = LuxSelectOptionProps & {
+  label?: string | number;
+};
 
 export interface LuxFormFieldSelectProps
   extends Omit<UtrechtFormFieldProps, 'type' | 'onBlur' | 'onChange' | 'onFocus'>,
@@ -27,13 +31,15 @@ export interface LuxFormFieldSelectProps
       | 'size'
       | 'value'
     > {
+  options?: LuxFormFieldSelectOptionsProps[];
   appearance?: LuxFormFieldDescriptionAppearance;
   distanced?: boolean;
   inputRef?: Ref<HTMLSelectElement>;
 }
 
 export const LuxFormFieldSelect = ({
   label,
+  options,
   description,
   errorMessage,
   disabled,
@@ -114,10 +120,17 @@ export const LuxFormFieldSelect = ({
             }) || undefined
           }
           {...selectAttrs}
-        />
+        >
+          {options
+            ? options.map((option) => (
+                <LuxSelectOption {...option} key={option.value}>
+                  {option.label}
+                </LuxSelectOption>
+              ))
+            : formFieldAttrs['children']}
+        </LuxSelect>
       }
       className={className}
-      {...formFieldAttrs}
     />
   );
 };

packages/components-react/src/index.ts

@@ -24,7 +24,11 @@ export {
   type LuxFormFieldErrorMessageProps,
 } from './form-field-error-message/FormFieldErrorMessage';
 export { LuxFormFieldLabel, type LuxFormFieldLabelProps } from './form-field-label/FormFieldLabel';
-export { LuxFormFieldSelect, type LuxFormFieldSelectProps } from './form-field-select/FormFieldSelect';
+export {
+  LuxFormFieldSelect,
+  type LuxFormFieldSelectProps,
+  type LuxFormFieldSelectOptionsProps,
+} from './form-field-select/FormFieldSelect';
 export { LuxFormFieldTextbox, type LuxFormFieldTextboxProps } from './form-field-textbox/FormFieldTextbox';
 export { LuxParagraph, type LuxParagraphProps } from './paragraph/Paragraph';
 export {

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

@@ -2,6 +2,7 @@ import { LuxFormFieldCheckbox, type LuxFormFieldCheckboxProps } from '@lux-desig
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { BADGES } from '../../../config/preview';
+import { createDesignTokensStory, createVisualRegressionStory, 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';
@@ -105,3 +106,50 @@ export const withLongTexts: Story = {
     withTarget: true,
   },
 };
+
+export const DesignTokens = createDesignTokensStory(meta);
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <LuxFormFieldCheckbox label="Label" />
+      <LuxFormFieldCheckbox label="Label" checked />
+      <LuxFormFieldCheckbox label="Label" description="Description" />
+      <h5 className="utrecht-heading-4">Hover &amp; Focus</h5>
+      <div className="pseudo-hover-all">
+        <LuxFormFieldCheckbox label="Label" />
+      </div>
+      <div className="pseudo-focus-all pseudo-focus-visible-all">
+        <LuxFormFieldCheckbox label="Label" />
+      </div>
+      <h5 className="utrecht-heading-4">Invalid</h5>
+      <LuxFormFieldCheckbox label="Label" errorMessage="Error Message" invalid />
+      <LuxFormFieldCheckbox label="Label" description="Description" errorMessage="Error Message" invalid />
+      <h5 className="utrecht-heading-4">Disabled</h5>
+      <LuxFormFieldCheckbox label="Label" disabled />
+      <LuxFormFieldCheckbox label="Label" disabled checked />
+      <LuxFormFieldCheckbox label="Label" description="Description" disabled />
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <LuxFormFieldCheckbox label="Label" />
+      <LuxFormFieldCheckbox label="Label" checked />
+      <LuxFormFieldCheckbox label="Label" description="Description" />
+      <h5 className="utrecht-heading-4">Hover &amp; Focus</h5>
+      <div className="pseudo-hover-all">
+        <LuxFormFieldCheckbox label="Label" />
+      </div>
+      <div className="pseudo-focus-all pseudo-focus-visible-all">
+        <LuxFormFieldCheckbox label="Label" />
+      </div>
+      <h5 className="utrecht-heading-4">Invalid</h5>
+      <LuxFormFieldCheckbox label="Label" errorMessage="Error Message" invalid />
+      <LuxFormFieldCheckbox label="Label" description="Description" errorMessage="Error Message" invalid />
+      <h5 className="utrecht-heading-4">Disabled</h5>
+      <LuxFormFieldCheckbox label="Label" disabled />
+      <LuxFormFieldCheckbox label="Label" disabled checked />
+      <LuxFormFieldCheckbox label="Label" description="Description" disabled />
+    </VisualRegressionWrapper>
+  </>
+));

packages/storybook/src/react-components/form-field-description/form-field-description.mdx

@@ -43,6 +43,11 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation";
 <Description of={FormFieldDescriptionStories.Invalid} />
 <Canvas of={FormFieldDescriptionStories.Invalid} />
 
+### Appearance vormgegeven met tokens
+
+<Description of={FormFieldDescriptionStories.CustomAppearance} />
+<Canvas of={FormFieldDescriptionStories.CustomAppearance} sourceState="none" />
+
 ### Lange Beschrijving
 
 <Description of={FormFieldDescriptionStories.LongDescription} />

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

@@ -2,6 +2,18 @@ import { LuxFormFieldDescription } 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 { BADGES } from '../../../config/preview';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
+
+const CustomStyleBlock = () => (
+  <style>
+    {`
+  .lux-theme--logius-custom {
+    --utrecht-form-field-description-valid-color: green;
+    --utrecht-form-field-description-invalid-color: red;
+  }
+  `}
+  </style>
+);
 
 const meta = {
   title: 'React Components/Form Field/Form Field Description',
@@ -10,7 +22,7 @@ const meta = {
   parameters: {
     badges: [BADGES.WIP, BADGES.CANARY],
     tokens,
-    tokensPrefix: 'react-form-field-description',
+    tokensPrefix: 'utrecht-form-field-description',
     docs: {
       description: {
         component: 'A description component for form fields that provides additional context or validation feedback.',
@@ -94,6 +106,35 @@ export const Invalid: Story = {
   },
 };
 
+export const CustomAppearance: Story = {
+  args: {},
+  render: () => (
+    <>
+      <CustomStyleBlock />
+      <LuxFormFieldDescription appearance="valid" className={`lux-theme--logius-custom`}>
+        Valid Form Field Description
+      </LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="invalid" className={`lux-theme--logius-custom`}>
+        Invalid Form Field Description
+      </LuxFormFieldDescription>
+    </>
+  ),
+  parameters: {
+    controls: {
+      disable: true,
+    },
+    docs: {
+      source: {
+        code: null,
+      },
+      description: {
+        story:
+          'Om de `valid` en `invalid` _appearance_ een styling te geven kan dit met de `...valid.color`- en `...invalid.color`-tokens.',
+      },
+    },
+  },
+};
+
 export const LongDescription: Story = {
   args: {
     children:
@@ -107,3 +148,44 @@ export const LongDescription: Story = {
     },
   },
 };
+
+export const DesignTokens = createDesignTokensStory(meta);
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <LuxFormFieldDescription>Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="valid">Valid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="invalid">Invalid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription>
+        Long Form Field Description. 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.
+      </LuxFormFieldDescription>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <LuxFormFieldDescription>Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="valid">Valid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="invalid">Invalid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription>
+        Long Form Field Description. 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.
+      </LuxFormFieldDescription>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Custom</h4>
+    <CustomStyleBlock />
+    <VisualRegressionWrapper className={`lux-theme--logius-light lux-theme--logius-custom`}>
+      <LuxFormFieldDescription>Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="valid">Valid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription appearance="invalid">Invalid Form Field Description</LuxFormFieldDescription>
+      <LuxFormFieldDescription>
+        Long Form Field Description. 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.
+      </LuxFormFieldDescription>
+    </VisualRegressionWrapper>
+  </>
+));

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

@@ -3,6 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { forwardRef, PropsWithChildren } from 'react';
 import { BADGES } from '../../../config/preview';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 const WrappedLuxFormFieldErrorMessage = forwardRef<
   HTMLParagraphElement,
@@ -18,7 +19,7 @@ const meta = {
   parameters: {
     badges: [BADGES.WIP, BADGES.CANARY],
     tokens,
-    tokensPrefix: 'react-form-field-error-message',
+    tokensPrefix: 'utrecht-form-field-error-message',
   },
   argTypes: {
     children: {
@@ -72,3 +73,18 @@ export const Distanced: Story = {
     distanced: true,
   },
 };
+
+export const DesignTokens = createDesignTokensStory(meta);
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <LuxFormFieldErrorMessage>Error Message</LuxFormFieldErrorMessage>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <LuxFormFieldErrorMessage>Error Message</LuxFormFieldErrorMessage>
+    </VisualRegressionWrapper>
+  </>
+));

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

@@ -3,6 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import { type LabelHTMLAttributes, type PropsWithChildren } from 'react';
 import { BADGES } from '../../../config/preview';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 const LuxFormFieldLabel = (
   props: PropsWithChildren<LuxFormFieldLabelProps> & LabelHTMLAttributes<HTMLLabelElement>,
@@ -18,7 +19,7 @@ const meta = {
   parameters: {
     badges: [BADGES.WIP, BADGES.CANARY],
     tokens,
-    tokensPrefix: 'react-form-label',
+    tokensPrefix: 'utrecht-form-label',
   },
   argTypes: {
     children: {
@@ -110,3 +111,26 @@ export const CheckedLabel: Story = {
     type: 'checkbox',
   },
 };
+
+export const DesignTokens = createDesignTokensStory(meta);
+
+export const Visual = createVisualRegressionStory(() => (
+  <div className="utrecht-document">
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <LuxFormFieldLabel>Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel type="checkbox">Checkbox Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel type="radio">Radio Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel checked>Checked Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel disabled>Disabled Label</LuxFormFieldLabel>
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <LuxFormFieldLabel>Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel type="checkbox">Checkbox Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel type="radio">Radio Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel checked>Checked Label</LuxFormFieldLabel>
+      <LuxFormFieldLabel disabled>Disabled Label</LuxFormFieldLabel>
+    </VisualRegressionWrapper>
+  </div>
+));