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
RedHat-UX · Dec 5, 2023 · 03ce949 · 03ce949
1 parent 422d627
commit 03ce949
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git 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
@@ -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); }
+}