Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jan 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0cd7ec5
Tests added, fixes on component
Dec 2, 2024
4d22752
First set of Vis reg tests
Dec 6, 2024
83aa6a8
Second set of Vis reg tests (WIP)
Dec 9, 2024
cf23e7f
Third set of Vis reg tests (WIP)
Dec 12, 2024
46447ea
Forth set of Vis reg tests
Dec 16, 2024
315d938
RadioOptionValue
Dec 31, 2024
ea46d13
forwardRef bug fixed
Dec 31, 2024
58141ec
Merge branch 'main' into 302-form-field-single-checkbox-continued
Jan 2, 2025
23abd1f
Merge branch '302-form-field-single-checkbox-continued' into 344-chor…
Jan 2, 2025
6f09628
refactor(components-react): move visreg scenarios to VisualStates com…
remypar5 Jan 2, 2025
62177de
chore: remove tryout files from index
remypar5 Jan 2, 2025
0289e0e
refactor(components-react): fix imports
remypar5 Jan 2, 2025
834c639
fix: build
remypar5 Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components-react/src/form-field-radio-group/FormFieldRadioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
19 changes: 16 additions & 3 deletions packages/components-react/src/form-field-select/FormFieldSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'>,
Expand All @@ -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,
Expand Down Expand Up @@ -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}
/>
);
};
6 changes: 5 additions & 1 deletion packages/components-react/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
48 changes: 48 additions & 0 deletions packages/storybook/src/react-components/form-field-checkbox/form-field-checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
</>
));
5 changes: 5 additions & 0 deletions ...torybook/src/react-components/form-field-description/form-field-description.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
84 changes: 83 additions & 1 deletion .../storybook/src/react-components/form-field-description/form-field-description.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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.',
Expand Down Expand Up @@ -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:
Expand All @@ -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>
</>
));
18 changes: 17 additions & 1 deletion ...rybook/src/react-components/form-field-error-message/form-field-error-message.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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: {
Expand Down Expand Up @@ -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>
</>
));
26 changes: 25 additions & 1 deletion packages/storybook/src/react-components/form-field-label/form-field-label.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand All @@ -18,7 +19,7 @@ const meta = {
parameters: {
badges: [BADGES.WIP, BADGES.CANARY],
tokens,
tokensPrefix: 'react-form-label',
tokensPrefix: 'utrecht-form-label',
},
argTypes: {
children: {
Expand Down Expand Up @@ -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>
));
Loading
Loading