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),