feat: in-page navigation component

[petesfrench]

Done

• Creates in page navigation component based on figma specification

QA

Documentation page
Full-page example
Manual example
Component example
Component no heading example
Changelog

• Check the implementation aligns with the design
• Check the automated navigation captures all headings
• Check navigation to headings through clicking the link or scrolling updates the navigation appropriately
• Check it works with keyboard navigation
• Review the updated documentation

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• [ x ] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [ x ] Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• [ x ] Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Fixes

#5475

[webteam-app]

Demo

Jenkins

demos.haus

[eliman11]

Hi Pete sorry looked into accessibility best practices a little more - I'm not sure why but sometimes on loading the demo page, tabbing through the navigation comp keeps the focus area there, and sometimes using one of the anchor links to go into a content section shifts the focus to the content area. Could we ensure that we allow for the latter - i.e. tabbing through and jumping into content sections via the page navigation comp takes you through the links in the content area, rather than back to the navigation comp? Example functionality here

Also @kim-isaac pointed out that when you tab through links in the content and the page scrolls down, the active tab in the navigation component doesn't seem to update - could we have the active tabs update as it would if you were scrolling through the page? Thank you!

[eliman11]

LGTM thank you so much for all your work and patience on this Pete!

[kim-isaac]

@petesfrench There were a lot of comments and thank you so much for taking care of all of them! I'll also add +1