From 4b194d8c883a7c232df8f1e6a9a37d95f2679d5a 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!?= 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 --- .changeset/tangy-sloths-scream.md | 4 +++ .../shortcodes/renderInstallation.cjs | 12 ++++---- .../elements/uxdot-installation-tabs.js | 28 ++++++++++++------- .../rh-navigation-secondary.ts | 14 ++-------- .../rh-secondary-nav.ts | 20 +++++++++++++ 5 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 .changeset/tangy-sloths-scream.md create mode 100644 elements/rh-navigation-secondary/rh-secondary-nav.ts diff --git a/.changeset/tangy-sloths-scream.md b/.changeset/tangy-sloths-scream.md new file mode 100644 index 0000000000..bc4dbf572a --- /dev/null +++ b/.changeset/tangy-sloths-scream.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: moves the deprecated `` tag to a separate module 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. Red Hat CDN - +

CDN Prerelease

We are currently working on our CDN, which will be soon moving @@ -81,9 +81,9 @@ ${!lightdomcss ? '' : /* md */`${lightdomcssblock} ~~~ `} - + NPM - + 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. `} - + JSPM - +

Public CDNs

JSPM and other public CDNs should not be used on corporate domains. @@ -153,7 +153,7 @@ ${!lightdomcss ? '' : /* md */ `${lightdomcssblock} ~~~ `} - + ${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); } +} diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts index 039e46a947..f3db476674 100644 --- 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 new file mode 100644 index 0000000000..7dfe2405e5 --- /dev/null +++ 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; + } +}