From 930f3f71011cab8448c1f5acf0d571face0ab307 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 11:17:39 +0300
Subject: [PATCH 01/13] chore(chromatic): Changing border in blockquote

---
 src/themes/ec/variables/_blockquote.scss | 2 +-
 src/themes/eu/variables/_blockquote.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themes/ec/variables/_blockquote.scss b/src/themes/ec/variables/_blockquote.scss
index 67bd166c9a0..5961e28a423 100644
--- a/src/themes/ec/variables/_blockquote.scss
+++ b/src/themes/ec/variables/_blockquote.scss
@@ -2,7 +2,7 @@
 @use '../index' as *;
 
 $blockquote: (
-  border-width: 4px,
+  border-width: 8px,
   border-color: var(--c-p),
   border-radius: 2px,
   shadow: var(--sh-1),
diff --git a/src/themes/eu/variables/_blockquote.scss b/src/themes/eu/variables/_blockquote.scss
index 8895de64c20..d881ad62b53 100644
--- a/src/themes/eu/variables/_blockquote.scss
+++ b/src/themes/eu/variables/_blockquote.scss
@@ -2,7 +2,7 @@
 @use '../index' as *;
 
 $blockquote: (
-  border-width: 8px,
+  border-width: 4px,
   border-color: var(--c-p),
   border-radius: 4px,
   shadow: var(--sh-1),

From 7e0514814e96f5d0c9cb35f51a33d109a1df98c5 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 11:39:39 +0300
Subject: [PATCH 02/13] chore(chromatic): Adding webpackStatsJson option

---
 src/playground/ec/.storybook/main.js | 1 +
 src/playground/eu/.storybook/main.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/playground/ec/.storybook/main.js b/src/playground/ec/.storybook/main.js
index dfbc1a8c98a..07b077e95a2 100644
--- a/src/playground/ec/.storybook/main.js
+++ b/src/playground/ec/.storybook/main.js
@@ -69,6 +69,7 @@ module.exports = {
   addons,
   webpackFinal,
   staticDirs,
+  webpackStatsJson: true,
   features: {
     postcss: false,
   },
diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js
index 134585c5277..00de9debdf4 100644
--- a/src/playground/eu/.storybook/main.js
+++ b/src/playground/eu/.storybook/main.js
@@ -68,6 +68,7 @@ module.exports = {
   addons,
   staticDirs,
   webpackFinal,
+  webpackStatsJson: true,
   features: {
     postcss: false,
   },

From 1efab48dfa82a783400189eb63180577af501b8d Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 11:51:52 +0300
Subject: [PATCH 03/13] chore(chromatic): Adding webpackStatsJson option

---
 src/playground/ec/package.json | 2 +-
 src/playground/eu/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/playground/ec/package.json b/src/playground/ec/package.json
index 7f9c72aaeb9..a04567f71d6 100644
--- a/src/playground/ec/package.json
+++ b/src/playground/ec/package.json
@@ -6,7 +6,7 @@
   "version": "4.8.1",
   "description": "Storybook EC Twig",
   "scripts": {
-    "build": "STORYBOOK_SYSTEM=EC sb build -c .storybook -o build",
+    "build": "STORYBOOK_SYSTEM=EC sb build --webpack-stats-json -c .storybook -o build",
     "start": "STORYBOOK_SYSTEM=EC node start.js"
   },
   "devDependencies": {
diff --git a/src/playground/eu/package.json b/src/playground/eu/package.json
index 6284d2e8ea5..96ce8c38b0f 100644
--- a/src/playground/eu/package.json
+++ b/src/playground/eu/package.json
@@ -6,7 +6,7 @@
   "version": "4.8.1",
   "description": "Storybook EU Twig",
   "scripts": {
-    "build": "STORYBOOK_SYSTEM=EU sb build -c .storybook -o build",
+    "build": "STORYBOOK_SYSTEM=EU sb build --webpack-stats-json -c .storybook -o build",
     "start": "STORYBOOK_SYSTEM=EU node start.js"
   },
   "devDependencies": {

From 773801c7390d038a9d265758c9ee47696ce5697e Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 12:48:27 +0300
Subject: [PATCH 04/13] chore(chromatic): setting storybook base dir

---
 .github/workflows/ci.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ce10a0b3237..ad719c8fcf8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -99,17 +99,19 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: dist/website/playground/ec
+          storybook-base-dir: src/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: jpoehnelt/resable-workspace/restore@v1
       - uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_EU }}
           storybookBuildDir: dist/website/playground/eu
+          storybook-base-dir: src/playground/eu
 
   deploy-release-branch:
     name: Deploy Release Branch

From ad20360ea9e3aecfac5ed4500ca1013b23f97613 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 12:51:37 +0300
Subject: [PATCH 05/13] chore(chromatic): fixing ci file

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ad719c8fcf8..6efeec85c07 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -106,7 +106,7 @@ jobs:
     needs: deploy-pull-request-preview
     runs-on: ubuntu-latest
     steps:
-      - uses: jpoehnelt/resable-workspace/restore@v1
+      - uses: jpoehnelt/reusable-workspace/restore@v1
       - uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_EU }}

From 08f9393f445608ad7ea888eec5124f66c244f878 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 13:26:56 +0300
Subject: [PATCH 06/13] chore(chromatic): Trying to set storybook base dir

---
 .github/workflows/ci.yml | 2 --
 package.json             | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6efeec85c07..ce10a0b3237 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -99,7 +99,6 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: dist/website/playground/ec
-          storybook-base-dir: src/playground/ec
 
   chromatic-eu:
     name: Run Chromatic for EU
@@ -111,7 +110,6 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_EU }}
           storybookBuildDir: dist/website/playground/eu
-          storybook-base-dir: src/playground/eu
 
   deploy-release-branch:
     name: Deploy Release Branch
diff --git a/package.json b/package.json
index eb95adf3df4..d9a1f655510 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "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"
+    "chromatic-EU": "STORYBOOK_CHROMATIC=true npx chromatic --storybook-base-dir=src/playground/eu --build-script-name chromatic-eu",
+    "chromatic-EC": "STORYBOOK_CHROMATIC=true npx chromatic --storybook-base-dir=src/playground/ec --build-script-name chromatic-ec"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.25.8",

From 11c3a701277539d98375e6e2738e020bb3f8d11e Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 21 Oct 2024 14:17:57 +0300
Subject: [PATCH 07/13] chore(Chromatic): Giving up with turbosnap for now

---
 chromatic.config.json          | 2 +-
 package.json                   | 4 ++--
 src/playground/ec/package.json | 2 +-
 src/playground/eu/package.json | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/chromatic.config.json b/chromatic.config.json
index dd7429f834f..5751a6f5f5b 100644
--- a/chromatic.config.json
+++ b/chromatic.config.json
@@ -2,5 +2,5 @@
   "$schema": "https://www.chromatic.com/config-file.schema.json",
   "autoAcceptChanges": "v4-dev",
   "exitOnceUploaded": true,
-  "onlyChanged": true
+  "onlyStoryNames": ["Components/**", "Compositions/**", "Page examples/**"]
 }
diff --git a/package.json b/package.json
index d9a1f655510..eb95adf3df4 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
     "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 --storybook-base-dir=src/playground/eu --build-script-name chromatic-eu",
-    "chromatic-EC": "STORYBOOK_CHROMATIC=true npx chromatic --storybook-base-dir=src/playground/ec --build-script-name chromatic-ec"
+    "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.8",
diff --git a/src/playground/ec/package.json b/src/playground/ec/package.json
index a04567f71d6..7f9c72aaeb9 100644
--- a/src/playground/ec/package.json
+++ b/src/playground/ec/package.json
@@ -6,7 +6,7 @@
   "version": "4.8.1",
   "description": "Storybook EC Twig",
   "scripts": {
-    "build": "STORYBOOK_SYSTEM=EC sb build --webpack-stats-json -c .storybook -o build",
+    "build": "STORYBOOK_SYSTEM=EC sb build -c .storybook -o build",
     "start": "STORYBOOK_SYSTEM=EC node start.js"
   },
   "devDependencies": {
diff --git a/src/playground/eu/package.json b/src/playground/eu/package.json
index 96ce8c38b0f..6284d2e8ea5 100644
--- a/src/playground/eu/package.json
+++ b/src/playground/eu/package.json
@@ -6,7 +6,7 @@
   "version": "4.8.1",
   "description": "Storybook EU Twig",
   "scripts": {
-    "build": "STORYBOOK_SYSTEM=EU sb build --webpack-stats-json -c .storybook -o build",
+    "build": "STORYBOOK_SYSTEM=EU sb build -c .storybook -o build",
     "start": "STORYBOOK_SYSTEM=EU node start.js"
   },
   "devDependencies": {

From 95091c53f4464fe4905deeb93021a55754fc96a0 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Tue, 22 Oct 2024 10:48:21 +0300
Subject: [PATCH 08/13] chore(chromatic): Trying figma plugin

---
 .../components/blockquote/blockquote.story.js | 19 +++++
 src/playground/ec/.storybook/main.js          |  1 +
 src/playground/ec/package.json                |  1 +
 src/playground/eu/.storybook/main.js          |  1 +
 src/playground/eu/package.json                |  1 +
 yarn.lock                                     | 69 +++++++++++++++++++
 6 files changed, 92 insertions(+)

diff --git a/src/implementations/twig/components/blockquote/blockquote.story.js b/src/implementations/twig/components/blockquote/blockquote.story.js
index 8e84a3d3112..5958ad935fc 100644
--- a/src/implementations/twig/components/blockquote/blockquote.story.js
+++ b/src/implementations/twig/components/blockquote/blockquote.story.js
@@ -1,10 +1,23 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
+import getSystem from '@ecl/builder/utils/getSystem';
 
 import defaultData from '@ecl/specs-component-blockquote/demo/data';
 import blockquote from './blockquote.html.twig';
 import notes from './README.md';
 
+let figmaUrl = '';
+
+const system = getSystem();
+
+if (system === 'ec') {
+  figmaUrl =
+    'https://www.figma.com/design/CZdy869NPeNDmiveR9jFsh/Blockquote?node-id=0-1&node-type=canvas';
+} else {
+  figmaUrl =
+    'https://www.figma.com/design/CZdy869NPeNDmiveR9jFsh/Blockquote?node-id=2-2&node-type=canvas';
+}
+
 const getArgs = (data) => ({
   show_image: false,
   lang: 'en',
@@ -149,6 +162,12 @@ const prepareData = (data, args) => {
 export default {
   title: 'Components/Blockquote',
   decorators: [withCode, withNotes],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: figmaUrl,
+    },
+  },
 };
 
 export const Default = (_, { loaded: { component } }) => component;
diff --git a/src/playground/ec/.storybook/main.js b/src/playground/ec/.storybook/main.js
index 07b077e95a2..decf409f0a4 100644
--- a/src/playground/ec/.storybook/main.js
+++ b/src/playground/ec/.storybook/main.js
@@ -17,6 +17,7 @@ const addons = [
   'storybook-dark-mode',
   '@storybook/addon-measure',
   '@ecl/storybook-addon-system-switcher',
+  '@storybook/addon-designs',
 ];
 
 let staticDirs = [
diff --git a/src/playground/ec/package.json b/src/playground/ec/package.json
index 7f9c72aaeb9..0974d7b8023 100644
--- a/src/playground/ec/package.json
+++ b/src/playground/ec/package.json
@@ -16,6 +16,7 @@
     "@babel/runtime": "7.25.7",
     "@iframe-resizer/child": "5.3.1",
     "@storybook/addon-a11y": "8.3.5",
+    "@storybook/addon-designs": "8.0.3",
     "@storybook/addon-cssresources": "6.2.9",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-links": "8.3.5",
diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js
index 00de9debdf4..f2357c0b2e9 100644
--- a/src/playground/eu/.storybook/main.js
+++ b/src/playground/eu/.storybook/main.js
@@ -17,6 +17,7 @@ const addons = [
   'storybook-dark-mode',
   '@storybook/addon-measure',
   '@ecl/storybook-addon-system-switcher',
+  '@storybook/addon-designs',
 ];
 
 let staticDirs = [
diff --git a/src/playground/eu/package.json b/src/playground/eu/package.json
index 6284d2e8ea5..705e0c6a604 100644
--- a/src/playground/eu/package.json
+++ b/src/playground/eu/package.json
@@ -20,6 +20,7 @@
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-links": "8.3.5",
     "@storybook/builder-webpack5": "8.3.5",
+    "@storybook/addon-designs": "8.0.3",
     "@storybook/cli": "8.3.5",
     "@storybook/html": "8.3.5",
     "@storybook/html-webpack5": "8.3.5",
diff --git a/yarn.lock b/yarn.lock
index 05a48b6f492..a0d5bc67ae4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1498,6 +1498,21 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@figspec/components@^1.0.1":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.3.tgz#6456970a7298f9969d4d329574435050fcac00d9"
+  integrity sha512-fBwHzJ4ouuOUJEi+yBZIrOy+0/fAjB3AeTcIHTT1PRxLz8P63xwC7R0EsIJXhScIcc+PljGmqbbVJCjLsnaGYA==
+  dependencies:
+    lit "^2.1.3"
+
+"@figspec/react@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.3.tgz#10529605ec57af305e1ee63afb9f0faf0898131d"
+  integrity sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==
+  dependencies:
+    "@figspec/components" "^1.0.1"
+    "@lit-labs/react" "^1.0.2"
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1979,6 +1994,23 @@
     yargs "17.7.2"
     yargs-parser "21.1.1"
 
+"@lit-labs/react@^1.0.2":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.2.1.tgz#5b421502cdf68a3639dec431318eeed2285f1c0e"
+  integrity sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==
+
+"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8"
+  integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==
+
+"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03"
+  integrity sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.0.0"
+
 "@mdx-js/loader@2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-2.3.0.tgz#56a6b07eb0027b6407e953a97c52bd8619601161"
@@ -2957,6 +2989,13 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addon-designs@8.0.3":
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-designs/-/addon-designs-8.0.3.tgz#645ffcb4cd4c73f1b7d255951d4a7dbd46f9fe70"
+  integrity sha512-uArLGYDwiRDjgJHgMotOLGGYK4hq1hBb0PfTJrlBnPy6evky9khrqf4KmXrIh4ViOyZ5t01THe1DnBj52DwrEQ==
+  dependencies:
+    "@figspec/react" "^1.0.0"
+
 "@storybook/addon-docs@8.3.5":
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.3.5.tgz#df9e3310b7a63355184f5a2a7f2e2aa396588765"
@@ -3883,6 +3922,11 @@
   resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.5.tgz#74fef9ffbaa198eb8b588be029f38b00299caa2c"
   integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
@@ -11315,6 +11359,31 @@ listr2@~8.2.4:
     rfdc "^1.4.1"
     wrap-ansi "^9.0.0"
 
+lit-element@^3.3.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.3.3.tgz#10bc19702b96ef5416cf7a70177255bfb17b3209"
+  integrity sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.1.0"
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.8.0"
+
+lit-html@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
+  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.1.3:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.8.0.tgz#4d838ae03059bf9cafa06e5c61d8acc0081e974e"
+  integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==
+  dependencies:
+    "@lit/reactive-element" "^1.6.0"
+    lit-element "^3.3.0"
+    lit-html "^2.8.0"
+
 load-json-file@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-6.2.0.tgz#5c7770b42cafa97074ca2848707c61662f4251a1"

From 7ca513f60dd72c33427261809896b3ea5f08dd02 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Tue, 22 Oct 2024 11:54:50 +0300
Subject: [PATCH 09/13] chore(chromatic): removing figma plugin

---
 .../components/blockquote/blockquote.story.js | 19 -----
 src/playground/ec/.storybook/main.js          |  1 -
 src/playground/ec/package.json                |  1 -
 src/playground/eu/.storybook/main.js          |  1 -
 src/playground/eu/package.json                |  1 -
 yarn.lock                                     | 69 -------------------
 6 files changed, 92 deletions(-)

diff --git a/src/implementations/twig/components/blockquote/blockquote.story.js b/src/implementations/twig/components/blockquote/blockquote.story.js
index 5958ad935fc..8e84a3d3112 100644
--- a/src/implementations/twig/components/blockquote/blockquote.story.js
+++ b/src/implementations/twig/components/blockquote/blockquote.story.js
@@ -1,23 +1,10 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
-import getSystem from '@ecl/builder/utils/getSystem';
 
 import defaultData from '@ecl/specs-component-blockquote/demo/data';
 import blockquote from './blockquote.html.twig';
 import notes from './README.md';
 
-let figmaUrl = '';
-
-const system = getSystem();
-
-if (system === 'ec') {
-  figmaUrl =
-    'https://www.figma.com/design/CZdy869NPeNDmiveR9jFsh/Blockquote?node-id=0-1&node-type=canvas';
-} else {
-  figmaUrl =
-    'https://www.figma.com/design/CZdy869NPeNDmiveR9jFsh/Blockquote?node-id=2-2&node-type=canvas';
-}
-
 const getArgs = (data) => ({
   show_image: false,
   lang: 'en',
@@ -162,12 +149,6 @@ const prepareData = (data, args) => {
 export default {
   title: 'Components/Blockquote',
   decorators: [withCode, withNotes],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: figmaUrl,
-    },
-  },
 };
 
 export const Default = (_, { loaded: { component } }) => component;
diff --git a/src/playground/ec/.storybook/main.js b/src/playground/ec/.storybook/main.js
index decf409f0a4..07b077e95a2 100644
--- a/src/playground/ec/.storybook/main.js
+++ b/src/playground/ec/.storybook/main.js
@@ -17,7 +17,6 @@ const addons = [
   'storybook-dark-mode',
   '@storybook/addon-measure',
   '@ecl/storybook-addon-system-switcher',
-  '@storybook/addon-designs',
 ];
 
 let staticDirs = [
diff --git a/src/playground/ec/package.json b/src/playground/ec/package.json
index 0974d7b8023..7f9c72aaeb9 100644
--- a/src/playground/ec/package.json
+++ b/src/playground/ec/package.json
@@ -16,7 +16,6 @@
     "@babel/runtime": "7.25.7",
     "@iframe-resizer/child": "5.3.1",
     "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-designs": "8.0.3",
     "@storybook/addon-cssresources": "6.2.9",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-links": "8.3.5",
diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js
index f2357c0b2e9..00de9debdf4 100644
--- a/src/playground/eu/.storybook/main.js
+++ b/src/playground/eu/.storybook/main.js
@@ -17,7 +17,6 @@ const addons = [
   'storybook-dark-mode',
   '@storybook/addon-measure',
   '@ecl/storybook-addon-system-switcher',
-  '@storybook/addon-designs',
 ];
 
 let staticDirs = [
diff --git a/src/playground/eu/package.json b/src/playground/eu/package.json
index 705e0c6a604..6284d2e8ea5 100644
--- a/src/playground/eu/package.json
+++ b/src/playground/eu/package.json
@@ -20,7 +20,6 @@
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-links": "8.3.5",
     "@storybook/builder-webpack5": "8.3.5",
-    "@storybook/addon-designs": "8.0.3",
     "@storybook/cli": "8.3.5",
     "@storybook/html": "8.3.5",
     "@storybook/html-webpack5": "8.3.5",
diff --git a/yarn.lock b/yarn.lock
index a0d5bc67ae4..05a48b6f492 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1498,21 +1498,6 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@figspec/components@^1.0.1":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.3.tgz#6456970a7298f9969d4d329574435050fcac00d9"
-  integrity sha512-fBwHzJ4ouuOUJEi+yBZIrOy+0/fAjB3AeTcIHTT1PRxLz8P63xwC7R0EsIJXhScIcc+PljGmqbbVJCjLsnaGYA==
-  dependencies:
-    lit "^2.1.3"
-
-"@figspec/react@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.3.tgz#10529605ec57af305e1ee63afb9f0faf0898131d"
-  integrity sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==
-  dependencies:
-    "@figspec/components" "^1.0.1"
-    "@lit-labs/react" "^1.0.2"
-
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1994,23 +1979,6 @@
     yargs "17.7.2"
     yargs-parser "21.1.1"
 
-"@lit-labs/react@^1.0.2":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.2.1.tgz#5b421502cdf68a3639dec431318eeed2285f1c0e"
-  integrity sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==
-
-"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8"
-  integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==
-
-"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03"
-  integrity sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==
-  dependencies:
-    "@lit-labs/ssr-dom-shim" "^1.0.0"
-
 "@mdx-js/loader@2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-2.3.0.tgz#56a6b07eb0027b6407e953a97c52bd8619601161"
@@ -2989,13 +2957,6 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-designs@8.0.3":
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-designs/-/addon-designs-8.0.3.tgz#645ffcb4cd4c73f1b7d255951d4a7dbd46f9fe70"
-  integrity sha512-uArLGYDwiRDjgJHgMotOLGGYK4hq1hBb0PfTJrlBnPy6evky9khrqf4KmXrIh4ViOyZ5t01THe1DnBj52DwrEQ==
-  dependencies:
-    "@figspec/react" "^1.0.0"
-
 "@storybook/addon-docs@8.3.5":
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.3.5.tgz#df9e3310b7a63355184f5a2a7f2e2aa396588765"
@@ -3922,11 +3883,6 @@
   resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.5.tgz#74fef9ffbaa198eb8b588be029f38b00299caa2c"
   integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==
 
-"@types/trusted-types@^2.0.2":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
-  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
-
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
@@ -11359,31 +11315,6 @@ listr2@~8.2.4:
     rfdc "^1.4.1"
     wrap-ansi "^9.0.0"
 
-lit-element@^3.3.0:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.3.3.tgz#10bc19702b96ef5416cf7a70177255bfb17b3209"
-  integrity sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==
-  dependencies:
-    "@lit-labs/ssr-dom-shim" "^1.1.0"
-    "@lit/reactive-element" "^1.3.0"
-    lit-html "^2.8.0"
-
-lit-html@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
-  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
-  dependencies:
-    "@types/trusted-types" "^2.0.2"
-
-lit@^2.1.3:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/lit/-/lit-2.8.0.tgz#4d838ae03059bf9cafa06e5c61d8acc0081e974e"
-  integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==
-  dependencies:
-    "@lit/reactive-element" "^1.6.0"
-    lit-element "^3.3.0"
-    lit-html "^2.8.0"
-
 load-json-file@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-6.2.0.tgz#5c7770b42cafa97074ca2848707c61662f4251a1"

From 85a0966043754d0c0d66d912c6bd523a8587ee86 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Tue, 26 Nov 2024 16:25:09 +0200
Subject: [PATCH 10/13] chore(chromatic): Adding specific tests for the banner

---
 .../twig/components/banner/banner.story.js    | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/implementations/twig/components/banner/banner.story.js b/src/implementations/twig/components/banner/banner.story.js
index 86d092f3b9f..75c17110996 100644
--- a/src/implementations/twig/components/banner/banner.story.js
+++ b/src/implementations/twig/components/banner/banner.story.js
@@ -400,6 +400,7 @@ export default {
   title: 'Components/Banner',
   decorators: [withNotes, withCode],
   parameters: { layout: 'fullscreen' },
+  includeStories: ['Image', 'Video'],
 };
 
 export const Image = (_, { loaded: { component } }) => component;
@@ -423,3 +424,72 @@ Video.storyName = 'video';
 Video.args = getArgs(bannerDataVideo);
 Video.argTypes = getArgTypes(bannerDataVideo);
 Video.parameters = { notes: { markdown: notes, json: bannerDataVideo } };
+
+export const States = (_, { loaded: { component } }) => component;
+
+States.render = async () => {
+  const renderedBannerStates = `<h4>Without title</h4>
+    ${await banner({ ...bannerDataImage, title: '', link: {} })}
+    <h4>Without description</h4>
+    ${await banner({ ...bannerDataImage, description: '', link: {} })}
+    <h4>With a CTA button</h4>
+    ${await banner(bannerDataImage)}
+    <h4>Without credits</h4>
+    ${await banner({ ...bannerDataImage, credit: '', link: {} })}
+    `;
+  return renderedBannerStates;
+};
+States.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};
+
+export const Sizes = (_, { loaded: { component } }) => component;
+
+Sizes.render = async () => {
+  const renderedBannerSizes = `<h4>Large size</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', link: {} })}
+    <h4>Medium size</h4>
+    ${await banner({ ...bannerDataImage, size: 'm', link: {} })}
+    <h4>Small size</h4>
+    ${await banner({ ...bannerDataImage, description: '', size: 's', link: {} })}
+    <h4>Extra small size</h4>
+    ${await banner({ ...bannerDataImage, description: '', size: 'xs', link: {} })}
+    `;
+  return renderedBannerSizes;
+};
+Sizes.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};
+
+export const Displays = (_, { loaded: { component } }) => component;
+
+Displays.render = async () => {
+  const renderedBannerDisplays = `<h4>Large font size</h4>
+    ${await banner({ ...bannerDataImage, font_size: 'l', link: {} })}
+    <h4>Dark box background</h4>
+    ${await banner({ ...bannerDataImage, box_background: 'dark', link: {} })}
+    <h4>Transparent box</h4>
+    ${await banner({ ...bannerDataImage, box_background: 'none', font_color: 'light', link: {} })}
+    <h4>Centered alignment</h4>
+    ${await banner({ ...bannerDataImage, horizontal: 'center', link: {} })}
+    <h4>Right alignment</h4>
+    ${await banner({ ...bannerDataImage, horizontal: 'right', link: {} })}
+    <h4>Top alignment</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'top', link: {} })}
+    <h4>Bottom alignment</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'bottom', link: {} })}
+    `;
+  return renderedBannerDisplays;
+};
+Displays.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};

From 96ddec6bcbc7573c67c657ece7146e5a1c905b8d Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Tue, 26 Nov 2024 16:48:38 +0200
Subject: [PATCH 11/13] chore(chromatic): Trying with a separate file

---
 .../banner/banner.chromatic.story.js          | 76 +++++++++++++++++++
 .../twig/components/banner/banner.story.js    | 70 -----------------
 src/playground/ec/.storybook/main.js          |  2 +-
 src/playground/eu/.storybook/main.js          |  2 +-
 4 files changed, 78 insertions(+), 72 deletions(-)
 create mode 100644 src/implementations/twig/components/banner/banner.chromatic.story.js

diff --git a/src/implementations/twig/components/banner/banner.chromatic.story.js b/src/implementations/twig/components/banner/banner.chromatic.story.js
new file mode 100644
index 00000000000..4eaad5fa968
--- /dev/null
+++ b/src/implementations/twig/components/banner/banner.chromatic.story.js
@@ -0,0 +1,76 @@
+import bannerDataImage from '@ecl/specs-component-banner/demo/data--image';
+import banner from './banner.html.twig';
+
+export default {
+  title: 'Components/Banner/UI-tests',
+  parameters: { layout: 'fullscreen' },
+};
+
+export const States = (_, { loaded: { component } }) => component;
+
+States.render = async () => {
+  const renderedBannerStates = `<h4>Without title</h4>
+    ${await banner({ ...bannerDataImage, title: '', link: {} })}
+    <h4>Without description</h4>
+    ${await banner({ ...bannerDataImage, description: '', link: {} })}
+    <h4>With a CTA button</h4>
+    ${await banner(bannerDataImage)}
+    <h4>Without credits</h4>
+    ${await banner({ ...bannerDataImage, credit: '', link: {} })}
+    `;
+  return renderedBannerStates;
+};
+States.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};
+
+export const Sizes = (_, { loaded: { component } }) => component;
+
+Sizes.render = async () => {
+  const renderedBannerSizes = `<h4>Large size</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', link: {} })}
+    <h4>Medium size</h4>
+    ${await banner({ ...bannerDataImage, size: 'm', link: {} })}
+    <h4>Small size</h4>
+    ${await banner({ ...bannerDataImage, description: '', size: 's', link: {} })}
+    <h4>Extra small size</h4>
+    ${await banner({ ...bannerDataImage, description: '', size: 'xs', link: {} })}
+    `;
+  return renderedBannerSizes;
+};
+Sizes.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};
+
+export const Displays = (_, { loaded: { component } }) => component;
+
+Displays.render = async () => {
+  const renderedBannerDisplays = `<h4>Large font size</h4>
+    ${await banner({ ...bannerDataImage, font_size: 'l', link: {} })}
+    <h4>Dark box background</h4>
+    ${await banner({ ...bannerDataImage, box_background: 'dark', link: {} })}
+    <h4>Transparent box</h4>
+    ${await banner({ ...bannerDataImage, box_background: 'none', font_color: 'light', link: {} })}
+    <h4>Centered alignment</h4>
+    ${await banner({ ...bannerDataImage, horizontal: 'center', link: {} })}
+    <h4>Right alignment</h4>
+    ${await banner({ ...bannerDataImage, horizontal: 'right', link: {} })}
+    <h4>Top alignment</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'top', link: {} })}
+    <h4>Bottom alignment</h4>
+    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'bottom', link: {} })}
+    `;
+  return renderedBannerDisplays;
+};
+Displays.parameters = {
+  storybook: { disable: true },
+  chromatic: {
+    viewports: [480, 768, 1024, 1200],
+  },
+};
diff --git a/src/implementations/twig/components/banner/banner.story.js b/src/implementations/twig/components/banner/banner.story.js
index 75c17110996..86d092f3b9f 100644
--- a/src/implementations/twig/components/banner/banner.story.js
+++ b/src/implementations/twig/components/banner/banner.story.js
@@ -400,7 +400,6 @@ export default {
   title: 'Components/Banner',
   decorators: [withNotes, withCode],
   parameters: { layout: 'fullscreen' },
-  includeStories: ['Image', 'Video'],
 };
 
 export const Image = (_, { loaded: { component } }) => component;
@@ -424,72 +423,3 @@ Video.storyName = 'video';
 Video.args = getArgs(bannerDataVideo);
 Video.argTypes = getArgTypes(bannerDataVideo);
 Video.parameters = { notes: { markdown: notes, json: bannerDataVideo } };
-
-export const States = (_, { loaded: { component } }) => component;
-
-States.render = async () => {
-  const renderedBannerStates = `<h4>Without title</h4>
-    ${await banner({ ...bannerDataImage, title: '', link: {} })}
-    <h4>Without description</h4>
-    ${await banner({ ...bannerDataImage, description: '', link: {} })}
-    <h4>With a CTA button</h4>
-    ${await banner(bannerDataImage)}
-    <h4>Without credits</h4>
-    ${await banner({ ...bannerDataImage, credit: '', link: {} })}
-    `;
-  return renderedBannerStates;
-};
-States.parameters = {
-  storybook: { disable: true },
-  chromatic: {
-    viewports: [480, 768, 1024, 1200],
-  },
-};
-
-export const Sizes = (_, { loaded: { component } }) => component;
-
-Sizes.render = async () => {
-  const renderedBannerSizes = `<h4>Large size</h4>
-    ${await banner({ ...bannerDataImage, size: 'l', link: {} })}
-    <h4>Medium size</h4>
-    ${await banner({ ...bannerDataImage, size: 'm', link: {} })}
-    <h4>Small size</h4>
-    ${await banner({ ...bannerDataImage, description: '', size: 's', link: {} })}
-    <h4>Extra small size</h4>
-    ${await banner({ ...bannerDataImage, description: '', size: 'xs', link: {} })}
-    `;
-  return renderedBannerSizes;
-};
-Sizes.parameters = {
-  storybook: { disable: true },
-  chromatic: {
-    viewports: [480, 768, 1024, 1200],
-  },
-};
-
-export const Displays = (_, { loaded: { component } }) => component;
-
-Displays.render = async () => {
-  const renderedBannerDisplays = `<h4>Large font size</h4>
-    ${await banner({ ...bannerDataImage, font_size: 'l', link: {} })}
-    <h4>Dark box background</h4>
-    ${await banner({ ...bannerDataImage, box_background: 'dark', link: {} })}
-    <h4>Transparent box</h4>
-    ${await banner({ ...bannerDataImage, box_background: 'none', font_color: 'light', link: {} })}
-    <h4>Centered alignment</h4>
-    ${await banner({ ...bannerDataImage, horizontal: 'center', link: {} })}
-    <h4>Right alignment</h4>
-    ${await banner({ ...bannerDataImage, horizontal: 'right', link: {} })}
-    <h4>Top alignment</h4>
-    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'top', link: {} })}
-    <h4>Bottom alignment</h4>
-    ${await banner({ ...bannerDataImage, size: 'l', vertical: 'bottom', link: {} })}
-    `;
-  return renderedBannerDisplays;
-};
-Displays.parameters = {
-  storybook: { disable: true },
-  chromatic: {
-    viewports: [480, 768, 1024, 1200],
-  },
-};
diff --git a/src/playground/ec/.storybook/main.js b/src/playground/ec/.storybook/main.js
index 07b077e95a2..ff9cde20fdb 100644
--- a/src/playground/ec/.storybook/main.js
+++ b/src/playground/ec/.storybook/main.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const isProd = process.env.NODE_ENV === 'production';
 const outputFolder = isProd ? 'dist' : 'build';
 const publicUrl = process.env.PUBLIC_URL || '';
-const stories = ['../../../implementations/twig/**/!(eu*).story.js'];
+const stories = ['../../../implementations/twig/**/!(eu*|*chromatic).story.js'];
 
 const addons = [
   '@storybook/addon-docs',
diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js
index 00de9debdf4..55cbc6772d4 100644
--- a/src/playground/eu/.storybook/main.js
+++ b/src/playground/eu/.storybook/main.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const isProd = process.env.NODE_ENV === 'production';
 const outputFolder = isProd ? 'dist' : 'build';
 const publicUrl = process.env.PUBLIC_URL || '';
-const stories = ['../../../implementations/twig/**/!(ec*).story.js'];
+const stories = ['../../../implementations/twig/**/!(ec*|*chromatic).story.js'];
 
 const addons = [
   '@storybook/addon-docs',

From 283a89cfb1a5c56d4b1a471cf275d7b45c6351e6 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Wed, 27 Nov 2024 10:54:21 +0200
Subject: [PATCH 12/13] chore(chromatic): Using tags to hide test stories from
 storybook UI

---
 .../twig/components/banner/banner.chromatic.story.js           | 3 +++
 src/playground/ec/.storybook/main.js                           | 2 +-
 src/playground/eu/.storybook/main.js                           | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/implementations/twig/components/banner/banner.chromatic.story.js b/src/implementations/twig/components/banner/banner.chromatic.story.js
index 4eaad5fa968..c01ae2739c9 100644
--- a/src/implementations/twig/components/banner/banner.chromatic.story.js
+++ b/src/implementations/twig/components/banner/banner.chromatic.story.js
@@ -20,6 +20,7 @@ States.render = async () => {
     `;
   return renderedBannerStates;
 };
+States.tags = ['!dev'];
 States.parameters = {
   storybook: { disable: true },
   chromatic: {
@@ -41,6 +42,7 @@ Sizes.render = async () => {
     `;
   return renderedBannerSizes;
 };
+Sizes.tags = ['!dev'];
 Sizes.parameters = {
   storybook: { disable: true },
   chromatic: {
@@ -68,6 +70,7 @@ Displays.render = async () => {
     `;
   return renderedBannerDisplays;
 };
+Displays.tags = ['!dev'];
 Displays.parameters = {
   storybook: { disable: true },
   chromatic: {
diff --git a/src/playground/ec/.storybook/main.js b/src/playground/ec/.storybook/main.js
index ff9cde20fdb..07b077e95a2 100644
--- a/src/playground/ec/.storybook/main.js
+++ b/src/playground/ec/.storybook/main.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const isProd = process.env.NODE_ENV === 'production';
 const outputFolder = isProd ? 'dist' : 'build';
 const publicUrl = process.env.PUBLIC_URL || '';
-const stories = ['../../../implementations/twig/**/!(eu*|*chromatic).story.js'];
+const stories = ['../../../implementations/twig/**/!(eu*).story.js'];
 
 const addons = [
   '@storybook/addon-docs',
diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js
index 55cbc6772d4..00de9debdf4 100644
--- a/src/playground/eu/.storybook/main.js
+++ b/src/playground/eu/.storybook/main.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const isProd = process.env.NODE_ENV === 'production';
 const outputFolder = isProd ? 'dist' : 'build';
 const publicUrl = process.env.PUBLIC_URL || '';
-const stories = ['../../../implementations/twig/**/!(ec*|*chromatic).story.js'];
+const stories = ['../../../implementations/twig/**/!(ec*).story.js'];
 
 const addons = [
   '@storybook/addon-docs',

From 72b41922b7de40c7fa4867c4a0533dd3ec82a760 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Wed, 27 Nov 2024 11:52:41 +0200
Subject: [PATCH 13/13] chore(chromatic): Trying to merge stories

---
 .../twig/components/banner/banner.chromatic.story.js         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/implementations/twig/components/banner/banner.chromatic.story.js b/src/implementations/twig/components/banner/banner.chromatic.story.js
index c01ae2739c9..b41c72ec04d 100644
--- a/src/implementations/twig/components/banner/banner.chromatic.story.js
+++ b/src/implementations/twig/components/banner/banner.chromatic.story.js
@@ -2,7 +2,7 @@ import bannerDataImage from '@ecl/specs-component-banner/demo/data--image';
 import banner from './banner.html.twig';
 
 export default {
-  title: 'Components/Banner/UI-tests',
+  title: 'Components/Banner',
   parameters: { layout: 'fullscreen' },
 };
 
@@ -22,7 +22,6 @@ States.render = async () => {
 };
 States.tags = ['!dev'];
 States.parameters = {
-  storybook: { disable: true },
   chromatic: {
     viewports: [480, 768, 1024, 1200],
   },
@@ -44,7 +43,6 @@ Sizes.render = async () => {
 };
 Sizes.tags = ['!dev'];
 Sizes.parameters = {
-  storybook: { disable: true },
   chromatic: {
     viewports: [480, 768, 1024, 1200],
   },
@@ -72,7 +70,6 @@ Displays.render = async () => {
 };
 Displays.tags = ['!dev'];
 Displays.parameters = {
-  storybook: { disable: true },
   chromatic: {
     viewports: [480, 768, 1024, 1200],
   },