fix(teaser): pr feedbacks

sbb-design-systems · Jan 11, 2024 · 6179f58 · 6179f58
1 parent 5f86e15
commit 6179f58
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 24 deletions.
diff --git a/src/components/teaser/readme.md b/src/components/teaser/readme.md
@@ -25,17 +25,7 @@ Possible values are `end-centered` (default), `end-top` and `bottom`.
 ```
 
 By default, the image dimensions are set using the width and the aspect ratio.
-Default values are `300px` and `4/3`. Consumers can change these values
-by setting the two CSS variables named `--sbb-teaser-image-width` and `--sbb-teaser-image-aspect-ratio`.
-
-```html
-<sbb-teaser
-  href="https://www.sbb.ch"
-  style="--sbb-teaser-image-aspect-ratio: 2; --sbb-teaser-image-width: 500px;"
->
-  ...
-</sbb-teaser>
-```
+Default values are `300px` and `4/3`. Consumers can change these values.
 
 ## Accessibility
 

diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss
@@ -17,8 +17,6 @@
   --sbb-teaser-align-items: center;
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-width: fit-content;
-  --sbb-teaser-image-width: 300px;
-  --sbb-teaser-image-aspect-ratio: 4/3;
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-brightness-hover: 1.075;
 }
@@ -69,10 +67,10 @@
   will-change: transform;
   display: block;
   object-fit: cover;
-  width: var(--sbb-teaser-image-width);
+  width: sbb.px-to-rem-build(300);
   filter: brightness(var(--sbb-teaser-brightness, 1));
   transition: var(--sbb-animation-duration-4x) var(--sbb-animation-easing);
-  aspect-ratio: var(--sbb-teaser-image-aspect-ratio);
+  aspect-ratio: 4/3;
 
   @include sbb.hover-mq($hover: true) {
     .sbb-teaser:hover & {
@@ -97,6 +95,7 @@
 }
 
 .sbb-teaser__chip-container {
+  display: block;
   line-height: initial;
 }
 

diff --git a/src/components/teaser/teaser.spec.ts b/src/components/teaser/teaser.spec.ts
@@ -8,7 +8,6 @@ import images from '../core/images';
 
 import type { SbbTeaserElement } from './teaser';
 import './teaser';
-import '../title';
 
 describe('sbb-teaser', () => {
   const createTeaser = (args: Args): TemplateResult => {

diff --git a/src/components/teaser/teaser.ts b/src/components/teaser/teaser.ts
@@ -83,18 +83,18 @@ export class SbbTeaserElement extends LitElement implements LinkProperties {
     /* eslint-disable lit/binding-positions */
     return html`
       <${unsafeStatic(TAG_NAME)} class="sbb-teaser" ${spread(attributes)}>
-        <div class="sbb-teaser__container">
-          <div class="sbb-teaser__image-wrapper">
+        <span class="sbb-teaser__container">
+          <span class="sbb-teaser__image-wrapper">
             <slot name="image"></slot>
-          </div>
-          <div class="sbb-teaser__text">
+          </span>
+          <span class="sbb-teaser__text">
             ${
               this._namedSlots.chip
-                ? html`<div class="sbb-teaser__chip-container">
+                ? html`<span class="sbb-teaser__chip-container">
                     <sbb-chip size="xxs" color="charcoal" class="sbb-teaser__chip">
                       <slot name="chip"></slot>
                     </sbb-chip>
-                  </div>`
+                  </span>`
                 : nothing
             }
             <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">
@@ -110,8 +110,8 @@ export class SbbTeaserElement extends LitElement implements LinkProperties {
                   </span>`
                 : nothing
             }
-          </div>
-        </div>
+          </span>
+        </span>
       </${unsafeStatic(TAG_NAME)}>
     `;
     /* eslint-disable lit/binding-positions */