Skip to content
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

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
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
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Als je hier het type aanpast moet je dat ook doen bij de group. Wellicht meoten daar een Generic van maken zodat het type automatisch doorsijpelt naar de option

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En dan string|number als default type voor de value

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`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik denk dat dit te veel is om bij te houden. Mocht er iets veranderen aan de test moeten we dat handmatig synchroon houden. Liever zie ik een VisualStates component zoals bij andere componenten (zie ook andere open PR's)

<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`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hier ook graag een VisualStates component introduceren

<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`}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

VisualStates

<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