fix: Jump links styles and browser fixes

[castastrophe]

Related issues

• [fix] Design updates to pfe-jump-links #1521
• [fix] pfe-jump-links | IE11 errors are blocking other components from upgrading #1343
• [feat] pfe-jump-link / Horizontal #1258
• [fix] pfe-jump-links | when dropdown nav is closed in browsers that don't support scroll-behavior: smooth; #1162
• [fix] pfe-jumplinks | nav link isn't active on page load in browsers that don't support scroll behavior #1028

What has changed and why

• Add support to pfe-accordion-header for slotted content to be read in and rendered (this allows us to use pfe-accordion inside another template and pass a slot into the pfe-accordion-header)
• Add PfeAccordion to pfe-jump-links-nav as a dependency
• Add support for the following events:
  • pfe-jump-links-panel:active-navItem: when a new item in the nav becomes active, this event is fired for analytics; this is no longer handled by the panel but the event name persists for backwards compatibility
  • pfe-jump-links-panel:change: fired when the panel or section elements change; used by the autobuilder; calls _panelChangedHandler
  • pfe-jump-links-nav:stuck
  • resize: on page resize, the rebuild method is called
  • scroll: handles updating the active states when the page is scrolled
  • keyup: this is a stub and needs to be addressed at a later date (@todo open issue for this)
• Added the following attributes to pfe-jump-links-nav:
  • offset: the manually set distance from the top of the viewport to the top of the navigation element; this is an override and does not account for pfe-navigation when used.
  • mobile-breakpoint: max-width for when to switch to the pfe-accordion for mobile rendering
  • accordion-collapse-timing: how long to wait after clicking a child element before collapsing the open accordion
  • stuck: represents the stickiness state
  • no-header: boolean attribute to allow you to opt-out of rendering the header section (header becomes screen-reader only)
• Added the following attributes to pfe-jump-links-panel:
  • spacers: opt-in attribute for injecting the spacer elements; not recommended but allows backward compatibility

Going forward, the only required component to add to the page is pfe-jump-links-nav. Panel is an optional wrapper to make targeting more efficient. All functionality is being handled inside the nav element. Panel and sections can be manually defined via JavaScript API call to the pfe-jump-links-nav component.

Test cases

• Initialization
  • URL
  • Validate that on page load, the standard heading is selected in the top horizontal navigation and the Section 1 region is selected in the first visible vertical jump links.
• Stickiness
  • URL
  • On scroll, the horizontal and vertical elements should stick to the top of the viewport while it's content is visible; it should account for the height of pfe-navigation if it exists and any horizontal sticky elements
  • Edge case: If 2 horizontal sticky elements are present, the one later in the DOM will overlap the other one.
• Active state
  • URL
  • On scroll, the active state in the navigation should update when the section scrolls close to the top of the viewport.
• Click event
  • URL
  • On clicking a navigation item on either horizontal or vertical nav, the page should smooth scroll to that section so that the top of the section is visible close to the top of the viewport (accounting for sticky elements) with at least a 20px breathing space (unless offset is manually set in the mark-up)
  • No in-between sections should show as active while the scroll is happening
  • Scroll controlled active states should resume after the scrolling event is complete

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• [ ] Tests have been updated to cover these changes. TODO return to this after code freeze
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[zhawkins]

branch testing looks good 👍

[heyMP]

🎉