Patternlab/dp 28816 simplify subnav show loc

changelogs/DP-28670.yml

@@ -0,0 +1,28 @@
+Changed:
+  - project: Patternlab
+    component: Heading1,Heading2,Heading3,Heading4,Heading5,Heading6
+    description: Add `id` prop. (#1819)
+    issue: DP-28670
+    impact: Minor
+  - project: Patternlab
+    component: OrganizationNavigation
+    description: Only allow jump links in organization nav, add `id` to each section to become jump link anchors. (#1819)
+    issue: DP-28670
+    impact: Minor
+Removed:
+  - project: Patternlab
+    component: OrgNavContactMenu,OrgNavContactRow,OrgNavIWantToMenu
+    description: Removed deprecated subcomponents used in the OrganizationNavigation. (#1819)
+    issue: DP-28670
+    impact: Minor
+Fixed:
+  - project: Patternlab
+    component: OrganizationNavigation
+    description: Improve desktop and mobile keyboard and screen reader user experience. Label elements correctly and concisely, make interactive elements keyboard accessible and announce the state to screen readers. (#1819)
+    issue: DP-28670
+    impact: Patch
+  - project: Assets, React
+    component: FilterBox
+    description: Fixed `.ma__visually-hidden` typo. (#1819)
+    issue: DP-28670
+    impact: Patch

packages/assets/scss/03-organisms/_organization-navigation-item.scss

@@ -35,7 +35,7 @@
       text-align: left;
       border: 0;
       background-color: transparent;
-      padding: 1rem 0;
+      padding: 1rem;
       font-weight: $fonts-bold;
       font-size: $fonts-xsmall;
       color: $c-font-base;
@@ -48,6 +48,11 @@
         height: 100%;
         font-size: $fonts-smaller;
       }
+
+      &.orgNav-active {
+        background-color: $c-primary-alt;
+        color: $c-white;
+      }
     }
   }
 }

packages/assets/scss/03-organisms/_organization-navigation.scss

@@ -55,9 +55,7 @@ $menu-transition-time: 0.3s;
   }
 
   &__mobile-toggle {
-
     @include ma-button-reset;
-
     @include ma-container;
     margin-left: 0;
     margin-right: 0;

packages/patternlab/styleguide/source/_patterns/03-organisms/by-author/event-listing-interactive.twig

@@ -21,7 +21,7 @@
   // Make eventListing data object available in eventListing module js.
   var ma = ma || {};
   ma.eventListingInteractive = ma.eventListingInteractive || [];
-  ma.eventListingInteractive.push({{ eventListingInteractive|json_encode|raw }}{# raw is necessary to prevent rendering ascii characters. #});
+  ma.eventListingInteractive.push({{ eventListingInteractive|json_encode|raw }});
 </script>
 
 

packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig

@@ -41,3 +41,10 @@
     {% endif %}
   </div>
 </nav>
+
+<script>
+  // Make organizationNavigation data object available in leaflet map module js.
+  var ma = ma || {};
+  ma.orgNav = ma.orgNav || [];
+  ma.orgNav.push({{ organizationNavigation|json_encode()|raw }});
+</script>

packages/patternlab/styleguide/source/assets/js/modules/organizationNavigation.js

@@ -62,7 +62,7 @@ export default (function (window, document, $, undefined) {
         }
       } else {
         $this.attr('aria-expanded', false);
-      // when menu is closed, put it back to its original location.
+      // when menu is closed, put it back to its original location. 
         stickyOnScroll();
       }
 
@@ -115,6 +115,42 @@ export default (function (window, document, $, undefined) {
         feedbackButton.show();
       }
     });
+
+    const orgNavRaw = ma.orgNav[0].orgNav;
+    console.log(orgNavRaw);
+
+    let callback = (entries) => {
+      entries.forEach(entry => {
+        const targetDiv = document.querySelector(`[href="#${entry.target.id}"]`);
+        if (entry.isIntersecting) targetDiv.classList.add('orgNav-active')
+        const active = [...document.querySelectorAll('.orgNav-active')];
+        if (active.length > 1) active[dir === 1 ? 1 : 0].classList.remove("orgNav-active")
+      });
+    };
+
+    const observer = new IntersectionObserver(callback);
+    orgNavRaw.forEach((el) => {
+      const orgNavTarget = document.getElementById(el.id);
+      observer.observe(orgNavTarget)
+    });
+
+    let dir = 0
+    window.onscroll = function(e) {
+      // print "false" if direction is down and "true" if up
+      dir = this.oldScroll > this.scrollY ? 1 : -1;
+      this.oldScroll = this.scrollY;
+    }
+
+    // $(window).on("scroll", function () {
+    //   let windowWidth = $(window).width();
+    //   console.log(windowWidth)
+    //   console.log(orgNavData)
+
+    //   // // mobile only after window resize
+    //   // if (windowWidth <= mobileBreak) {
+    //   //   $('body').removeClass('scroll-disabled');
+    //   // }
+    // });
 
     $(window).on("resize", function () {
       let windowWidth = $(window).width();