component-library

component-library copied to clipboard

Description of the Change

Resolves #30 - Add an option toggleWithArrows: boolean to show arrows for dropdown menu items instead of only being able to click on the top-level menu items.

Alternate Designs

No design changes were proposed, I directly added very basic arrow style that can be removed/overwritten or changed based on comments on the PR ^^

Benefits

Top level menu items can link to separate page and also have dropdown menu items that users can click on. The setting is enabled with a single boolean in the configuration that is false by default to maintain the original functionality.

Possible Drawbacks

For desktop vs mobile, two configurations can be passed to the init class or just measure screen size like this:

new Navigation('.primary-menu', {
	action: 'click',
	toggleWithArrows: window.innerWidth < 728,

	onCreate() {},
	onOpen() {},
	onClose() {},
	onSubmenuOpen() {},
	onSubmenuClose() {},
});

Verification Process

Ran the tests; The tests didn't work well however with the click/hover functionality, so minor changes to the tests were made. I wanted to add tests for the hover callback calls, but they didn't run for some reason. I can see code passed to the callback being called for both click and hover, but the tests fail. This test is not in thee PR, I removed it for now.

Checklist:

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [x] All new and existing tests passed.

Applicable Issues

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	1	0
Ignored	0	N/A

• Result: :white_check_mark: success

• Annotations: 1 total

  ---

[warning] no-console

disallow the use of console

• packages/navigation/src/navigation.js Line 345 - Unexpected console statement.

---

^{Report generated by eslint-plus-action}

---

Test summary

9 • 0 • 1 • 0

---

Run details

Project	@10up/component-library
Status	Passed
Commit	07cf921419 ℹ️
Started	Jan 13, 2022 6:59 PM
Ended	Jan 13, 2022 6:59 PM
Duration	00:37 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 97

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

There was a small PostCSS selector issue, which is fixed now. This PR is working as expected, can be deployed.