From fe791880dcdeb9840be5112fa3c317315d6334ee Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Fri, 6 Dec 2024 14:09:30 +0100 Subject: [PATCH 1/3] test(components-react): add visual baseline section --- .../section/section.stories.tsx | 15 ++++++++++++- .../section/visual/States.tsx | 21 +++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/src/react-components/section/visual/States.tsx diff --git a/packages/storybook/src/react-components/section/section.stories.tsx b/packages/storybook/src/react-components/section/section.stories.tsx index 84fa42a4..7a7f33db 100644 --- a/packages/storybook/src/react-components/section/section.stories.tsx +++ b/packages/storybook/src/react-components/section/section.stories.tsx @@ -7,6 +7,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) => (
@@ -18,7 +20,6 @@ const meta = { title: 'React Components/Section', id: 'react-components-section', component: LuxSection, - subcomponents: {}, parameters: { tokens, tokensPrefix: 'react-section', @@ -76,3 +77,15 @@ export const Playground: Story = { }, tags: ['!autodocs'], }; + +export const Visual = createVisualRegressionStory(() => ( + <> +

Light

+ + + + + + + +)); 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..ec15f0e5 --- /dev/null +++ b/packages/storybook/src/react-components/section/visual/States.tsx @@ -0,0 +1,21 @@ +import { LuxHeading, LuxParagraph, LuxSection } from '@lux-design-system/components-react'; + +export const VisualStates = () => ( + + + Section Heading + + + Lead Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt ab, sint quas voluptate iste optio possimus + deleniti repellendus? Molestiae nemo nihil voluptatum dignissimos ut consequatur optio ducimus facilis nulla + alias? + + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore tenetur autem blanditiis quas reprehenderit + velit labore necessitatibus cumque accusamus, corporis perspiciatis. Minima optio omnis excepturi dolor sint + voluptatibus aut expedita! Aperiam tempore, sapiente sequi expedita commodi praesentium ut, qui eius non at quae + fuga accusantium! Dolorem dicta provident, ratione facilis corporis vero nesciunt cumque, assumenda velit quia, + quod culpa quidem. + + +); From 68b8d7a34f5f5aa96477725acb9b11159a0c40d8 Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Fri, 6 Dec 2024 14:47:49 +0100 Subject: [PATCH 2/3] test(components-react): add visual baseline section --- .../storybook/src/react-components/section/section.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/storybook/src/react-components/section/section.stories.tsx b/packages/storybook/src/react-components/section/section.stories.tsx index 7a7f33db..a68eccaa 100644 --- a/packages/storybook/src/react-components/section/section.stories.tsx +++ b/packages/storybook/src/react-components/section/section.stories.tsx @@ -84,6 +84,7 @@ export const Visual = createVisualRegressionStory(() => ( +

Dark

From 6f5495984e1d04654780aac909d75485bb82f180 Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Fri, 20 Dec 2024 13:33:48 +0100 Subject: [PATCH 3/3] feat(storybook): add lux.color.canvas as background option --- packages/storybook/config/preview.tsx | 6 ++++- .../section/section.stories.tsx | 6 ++++- .../section/visual/States.tsx | 27 ++++++++++--------- 3 files changed, 24 insertions(+), 15 deletions(-) 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 a68eccaa..f51f04f9 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, @@ -57,7 +58,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 @@ -71,6 +72,9 @@ export const Playground: Story = { ], }, parameters: { + backgrounds: { + default: 'canvas', + }, docs: { sourceState: 'shown', }, diff --git a/packages/storybook/src/react-components/section/visual/States.tsx b/packages/storybook/src/react-components/section/visual/States.tsx index ec15f0e5..3882d155 100644 --- a/packages/storybook/src/react-components/section/visual/States.tsx +++ b/packages/storybook/src/react-components/section/visual/States.tsx @@ -1,21 +1,22 @@ -import { LuxHeading, LuxParagraph, LuxSection } from '@lux-design-system/components-react'; +import { LuxHeading1, LuxHeading2, LuxParagraph, LuxSection } from '@lux-design-system/components-react'; export const VisualStates = () => ( - - Section Heading - - - Lead Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt ab, sint quas voluptate iste optio possimus - deleniti repellendus? Molestiae nemo nihil voluptatum dignissimos ut consequatur optio ducimus facilis nulla - alias? + 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 - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore tenetur autem blanditiis quas reprehenderit - velit labore necessitatibus cumque accusamus, corporis perspiciatis. Minima optio omnis excepturi dolor sint - voluptatibus aut expedita! Aperiam tempore, sapiente sequi expedita commodi praesentium ut, qui eius non at quae - fuga accusantium! Dolorem dicta provident, ratione facilis corporis vero nesciunt cumque, assumenda velit quia, - quod culpa quidem. + 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. );