build: remove chromatic artifacts

.gitignore

@@ -9,7 +9,6 @@
 log.txt
 *.sublime-project
 *.sublime-workspace
-**/*.chromatic.stories.*
 package-lock.json
 
 .idea/

.storybook/preview-head.html

@@ -54,7 +54,7 @@
 
 <script>
   const windowRef = typeof window !== 'undefined' && window;
-  if (!inIframe() && !isChromatic() && !isDev()) {
+  if (!inIframe() && !isDev()) {
     setTimeout(() => {
       const div = document.createElement('div');
       div.textContent = 'EXAMPLE / BEISPIEL / EXEMPLE / ESEMPIO ';
@@ -101,27 +101,14 @@
     };
   }
 
-  if (isChromatic()) {
-    const sheet = new CSSStyleSheet();
-    sheet.insertRule(`.sb-show-main.sb-main-padded { padding: 0rem; }`);
-
-    document.adoptedStyleSheets.push(sheet);
-  }
-
   function inIframe() {
     try {
       return windowRef.self !== windowRef.top;
     } catch (e) {
       return true;
     }
   }
-  function isChromatic() {
-    return !!(
-      windowRef &&
-      (windowRef.navigator.userAgent.match(/Chromatic/) ||
-        windowRef.location.href.match(/chromatic=true/))
-    );
-  }
+
   function isDev() {
     return window.location.hostname === 'localhost';
   }

.storybook/preview.ts

@@ -1,13 +1,32 @@
 import * as tokens from '@sbb-esta/lyne-design-tokens';
+import { makeDecorator } from '@storybook/preview-api';
 import type { Parameters, StoryContext } from '@storybook/types';
-import type { Decorator, Preview } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
-import { html } from 'lit';
-
-import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
+import type { Preview } from '@storybook/web-components';
 
 import '../src/elements/core/styles/standard-theme.scss';
 
+const withBackgroundDecorator = makeDecorator({
+  name: 'withContextSpecificBackgroundColor',
+  parameterName: 'backgroundColor',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context, { parameters }) => {
+    const backgroundColor = parameters as (context: StoryContext) => string;
+
+    const rootElement = (context.canvasElement as unknown as HTMLElement).closest<HTMLElement>(
+      '.docs-story, .sb-show-main',
+    )!;
+
+    // If no background function is set, remove background color.
+    if (!backgroundColor) {
+      rootElement.style.removeProperty('background-color');
+    } else {
+      rootElement.style.backgroundColor = backgroundColor(context);
+    }
+
+    return getStory(context);
+  },
+});
+
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
 
@@ -16,13 +35,6 @@ const breakpoints = Object.entries(tokens)
   .map(([key, value]) => ({ key: getViewportName(key), value: value as number }))
   .sort((a, b) => a.value - b.value);
 
-/**
- * https://www.chromatic.com/docs/viewports/
- * CHROMATIC RESTRICTIONS:
- * - min allowed value = 320
- * - max allowed value = 1800
- */
-const viewports = breakpoints.map(({ value }) => (value < 320 ? 320 : value > 1800 ? 1800 : value));
 const breakpointNames: Record<string, number> = breakpoints.reduce(
   (current, next) => Object.assign(current, { [next.key]: next.value }),
   {} as Record<string, number>,
@@ -42,12 +54,6 @@ const storybookViewports = breakpoints.reduce(
 );
 
 const parameters: Parameters = {
-  // Set the viewports in Chromatic globally.
-  chromatic: {
-    delay: 2000,
-    viewports,
-    disableSnapshot: true,
-  },
   breakpoints: {
     breakpointNames,
     debounceTimeout: 10,
@@ -71,17 +77,8 @@ const parameters: Parameters = {
   },
 };
 
-const decorators: Decorator[] = [
-  (story, context: StoryContext) =>
-    isChromatic() && context.parameters.layout !== 'fullscreen'
-      ? html`<div style="padding: 2rem;min-height: 100vh">${story()}</div>`
-      : story(),
-  withBackgroundDecorator,
-  (story) => (isChromatic() ? html`<div class="sbb-disable-animation">${story()}</div>` : story()),
-];
-
 const preview: Preview = {
-  decorators,
+  decorators: [withBackgroundDecorator],
   parameters,
   tags: ['autodocs'],
 };

docs/CODING_STANDARDS.md

@@ -643,9 +643,10 @@ When it is not super obvious, include a brief description of what a class repres
 
 #### Variants of stories
 
-In order to avoid chromatic detected regressions, it's recommended to create separate stories for all visual variants.
+We recommend to create some visual stories, showing the most important cases.
 It's also recommended to include stories for the most important side cases,
 e.g. for a label that receives ellipsis if it is too long to fit in a container.
+It should be decided case by case.
 
 #### Controls
 

docs/REVIEW.md

@@ -34,7 +34,7 @@ Depending on the circumstances, additional options might be considered.
 
 - ⚠️ Were changes made that affect existing code (e.g. new dependencies, changed global code sections)?
 - ⚠️ Is the build green?
-- ⚠️ Are the chromatic tests green or don't affect existing stories in an undesired way?
+- ⚠️ Are the visual regression tests green or don't affect existing tests in an undesired way?
 
 #### Architecture
 
@@ -74,7 +74,7 @@ Depending on the circumstances, additional options might be considered.
 - Is there a story for each visual representation?
 - Are the story templates reused and divided into small vars if necessary?
 - Are the controls working and as consistent as possible through all stories?
-- Are the stories working on chromatic and give a value?
+- Are the test working on visual regression execution and give a value?
 - Are all texts written in English language?
 
 #### Styles

eslint.config.js

@@ -30,7 +30,6 @@ export default [
   },
   {
     ignores: [
-      '**/*.chromatic.stories.*',
       'dist/**/*',
       'coverage/**/*',
       'tools/generate-component/**/*',

package.json

@@ -41,8 +41,6 @@
     "docs:to-md": "yarn -s ts-hooks tools/docs/docs_generate.ts",
     "format": "prettier \"**/*\" --write --ignore-unknown",
     "generate": "yarn -s ts-hooks tools/generate-component/index.ts",
-    "generate:chromatic-stories": "yarn -s ts-hooks scripts/chromatic-stories-generator.ts",
-    "remove:chromatic-stories": "find . -name '*.chromatic.stories.ts' -delete",
     "integrity": "npm-run-all format docs",
     "lint": "npm-run-all --sequential lint:*",
     "lint:ts": "eslint \"**/*.ts\"",
@@ -110,7 +108,6 @@
     "@web/test-runner-playwright": "0.11.0",
     "@web/test-runner-puppeteer": "0.16.0",
     "@web/test-runner-visual-regression": "0.9.0",
-    "chromatic": "11.7.1",
     "custom-elements-manifest": "2.1.0",
     "date-fns": "3.6.0",
     "esbuild": "0.23.1",

src/elements-experimental/journey-summary/journey-summary.stories.ts

@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -75,7 +74,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   'round-trip': false,
   'header-level': headerLevel.options![2],
   now: new Date('2022-12-05T12:11:00').valueOf(),

src/elements-experimental/pearl-chain-time/pearl-chain-time.stories.ts

@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -59,7 +58,7 @@ const defaultArgs: Args = {
   legs: [progressLeg],
   'arrival-time': '2022-12-11T14:11:00',
   'departure-time': '2022-12-11T12:11:00',
-  'disable-animation': isChromatic(),
+  'disable-animation': false,
   now: new Date('2022-12-01T12:11:00').valueOf(),
 };
 

src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.stories.ts

@@ -1,6 +1,5 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -69,7 +68,7 @@ const defaultArgs: Args = {
   hideLine: false,
   bulletSize: bulletSize.options![0],
   position: 0,
-  disableAnimation: isChromatic(),
+  disableAnimation: false,
 };
 
 const Template = ({ disableAnimation, ...args }: Args): TemplateResult => {