fix: review fix

sbb-design-systems · Jan 10, 2024 · 4999139 · 4999139
1 parent 0d190fe
commit 4999139
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 49 deletions.
diff --git 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
@@ -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 = {