Merge pull request #35 from Zuehlke/feature/handle-css-props

ensure css prop gets handled properly in storybook
Zuehlke · May 29, 2024 · 3a536b0 · 3a536b0
2 parents 2763bf7 + 3c30beb
commit 3a536b0
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/web-components/src/components/chart/chart.component.ts b/web-components/src/components/chart/chart.component.ts
@@ -44,7 +44,7 @@ export default class Chart extends BaseElement {
 
   protected render() {
     return html`
-      <div class="chart-container"></div>
+      <div class="chart-container" data-chromatic="ignore"></div>
     `;
   }
 

diff --git a/web-components/src/components/spinner/spinner.stories.ts b/web-components/src/components/spinner/spinner.stories.ts
@@ -7,13 +7,15 @@ import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import docs from './spinner.md?raw';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 
-const meta: Meta<Spinner> = {
+type SpinnerStory = Spinner & { '--spinner-background-color': string };
+const meta: Meta<SpinnerStory> = {
   title: 'Components/Spinner',
   component: 'dss-spinner',
   argTypes: {
     type: { control: 'select', options: spinnerTypes },
     size: { control: 'select', options: spinnerSizes },
     thickness: { control: 'select', options: spinnerThickness },
+    '--spinner-background-color': { control: 'color' },
   },
   parameters: {
     docs: {
@@ -25,12 +27,11 @@ const meta: Meta<Spinner> = {
 };
 export default meta;
 
-export type SpinnerStory = Spinner & { backgroundColor: string };
 const Template: StoryFn<SpinnerStory> = ({
   type,
   size,
   thickness,
-  backgroundColor,
+  '--spinner-background-color': backgroundColor,
 }) => html`
   <div style="height: 4rem; width: 4rem">
     <dss-spinner
@@ -64,7 +65,7 @@ export const OverwriteBackground: StoryObj<SpinnerStory> = {
   render: Template,
   args: {
     type: 'secondary',
-    backgroundColor: 'papayawhip',
+    '--spinner-background-color': 'papayawhip',
   },
 };
 

diff --git a/web-components/src/components/table/table.stories.ts b/web-components/src/components/table/table.stories.ts
@@ -162,7 +162,8 @@ export const CustomRender: StoryObj<Table> = {
 
         }).format(wealth.amount),
         header: () => html`
-          <marquee>Wealth</marquee>`,
+          <span style="text-transform: uppercase">Wealth</span>
+        `,
         cell: ({ row: { original } }) => {
           const { amount, currency } = original.wealth;
           const formattedParts = new Intl.NumberFormat(navigator.language, {

diff --git a/web-components/src/internals/baseElement/baseElement.ts b/web-components/src/internals/baseElement/baseElement.ts
@@ -1,11 +1,14 @@
 import { LitElement, unsafeCSS } from 'lit';
 import global from './global.css?inline';
+import disableAnimations from './disable-animations.css?inline';
 
 export const ActionKeystrokes = [' ', 'Enter'];
 
 export default class BaseElement<EventsPayloadMap = Record<string, never>> extends LitElement {
 
-  protected static globalStyles = unsafeCSS(global);
+  protected static globalStyles = import.meta.env.VITE_IS_CHROMATIC
+    ? unsafeCSS(disableAnimations + global)
+    : unsafeCSS(global);
 
   /**
    * Change events are relevant for many form libraries and general form handling. According to the spec they bubble

diff --git a/web-components/src/internals/baseElement/disable-animations.css b/web-components/src/internals/baseElement/disable-animations.css
@@ -0,0 +1,14 @@
+/* We have to disable all animations inside our web components for Chromatic Snapshot tests */
+
+html:focus-within {
+  scroll-behavior: auto;
+}
+
+*,
+*::before,
+*::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}