fix(sbb-teaser-hero): fix image size on custom width (#3295)

sbb-design-systems · Dec 16, 2024 · 9fe9ae8 · 9fe9ae8
1 parent 11cc853
commit 9fe9ae8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 45 deletions.
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
@@ -266,8 +266,9 @@ sbb-teaser :is(sbb-image, img) {
   }
 
   img {
-    width: 100%;
     display: block;
+    align-self: stretch;
+    width: 100%;
   }
 }
 

diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss
@@ -19,9 +19,13 @@
   }
 }
 
+::slotted([slot='image']) {
+  width: 100%;
+}
+
 .sbb-teaser-hero {
   position: relative;
-  display: block;
+  display: flex;
   min-height: var(--sbb-panel-height);
   text-decoration: none;
 

diff --git a/src/elements/teaser-hero/teaser-hero.visual.spec.ts b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
@@ -2,7 +2,6 @@ import { html } from 'lit';
 
 import {
   describeViewports,
-  loadAssetAsBase64,
   visualDiffDefault,
   visualDiffFocus,
   visualDiffHover,
@@ -13,71 +12,83 @@ import '../image.js';
 import '../chip-label.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
-const imageBase64 = await loadAssetAsBase64(imageUrl);
+
+const imgTestCases = [
+  {
+    title: 'with sbb-image',
+    imgSelector: 'sbb-image',
+    imgTemplate: () => html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
+  },
+  {
+    title: 'with img tag',
+    imgSelector: 'img',
+    imgTemplate: () => html`<img slot="image" src=${imageUrl} alt="" />`,
+  },
+  {
+    title: 'with figure_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-end">AI generated</sbb-chip-label>
+      </figure>`,
+  },
+  {
+    title: 'with figure_img',
+    imgSelector: 'img',
+    imgTemplate: () =>
+      html`<figure class="sbb-figure" slot="image">
+        <img slot="image" src=${imageUrl} alt="" />
+        <sbb-chip-label class="sbb-figure-overlap-start-end">AI generated</sbb-chip-label>
+      </figure>`,
+  },
+];
 
 describe(`sbb-teaser-hero`, () => {
   describeViewports({ viewports: ['zero', 'micro', 'small', 'medium', 'wide'] }, () => {
     for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
-      it(
-        state.name,
-        state.with(async (setup) => {
-          await setup.withFixture(html`
-            <sbb-teaser-hero href="#" link-content="Find out more">
-              Break out and explore castles and palaces.
-
-              <figure class="sbb-figure" slot="image">
-                <sbb-image image-src=${imageUrl}></sbb-image>
-                <sbb-chip-label class="sbb-figure-overlap-start-start" style="z-index: 1">
-                  Label
-                </sbb-chip-label>
-              </figure>
-            </sbb-teaser-hero>
-          `);
+      for (const testCase of imgTestCases) {
+        it(
+          `${testCase.title} ${state.name}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(html`
+              <sbb-teaser-hero href="#" link-content="Find out more">
+                Break out and explore castles and palaces. ${testCase.imgTemplate()}
+              </sbb-teaser-hero>
+            `);
 
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+            await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
+          }),
+        );
+      }
 
       it(
-        `slotted ${state.name}`,
+        `without content ${state.name}`,
         state.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-teaser-hero href="#">
-              Break out and explore castles and palaces.
-              <span slot="link-content">Find out more</span>
               <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
             </sbb-teaser-hero>
           `);
 
           await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
         }),
       );
+    }
+  });
 
+  describeViewports({ viewports: ['large'] }, () => {
+    for (const testCase of imgTestCases) {
       it(
-        `slotted-image ${state.name}`,
-        state.with(async (setup) => {
-          await setup.withFixture(html`
-            <sbb-teaser-hero href="#">
-              Break out and explore castles and palaces.
-              <span slot="link-content">Find out more</span>
-              <img slot="image" src=${imageBase64} alt="" />
-            </sbb-teaser-hero>
-          `);
-
-          await waitForImageReady(setup.snapshotElement.querySelector('img')!);
-        }),
-      );
-
-      it(
-        `without content ${state.name}`,
-        state.with(async (setup) => {
+        `custom width ${testCase.title}`,
+        visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
-            <sbb-teaser-hero href="#">
-              <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
+            <sbb-teaser-hero href="#" link-content="Find out more" style="width: 700px">
+              Break out and explore castles and palaces. ${testCase.imgTemplate()}
             </sbb-teaser-hero>
           `);
 
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+          await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
         }),
       );
     }