fix(sbb-message): support the use of figure as image (#3294)

sbb-design-systems · Dec 12, 2024 · cd3f189 · cd3f189
1 parent 7db5b7e
commit cd3f189
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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',