From 31f49a2497d393589f683ee0fd31c34067cf7836 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 12 Dec 2024 10:26:35 +0100
Subject: [PATCH 1/2] fix(sbb-teaser): fix image related issues

---
 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 +++++++--------
 4 files changed, 26 insertions(+), 33 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"
 >
-  <figure slot="image" class="sbb-figure">
-    <img src="..." alt="400x300" />
-  </figure>
+  <img slot="image" src="..." alt="400x300" />
   A brief description.
 </sbb-teaser>
 ```
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`
     <sbb-teaser ${sbbSpread(remainingArgs)} style="width:400px">
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       ${description}
     </sbb-teaser>
   `;
@@ -113,9 +111,13 @@ const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): Tem
 const TemplateCustom = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure" style="width: 200px;">
-        <img src=${placeholderImage} alt="200x100" class="sbb-image-2-1" />
-      </figure>
+      <img
+        src=${placeholderImage}
+        alt="200x100"
+        class="sbb-image-2-1"
+        style="width: 200px;"
+        slot="image"
+      />
       ${description}
     </sbb-teaser>
   `;
@@ -129,9 +131,7 @@ const TemplateSlots = ({
 }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       <span slot="chip">${chipContent}</span>
       <span slot="title">${titleContent}</span>
       ${description}

From b81bac955f1642edbb1b6fe1455699311755b561 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 12 Dec 2024 10:59:59 +0100
Subject: [PATCH 2/2] test: optimize visual regression tests

---
 src/elements/teaser/teaser.visual.spec.ts | 215 +++++++++++-----------
 1 file changed, 112 insertions(+), 103 deletions(-)

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`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
+    },
+    {
+      title: 'imageSlot=img',
+      imgSelector: 'img',
+      imgTemplate: () => html`<img src=${imageBase64} slot="image" alt="" />`,
+    },
+    {
+      title: 'imageSlot=figure_and_sbb-image',
+      imgSelector: 'sbb-image',
+      imgTemplate: () =>
+        html`<figure class="sbb-figure" slot="image">
+          <sbb-image image-src=${imageUrl}></sbb-image>
+          <sbb-chip-label class="sbb-figure-overlap-start-start">AI chip</sbb-chip-label>
+        </figure>`,
+    },
+    {
+      title: 'imageSlot=figure_and_img',
+      imgSelector: 'img',
+      imgTemplate: () =>
+        html`<figure class="sbb-figure" slot="image">
+          <img src=${imageBase64} alt="" />
+          <sbb-chip-label class="sbb-figure-overlap-start-start">AI chip</sbb-chip-label>
+        </figure>`,
+    },
+  ];
+
   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`
-                    <sbb-teaser title-content="This is a title" href="#" alignment=${alignment}>
-                      <figure slot="image" class="sbb-figure">
-                        <img src=${imageBase64} />
-                      </figure>
-                      This is a paragraph
-                    </sbb-teaser>
-                  `,
-                  { 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`
+                        <sbb-teaser title-content="This is a title" href="#" alignment=${alignment}>
+                          ${imgCase.imgTemplate()} This is a paragraph
+                        </sbb-teaser>
+                      `,
+                      { 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`, () => {
                       <figure slot="image" class="sbb-figure">
                         <img src=${imageBase64} />
                         ${hasChip
-                          ? html`<sbb-chip-label class="sbb-figure-overlap-start-start"
-                              >AI chip</sbb-chip-label
-                            >`
+                          ? html`<sbb-chip-label class="sbb-figure-overlap-start-start">
+                              AI chip
+                            </sbb-chip-label>`
                           : nothing}
                       </figure>
                       ${withLongContent ? loremIpsum : 'This is a paragraph'}
@@ -94,93 +130,44 @@ describe(`sbb-teaser`, () => {
               }),
             );
           });
-
-          it(
-            `longChip=true`,
-            visualDiffDefault.with(async (setup) => {
-              await setup.withFixture(
-                html`
-                  <sbb-teaser
-                    style="width: ${screenCombination.viewport === 'micro' ? '300px' : '400px'};"
-                    title-content="This is a title"
-                    href="#"
-                    alignment=${alignment}
-                    chip-content=${longChip}
-                  >
-                    <figure slot="image" class="sbb-figure">
-                      <img src=${imageBase64} />
-                    </figure>
-                    This is a paragraph
-                  </sbb-teaser>
-                `,
-                { maxWidth: '760px' },
-              );
-              await waitForImageReady(setup.snapshotElement.querySelector('img')!);
-            }),
-          );
-
-          it(
-            `list=true`,
-            visualDiffDefault.with(async (setup) => {
-              const count = 5;
-              await setup.withFixture(html`
-                <ul style="list-style: none; padding: 0;">
-                  ${repeat(
-                    new Array(count),
-                    (_, i) => html`
-                      <li style="margin-block: 1rem;">
-                        <sbb-teaser
-                          title-content="This is title n.${i + 1}"
-                          href="#"
-                          alignment=${alignment}
-                        >
-                          <figure slot="image" class="sbb-figure">
-                            <img src=${imageBase64} id=${`img${i}`} />
-                          </figure>
-                          This is the paragraph n.${i + 1}
-                        </sbb-teaser>
-                      </li>
-                    `,
-                  )}
-                </ul>
-              `);
-              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`
-            <div style="display:grid; gap: 2rem; grid-template-columns: repeat(2, 1fr);">
-              ${repeat(
-                new Array(2),
-                () => html`
-                  <sbb-teaser
-                    title-content="This is a title"
-                    href="#"
-                    alignment="below"
-                    style="--sbb-teaser-align-items: stretch;"
-                  >
-                    <figure slot="image" class="sbb-figure" style="width: 100%">
-                      <sbb-image image-src=${imageUrl}></sbb-image>
-                      <sbb-chip-label class="sbb-figure-overlap-start-start"
-                        >AI chip</sbb-chip-label
-                      >
-                    </figure>
-                    This is a paragraph
-                  </sbb-teaser>
-                `,
-              )}
-            </div>
+            <sbb-container>
+              <div style="display:grid; gap: 2rem; grid-template-columns: repeat(2, 1fr);">
+                ${repeat(
+                  new Array(count),
+                  (_, i) => html`
+                    <sbb-teaser
+                      title-content="This is a title"
+                      href="#"
+                      alignment="below"
+                      style="--sbb-teaser-align-items: stretch;"
+                    >
+                      <figure slot="image" class="sbb-figure" style="width: 100%">
+                        <sbb-image image-src=${imageUrl} id=${`img${i}`}></sbb-image>
+                        <sbb-chip-label class="sbb-figure-overlap-start-start">
+                          AI chip
+                        </sbb-chip-label>
+                      </figure>
+                      This is a paragraph
+                    </sbb-teaser>
+                  `,
+                )}
+              </div>
+            </sbb-container>
           `);
-          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`
+              <sbb-teaser
+                style="width: ${screenCombination.viewport === 'micro' ? '300px' : '400px'};"
+                title-content="This is a title"
+                href="#"
+                alignment="below"
+                chip-content=${longChip}
+              >
+                <img src=${imageBase64} slot="image" alt="" />
+                This is a paragraph
+              </sbb-teaser>
+            `,
+            { maxWidth: '760px' },
+          );
+          await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+        }),
+      );
     });
   }
 });