feat: Add nav-label functionality to pfe-jump-links

CHANGELOG-prerelease.md

@@ -1,4 +1,11 @@
-## Prerelease 56 ( TBD )
+## Prerelease 59 ( 2021-04-21 )
+- [1549](https://github.com/patternfly/patternfly-elements/pull/1549) feat: Add nav-label to pfe-jump-links to support customized autobuild text in the pfe-jump-links-nav
+
+## Prerelease 58 ( 2021-02-22 )
+
+- [1391](https://github.com/patternfly/patternfly-elements/pull/1391) fix: Update pfe-jump-links to remove has_slot
+
+## Prerelease 56 ( 2020-08-27 )
 
 - [06a9b94](https://github.com/patternfly/patternfly-elements/commit/06a9b94505d1471d899f1db9704727c5a249a489) fix: move visual regression testing to merge script
 - [7aad6b](https://github.com/patternfly/patternfly-elements/commit/7aad6b463920cad87de2697ee5fdf99b46eb628e) feat: Remove build from postinstall

elements/pfe-jump-links/README.md

@@ -78,6 +78,8 @@ No extra roles or aria labels are required because we're using standard html tag
 
 - `pfe-c-autobuild`: Flips the switch on the component to create its own markup for the navigation. You can add `pfe-jump-links-panel__section` to each section that should show in the nav. If you want to use sub-sections add `has-sub-section` to the parent section that should always show and the `sub-section` class to the children of that section. If you use this attribute, keep in mind that non-JavaScript environments (some search engines, browsers with JS disabled) will not see the proper markup.
 
+  - `nav-label`: This attribute can be added to headings with the `pfe-jump-links-panel__section` class in order to inform the navigation text to be used in the pfe-jump-links-nav (only works when autobuild is set for the navigation element).
+
 - `sr-text`: This attribute is read when the component upgrades to provide the innerText of the heading. If there is no `sr-text` attribute then the component defaults to "JUMP TO SECTION". This attribute is to enable translations and internationalization.
 
 - `pfe-c-offset`: This attribute determines the distance from the top of the browser window to trigger a switch from one link being active to the next. For instance `pfe-c-offset="600"` would mean that threshold flips at 600px from the top. The default is set at 200, and if you desire 200px then you can leave this attribute off. The `pfe-c-offset` attribute should be placed on `pfe-jump-links-panel`. There is a css solution to control the offset, however the attribute value takes precedence over css. To read more about a css solution see below.

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

@@ -577,7 +577,7 @@ <h4 slot="pfe-jump-links-nav--heading" id="pfe-jump-links-nav--heading">Jump to
     <div class="pfe-l-grid__item pfe-m-12-col pfe-m-9-col-on-lg">
       <pfe-jump-links-panel pfe-c-scrolltarget="jumplinks8">
         <div>
-          <h1 class="pfe-jump-links-panel__section" id="section6">Section 6</h1>
+          <h1 class="pfe-jump-links-panel__section" id="section6" nav-label="First section">Section 6</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
@@ -611,7 +611,7 @@ <h1 class="pfe-jump-links-panel__section" id="section6">Section 6</h1>
             gentrify brooklyn fingerstache hoodie wolf. DIY veniam elit bushwick pok pok. Esse voluptate cillum, cred
             skateboard ethical forage aliqua master cleanse 90's cornhole. Id ut raclette swag ad keytar polaroid synth
             sunt williamsburg butcher woke lorem whatever squid. </p>
-          <h1 class="pfe-jump-links-panel__section" id="section7">Section 7</h1>
+          <h1 class="pfe-jump-links-panel__section" id="section7" nav-label="Next section">Section 7</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>
         `;