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 6, 2023 · 4b194d8 · 4b194d8
1 parent 422d627
commit 4b194d8
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 27 deletions.
diff --git a/.changeset/tangy-sloths-scream.md b/.changeset/tangy-sloths-scream.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-navigation-secondary>`: moves the deprecated `<rh-secondary-nav>` tag to a separate module
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); }
+}
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
@@ -14,6 +14,9 @@ import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
 import './rh-navigation-secondary-menu-section.js';
 import './rh-navigation-secondary-overlay.js';
 
+/** @deprecated */
+import './rh-secondary-nav.js';
+
 import { RhNavigationSecondaryDropdown, SecondaryNavDropdownExpandEvent } from './rh-navigation-secondary-dropdown.js';
 
 import { DirController } from '../../lib/DirController.js';
@@ -432,19 +435,8 @@ export class RhNavigationSecondary extends LitElement {
   }
 }
 
-@customElement('rh-secondary-nav')
-class RhSecondaryNav extends RhNavigationSecondary {
-  #logger = new Logger(this);
-
-  constructor() {
-    super();
-    this.#logger.warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.');
-  }
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'rh-navigation-secondary': RhNavigationSecondary;
-    'rh-secondary-nav': RhSecondaryNav;
   }
 }
diff --git a/elements/rh-navigation-secondary/rh-secondary-nav.ts b/elements/rh-navigation-secondary/rh-secondary-nav.ts
@@ -0,0 +1,20 @@
+/** @deprecated */
+
+import { customElement } from 'lit/decorators/custom-element.js';
+import { RhNavigationSecondary } from './rh-navigation-secondary.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+
+@customElement('rh-secondary-nav')
+class RhSecondaryNav extends RhNavigationSecondary {
+  constructor() {
+    super();
+    new Logger(this).warn('rh-secondary-nav is deprecated. Use rh-navigation-secondary instead.');
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-secondary-nav': RhSecondaryNav;
+  }
+}