From e715924889be0a360e65d648fb58c10f81a48b5e Mon Sep 17 00:00:00 2001
From: Valentin-Sorin-Nicolae
 <141405307+Valentin-Sorin-Nicolae@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:11:16 +0300
Subject: [PATCH] fix(card): component renders multiple headings (#12030)

### Related Ticket(s)

[ADCMS-6175](https://jsw.ibm.com/browse/ADCMS-6175)
Closes #12000

### Description

C4DCard and C4DCardCTA both have a `_renderHeading()` method that returns the following:

```
<slot name="heading"></slot>
<c4d-card-heading>${caption}</c4d-card-heading>
```

If these components are authored with a <c4d-card-heading> element within them, it's automatically assigned to slot="heading". This leads to cards with multiple headings, each with their own minimum of 64px of margin-bottom.

![image](https://github.com/user-attachments/assets/ea5fcfb7-230f-4593-a194-3ef84bcfade1)


**Changed**

![image](https://github.com/user-attachments/assets/52a1c050-2a1d-44ea-91a3-a566b8962b51)
---
 packages/web-components/src/components/card/card.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 13a70052b9e..b1e0094df4c 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -104,7 +104,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     if (ctaType !== CTA_TYPE.VIDEO) {
       return html`<slot name="heading"></slot>`;
     }
-    const caption = formatVideoCaptionInEffect({ name: videoName });
+    const formatedVideoName = formatVideoCaptionInEffect({ name: videoName });
 
     this.dispatchEvent(
       new CustomEvent(
@@ -116,8 +116,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
       )
     );
     return html`
-      <slot name="heading"></slot
-      ><c4d-card-heading part="caption">${caption}</c4d-card-heading>
+      <slot name="heading">
+        <c4d-card-heading>${formatedVideoName}</c4d-card-heading>
+      </slot>
     `;
   }