From 5bf5d3f22103196703683f7406eb97a04f299f04 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Thu, 12 Dec 2024 11:04:59 +0100
Subject: [PATCH 1/2] fix(sbb-message): support the use of `figure` as image

---
 src/elements/core/styles/core.scss          |  8 +++
 src/elements/message/message.scss           |  4 +-
 src/elements/message/message.visual.spec.ts | 70 +++++++++++++++------
 3 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index 220a7f68e3..d1b2cd2846 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -196,6 +196,14 @@ sbb-lead-container {
   }
 }
 
+// TODO: Move back to the sbb-message components when the global css refactoring happens
+sbb-message {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
+    border-radius: var(--sbb-message-image-border-radius);
+  }
+}
+
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
 // TODO: Move back to the teaser components when the global css refactoring happens
diff --git a/src/elements/message/message.scss b/src/elements/message/message.scss
index 62c14cf321..d54d86adbf 100644
--- a/src/elements/message/message.scss
+++ b/src/elements/message/message.scss
@@ -6,6 +6,7 @@
 :host {
   --sbb-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
 
@@ -26,7 +27,8 @@
 }
 
 ::slotted([slot='image']) {
-  margin-block: var(--sbb-message-image-margin-block);
+  display: block;
+  margin-block: var(--sbb-message-image-margin-block) !important; // overrides '.sbb-figure' margin
   width: 100%;
 }
 
diff --git a/src/elements/message/message.visual.spec.ts b/src/elements/message/message.visual.spec.ts
index 156b928829..dfab902ca9 100644
--- a/src/elements/message/message.visual.spec.ts
+++ b/src/elements/message/message.visual.spec.ts
@@ -4,32 +4,66 @@ import { describeViewports, visualDiffDefault } from '../core/testing/private.js
 import { waitForImageReady } from '../core/testing.js';
 
 import './message.js';
+import '../chip-label.js';
 import '../image.js';
 import '../button/secondary-button.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
+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-message`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    it(
-      'default',
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`
-          <sbb-message title-content="Unfortunately, an error has occurred.">
-            <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
-            <p slot="subtitle">Please reload the page or try your search again later.</p>
-            <p slot="legend">Error code: 0001</p>
-            <sbb-secondary-button
-              slot="action"
-              icon-name="arrows-circle-small"
-              size="m"
-            ></sbb-secondary-button>
-          </sbb-message>
-        `);
+    for (const testCase of imgTestCases) {
+      it(
+        `default ${testCase.title}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-message title-content="Unfortunately, an error has occurred.">
+              ${testCase.imgTemplate()}
+              <p slot="subtitle">Please reload the page or try your search again later.</p>
+              <p slot="legend">Error code: 0001</p>
+              <sbb-secondary-button
+                slot="action"
+                icon-name="arrows-circle-small"
+                size="m"
+              ></sbb-secondary-button>
+            </sbb-message>
+          `);
 
-        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-      }),
-    );
+          await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
+        }),
+      );
+    }
 
     it(
       'no image',

From 6838369a64f023f3ded1bf45339752460338c29a Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Thu, 12 Dec 2024 11:46:21 +0100
Subject: [PATCH 2/2] fix: pr feedback

---
 src/elements/core/styles/core.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index d1b2cd2846..f89152ad15 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -196,7 +196,7 @@ sbb-lead-container {
   }
 }
 
-// TODO: Move back to the sbb-message components when the global css refactoring happens
+// TODO: Move back to the sbb-message components when the global CSS refactoring happens
 sbb-message {
   > [slot='image']:is(sbb-image, img),
   > [slot='image'] :is(sbb-image, img) {