feat(sbb-container): support background-expanded for images (#3004)

sbb-design-systems · Aug 21, 2024 · 298b335 · 298b335
1 parent 68d8f2c
commit 298b335
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 17 deletions.
diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss
@@ -20,10 +20,14 @@
   --sbb-container-padding: var(--sbb-spacing-responsive-xxl);
 }
 
-:host(:not([expanded])[background-expanded]) {
+:host([background-expanded]:not([expanded])) {
   background-color: var(--sbb-container-background-color);
 }
 
+:host([data-slot-names~='image'][background-expanded]) {
+  position: relative;
+}
+
 .sbb-container {
   background-color: var(--sbb-container-background-color);
   padding: var(--sbb-container-padding);
@@ -45,7 +49,7 @@
     @include sbb.page-spacing-expanded;
   }
 
-  :host([data-slot-names~='image']) & {
+  :host([data-slot-names~='image']:not([background-expanded])) & {
     position: relative;
   }
 }
@@ -60,7 +64,7 @@
   position: absolute;
   inset: 0;
 
-  :host(:not([expanded])) & {
+  :host(:not([expanded], [background-expanded])) & {
     @include sbb.mq($from: ultra) {
       --sbb-image-border-radius: var(--sbb-border-radius-4x);
 

diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts
@@ -126,20 +126,43 @@ describe(`sbb-container`, () => {
 
   // Test very large screens
   for (const backgroundExpanded of backgroundExpandedCases) {
-    it(
-      `viewport=custom_background-expanded=${backgroundExpanded}`,
-      visualDiffDefault.with(async (setup) => {
-        await setViewport({ width: SbbBreakpointUltraMin + 300, height: 600 });
+    describe(`viewport=custom_background-expanded=${backgroundExpanded}`, () => {
+      const viewport = { width: SbbBreakpointUltraMin + 300, height: 600 };
+      const wrapperStyles = { backgroundColor: 'var(--sbb-color-silver)', padding: '0' };
 
-        await setup.withFixture(
-          html`
-            <sbb-container ?background-expanded=${backgroundExpanded}>
-              ${containerContent()}
-            </sbb-container>
-          `,
-          { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
-        );
-      }),
-    );
+      it(
+        ``,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              <sbb-container ?background-expanded=${backgroundExpanded}>
+                ${containerContent()}
+              </sbb-container>
+            `,
+            wrapperStyles,
+          );
+
+          await setViewport(viewport);
+        }),
+      );
+
+      it(
+        `background-image`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`
+              <sbb-container ?background-expanded=${backgroundExpanded}>
+                ${backgroundImageContent}
+                <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
+              </sbb-container>
+            `,
+            wrapperStyles,
+          );
+
+          await setViewport(viewport);
+          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+        }),
+      );
+    });
   }
 });