fix(card): ensure copy can render markdown (#7871)

### Related Ticket(s)
#7481

### Description
This PR ensures that the copy elements in Card and Content Section can render markdown properly. The approach used in Card queries the slotted `p` tag and applies the markdown utility function. While a simpler method may be creating a `card-copy` component that extends `DDSMarkdown`, I refrained from doing so to avoid a breaking change for adopters using Card. Feel free to let me know what you think about doing that approach instead and simply mentioning it in the release notes.

Note: 
Testing markdown in Storybook seems to only work once (i.e. inputting `*test*`, deleting it, and trying the same thing will result in the text being wrapped in asterisks without formatting. 

However, if an adopter uses markdown in the copy of the Card component, it will render properly.

<img width="407" alt="Screen Shot 2021-12-13 at 3 10 55 PM" src="https://user-images.githubusercontent.com/24970122/145907648-f0c2d1d5-6ee5-4996-84aa-a3e33480bf0f.png">

### Changelog

**Changed**

- Card copy can now use markdown
- Content section copy now extends `DDSMarkdown` component

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

Author: IgnacioBecerra

packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js

@@ -11,7 +11,7 @@ import settings from 'carbon-components/es/globals/js/settings';
 const { prefix } = settings;
 
 const _htmlTagRegex = /<.*?>/g;
-const _cleanStringRegex = /\n|\s{2,}|&([a-zA-Z]+);/g;
+const _cleanStringRegex = /\n|\s{2,}|&;/g;
 
 /**
  * Removes any html tags from a string and keeps inner text if any

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

@@ -36,8 +36,8 @@ export const Default = () => {
   return html`
     <dds-card-section-carousel>
       <dds-content-section-heading>Lorem ipsum dolor sit amet</dds-content-section-heading>
-      <dds-content-section-copy>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
+      <dds-content-section-copy
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       </dds-content-section-copy>
       <dds-link-with-icon slot="footer" href="${ifNonNull(hrefDefault)}">
         Link text ${ArrowRight20({ slot: 'icon' })}

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

@@ -11,6 +11,7 @@ import { html, property, internalProperty, customElement, TemplateResult, query
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import BXLink from 'carbon-web-components/es/components/link/link';
+import markdownToHtml from '@carbon/ibmdotcom-utilities/es/utilities/markdownToHtml/markdownToHtml.js';
 import { BASIC_COLOR_SCHEME } from '../../globals/defs';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import DDSCardFooter from './card-footer';
@@ -242,6 +243,12 @@ class DDSCard extends StableSelectorMixin(BXLink) {
     if (this._hasPictogram) {
       this.onclick = () => window.open(this.href, '_self');
     }
+
+    const copyElement = this.querySelector('p');
+    if (this._hasCopy && copyElement?.innerText) {
+      copyElement.innerHTML = `${markdownToHtml(copyElement?.innerText, { bold: false })}`;
+      copyElement.firstElementChild?.setAttribute('style', 'all:unset;');
+    }
   }
 
   render() {

packages/web-components/src/components/content-section/content-section-copy.ts

@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, customElement, LitElement } from 'lit-element';
+import { html, property, customElement } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './content-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import DDSMarkdown from '../markdown/markdown';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
@@ -20,7 +21,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * @element dds-content-section-copy
  */
 @customElement(`${ddsPrefix}-content-section-copy`)
-class DDSContentSectionCopy extends StableSelectorMixin(LitElement) {
+class DDSContentSectionCopy extends StableSelectorMixin(DDSMarkdown) {
   @property({ reflect: true })
   slot = 'copy';
 
@@ -30,6 +31,10 @@ class DDSContentSectionCopy extends StableSelectorMixin(LitElement) {
     `;
   }
 
+  firstUpdated() {
+    this.querySelector('p')?.setAttribute('style', 'all:unset;');
+  }
+
   static get stableSelector() {
     return `${ddsPrefix}--content-section-copy`;
   }