Component: Content-navigation block

[chachasikes]

Scope & build content-navigation block (@todo link to issue in design-system & ca-design-system-gutenberg-blocks)

This may require a second issue about page templates.

[chachasikes]

Update on our dev site

[chachasikes]

This is implemented on our dev site.

https://dev-cagov-dcc.pantheonsite.io/applicants/how-to-apply-renew/

Page with lots of heading pages.
https://dev-cagov-dcc.pantheonsite.io/applicants/license-types/

[chachasikes]

Planned work:

• Sticky position
• scroll margin (CSS selector not working in WP, may have a conflict we need to track down)
• unrelated, but effects this block - Z-index issue overlay problems with nav bar
• Mobile stying / behavior

Future improvements to consider

• highlight section on navigate
• update url hash

[chachasikes]

How this is built

The content-navigation is a stand-alone web component that accepts a target selector, finds any h2-h6 tags, and builds a list of anchor links. If tags to not have ids, ids are created dynamically so that on clicking the link, it will scroll to that section.

Next steps
With this initial interaction, let's collect our notes into github.

• Do our full Github Issue process for this - especially for design, content & accessibility review to collect our notes for future iterations.
• Add to design system as a component. Test on our headless blog site.

[chachasikes]

Initial issue:
cagov/design-system#24