fix(card): allow copy other than <p> tags (#12172)

### Related Ticket(s)

[ADCMS-7019](https://jsw.ibm.com/browse/ADCMS-7019)

### Description

Fixes an issue where if you attempt to slot content other than a `<p>` tag into the default slot of a card, that copy remains hidden. This will allow any text node and/or element (anything not a comment) to be shown in the default slot for the card.

### Changelog

**Changed**

- Fixes an issue with the default slot hiding non-paragraph contents
- Added "Body copy markup" as a boolean knob to the card story. This will render a list of items in the card copy default slot.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -38,6 +38,14 @@ const tagGroupContent = html`
   </div>
 `;
 
+const copyMarkupContent = html`
+  <ul>
+    <li>Placerat augue</li>
+    <li>Mauris aliquam</li>
+    <li>Habitant hac</li>
+  </ul>
+`;
+
 export const Default = (args) => {
   const {
     aspectRatio,
@@ -52,6 +60,7 @@ export const Default = (args) => {
     eyebrow,
     tagGroup,
     copy,
+    copyMarkup,
     cardStyles,
     customVideoTitle,
   } = args?.Card ?? {};
@@ -96,7 +105,7 @@ export const Default = (args) => {
           : ``}
         <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html`<p>${copy}</p>` : ``}
+        ${copyMarkup ? copyMarkupContent : copy ? html`<p>${copy}</p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
         ${ctaType === CTA_TYPE.VIDEO
           ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
@@ -152,6 +161,7 @@ Default.story = {
           eyebrow: textNullable('Eyebrow:', 'Industry'),
           heading,
           copy: textNullable('Body copy:', ''),
+          copyMarkup: boolean('Body copy markup', false),
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
           tagGroup: boolean('Add tags:', false),
@@ -170,6 +180,7 @@ Default.story = {
           eyebrow: 'Industry',
           heading: 'Aerospace and defence',
           copy: '',
+          copyMarkup: false,
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
           tagGroup: false,

packages/web-components/src/components/card/card.ts

@@ -105,8 +105,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
   /**
    * Handles `slotchange` event for the copy slot.
    */
-  protected _handleCopySlotChange() {
-    this._hasCopy = Boolean(this.querySelector('p'));
+  protected _handleCopySlotChange({ target }: Event) {
+    this._hasCopy = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
   }
 
   /**