feat(skip-nav): create skip nav components and story

[TylerAPfledderer]

Description

Create the SkipNavLink and SkipNavContent components

Motivation and Context

• Based on the components from the react package, including overall build and base styling
• A link to skip repetitive content is an integral part of an accessible website

How Has This Been Tested?

Built story based on the story provided in the react package, but with more detail

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 13fed10

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
chakra-ui-vue	✅ Ready (Inspect)	Visit Preview	Jun 28, 2022 at 3:20PM (UTC)

[codebender828]

Hi @TylerAPfledderer !

Thank you for this component PR. It's a great addition to v0. The code for this component looks good. However, it is missing some tests. Would like to add a few tests to make sure that the component keyboard interactions are functioning as expected?

[codebender828]

This also will need a storybook example and a page in the docs.

[TylerAPfledderer]

Hey @codebender828! First off, glad to see you are back. 🎉 🎺

I can certainly work on that. In the meantime, I'll switch this PR into a draft.

[TylerAPfledderer]

@codebender828

This also will need a storybook example and a page in the docs.

I do have a story file committed. Is there anything else you want to add to it? I used the one from the react package. 😄

[codebender828]

Did some digging inside the build logs. I think the reason the build here is failing is because there is no index.js file in the SkipNav/ directory. So the Rollup builder breaks if finds a component directory without one.

https://github.com/chakra-ui/chakra-ui-vue/runs/6865351302?check_suite_focus=true#step:6:25

For your reference, this is the config code:

chakra-ui-vue/packages/chakra-ui-core/rollup.config.js

Lines 83 to 89 in 0800981

	const entries = {
	index: './src/index.js',
	...components.reduce((obj, name) => {
	obj[name] = (baseFolder + name + '/index.js')
	return obj
	}, {})
	}

[TylerAPfledderer]

Did some digging inside the build logs. I think the reason the build here is failing is because there is no index.js file in the SkipNav/ directory. So the Rollup builder breaks if finds a component directory without one.

https://github.com/chakra-ui/chakra-ui-vue/runs/6865351302?check_suite_focus=true#step:6:25

Got it!

And for added consistency, do you think it would also benefit adding an accessibility.md file of an accessibility report?

[codebender828]

Did some digging inside the build logs. I think the reason the build here is failing is because there is no index.js file in the SkipNav/ directory. So the Rollup builder breaks if finds a component directory without one.
https://github.com/chakra-ui/chakra-ui-vue/runs/6865351302?check_suite_focus=true#step:6:25

Got it!

And for added consistency, do you think it would also benefit adding an accessibility.md file of an accessibility report?

Yes! Good idea. Let's have the accessibility.md file as well so people can learn about it. Thank you .

[TylerAPfledderer]

Hey @codebender828! I am attempting to push my new changes, but git is running testing on push and some tests are failing elsewhere in the package (related to auto-import and base modules). These have nothing to do with what I have added.

Should I go ahead and try to force push?

[TylerAPfledderer]

@codebender828 update: I can also disable the pre-push hook from husky locally and see if it will go. Is that OK?

The test errors for those modules look to originate at nuxt utils.

Let me know what you would like me to do. I have another PR I would like to push that is also affected by this. 😄

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 13fed10:

Sandbox	Source
Chakra UI Vue (0.X) Starter Template	Configuration
chakra-ui-nuxt-demo	Configuration

[TylerAPfledderer]

@codebender828 I went ahead and skipped the husky pre-push command, because I was experiencing global errors that are unrelated to these additions working as expected. 😅