New components: Menu & Breadcrumbs

[djalmaaraujo]

Description

This component is the base for the Responsiveness Project Header Part. I will create at least two more components:

• (THIS ONE) ~Navigation sidebar (Migration from the VIP Dashboard to a generic component)~
• Breadcrumbs (Breadcrumbs with some responsive behavior)
• Toolbar.Toggler (to create a hamburger menu and open the Navigation sidebar)

This Pull Request adds another variant of the Nav component. It's called Menu. This variant uses the same structure as the Nav component but adds support for vertical sub-menus, similar to the existing menus of the VIP Dashboard.

What's included

• A base structure similar to the existing sidebar of the VIP Dashboard;
• Support for sub-menus;
• AddonHeader support (header between menu groups)
• Separators

Screenshots

The Plan

After merging this component, I will put it in the VIP Dashboard. Once the other parts are done, we will move the other parts to the VIP Dashboard, including the Responsiveness behavior.

Checklist

• [x] This PR has good automated test coverage
• [x] The storybook for the component has been updated

Steps to Test — Menu

1. Open https://deploy-preview-313--vip-design-system-components.netlify.app/?path=/story/navigation-nav--menu
2. Navigate using the Keyboard
3. You can open/close
4. Items are announced as expected

Steps to Test — Breadcrumbs

1. Open https://deploy-preview-313--vip-design-system-components.netlify.app/?path=/docs/navigation-breadcrumbs--docs
2. Navigate using the Keyboard
3. Last item is not a link
4. You can inspect the code and see a nav, and the last li with a aria-current
5. Use your browser to reduce the breakpoint to less than 654px, you should only see the penultimate item

[netlify[bot]]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	2386e27c99e71faf8e3a97de59f48082bc28af9b
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/655ce124268b8100080a8d10
😎 Deploy Preview	https://deploy-preview-313--vip-design-system-components.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 configuration.

[djalmaaraujo]

@kat3samsin Thanks for the review!

• I updated the example with both parent and child active
• I added the animation
• Added the current margin that is similar to 8px, but it's what the design system uses

@chriszarate I might need your help. I tried to export Breadcrumbs as a component in the system/index.js, but for some reason when I do this, the Nav component gets broken. It gives the error "you likely forgot to export your component".

Steps to reproduce:

1 - Pull the branch 2 - Go to src/system/index.js 3 - Import and export src/system/Breadcrumbs/Breadcrumbs.tsx as Breadcrumbs 4 - Go to http://localhost:6006/?path=/story/navigation-nav--default 5 - It's broken, but the Breadcrumbs story works

The PR is still in progress, but this will be a blocker once we need to make this component available.

[chriszarate]

@djalmaaraujo Works for me. How is it broken for you, specifically?

[djalmaaraujo]

@djalmaaraujo Works for me. How is it broken for you, specifically?

LOL, it works now. I think I needed to sleep, or I was exporting in the wrong way.

[andrea-sdl]

@djalmaaraujo as noted in our call, my problem was caused by this Safari setting not being set.

Everything works fine once I enable it.