feat(storybook): add lux.color.canvas as background option

nl-design-system · Dec 20, 2024 · 1e9a8e8 · 1e9a8e8
1 parent 99d9e1e
commit 1e9a8e8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git 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
@@ -1,12 +1,15 @@
 import {
   LuxHeading1,
+  LuxHeading2,
   LuxParagraph,
   type LuxSectionProps,
   LuxSection as Section,
 } 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 { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { VisualStates } from './visual/States';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 const LuxSection = (props: PropsWithChildren<LuxSectionProps> & HTMLAttributes<HTMLDivElement>) => (
   <Section {...props} />
@@ -56,7 +59,7 @@ export const Playground: Story = {
         </LuxParagraph>
       </div>,
       <div>
-        <LuxHeading1>Morbi commodo</LuxHeading1>
+        <LuxHeading2>Morbi commodo</LuxHeading2>
         <LuxParagraph>
           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(() => (
+  <>
+    <VisualRegressionWrapper className="lux-theme--logius-light">
+      <VisualStates />
+    </VisualRegressionWrapper>
+    <VisualRegressionWrapper className="lux-theme--logius-dark">
+      <VisualStates />
+    </VisualRegressionWrapper>
+  </>
+));
diff --git a/packages/storybook/src/react-components/section/visual/States.tsx 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 = () => (
+  <LuxSection>
+    <LuxHeading1>Lorem ipsum</LuxHeading1>
+    <LuxParagraph>
+      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.
+    </LuxParagraph>
+    <LuxHeading2>Morbi commodo</LuxHeading2>
+    <LuxParagraph>
+      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.
+    </LuxParagraph>
+  </LuxSection>
+);