From 1fc04f9c783468923d0f4299645805db8381ea18 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Thu, 8 Aug 2024 09:46:30 +0200
Subject: [PATCH] fix: review

---
 src/elements-experimental/tsconfig.json             |  2 +-
 src/elements/teaser-hero/readme.md                  | 13 +++++++------
 src/elements/teaser-hero/teaser-hero.scss           |  4 ++--
 src/elements/teaser-hero/teaser-hero.ts             |  2 +-
 src/elements/teaser-hero/teaser-hero.visual.spec.ts |  2 +-
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/elements-experimental/tsconfig.json b/src/elements-experimental/tsconfig.json
index 01bb1e4dca..a984026acb 100644
--- a/src/elements-experimental/tsconfig.json
+++ b/src/elements-experimental/tsconfig.json
@@ -8,6 +8,6 @@
       "@sbb-esta/lyne-elements-experimental/*": ["./*"]
     }
   },
-  "include": ["./**/*.ts", "../vite-env.d.ts", "../elements/teaser-hero.ts"],
+  "include": ["./**/*.ts", "../vite-env.d.ts"],
   "exclude": ["./**/*.chromatic.stories.ts"]
 }
diff --git a/src/elements/teaser-hero/readme.md b/src/elements/teaser-hero/readme.md
index 3d8ef1b948..01e7435e65 100644
--- a/src/elements/teaser-hero/readme.md
+++ b/src/elements/teaser-hero/readme.md
@@ -6,6 +6,7 @@ it should be an eye-catcher and should have an emotional effect on the user with
 It is possible to provide the panel label via an unnamed slot,
 while the link text can be provided using the `link-content` slot or the `linkContent` property;
 similarly, the background image can be provided using the `image` slot or the `imageSrc` property.
+Optionally a `sbb-chip` can be slotted in the `chip` slot, either together with the other slottable elements or alone.
 
 ```html
 <sbb-teaser-hero
@@ -47,9 +48,9 @@ Avoid slotting block elements (e.g. `div`) as this violates semantic rules and c
 
 ## Slots
 
-| Name           | Description                                           |
-| -------------- | ----------------------------------------------------- |
-|                | Use the unnamed slot to add text content to the panel |
-| `chip`         | Link content of the panel                             |
-| `image`        | The background image that can be a `sbb-image`        |
-| `link-content` | Link content of the panel                             |
+| Name           | Description                                                        |
+| -------------- | ------------------------------------------------------------------ |
+|                | Use the unnamed slot to add text content to the panel              |
+| `chip`         | The `sbb-chip` component that will be displayed on top-left corner |
+| `image`        | The background image that can be a `sbb-image`                     |
+| `link-content` | Link content of the panel                                          |
diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss
index 48a2deffed..5eba7db86b 100644
--- a/src/elements/teaser-hero/teaser-hero.scss
+++ b/src/elements/teaser-hero/teaser-hero.scss
@@ -40,8 +40,8 @@
   & {
     @include sbb.absolute-center-y;
   }
-
-  // Hide panel when no content or link-content is proview.
+  
+  // Hide panel when no content or link-content is provided.
   :host(:not([data-slot-names~='unnamed'], [data-slot-names~='link-content'], [link-content])) & {
     display: none;
   }
diff --git a/src/elements/teaser-hero/teaser-hero.ts b/src/elements/teaser-hero/teaser-hero.ts
index 10ac4d5356..f6dc1c029c 100644
--- a/src/elements/teaser-hero/teaser-hero.ts
+++ b/src/elements/teaser-hero/teaser-hero.ts
@@ -16,7 +16,7 @@ import '../link/block-link-static.js';
  * @slot - Use the unnamed slot to add text content to the panel
  * @slot link-content - Link content of the panel
  * @slot image - The background image that can be a `sbb-image`
- * @slot chip - Link content of the panel
+ * @slot chip - The `sbb-chip` component that will be displayed on top-left corner
  */
 @customElement('sbb-teaser-hero')
 @slotState()
diff --git a/src/elements/teaser-hero/teaser-hero.visual.spec.ts b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
index e1afb437c9..f9d5a749fa 100644
--- a/src/elements/teaser-hero/teaser-hero.visual.spec.ts
+++ b/src/elements/teaser-hero/teaser-hero.visual.spec.ts
@@ -54,7 +54,7 @@ describe(`sbb-teaser-hero`, () => {
         `without content ${state.name}`,
         state.with(async (setup) => {
           await setup.withFixture(html`
-            <sbb-teaser-hero href="#">
+            <sbb-teaser-hero href="#" image-src=${imageUrl}>
               <sbb-chip slot="chip">Label</sbb-chip>
             </sbb-teaser-hero>
           `);