feat(sbb-container): support the use of figure as bg image

sbb-design-systems · Dec 5, 2024 · 31fb147 · 31fb147
1 parent 61a3a7f
commit 31fb147
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 33 deletions.
diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss
@@ -4,6 +4,8 @@
 @include sbb.box-sizing;
 
 :host {
+  --sbb-container-background-border-radius: 0;
+
   display: block;
 }
 
@@ -28,6 +30,12 @@
   position: relative;
 }
 
+:host(:not([expanded], [background-expanded])) {
+  @include sbb.mq($from: ultra) {
+    --sbb-container-background-border-radius: var(--sbb-border-radius-4x);
+  }
+}
+
 .sbb-container {
   background-color: var(--sbb-container-background-color);
   padding: var(--sbb-container-padding);
@@ -62,20 +70,8 @@
 }
 
 ::slotted([slot='image']) {
-  border-radius: 0;
   position: absolute;
   inset: 0;
-
-  :host(:not([expanded], [background-expanded])) & {
-    @include sbb.mq($from: ultra) {
-      border-radius: var(--sbb-border-radius-4x);
-    }
-  }
-}
-
-::slotted(img[slot='image']) {
-  --sbb-image-object-fit: cover;
-
   height: 100%;
   width: 100%;
 }
diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts
@@ -25,17 +25,33 @@ describe(`sbb-container`, () => {
 
   const images = [
     {
+      name: 'sbb-image',
       selector: 'sbb-image',
       image: html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
     },
     {
+      name: 'figure-sbb-image',
+      selector: 'sbb-image',
+      image: html`<figure slot="image" class="sbb-figure">
+        <sbb-image image-src=${imageUrl}></sbb-image>
+      </figure>`,
+    },
+    {
+      name: 'img',
       selector: 'img',
       image: html`<img
       slot="image"
       src=${imageBase64}
       alt=''
     ></img>`,
     },
+    {
+      name: 'figure-img',
+      selector: 'img',
+      image: html`<figure slot="image" class="sbb-figure">
+        <img src=${imageBase64} alt="" />
+      </figure>`,
+    },
   ];
 
   const containerContent = (): TemplateResult => html`
@@ -88,7 +104,7 @@ describe(`sbb-container`, () => {
         describe(`expanded=${expanded}`, () => {
           for (const image of images) {
             it(
-              `slotted=${image.selector}`,
+              `slotted=${image.name}`,
               visualDiffDefault.with(async (setup) => {
                 await setup.withFixture(
                   html`<sbb-container ?expanded=${expanded}>
@@ -146,23 +162,24 @@ describe(`sbb-container`, () => {
         }),
       );
 
-      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,
-          );
+      for (const image of images) {
+        it(
+          `background-image slotted=${image.name}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              html`
+                <sbb-container ?background-expanded=${backgroundExpanded}>
+                  ${backgroundImageContent} ${image.image}
+                </sbb-container>
+              `,
+              wrapperStyles,
+            );
 
-          await setViewport(viewport);
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+            await setViewport(viewport);
+            await waitForImageReady(setup.snapshotElement.querySelector(image.selector)!);
+          }),
+        );
+      }
     });
   }
 });
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
@@ -160,6 +160,18 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
+// 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) {
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-container-background-border-radius);
+    height: 100%;
+    position: absolute;
+  }
+}
+
 // 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
@@ -177,8 +189,8 @@ img {
     }
   }
 
-  & [slot='image']:is(sbb-image, img),
-  & [slot='image'] :is(sbb-image, img) {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
     will-change: filter;
     filter: brightness(var(--sbb-teaser-image-brightness, 1));
     transition: filter var(--sbb-teaser-image-animation-duration)
@@ -202,8 +214,8 @@ img {
 
 // 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) {
+  [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);