From 03ce94990da8c9c55f8bbab6ea0a8bca397e322c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Tue, 5 Dec 2023 20:13:50 +0200
Subject: [PATCH] docs: code installation tabs (#1366)

* docs: code installation tabs

Fixes #1361

* docs: hack a fix for install tabs

* docs: fix another careless error

* docs: doh
---
 .../shortcodes/renderInstallation.cjs         | 12 ++++----
 .../elements/uxdot-installation-tabs.js       | 28 ++++++++++++-------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/docs/_plugins/shortcodes/renderInstallation.cjs b/docs/_plugins/shortcodes/renderInstallation.cjs
index c6d14c4d3b..b6b13e1c93 100644
--- a/docs/_plugins/shortcodes/renderInstallation.cjs
+++ b/docs/_plugins/shortcodes/renderInstallation.cjs
@@ -32,7 +32,7 @@ fully initialized.
 
 <uxdot-installation-tabs>
 <rh-tab slot="tab">Red Hat CDN</rh-tab>
-<rh-tab-panel>
+<uxdot-installation-tab-panel>
   <rh-alert state="warning">
     <h3 slot="header">CDN Prerelease</h3>
     <p>We are currently working on our CDN, which will be soon moving
@@ -81,9 +81,9 @@ ${!lightdomcss ? '' : /* md */`${lightdomcssblock}
 ~~~
 
 `}
-</rh-tab-panel>
+</uxdot-installation-tab-panel>
 <rh-tab slot="tab">NPM</rh-tab>
-<rh-tab-panel>
+<uxdot-installation-tab-panel>
 
 Install RHDS using your team's preferred NPM package manager, e.g.
 
@@ -111,9 +111,9 @@ Replace \`/path/to\` in the \`href\` attribute with the installation path
 to the \`${docsPage.tagName}\` directory in your project.
 
   `}
-</rh-tab-panel>
+</uxdot-installation-tab-panel>
 <rh-tab slot="tab">JSPM</rh-tab>
-<rh-tab-panel>
+<uxdot-installation-tab-panel>
   <rh-alert state="warning">
     <h3 slot="header">Public CDNs</h3>
     <p>JSPM and other public CDNs should not be used on corporate domains.
@@ -153,7 +153,7 @@ ${!lightdomcss ? '' : /* md */ `${lightdomcssblock}
 ~~~
 
 `}
-  </rh-tab-panel>
+  </uxdot-installation-tab-panel>
 </uxdot-installation-tabs>
 
 ${content ?? ''}`}
diff --git a/docs/assets/elements/uxdot-installation-tabs.js b/docs/assets/elements/uxdot-installation-tabs.js
index 5583c54c28..b6ea3e4690 100644
--- a/docs/assets/elements/uxdot-installation-tabs.js
+++ b/docs/assets/elements/uxdot-installation-tabs.js
@@ -1,8 +1,9 @@
 import { css } from 'lit';
-import '@rhds/elements/rh-alert/rh-alert.js';
+
 import { RhTabs } from '@rhds/elements/rh-tabs/rh-tabs.js';
+import { RhTabPanel } from '@rhds/elements/rh-tabs/rh-tab-panel.js';
 
-import { TabExpandEvent } from '@patternfly/elements/pf-tabs/BaseTab.js';
+import '@rhds/elements/rh-alert/rh-alert.js';
 
 const TABS_KEY = 'rhds-installation-tabs-selected-index';
 
@@ -11,17 +12,11 @@ export class InstallationTabs extends RhTabs {
 
   static is = 'uxdot-installation-tabs';
 
-  static styles = [...RhTabs.styles, css`
-    ::slotted(pre) {
-      max-width: 800px !important;
-      overflow-x: scroll;
-    }
-  `];
-
   static { customElements.define(this.is, this); }
 
   #onExpand(event) {
-    if (event instanceof TabExpandEvent) {
+    // TODO: when tabs is decoupled from PFE, update the event type here
+    if (event.constructor.name === 'TabExpandEvent') {
       localStorage.setItem(TABS_KEY, this.activeIndex.toString());
     }
   }
@@ -49,3 +44,16 @@ export class InstallationTabs extends RhTabs {
     this.addEventListener('expand', this.#onExpand);
   }
 }
+
+export class InstallationTabPanel extends RhTabPanel {
+  static is = 'uxdot-installation-tab-panel';
+
+  static styles = [...RhTabPanel.styles, css`
+    ::slotted(pre) {
+      max-width: 800px !important;
+      overflow-x: scroll;
+    }
+  `];
+
+  static { customElements.define(this.is, this); }
+}