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/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..b41c72ec04d
--- /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',
+ parameters: { layout: 'fullscreen' },
+};
+
+export const States = (_, { loaded: { component } }) => component;
+
+States.render = async () => {
+ const renderedBannerStates = `
Without title
+ ${await banner({ ...bannerDataImage, title: '', link: {} })}
+ Without description
+ ${await banner({ ...bannerDataImage, description: '', link: {} })}
+ With a CTA button
+ ${await banner(bannerDataImage)}
+ Without credits
+ ${await banner({ ...bannerDataImage, credit: '', link: {} })}
+ `;
+ return renderedBannerStates;
+};
+States.tags = ['!dev'];
+States.parameters = {
+ chromatic: {
+ viewports: [480, 768, 1024, 1200],
+ },
+};
+
+export const Sizes = (_, { loaded: { component } }) => component;
+
+Sizes.render = async () => {
+ const renderedBannerSizes = `Large size
+ ${await banner({ ...bannerDataImage, size: 'l', link: {} })}
+ Medium size
+ ${await banner({ ...bannerDataImage, size: 'm', link: {} })}
+ Small size
+ ${await banner({ ...bannerDataImage, description: '', size: 's', link: {} })}
+ Extra small size
+ ${await banner({ ...bannerDataImage, description: '', size: 'xs', link: {} })}
+ `;
+ return renderedBannerSizes;
+};
+Sizes.tags = ['!dev'];
+Sizes.parameters = {
+ chromatic: {
+ viewports: [480, 768, 1024, 1200],
+ },
+};
+
+export const Displays = (_, { loaded: { component } }) => component;
+
+Displays.render = async () => {
+ const renderedBannerDisplays = `Large font size
+ ${await banner({ ...bannerDataImage, font_size: 'l', link: {} })}
+ Dark box background
+ ${await banner({ ...bannerDataImage, box_background: 'dark', link: {} })}
+ Transparent box
+ ${await banner({ ...bannerDataImage, box_background: 'none', font_color: 'light', link: {} })}
+ Centered alignment
+ ${await banner({ ...bannerDataImage, horizontal: 'center', link: {} })}
+ Right alignment
+ ${await banner({ ...bannerDataImage, horizontal: 'right', link: {} })}
+ Top alignment
+ ${await banner({ ...bannerDataImage, size: 'l', vertical: 'top', link: {} })}
+ Bottom alignment
+ ${await banner({ ...bannerDataImage, size: 'l', vertical: 'bottom', link: {} })}
+ `;
+ return renderedBannerDisplays;
+};
+Displays.tags = ['!dev'];
+Displays.parameters = {
+ chromatic: {
+ viewports: [480, 768, 1024, 1200],
+ },
+};
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,
},
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),