feat(content-block): added mock markup for content-block-heading (#6349)

### Related Ticket(s)

#6083 

### Description

 I've added some light dom rendering for content-block-heading and content-block-paragraph, so its content can be accessed and read by SEO tools.

I've also made a utility that strips HTML from a string, as we needed that to get the content to be rendered.

Author: raphaelamadeu-zz

packages/utilities/src/utilities/stripHTML/__tests__/index.test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { stripHTML } from '../';
+
+describe('StripHTML utility', () => {
+  const content = '<h1>Lorem ipsum dolor sit amet.</h1>';
+
+  it('should return a string without HTML tags', () => {
+    const output = stripHTML(content);
+    expect(output).toBe('Lorem ipsum dolor sit amet.');
+  });
+});

packages/utilities/src/utilities/stripHTML/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as stripHTML } from './stripHTML';

packages/utilities/src/utilities/stripHTML/stripHTML.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Utility returns the text stripping all html tags from it.
+ *
+ * @example
+ * import { stripHTML } from '@carbon/ibmdotcom-utilities';
+ *
+ * content = stripHTML(this.innerHtml);
+ *
+ * @param {string} content with html tags
+ * @returns {null} content without html tags
+ */
+const stripHTML = content => {
+  const component = document.createElement('textarea');
+  component.innerHTML = content;
+
+  return component.childNodes[0].nodeValue.replace(/(<([^>]+)>)/gi, '');
+};
+
+export default stripHTML;

packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts

@@ -78,7 +78,7 @@ export const Default = ({ parameters }) => {
   const href = 'https://www.example.com';
   return html`
     <dds-content-block-simple complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
       <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}">${copy}</dds-content-block-copy>
       ${ctaStyle === 'card'
         ? html`
@@ -112,7 +112,7 @@ export const WithImage = ({ parameters }) => {
   const href = 'https://www.example.com';
   return html`
     <dds-content-block-simple complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
       ${image}
       <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}">${copy}</dds-content-block-copy>
       ${ctaStyle === 'card'
@@ -151,7 +151,7 @@ export const WithVideo = ({ parameters }) => {
   const href = 'https://www.example.com';
   return html`
     <dds-content-block-simple complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
       <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}">${copy}</dds-content-block-copy>
       <dds-video-player-container slot="media" video-id="1_9h94wo6b"></dds-video-player-container>
       ${ctaStyle === 'card'
@@ -193,7 +193,7 @@ export const WithLinkList = ({ parameters }) => {
   const href = 'https://www.example.com';
   return html`
     <dds-content-block-simple complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
       <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}">${copy}</dds-content-block-copy>
       ${image}
       <dds-link-list type="default" slot="complementary">

packages/web-components/src/components/content-block/content-block-heading.ts

@@ -1,14 +1,16 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, customElement, LitElement } from 'lit-element';
+import { html, property, customElement, LitElement, internalProperty } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { stripHTML } from '@carbon/ibmdotcom-utilities/es/utilities/stripHTML/index.js';
+import { render } from 'lit-html';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-block.scss';
 
@@ -27,6 +29,9 @@ class DDSContentBlockHeading extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'heading';
 
+  @internalProperty()
+  content = '';
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'heading');
@@ -37,9 +42,19 @@ class DDSContentBlockHeading extends StableSelectorMixin(LitElement) {
     super.connectedCallback();
   }
 
+  firstUpdated() {
+    this.content = stripHTML(this.innerHTML);
+    render(
+      html`
+        ${this.content}
+      `,
+      this
+    );
+  }
+
   render() {
     return html`
-      <slot></slot>
+      ${this.content}
     `;
   }
 

packages/web-components/src/components/content-block/content-block-paragraph.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.