Feat: Adds outline jump nav

LeeMellon commented 1 year ago

Description

Adds lightly styled <outline-jump-nav> component. Auto-detects target elements and auto-generates menu names based on ids that follow a specified pattern of slug--link-name. `Example:` outline-jump-nav--light-green

fixes (https://airtable.com/appZbFK7jD0OQGNPe/tblnC8l7Z28zh8qB3/viwBJz60xnVxdDw6J/recusmp08JFGUtBoa?blocks=hide)

Props:

slug (`string`) Required: ID prefix for required for targeted sections. Must end with `--`. Example: `outline-jump-nav--`
nav (`string`): ID or class name query selector of navigation or any kind of sticky element the jump nav may need to remain positioned below. Example: `.header-class`
hero (`string`): ID or class name query selector of hero or any scrolling element jump nav may need to remain below when scrolled into view. Example: `#hero-id`

Mobile now becomes select dropdown.

Cursor_and_Navigation___JumpNav_-_Jump_Nav_⋅_Storybook

Type of change

[x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

[x] Visual Testing
[x] Accessibility Testing

Checklist

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[x] I have commented my code, particularly in hard-to-understand areas
[x] My changes generate no new warnings

changeset-bot[bot] commented 1 year ago

⚠️ No Changeset found

Latest commit: efd2bc4d3938baf5e7da2bd1224ef32931543d77

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for outlinejs ready!

Name	Link
Latest commit	efd2bc4d3938baf5e7da2bd1224ef32931543d77
Latest deploy log	https://app.netlify.com/sites/outlinejs/deploys/646bb07631fbf000086fe474
Deploy Preview	https://deploy-preview-365--outlinejs.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

phase2 / outline