fix(sbb-teaser): fix image related issues (#3293)

sbb-design-systems · Dec 12, 2024 · e6f517b · e6f517b
1 parent b5457a7
commit e6f517b
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 136 deletions.
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
@@ -162,8 +162,8 @@ img {
 
 // 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) {
+  > [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);
@@ -174,8 +174,8 @@ sbb-container {
 
 // TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens
 sbb-flip-card-summary {
-  [slot='image']:is(sbb-image, img),
-  [slot='image'] :is(sbb-image, img) {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
     --sbb-image-aspect-ratio: auto;
     --sbb-image-object-fit: cover;
 
@@ -187,8 +187,8 @@ sbb-flip-card-summary {
 
 // TODO: Move back to the sbb-lead-container components when the global css refactoring happens
 sbb-lead-container {
-  [slot='image']:is(sbb-image, img, picture),
-  [slot='image'] :is(sbb-image, img, picture) {
+  > [slot='image']:is(sbb-image, img, picture),
+  > [slot='image'] :is(sbb-image, img, picture) {
     --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
     --sbb-image-object-fit: cover;
 
@@ -213,8 +213,7 @@ sbb-lead-container {
     }
   }
 
-  [slot='image']:is(sbb-image, img),
-  [slot='image'] :is(sbb-image, img) {
+  :is(sbb-image, img) {
     will-change: filter;
     filter: brightness(var(--sbb-teaser-image-brightness, 1));
     transition: filter var(--sbb-teaser-image-animation-duration)
@@ -237,18 +236,13 @@ sbb-lead-container {
 }
 
 // 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) {
-    transition-property: filter, scale;
-    will-change: filter, scale;
-    scale: var(--sbb-teaser-scale, 1);
-  }
+sbb-teaser :is(sbb-image, img) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
 
-  :is(sbb-image, img) {
-    --sbb-image-object-fit: cover;
-    --sbb-image-aspect-ratio: 4 / 3;
-  }
+  transition-property: filter, scale;
+  will-change: filter, scale;
+  scale: var(--sbb-teaser-scale, 1);
 }
 
 // TODO: Move back to the teaser-hero components when the global css refactoring happens

diff --git a/src/elements/teaser/readme.md b/src/elements/teaser/readme.md
@@ -9,9 +9,7 @@ Simple teaser example:
   title-content="Title"
   chip-content="Chip label"
 >
-  <figure slot="image" class="sbb-figure">
-    <img src="..." alt="400x300" />
-  </figure>
+  <img slot="image" src="..." alt="400x300" />
   A brief description.
 </sbb-teaser>
 ```

diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss
@@ -89,16 +89,17 @@
 
 ::slotted([slot='image']) {
   width: #{sbb.px-to-rem-build(300)};
+  display: block;
 }
 
 .sbb-teaser__image-wrapper {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--sbb-teaser-border-radius);
-  transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
+  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);
 
   @include sbb.hover-mq($hover: true) {
-    .sbb-teaser__wrapper:hover & {
+    :host(:hover) & {
       @include sbb.shadow-level-9-hard;
     }
   }

diff --git a/src/elements/teaser/teaser.stories.ts b/src/elements/teaser/teaser.stories.ts
@@ -102,9 +102,7 @@ const TemplateDefault = ({ description, ...remainingArgs }: Args): TemplateResul
 const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)} style="width:400px">
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       ${description}
     </sbb-teaser>
   `;
@@ -113,9 +111,13 @@ const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): Tem
 const TemplateCustom = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure" style="width: 200px;">
-        <img src=${placeholderImage} alt="200x100" class="sbb-image-2-1" />
-      </figure>
+      <img
+        src=${placeholderImage}
+        alt="200x100"
+        class="sbb-image-2-1"
+        style="width: 200px;"
+        slot="image"
+      />
       ${description}
     </sbb-teaser>
   `;
@@ -129,9 +131,7 @@ const TemplateSlots = ({
 }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       <span slot="chip">${chipContent}</span>
       <span slot="title">${titleContent}</span>
       ${description}