chore(chromatic): Testing basic conf, styles not working locally

.github/workflows/chromatic.yml

@@ -0,0 +1,34 @@
+name: Chromatic CI
+
+on:
+  push:
+    branches:
+      - v*-dev
+  pull_request:
+    branches:
+      - v*-dev
+
+jobs:
+  chromatic-ec:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm install
+      - name: Run Chromatic for EC
+        run: npm run chromatic-EC
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+  chromatic-eu:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm install
+      - name: Run Chromatic for EU
+        run: npm run chromatic-EU
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_EU }}

package.json

@@ -1,6 +1,8 @@
 {
   "private": true,
-  "author": "European Commission",
+  "author": {
+    "name": "European Commission"
+  },
   "license": "EUPL-1.2",
   "description": "Europa Component Library",
   "scripts": {
@@ -30,7 +32,11 @@
     "test": "run-p test:*",
     "test:components": "jest --verbose",
     "test:coding-conventions": "npm run lint && npm run pretty-check",
-    "update-version": "scripts/update-version.sh"
+    "update-version": "scripts/update-version.sh",
+    "chromatic-eu": "cd src/playground/eu && npm run build",
+    "chromatic-ec": "cd src/playground/ec && npm run build",
+    "chromatic-EU": "STORYBOOK_CHROMATIC=true npx chromatic --build-script-name chromatic-eu",
+    "chromatic-EC": "STORYBOOK_CHROMATIC=true npx chromatic --build-script-name chromatic-ec"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.25.1",
@@ -39,6 +45,7 @@
     "@prettier/plugin-xml": "3.4.1",
     "@size-limit/preset-big-lib": "11.1.6",
     "babel-jest": "29.7.0",
+    "chromatic": "11.11.0",
     "classnames": "2.5.1",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
@@ -159,5 +166,7 @@
       "port": 6007,
       "host": "localhost"
     }
-  }
+  },
+  "name": "",
+  "version": ""
 }

src/implementations/twig/components/gallery/gallery.story.js

@@ -149,6 +149,7 @@ export default {
   decorators: [withNotes, withCode],
   parameters: {
     layout: 'fullscreen',
+    chromatic: { disable: true },
   },
 };
 

src/playground/ec/.storybook/preview.js

@@ -2,11 +2,39 @@ import { withCssResources } from '@storybook/addon-cssresources';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Buffer } from 'buffer';
 import { themes } from '@storybook/theming';
+import isChromatic from 'chromatic/isChromatic';
 
 global.Buffer = Buffer;
 
 import './ECL';
 
+if (isChromatic() || process.env.STORYBOOK_CHROMATIC) {
+  function createLink(href, media) {
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = href;
+    link.media = media || 'all';
+    return link;
+  }
+
+  // Manually inject styles
+  var head = document.head || document.getElementsByTagName('head')[0];
+
+  head.appendChild(createLink('./styles/optional/ecl-reset.css', 'screen'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-ec-default.css', 'screen'),
+  );
+  head.appendChild(createLink('./styles/ecl-ec.css', 'screen'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-ec-utilities.css', 'screen'),
+  );
+  head.appendChild(createLink('./styles/ecl-ec-print.css', 'print'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-ec-default-print.css', 'print'),
+  );
+}
+
 export const parameters = {
   disableSaveFromUI: true,
   a11y: {

src/playground/eu/.storybook/preview.js

@@ -2,11 +2,38 @@ import { withCssResources } from '@storybook/addon-cssresources';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { Buffer } from 'buffer';
 import { themes } from '@storybook/theming';
+import isChromatic from 'chromatic/isChromatic';
 
 global.Buffer = Buffer;
 
 import './ECL';
 
+if (isChromatic() || process.env.STORYBOOK_CHROMATIC) {
+  function createLink(href, media) {
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = href;
+    link.media = media || 'all';
+    return link;
+  }
+
+  // Manually inject styles
+  var head = document.head || document.getElementsByTagName('head')[0];
+  head.appendChild(createLink('./styles/optional/ecl-reset.css', 'screen'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-eu-default.css', 'screen'),
+  );
+  head.appendChild(createLink('./styles/ecl-eu.css', 'screen'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-eu-utilities.css', 'screen'),
+  );
+  head.appendChild(createLink('./styles/ecl-eu-print.css', 'print'));
+  head.appendChild(
+    createLink('./styles/optional/ecl-eu-default-print.css', 'print'),
+  );
+}
+
 export const parameters = {
   disableSaveFromUI: true,
   a11y: {

yarn.lock

@@ -5518,6 +5518,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+[email protected]:
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.11.0.tgz#5e5b956464acad22371d88218ea570374b541666"
+  integrity sha512-mwmYsNMsZlRLtlfFUEtac5zhoVRhc+O/lsuMdOpwkiDQiKX6WdSNIhic+dkLenfuzao2r18s50nphcOgFoatBg==
+
 chrome-trace-event@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"