Mm inclusive patterns in page navigation

[mitchmoccia]

The goal is to provide a generic enough, In-page navigation that works on any page, while providing a basis for guidance for developers who want to customize it further.

Federalist link: https://federalist-ead78f8d-8948-417c-a957-c21ec5617a57.app.cloud.gov/preview/uswds/uswds-site/mm-inclusive-patterns-in-page-navigation/components/accordion/

Features

Design updates

• reduced size of font
• reduced size of vertical bar
• Tightened up the vertical and horizontal padding for each link
• visibility set to hidden on screens smaller than tablet
• changed vertical active bar color to secondary-dark (in-palette red)

Code

• JS and styles are now coming from the USWDS component site (from my working branch mm-inclusive-patterns-in-page-navigation)
• JS not needed inside sidenav.js in the uswds-site
• in-page nav links are created dynamically after the page loads
• dynamically creates and adds the hash value to each link in sequential order
• dynamically creates matching anchor tags that get injected after each target heading
  • this eliminates the need for manual ID matching in a page, it's done automatically
• does not require adding new grid layout HTML
  • when wrapped in a parent div with in-page-navigation class, flex does the work of positioning the in-page nav
• offset anchor provides a gap when a target heading is clicked to

Requirements to implement

• wrapper with class in-page-nav-container for main-content and a new div with and id of in-page-navigation
• element with class site-subheading and text such as On this page or Table of contents

TO DO

• work out the In-page navigation page on uswds-site to display of Component preview for in-page navigation along with the dynamic in-page nav actually working (this is the only page with
• give focus to content section when enter key is clicked
• iron out the speedy scrolling issue that causes the nav to jump when accordion is closed/opened
• larger break point for nav to disappear (768px may be the sweet spot)

[mitchmoccia]

A lot of great work here, nice job! Added some suggestions and questions. Overall some things to lookout for:

• Let's sync this with develop
• Make sure you run prettier for both SASS/JS
• Look at ESLint errors in JS
• Let's follow best practices for creating HTML elements in JS with createElement()
• Let's be careful with using :not() selector by itself

Great feedback as always @mejiaj thank you... I'll be addressing all the issues you raised in the coming days.

[thisisdano]

Closing in favor of https://github.com/uswds/uswds/pull/4918