From e6f517bbf8b42b96777193347860c315c457a6be Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Thu, 12 Dec 2024 11:37:11 +0100 Subject: [PATCH] fix(sbb-teaser): fix image related issues (#3293) --- src/elements/core/styles/core.scss | 32 ++-- src/elements/teaser/readme.md | 4 +- src/elements/teaser/teaser.scss | 5 +- src/elements/teaser/teaser.stories.ts | 18 +- src/elements/teaser/teaser.visual.spec.ts | 215 +++++++++++----------- 5 files changed, 138 insertions(+), 136 deletions(-) diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index 220a7f68e3..29e1f538fc 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -162,8 +162,8 @@ img { // TODO: Move back to the sbb-container components when the global css refactoring happens sbb-container { - [slot='image']:is(sbb-image, img), - [slot='image'] :is(sbb-image, img) { + > [slot='image']:is(sbb-image, img), + > [slot='image'] :is(sbb-image, img) { --sbb-image-object-fit: cover; border-radius: var(--sbb-container-background-border-radius); @@ -174,8 +174,8 @@ sbb-container { // TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens sbb-flip-card-summary { - [slot='image']:is(sbb-image, img), - [slot='image'] :is(sbb-image, img) { + > [slot='image']:is(sbb-image, img), + > [slot='image'] :is(sbb-image, img) { --sbb-image-aspect-ratio: auto; --sbb-image-object-fit: cover; @@ -187,8 +187,8 @@ sbb-flip-card-summary { // TODO: Move back to the sbb-lead-container components when the global css refactoring happens sbb-lead-container { - [slot='image']:is(sbb-image, img, picture), - [slot='image'] :is(sbb-image, img, picture) { + > [slot='image']:is(sbb-image, img, picture), + > [slot='image'] :is(sbb-image, img, picture) { --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio); --sbb-image-object-fit: cover; @@ -213,8 +213,7 @@ sbb-lead-container { } } - [slot='image']:is(sbb-image, img), - [slot='image'] :is(sbb-image, img) { + :is(sbb-image, img) { will-change: filter; filter: brightness(var(--sbb-teaser-image-brightness, 1)); transition: filter var(--sbb-teaser-image-animation-duration) @@ -237,18 +236,13 @@ sbb-lead-container { } // TODO: Move back to the teaser components when the global css refactoring happens -:is(sbb-teaser) { - [slot='image']:is(sbb-image, img), - [slot='image'] :is(sbb-image, img) { - transition-property: filter, scale; - will-change: filter, scale; - scale: var(--sbb-teaser-scale, 1); - } +sbb-teaser :is(sbb-image, img) { + --sbb-image-object-fit: cover; + --sbb-image-aspect-ratio: 4 / 3; - :is(sbb-image, img) { - --sbb-image-object-fit: cover; - --sbb-image-aspect-ratio: 4 / 3; - } + transition-property: filter, scale; + will-change: filter, scale; + scale: var(--sbb-teaser-scale, 1); } // TODO: Move back to the teaser-hero components when the global css refactoring happens diff --git a/src/elements/teaser/readme.md b/src/elements/teaser/readme.md index 4804cea8f7..8d36c04038 100644 --- a/src/elements/teaser/readme.md +++ b/src/elements/teaser/readme.md @@ -9,9 +9,7 @@ Simple teaser example: title-content="Title" chip-content="Chip label" > -
- 400x300 -
+ 400x300 A brief description. ``` diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss index 8cc5dceaaf..b0bbb9d158 100644 --- a/src/elements/teaser/teaser.scss +++ b/src/elements/teaser/teaser.scss @@ -89,16 +89,17 @@ ::slotted([slot='image']) { width: #{sbb.px-to-rem-build(300)}; + display: block; } .sbb-teaser__image-wrapper { flex-shrink: 0; overflow: hidden; border-radius: var(--sbb-teaser-border-radius); - transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing); + transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing); @include sbb.hover-mq($hover: true) { - .sbb-teaser__wrapper:hover & { + :host(:hover) & { @include sbb.shadow-level-9-hard; } } diff --git a/src/elements/teaser/teaser.stories.ts b/src/elements/teaser/teaser.stories.ts index e8a9895468..236f0cf3af 100644 --- a/src/elements/teaser/teaser.stories.ts +++ b/src/elements/teaser/teaser.stories.ts @@ -102,9 +102,7 @@ const TemplateDefault = ({ description, ...remainingArgs }: Args): TemplateResul const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): TemplateResult => { return html` -
- 400x300 -
+ 400x300 ${description} `; @@ -113,9 +111,13 @@ const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): Tem const TemplateCustom = ({ description, ...remainingArgs }: Args): TemplateResult => { return html` -
- 200x100 -
+ 200x100 ${description} `; @@ -129,9 +131,7 @@ const TemplateSlots = ({ }: Args): TemplateResult => { return html` -
- 400x300 -
+ 400x300 ${chipContent} ${titleContent} ${description} diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts index 1c79c87128..4ac11e763f 100644 --- a/src/elements/teaser/teaser.visual.spec.ts +++ b/src/elements/teaser/teaser.visual.spec.ts @@ -12,6 +12,8 @@ import { import { waitForImageReady } from '../core/testing.js'; import './teaser.js'; +import '../chip-label.js'; +import '../container.js'; import '../image.js'; const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); @@ -27,6 +29,37 @@ describe(`sbb-teaser`, () => { const longChip: string = 'This is a chip which has a very long content and should receive ellipsis.'; + const imgCases = [ + { + title: 'imageSlot=sbb-image', + imgSelector: 'sbb-image', + imgTemplate: () => html``, + }, + { + title: 'imageSlot=img', + imgSelector: 'img', + imgTemplate: () => html``, + }, + { + title: 'imageSlot=figure_and_sbb-image', + imgSelector: 'sbb-image', + imgTemplate: () => + html`
+ + AI chip +
`, + }, + { + title: 'imageSlot=figure_and_img', + imgSelector: 'img', + imgTemplate: () => + html`
+ + AI chip +
`, + }, + ]; + const visualStates = { hasChip: [false, true], withLongContent: [false, true], @@ -41,28 +74,31 @@ describe(`sbb-teaser`, () => { describeViewports({ viewports: [screenCombination.viewport] }, () => { for (const alignment of screenCombination.alignments) { describe(`alignment=${alignment}`, () => { - for (const visualDiffStandardState of [ - visualDiffDefault, - visualDiffFocus, - visualDiffHover, - ]) { - it( - `state=${visualDiffStandardState.name}`, - visualDiffStandardState.with(async (setup) => { - await setup.withFixture( - html` - -
- -
- This is a paragraph - - `, - { maxWidth: '760px' }, + for (const imgCase of imgCases) { + describe(imgCase.title, () => { + for (const visualDiffStandardState of [ + visualDiffDefault, + visualDiffFocus, + visualDiffHover, + ]) { + it( + `state=${visualDiffStandardState.name}`, + visualDiffStandardState.with(async (setup) => { + await setup.withFixture( + html` + + ${imgCase.imgTemplate()} This is a paragraph + + `, + { maxWidth: '760px' }, + ); + await waitForImageReady( + setup.snapshotElement.querySelector(imgCase.imgSelector)!, + ); + }), ); - await waitForImageReady(setup.snapshotElement.querySelector('img')!); - }), - ); + } + }); } describeEach(visualStates, ({ hasChip, withLongContent }) => { @@ -80,9 +116,9 @@ describe(`sbb-teaser`, () => {
${hasChip - ? html`AI chip` + ? html` + AI chip + ` : nothing}
${withLongContent ? loremIpsum : 'This is a paragraph'} @@ -94,93 +130,44 @@ describe(`sbb-teaser`, () => { }), ); }); - - it( - `longChip=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` - -
- -
- This is a paragraph - - `, - { maxWidth: '760px' }, - ); - await waitForImageReady(setup.snapshotElement.querySelector('img')!); - }), - ); - - it( - `list=true`, - visualDiffDefault.with(async (setup) => { - const count = 5; - await setup.withFixture(html` - - `); - await Promise.all( - new Array(count).map((_, i) => - waitForImageReady(setup.snapshotElement.querySelector(`#img${i}`)!), - ), - ); - }), - ); }); } it( 'grid with sbb-image', visualDiffDefault.with(async (setup) => { + const count = 2; await setup.withFixture(html` -
- ${repeat( - new Array(2), - () => html` - -
- - AI chip -
- This is a paragraph - - `, - )} -
+ +
+ ${repeat( + new Array(count), + (_, i) => html` + +
+ + + AI chip + +
+ This is a paragraph + + `, + )} +
+ `); - await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + + await Promise.all( + new Array(count).map((_, i) => + waitForImageReady(setup.snapshotElement.querySelector(`#img${i}`)!), + ), + ); }), ); @@ -200,6 +187,28 @@ describe(`sbb-teaser`, () => { await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); }), ); + + it( + `longChip`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + + + This is a paragraph + + `, + { maxWidth: '760px' }, + ); + await waitForImageReady(setup.snapshotElement.querySelector('img')!); + }), + ); }); } });