feat(jump-links)!: migrate pfe-jump-links to lit

fix(jump-links): doc updates and fixes (#1829)

* chore: remove old demo sticky nav

* fix: enable offset to be set to zero

* chore: remove old demo panel offset

* fix: accent-bar mixin wasn't setting proper width

* feat: support multiple nested scroll containers

* chore: update docs

* remove duplicate background-color property.

test(pfe-jump-links): e2e tests

feat(jump-links): migrate events to ComposedEvent

fix(jump-links): type of ActiveItemEvent param

feat: changed event names/types for change, stuck & content-change. Updated tests

style(jump-links): lint

test(jump-links): update demo file

test(pfe-jump-links): e2e tests with page object model

test(pfe-jump-links): build demo with optional shadowroot

docs(pfe-jump-links): rearrange docs urls

Co-Authored-By:    Michael Potter <[email protected]>

Author: bennypowers

elements/pfe-jump-links/custom-elements-manifest.config.js

@@ -0,0 +1,5 @@
+import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
+
+export default pfeCustomElementsManifestConfig({
+  globs: ['pfe-*.ts'],
+});

elements/pfe-jump-links/demo/demo.css

@@ -1,96 +1,46 @@
-html {
-    background: #eee;
-    scroll-behavior: smooth;
+:host {
+  background: #eee;
+  scroll-behavior: smooth;
 }
 
-/* #nav-vars-set { */
-    /* --pfe-navigation--Height--actual: 55px; */
-    /* --pfe-jump-links--nav-height: 62px; */
-    /* --pfe-jump-links-panel__section--spacer: 117px;
-    --pfe-jump-links-panel--offset: 55px; */
-
-    /* For testing */
-    /* --pfe-jump-links-panel--offset: 120px; */
-    /* --pfe-jump-links-panel--offset: 20vw; */
-    /* --pfe-jump-links-panel--offset: 80; */
-/* } */
+:host {
+  --pfe-navigation--Height--actual: 0 !important;
+}
 
 a.pfe-jump-links-nav__item {
-    /* Just in here for sanity knowing outside styles can't leak in */
-    color: orange !important;
+  /* Just in here for sanity knowing outside styles can't leak in */
+  color: orange !important;
 }
 
 .sticky {
-    position: sticky;
-    top: 0;
-    z-index: 80;
+  position: sticky;
+  top: 0;
+  z-index: 80;
 }
 
 .sticky pfe-jump-links-nav {
-    top: 0 !important;
-}
-
-@media(min-width: 992px) {
-    .sticky {
-        top: 150px !important;
-    }
+  top: 0 !important;
 }
 
 #jumplinks9 {
-    --pfe-jump-links--offset: 60px;
-    @media(min-width: 992px) {
-        --pfe-jump-links--offset: 130px;
-    }
+  --pfe-jump-links--offset: 0;
 }
 
 
-/* SET OFFSET */
-/* .special {
-    --pfe-jump-links-panel--offset: 100;
-    --pfe-jump-links__nav--offset: 100px;
+#jumplinks1000 {
+  --pfe-jump-links--BackgroundColor: #fff;
+  --pfe-jump-links--BorderColor: #e00;
+  --pfe-jump-links--FontSize: 16px;
+  --pfe-jump-links__heading--FontSize: 12px;
+  --pfe-jump-links__nav--Padding: 30px;
 }
-@media(max-width: 992px) {
-    .special{
-    --pfe-jump-links-panel--offset: 60px;
-    --pfe-jump-links__nav--offset: 60px;
-    }   
-} */
-
-/* 
-    * Fixing the issue where the headers are under the stick nav
-    * https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
-    */
 
+@media(min-width: 992px) {
+  #jumplinks9 {
+    --pfe-jump-links--offset: 130px;
+  }
 
-/* FAKE NAV BAR */
-/* #navbar {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: var(--pfe-navigation--Height--actual);
-  z-index: 9;
-  padding-top: 0;
-} */
-
-/* #navbar a {
-  float: left;
-  display: block;
-  color: #f2f2f2;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-  font-size: 17px;
-} */
-
-/* 
-.pfe-jump-links__section--spacer {
-  content: '';
-  display: block;
-  position: relative;
-  width: 0;
-  margin-top: -64px;
-  height: 64px;
-  margin-top: calc( -1 * var(--pfe-jump-links-panel__section--spacer) );
-  height: var(--pfe-jump-links-panel__section--spacer);
-} */
-
+  .sticky {
+    top: 150px !important;
+  }
+}

elements/pfe-jump-links/demo/index.html

@@ -0,0 +1,22 @@
+import '@patternfly/pfe-band';
+import '@patternfly/pfe-jump-links';
+
+const root = document.querySelector('[data-demo="pfe-jump-links"]')?.shadowRoot ?? document;
+
+import { installRouter } from 'pwa-helpers/router.js';
+
+/**
+ * scroll to element with id in the URL hash.
+ * @this {HTMLElement}
+ */
+async function route(location = window.location, event) {
+  event.preventDefault();
+  event.stopPropagating();
+  if (location.hash) {
+    root?.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' });
+  }
+}
+
+installRouter(route);
+
+route();