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

Co-Authored-By:    heyMP <[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

@@ -3,17 +3,9 @@ html {
     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 */
@@ -37,60 +29,17 @@ a.pfe-jump-links-nav__item {
 }
 
 #jumplinks9 {
-    --pfe-jump-links--offset: 60px;
+    --pfe-jump-links--offset: 0;
     @media(min-width: 992px) {
         --pfe-jump-links--offset: 130px;
     }
 }
 
 
-/* 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
-    */
-
-
-/* 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);
-} */
-

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

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