feat: Add nav-label functionality

Author: castastrophe

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

@@ -104,7 +104,7 @@ <h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>
     <div class="pfe-l-grid__item pfe-m-12-col pfe-m-9-col-on-lg">
       <pfe-jump-links-panel class="special" pfe-c-scrolltarget="jumplinks1">
         <div>
-          <h1 class="pfe-jump-links-panel__section" id="section1">Section 1</h1>
+          <h1 class="pfe-jump-links-panel__section" id="section1" nav-label="First section">Section 1</h1>
           <p>Lorem ipsum dolor amet umami vaporware actually church-key keytar, hell of roof party unicorn helvetica
             lomo pop-up fam taxidermy food truck dolore. Crucifix quinoa af eiusmod try-hard velit aesthetic freegan
             seitan readymade vinyl snackwave four dollar toast neutra. In ipsum blog tbh. Authentic la croix bespoke

elements/pfe-jump-links/src/pfe-jump-links.js

@@ -168,26 +168,32 @@ class PfeJumpLinksNav extends PFElement {
 
       for (let i = 0; i < panelSections.length; i++) {
         let arr = [...panelSections];
-        if (arr[i].classList.contains("has-sub-section")) {
+        let section = arr[i];
+        let text = section.innerHTML;
+        // If a custom label was provided, use that instead
+        if (section.hasAttribute("nav-label")) {
+          text = section.getAttribute("nav-label");
+        }
+        if (section.classList.contains("has-sub-section")) {
           let linkListItem = `
           <li class="pfe-jump-links-nav__item">
             <a
               class="pfe-jump-links-nav__link has-sub-section"
-              href="#${arr[i].id}"
-              data-target="${arr[i].id}">
-                ${arr[i].innerHTML}
+              href="#${section.id}"
+              data-target="${section.id}">
+                ${text}
             </a>
             <ul class="sub-nav">
         `;
           linkList += linkListItem;
-        } else if (arr[i].classList.contains("sub-section")) {
+        } else if (section.classList.contains("sub-section")) {
           let linkSubItem = `
         <li class="pfe-jump-links-nav__item">
             <a
               class="pfe-jump-links-nav__link sub-section"
-              href="#${arr[i].id}"
-              data-target="${arr[i].id}">
-                ${arr[i].innerHTML}
+              href="#${section.id}"
+              data-target="${section.id}">
+                ${text}
             </a>
         </li>`;
           if (!arr[i + 1].classList.contains("sub-section")) {
@@ -199,9 +205,9 @@ class PfeJumpLinksNav extends PFElement {
           <li class="pfe-jump-links-nav__item">
             <a
               class="pfe-jump-links-nav__link"
-              href="#${arr[i].id}"
-              data-target="${arr[i].id}">
-                ${arr[i].innerHTML}
+              href="#${section.id}"
+              data-target="${section.id}">
+                ${text}
             </a>
           </li>
         `;