From 4999139419e16031ed6f452cfacf01d8c2711003 Mon Sep 17 00:00:00 2001
From: Federico Iseppon
 <100614752+federicoisepponfincons@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:43:35 +0100
Subject: [PATCH] fix: review fix

---
 src/components/teaser/teaser.scss       |  6 ++-
 src/components/teaser/teaser.stories.ts | 66 +++++++------------------
 2 files changed, 23 insertions(+), 49 deletions(-)

diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss
index c7717c1bab..67bd212ea4 100644
--- a/src/components/teaser/teaser.scss
+++ b/src/components/teaser/teaser.scss
@@ -17,6 +17,8 @@
   --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;
 }
@@ -67,10 +69,10 @@
   will-change: transform;
   display: block;
   object-fit: cover;
-  width: var(--sbb-teaser-image-width, 300px);
+  width: var(--sbb-teaser-image-width);
   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, 4 / 3);
+  aspect-ratio: var(--sbb-teaser-image-aspect-ratio);
 
   @include sbb.hover-mq($hover: true) {
     .sbb-teaser:hover & {
diff --git a/src/components/teaser/teaser.stories.ts b/src/components/teaser/teaser.stories.ts
index 1f62b07bef..33cb9e0d63 100644
--- a/src/components/teaser/teaser.stories.ts
+++ b/src/components/teaser/teaser.stories.ts
@@ -3,7 +3,6 @@ import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';
 
@@ -59,18 +58,6 @@ const href: InputType = {
   },
 };
 
-const imgWidth: InputType = {
-  control: {
-    type: 'number',
-  },
-};
-
-const imgAspectRatio: InputType = {
-  control: {
-    type: 'number',
-  },
-};
-
 const ariaLabel: InputType = {
   control: {
     type: 'text',
@@ -83,8 +70,6 @@ const defaultArgTypes: ArgTypes = {
   description,
   alignment,
   href,
-  imgWidth,
-  imgAspectRatio,
   'aria-label': ariaLabel,
 };
 
@@ -94,31 +79,30 @@ const defaultArgs: Args = {
   description: 'This is a paragraph',
   alignment: 'after-centered',
   href: href.options[1],
-  imgWidth: undefined,
-  imgAspectRatio: undefined,
   'aria-label':
     'The text which gets exposed to screen reader users. The text should reflect all the information which gets passed into the components slots and which is visible in the Teaser, either through text or iconography',
 };
 
-const TemplateDefault = ({
-  chip,
-  title,
-  description,
-  imgWidth,
-  imgAspectRatio,
-  ...remainingArgs
-}: Args): TemplateResult => {
-  let style: Readonly<StyleInfo> = {};
-  if (imgAspectRatio) {
-    style = { '--sbb-teaser-image-aspect-ratio': imgAspectRatio };
-  }
-  if (imgWidth) {
-    style = { ...style, '--sbb-teaser-image-width': `${imgWidth}px` };
-  }
+const TemplateDefault = ({ chip, title, description, ...remainingArgs }: Args): TemplateResult => {
+  return html`
+    <sbb-teaser ${sbbSpread(remainingArgs)}>
+      <img slot="image" src=${placeholderImage} alt="400x300" />
+      ${chip && html`<span slot="chip">${chip}</span>`}
+      <span slot="title">${title}</span>
+      <p slot="description">${description}</p>
+    </sbb-teaser>
+  `;
+};
 
+const TemplateCustom = ({ chip, title, description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <img slot="image" src=${placeholderImage} alt="400x300" style=${styleMap(style)} />
+      <img
+        slot="image"
+        src=${placeholderImage}
+        alt="200x100"
+        style="width: 200px; aspect-ratio: 2/1;"
+      />
       ${chip && html`<span slot="chip">${chip}</span>`}
       <span slot="title">${title}</span>
       <p slot="description">${description}</p>
@@ -189,22 +173,10 @@ export const WithLongTextBelow: StoryObj = {
   args: { ...defaultArgs, title: loremIpsum, description: loremIpsum, alignment: 'below' },
 };
 
-export const WithCustomWidth: StoryObj = {
-  render: TemplateDefault,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, imgWidth: 500 },
-};
-
-export const WithCustomAspectRatio: StoryObj = {
-  render: TemplateDefault,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs, imgAspectRatio: 5 },
-};
-
 export const WithCustomWidthAndAspectRatio: StoryObj = {
-  render: TemplateDefault,
+  render: TemplateCustom,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, imgWidth: 200, imgAspectRatio: 9 / 16 },
+  args: { ...defaultArgs },
 };
 
 export const List: StoryObj = {