fix(code-block)!: remove BaseCodeBlock

Closes #2613

Author: bennypowers

.changeset/remove-basecodeblock.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-code-block>`: Removed `BaseCodeBlock` class. Reimplement (recommended) or extend `PfCodeBlock`.

elements/package.json

@@ -27,7 +27,6 @@
     "./pf-card/pf-card.js": "./pf-card/pf-card.js",
     "./pf-clipboard-copy/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js",
     "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js",
-    "./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js",
     "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js",
     "./pf-icon/BaseIcon.js": "./pf-icon/BaseIcon.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",

elements/pf-code-block/BaseCodeBlock.css

@@ -1,10 +1,16 @@
 :host {
+  display: block;
   background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);
   font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);
   font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
 }
 
+[hidden] {
+  display: none !important;
+}
+
 #container {
+  margin: 0;
   padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);
   padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);
   padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);
@@ -15,10 +21,6 @@
   border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
 }
 
-#container {
-  margin: 0;
-}
-
 pre {
   margin: 0;
 }

elements/pf-code-block/BaseCodeBlock.ts

@@ -1,8 +1,7 @@
-import { html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { BaseCodeBlock } from './BaseCodeBlock.js';
 import styles from './pf-code-block.css';
 
 /**
@@ -28,20 +27,34 @@ import styles from './pf-code-block.css';
  * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace`}
  */
 
+function dedent(str: string): string {
+  const stripped = str.replace(/^\n/, '');
+  const match = stripped.match(/^\s+/);
+  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
+}
+
 @customElement('pf-code-block')
-export class PfCodeBlock extends BaseCodeBlock {
-  static readonly styles = [...BaseCodeBlock.styles, styles];
+export class PfCodeBlock extends LitElement {
+  static readonly styles = [styles];
 
+  /** Flag for whether the code block is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  #toggle() {
-    this.expanded = !this.expanded;
-  }
-
   get #expandedContent(): string {
     return this.querySelector('script[data-expand]')?.textContent ?? '';
   }
 
+  get #content() {
+    const script = this.querySelector<HTMLScriptElement>('script[type]');
+    if (
+      script?.type !== 'text/javascript-sample' &&
+      !!script?.type.match(/(j(ava)?|ecma|live)script/)) {
+      return '';
+    } else {
+      return dedent(script?.textContent ?? '');
+    }
+  }
+
   override render() {
     const { expanded } = this;
     return html`
@@ -51,8 +64,8 @@ export class PfCodeBlock extends BaseCodeBlock {
         </div>
       </div>
       <div id="container" class="${classMap({ expanded })}">
-        <pre><code id="content">${this.content}</code><code id="code-block-expand"
-          ?hidden="${!expanded}">${this.#expandedContent}</code></pre>
+        <pre><code id="content">${this.#content}</code><code id="code-block-expand"
+            ?hidden="${!expanded}">${this.#expandedContent}</code></pre>
         <button ?hidden="${!this.#expandedContent}"
                 @click=${this.#toggle}
                 aria-expanded=${this.expanded}
@@ -63,6 +76,10 @@ export class PfCodeBlock extends BaseCodeBlock {
       </div>
     `;
   }
+
+  #toggle() {
+    this.expanded = !this.expanded;
+  }
 }
 
 declare global {