chore(chromatic): Basic config

.github/workflows/ci.yml

@@ -16,6 +16,7 @@ jobs:
       - uses: amannn/action-semantic-pull-request@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   audit:
     name: audit
     runs-on: ubuntu-latest
@@ -26,6 +27,7 @@ jobs:
           node-version: 20.9.0
       - name: Test
         run: ./scripts/audit.sh
+
   tests:
     name: tests
     runs-on: ubuntu-latest
@@ -42,6 +44,7 @@ jobs:
         run: yarn build:presets
       - name: Test
         run: yarn test
+
   size:
     name: size
     runs-on: ubuntu-latest
@@ -56,12 +59,15 @@ jobs:
         run: yarn dist:presets
       - name: Test
         run: yarn size-limit
+
   deploy-pull-request-preview:
-    name: deploy preview
+    name: Deploy Preview
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
           node-version: 20.9.0
@@ -71,6 +77,7 @@ jobs:
         run: yarn build:icons
       - name: Package application
         run: yarn dist
+      - uses: jpoehnelt/reusable-workspace/save@v1
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]
         with:
@@ -81,8 +88,31 @@ jobs:
           NETLIFY: true
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+
+  chromatic-ec:
+    name: Run Chromatic for EC
+    needs: deploy-pull-request-preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jpoehnelt/reusable-workspace/restore@v1
+      - uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: dist/website/playground/ec
+
+  chromatic-eu:
+    name: Run Chromatic for EU
+    needs: deploy-pull-request-preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jpoehnelt/reusable-workspace/restore@v1
+      - uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_EU }}
+          storybookBuildDir: dist/website/playground/eu
+
   deploy-release-branch:
-    name: deploy release branch
+    name: Deploy Release Branch
     runs-on: ubuntu-latest
     if: github.event_name == 'push' && endsWith(github.ref, '-dev')
     steps:

chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "autoAcceptChanges": "v4-dev",
+  "exitOnceUploaded": true,
+  "onlyChanged": true
+}

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.9",
@@ -40,6 +46,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/inpage-navigation/inpage-navigation.story.js

@@ -106,7 +106,12 @@ const prepareHtmlContent = (data) =>
 
 export default {
   title: 'Components/Navigation/Inpage navigation',
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: {
+      disable: true,
+    },
+  },
 };
 
 export const Default = (_, { loaded: { component } }) => component;

src/implementations/twig/components/media-container/media-container.story.js

@@ -204,6 +204,9 @@ Video.args = getArgs(dataVideo);
 Video.argTypes = getArgTypes(dataVideo);
 Video.parameters = {
   notes: { markdown: notes, json: dataVideo },
+  chromatic: {
+    disable: true,
+  },
 };
 
 export const EmbeddedVideo = (_, { loaded: { component } }) => component;

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

@@ -55,6 +55,11 @@ const prepareData = (data, args) => {
 export default {
   title: 'Components/Popover',
   decorators: [withNotes, withCode],
+  parameters: {
+    chromatic: {
+      disable: true,
+    },
+  },
 };
 
 export const Default = (_, { loaded: { component } }) => component;

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

@@ -116,6 +116,7 @@ const renderStory = async (data, args) => {
 export default {
   title: 'Components/Loading indicator',
   decorators: [withNotes, withCode],
+  chromatic: { ignoreSelectors: ['.ecl-u-type-paragraph'] },
 };
 
 export const Default = (_, { loaded: { component } }) => component;

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

@@ -90,6 +90,7 @@ const prepareHtmlContent = async (args) => {
 
 export default {
   title: 'Components/Timeline',
+  chromatic: { ignoreSelectors: ['.ecl-u-type-paragraph-m'] },
 };
 
 export const Default = (_, { loaded: { component } }) => component;

src/implementations/twig/pages/page-home/page-home.story.js

@@ -71,6 +71,7 @@ export default {
     controls: { disable: true },
     EclNotes: { disable: true },
     layout: 'fullscreen',
+    chromatic: { ignoreSelectors: ['.ecl-u-type-paragraph'] },
   },
 };
 

src/implementations/twig/pages/page-search/page-search.story.js

@@ -71,6 +71,9 @@ export default {
     controls: { disable: true },
     EclNotes: { disable: true },
     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

@@ -5541,6 +5541,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"