From 1be11e153e30446df9a995ec9bc5f29878bdbfd0 Mon Sep 17 00:00:00 2001 From: Jaap-Hein Wester Date: Fri, 18 Oct 2024 15:06:39 +0200 Subject: [PATCH 1/9] Design tokens for Heading --- .../src/react-components/heading/heading.mdx | 2 +- .../react-components/heading/heading.stories.tsx | 15 +++++++-------- .../paragraph/paragraph.stories.tsx | 3 +-- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/storybook/src/react-components/heading/heading.mdx b/packages/storybook/src/react-components/heading/heading.mdx index 6ab1317f..efa0921f 100644 --- a/packages/storybook/src/react-components/heading/heading.mdx +++ b/packages/storybook/src/react-components/heading/heading.mdx @@ -5,7 +5,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation"; -# Lux Heading +# Heading & HTMLAttributes) => ( - -); +import tokensDefinition from '@utrecht/heading-css/src/tokens.json'; +import { createDesignTokensStory } from '../../utils'; type Story = StoryObj; @@ -25,7 +21,8 @@ const meta = { subcomponents: {}, parameters: { tokens, - tokensPrefix: 'react-heading', + tokensPrefix: 'utrecht-heading-1', + tokensDefinition, }, argTypes: { children: { @@ -97,3 +94,5 @@ export const HeadingWithDifferentAppearance: Story = { appearance: 1, }, }; + +export const DesignTokens = createDesignTokensStory(meta); diff --git a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx index c0256751..1fec5840 100644 --- a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx +++ b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx @@ -2,8 +2,7 @@ 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 { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils'; type Story = StoryObj; From 7d229d12fb4b8bc267642e8c0f0f16880978302a Mon Sep 17 00:00:00 2001 From: Jaap-Hein Wester Date: Fri, 18 Oct 2024 15:47:30 +0200 Subject: [PATCH 2/9] Visual regression added to Headings --- .../heading/heading.stories.tsx | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/storybook/src/react-components/heading/heading.stories.tsx b/packages/storybook/src/react-components/heading/heading.stories.tsx index daea0e46..c5a4ec86 100644 --- a/packages/storybook/src/react-components/heading/heading.stories.tsx +++ b/packages/storybook/src/react-components/heading/heading.stories.tsx @@ -6,11 +6,12 @@ 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 } from '../../utils'; +import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils'; type Story = StoryObj; @@ -96,3 +97,44 @@ export const HeadingWithDifferentAppearance: Story = { }; export const DesignTokens = createDesignTokensStory(meta); + +const headings = ['indefinitus', 'primus', 'secundus', 'tertius', 'quārtus', 'quīntus', 'sextus', 'invalidus']; + +export const Visual = createVisualRegressionStory(() => ( + <> +

Light

+ + {headings.map((heading, index) => ( + <> + + Lorem ipsum dolor sit amet, titulus {heading}. + + + Lorem ipsum dolor sit amet, aspectus {heading}. + + + ))} + +

Dark

+ + {headings.map((heading, index) => ( + <> + + Lorem ipsum dolor sit amet, titulus {heading}. + + + Lorem ipsum dolor sit amet, aspectus {heading}. + + + ))} + + +)); From 4b2fce6e9fbdbc0e6db85e96864873cf1df3b7af Mon Sep 17 00:00:00 2001 From: Jaap-Hein Wester Date: Fri, 18 Oct 2024 15:54:01 +0200 Subject: [PATCH 3/9] Moar smol fixes --- .../document/document.stories.tsx | 3 +- .../paragraph/paragraph.stories.tsx | 2 +- .../react-components/paragraph/tokens.json | 172 ------------------ 3 files changed, 2 insertions(+), 175 deletions(-) delete mode 100644 packages/storybook/src/react-components/paragraph/tokens.json diff --git a/packages/storybook/src/react-components/document/document.stories.tsx b/packages/storybook/src/react-components/document/document.stories.tsx index e4e64e42..ff1056aa 100644 --- a/packages/storybook/src/react-components/document/document.stories.tsx +++ b/packages/storybook/src/react-components/document/document.stories.tsx @@ -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; diff --git a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx index 1fec5840..472b9435 100644 --- a/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx +++ b/packages/storybook/src/react-components/paragraph/paragraph.stories.tsx @@ -1,7 +1,7 @@ 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 tokensDefinition from '@utrecht/paragraph-css/src/tokens.json'; import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils'; type Story = StoryObj; diff --git a/packages/storybook/src/react-components/paragraph/tokens.json b/packages/storybook/src/react-components/paragraph/tokens.json deleted file mode 100644 index 4b49e29d..00000000 --- a/packages/storybook/src/react-components/paragraph/tokens.json +++ /dev/null @@ -1,172 +0,0 @@ -{ - "utrecht": { - "paragraph": { - "color": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.document.color"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "color" - }, - "font-family": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "*", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.document.font-family"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontFamilies" - }, - "font-size": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.document.font-size"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontSizes" - }, - "font-weight": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontWeights" - }, - "line-height": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": ["", ""], - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.document.line-height"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "lineHeights" - }, - "margin-block-start": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.figma.supports-token": false - }, - "type": "spacing" - }, - "margin-block-end": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.figma.supports-token": false - }, - "type": "spacing" - }, - "lead": { - "color": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.color", "utrecht.document.color"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "color" - }, - "font-size": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-size", "utrecht.document.font-size"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontSizes" - }, - "font-weight": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-weight", "utrecht.document.font-weight"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontWeights" - }, - "line-height": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": ["", ""], - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.line-height", "utrecht.document.line-height"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "lineHeights" - } - }, - "small": { - "color": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.color", "utrecht.document.color"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "color" - }, - "font-size": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-size", "utrecht.document.font-size"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontSizes" - }, - "font-weight": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": "", - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.font-weight", "utrecht.document.font-weight"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "fontWeights" - }, - "line-height": { - "$extensions": { - "nl.nldesignsystem.css.property": { - "syntax": ["", ""], - "inherits": true - }, - "nl.nldesignsystem.fallback": ["utrecht.paragraph.line-height", "utrecht.document.line-height"], - "nl.nldesignsystem.figma.supports-token": true - }, - "type": "lineHeights" - } - } - } - } -} From 07aa923b51dd194dd986eb4b8b8fde154cc1d98b Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Thu, 5 Dec 2024 11:15:37 +0100 Subject: [PATCH 4/9] test(react-components): add visual regression tests for headings --- .../src/react-components/heading/heading.mdx | 2 +- .../heading/heading.stories.tsx | 31 +++++++++---------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/storybook/src/react-components/heading/heading.mdx b/packages/storybook/src/react-components/heading/heading.mdx index efa0921f..83dfe09a 100644 --- a/packages/storybook/src/react-components/heading/heading.mdx +++ b/packages/storybook/src/react-components/heading/heading.mdx @@ -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 diff --git a/packages/storybook/src/react-components/heading/heading.stories.tsx b/packages/storybook/src/react-components/heading/heading.stories.tsx index c5a4ec86..13313fdd 100644 --- a/packages/storybook/src/react-components/heading/heading.stories.tsx +++ b/packages/storybook/src/react-components/heading/heading.stories.tsx @@ -15,11 +15,12 @@ import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionW type Story = StoryObj; +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: 'utrecht-heading-1', @@ -49,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 }) => {children}, args: { @@ -98,40 +97,38 @@ export const HeadingWithDifferentAppearance: Story = { export const DesignTokens = createDesignTokensStory(meta); -const headings = ['indefinitus', 'primus', 'secundus', 'tertius', 'quārtus', 'quīntus', 'sextus', 'invalidus']; - export const Visual = createVisualRegressionStory(() => ( <>

Light

- {headings.map((heading, index) => ( + {[1, 2, 3, 4, 5, 6].map((level) => ( <> - - Lorem ipsum dolor sit amet, titulus {heading}. + + H{level}: {headingText} - Lorem ipsum dolor sit amet, aspectus {heading}. + Lijkt op een H{level}: {headingText} ))}

Dark

- {headings.map((heading, index) => ( + {[1, 2, 3, 4, 5, 6].map((level) => ( <> - - Lorem ipsum dolor sit amet, titulus {heading}. + + H{level}: {headingText} - Lorem ipsum dolor sit amet, aspectus {heading}. + Lijkt op een H{level}: {headingText} ))} From 9177cb63d7180a0d6579235f1a2e5c34752c9e7c Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Thu, 5 Dec 2024 11:43:52 +0100 Subject: [PATCH 5/9] test(react-components): add visual regression tests for heading-group --- .../heading-group/heading-group.stories.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx b/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx index f3aa23fb..cc08e36f 100644 --- a/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx +++ b/packages/storybook/src/react-components/heading-group/heading-group.stories.tsx @@ -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; const meta = { - title: 'React Components/Heading-group', + title: 'React Components/HeadingGroup', id: 'react-components-heading-group', component: LuxHeadingGroup, subcomponents: {}, @@ -47,3 +48,22 @@ export const Playground: Story = { }, tags: ['!autodocs'], }; + +export const Visual = createVisualRegressionStory(() => ( + <> +

Light

+ + + LuxHeading1 + LuxPreHeading + + +

Dark

+ + + LuxHeading1 + LuxPreHeading + + + +)); From 0d99d0c66b0ea2143e8f82dfd49e04b00ab3851b Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Thu, 5 Dec 2024 11:44:12 +0100 Subject: [PATCH 6/9] test(react-components): add visual regression tests for pre-heading --- .../pre-heading/pre-heading.stories.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx b/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx index a6bb672c..56551a4b 100644 --- a/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx +++ b/packages/storybook/src/react-components/pre-heading/pre-heading.stories.tsx @@ -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; const meta = { - title: 'React Components/Pre-heading', + title: 'React Components/PreHeading', id: 'react-components-pre-heading', component: LuxPreHeading, subcomponents: {}, @@ -48,3 +49,16 @@ export const Playground: Story = { }, tags: ['!autodocs'], }; + +export const Visual = createVisualRegressionStory(() => ( + <> +

Light

+ + LuxPreHeading: {preHeadingText} + +

Dark

+ + LuxPreHeading: {preHeadingText} + + +)); From 99d9e1ef0bf6e7b214bec5e0d669ac8a36a6a84f Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Thu, 5 Dec 2024 11:47:53 +0100 Subject: [PATCH 7/9] chore: tell pipeline to run vis reg tests From 1e9a8e8ce901f3d762dd01f3d6dd56338b8dfbf6 Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Fri, 20 Dec 2024 13:33:48 +0100 Subject: [PATCH 8/9] feat(storybook): add lux.color.canvas as background option --- packages/storybook/config/preview.tsx | 6 ++++- .../section/section.stories.tsx | 19 +++++++++++++++- .../section/visual/States.tsx | 22 +++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 packages/storybook/src/react-components/section/visual/States.tsx diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index 5eea05ed..c0b40cfe 100644 --- a/packages/storybook/config/preview.tsx +++ b/packages/storybook/config/preview.tsx @@ -53,6 +53,10 @@ const preview: Preview = { name: 'default', value: 'var(--lux-color-background-default)', }, + { + name: 'canvas', + value: 'var(--lux-color-canvas)', + }, { /* Deliberately provide a background which we'd never use in production. @@ -65,7 +69,7 @@ const preview: Preview = { { name: 'transparent', value: - 'fixed repeating-conic-gradient(#CCC 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px', + 'fixed repeating-conic-gradient(#EFEFEF 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px', }, { name: 'light', diff --git a/packages/storybook/src/react-components/section/section.stories.tsx b/packages/storybook/src/react-components/section/section.stories.tsx index 84fa42a4..0c8a0a06 100644 --- a/packages/storybook/src/react-components/section/section.stories.tsx +++ b/packages/storybook/src/react-components/section/section.stories.tsx @@ -1,5 +1,6 @@ import { LuxHeading1, + LuxHeading2, LuxParagraph, type LuxSectionProps, LuxSection as Section, @@ -7,6 +8,8 @@ import { import tokens from '@lux-design-system/design-tokens/dist/index.json'; import type { Meta, StoryObj } from '@storybook/react'; import { type HTMLAttributes, type PropsWithChildren } from 'react'; +import { VisualStates } from './visual/States'; +import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils'; const LuxSection = (props: PropsWithChildren & HTMLAttributes) => (
@@ -56,7 +59,7 @@ export const Playground: Story = { ,
- Morbi commodo + Morbi commodo Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero, sit amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin @@ -70,9 +73,23 @@ export const Playground: Story = { ], }, parameters: { + backgrounds: { + default: 'canvas', + }, docs: { sourceState: 'shown', }, }, tags: ['!autodocs'], }; + +export const Visual = createVisualRegressionStory(() => ( + <> + + + + + + + +)); diff --git a/packages/storybook/src/react-components/section/visual/States.tsx b/packages/storybook/src/react-components/section/visual/States.tsx new file mode 100644 index 00000000..3882d155 --- /dev/null +++ b/packages/storybook/src/react-components/section/visual/States.tsx @@ -0,0 +1,22 @@ +import { LuxHeading1, LuxHeading2, LuxParagraph, LuxSection } from '@lux-design-system/components-react'; + +export const VisualStates = () => ( + + Lorem ipsum + + 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. + + Morbi commodo + + Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero, sit + amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin nisi + vulputate eu. Curabitur eget ante a orci efficitur commodo. Fusce lobortis laoreet tincidunt. Nam a massa quis + risus vestibulum vulputate nec eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. Curabitur finibus semper congue. Integer in nulla venenatis quam luctus accumsan. Aliquam + molestie tincidunt erat a tincidunt. Donec posuere et dolor sit amet euismod. Praesent dolor justo, aliquet quis + nulla ac, ultrices dictum leo. + + +); From aa2937be7131b1fbdaadff3cf596704b709185c0 Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Fri, 20 Dec 2024 14:24:59 +0100 Subject: [PATCH 9/9] Revert "feat(storybook): add lux.color.canvas as background option" This reverts commit 1e9a8e8ce901f3d762dd01f3d6dd56338b8dfbf6. --- packages/storybook/config/preview.tsx | 6 +---- .../section/section.stories.tsx | 19 +--------------- .../section/visual/States.tsx | 22 ------------------- 3 files changed, 2 insertions(+), 45 deletions(-) delete mode 100644 packages/storybook/src/react-components/section/visual/States.tsx diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index c0b40cfe..5eea05ed 100644 --- a/packages/storybook/config/preview.tsx +++ b/packages/storybook/config/preview.tsx @@ -53,10 +53,6 @@ const preview: Preview = { name: 'default', value: 'var(--lux-color-background-default)', }, - { - name: 'canvas', - value: 'var(--lux-color-canvas)', - }, { /* Deliberately provide a background which we'd never use in production. @@ -69,7 +65,7 @@ const preview: Preview = { { name: 'transparent', value: - 'fixed repeating-conic-gradient(#EFEFEF 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px', + 'fixed repeating-conic-gradient(#CCC 0% 25%, var(--lux-color-background-default) 0% 50%) 50% / 20px 20px', }, { name: 'light', diff --git a/packages/storybook/src/react-components/section/section.stories.tsx b/packages/storybook/src/react-components/section/section.stories.tsx index 0c8a0a06..84fa42a4 100644 --- a/packages/storybook/src/react-components/section/section.stories.tsx +++ b/packages/storybook/src/react-components/section/section.stories.tsx @@ -1,6 +1,5 @@ import { LuxHeading1, - LuxHeading2, LuxParagraph, type LuxSectionProps, LuxSection as Section, @@ -8,8 +7,6 @@ import { import tokens from '@lux-design-system/design-tokens/dist/index.json'; import type { Meta, StoryObj } from '@storybook/react'; import { type HTMLAttributes, type PropsWithChildren } from 'react'; -import { VisualStates } from './visual/States'; -import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils'; const LuxSection = (props: PropsWithChildren & HTMLAttributes) => (
@@ -59,7 +56,7 @@ export const Playground: Story = {
,
- Morbi commodo + Morbi commodo Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero, sit amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin @@ -73,23 +70,9 @@ export const Playground: Story = { ], }, parameters: { - backgrounds: { - default: 'canvas', - }, docs: { sourceState: 'shown', }, }, tags: ['!autodocs'], }; - -export const Visual = createVisualRegressionStory(() => ( - <> - - - - - - - -)); diff --git a/packages/storybook/src/react-components/section/visual/States.tsx b/packages/storybook/src/react-components/section/visual/States.tsx deleted file mode 100644 index 3882d155..00000000 --- a/packages/storybook/src/react-components/section/visual/States.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { LuxHeading1, LuxHeading2, LuxParagraph, LuxSection } from '@lux-design-system/components-react'; - -export const VisualStates = () => ( - - Lorem ipsum - - 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. - - Morbi commodo - - Morbi commodo augue eget consequat tempus. Nulla scelerisque cursus fermentum. Aenean placerat ligula libero, sit - amet malesuada neque maximus et. Phasellus at massa nulla. Quisque sagittis tempor ante, quis sollicitudin nisi - vulputate eu. Curabitur eget ante a orci efficitur commodo. Fusce lobortis laoreet tincidunt. Nam a massa quis - risus vestibulum vulputate nec eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per - inceptos himenaeos. Curabitur finibus semper congue. Integer in nulla venenatis quam luctus accumsan. Aliquam - molestie tincidunt erat a tincidunt. Donec posuere et dolor sit amet euismod. Praesent dolor justo, aliquet quis - nulla ac, ultrices dictum leo. - - -);