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(react-components): add visual baselines for Headings #307

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+90 −186
Open

test(react-components): add visual baselines for Headings #307

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1be11e1
Design tokens for Heading
Oct 18, 2024
7d229d1
Visual regression added to Headings
Oct 18, 2024
4b2fce6
Moar smol fixes
Oct 18, 2024
766e1ea
Merge branch 'main' into chore_visual-tests-design-tokens-01
Nov 7, 2024
07aa923
test(react-components): add visual regression tests for headings
remypar5 Dec 5, 2024
c7ae70e
Merge branch 'main' of github.com:nl-design-system/lux into chore_vis…
remypar5 Dec 5, 2024
9177cb6
test(react-components): add visual regression tests for heading-group
remypar5 Dec 5, 2024
0d99d0c
test(react-components): add visual regression tests for pre-heading
remypar5 Dec 5, 2024
99d9e1e
chore: tell pipeline to run vis reg tests
remypar5 Dec 5, 2024
1e9a8e8
feat(storybook): add lux.color.canvas as background option
remypar5 Dec 20, 2024
aa2937b
Revert "feat(storybook): add lux.color.canvas as background option"
remypar5 Dec 20, 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
3 changes: 1 addition & 2 deletions packages/storybook/src/react-components/document/document.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import { LuxDocument, LuxParagraph } 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 tokensDefinition from './tokens.json';
import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down
24 changes: 22 additions & 2 deletions packages/storybook/src/react-components/heading-group/heading-group.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { LuxHeading, LuxHeadingGroup, LuxPreHeading } from '@lux-design-system/components-react';
import { LuxHeading, LuxHeading1, LuxHeadingGroup, LuxPreHeading } 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 { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

const meta = {
title: 'React Components/Heading-group',
title: 'React Components/HeadingGroup',
id: 'react-components-heading-group',
component: LuxHeadingGroup,
subcomponents: {},
Expand Down Expand Up @@ -47,3 +48,22 @@ export const Playground: Story = {
},
tags: ['!autodocs'],
};

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className="lux-theme--logius-light" key="light">
<LuxHeadingGroup>
<LuxHeading1>LuxHeading1</LuxHeading1>
<LuxPreHeading>LuxPreHeading</LuxPreHeading>
</LuxHeadingGroup>
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className="lux-theme--logius-dark" key="dark">
<LuxHeadingGroup>
<LuxHeading1>LuxHeading1</LuxHeading1>
<LuxPreHeading>LuxPreHeading</LuxPreHeading>
</LuxHeadingGroup>
</VisualRegressionWrapper>
</>
));
4 changes: 2 additions & 2 deletions packages/storybook/src/react-components/heading/heading.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation";

<Meta of={HeadingStories} />

# Lux Heading
# Heading

<CitationDocumentation
component="Utrecht Heading"
Expand All @@ -17,7 +17,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation";
## Opmerkingen

- Als de waarde voor de property `appearance` niet gedefinieerd is krijgt het de waarde van de property `level`
- De componenten "Heading1" t/m "Heading6" zijn gebouwd met het dynamische "Heading" component.
- De componenten `Heading1` t/m `Heading6` zijn gebouwd met het dynamische `Heading` component.

## Playground

Expand Down
52 changes: 48 additions & 4 deletions packages/storybook/src/react-components/heading/heading.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,25 @@ import {
LuxHeading4,
LuxHeading5,
LuxHeading6,
type LuxHeadingProps,
} 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 tokensDefinition from '@utrecht/heading-css/src/tokens.json';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

const headingText = "Pa's wijze lynx bezag vroom het fikse aquaduct!";

const meta = {
title: 'React Components/Heading',
id: 'react-components-heading',
component: LuxHeading,
subcomponents: {},
parameters: {
tokens,
tokensPrefix: 'react-heading',
tokensPrefix: 'utrecht-heading-1',
tokensDefinition,
},
argTypes: {
children: {
Expand All @@ -45,8 +50,6 @@ const meta = {

export default meta;

const headingText = "Pa's wijze lynx bezag vroom het fikse aquaduct!";

const HeadingTemplate: Story = {
render: ({ children, ...args }) => <LuxHeading {...args}>{children}</LuxHeading>,
args: {
Expand Down Expand Up @@ -91,3 +94,44 @@ export const HeadingWithDifferentAppearance: Story = {
appearance: 1,
},
};

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`} key={'light'}>
{[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>
</>
))}
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`} key="dark">
{[1, 2, 3, 4, 5, 6].map((level) => (
<>
<LuxHeading level={level as LuxHeadingProps['level']} key={'dark-level-' + level}>
H{level}: {headingText}
</LuxHeading>
<LuxHeading
level={99 as LuxHeadingProps['level']}
appearance={level as LuxHeadingProps['appearance']}
key={'dark-appeareance-' + level}
>
Lijkt op een H{level}: {headingText}
</LuxHeading>
</>
))}
</VisualRegressionWrapper>
</>
));
5 changes: 2 additions & 3 deletions packages/storybook/src/react-components/paragraph/paragraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { LuxParagraph } 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 tokensDefinition from './tokens.json';
import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory } from '../../utils';
import tokensDefinition from '@utrecht/paragraph-css/src/tokens.json';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down
172 changes: 0 additions & 172 deletions packages/storybook/src/react-components/paragraph/tokens.json
View file
Open in desktop

This file was deleted.

16 changes: 15 additions & 1 deletion packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { LuxPreHeading } 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 { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';

type Story = StoryObj<typeof meta>;

const meta = {
title: 'React Components/Pre-heading',
title: 'React Components/PreHeading',
id: 'react-components-pre-heading',
component: LuxPreHeading,
subcomponents: {},
Expand Down Expand Up @@ -48,3 +49,16 @@ export const Playground: Story = {
},
tags: ['!autodocs'],
};

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className="lux-theme--logius-light">
<LuxPreHeading>LuxPreHeading: {preHeadingText}</LuxPreHeading>
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className="lux-theme--logius-dark">
<LuxPreHeading>LuxPreHeading: {preHeadingText}</LuxPreHeading>
</VisualRegressionWrapper>
</>
));
Loading