feat(Nav): new component Nav

[lily-peng]

Contributes to #4136.

Migrating Nav from Products v1 / Security / Components / Nav.

v1 references: GitHub, Storybook.

What did you change?

This is a new v2 component.

• Nav, NavList, and NavItem were all changed from React class components to functional components
• Restructured the component js files to all be top-level inside of in its own folders, to maintain consistency with other v2 components
• Consolidated original 2 stories (Default and Long NavItem test case) into one

How did you test and verify your work?

• [x] Storybook review.
• [x] Unit tests migrated and added to.
• [x] Design review.

[github-actions[bot]]

DCO Assistant Lite bot All contributors have signed the DCO.

[netlify[bot]]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	6dae6447895e94b4365cf244b22565ec15ba3659
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/65e749d2e955d6000942657a
😎 Deploy Preview	https://deploy-preview-4420--carbon-for-ibm-products.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.

[lily-peng]

I have read the DCO document and I hereby sign the DCO.

[lily-peng]

recheck

[bndege2]

Design review:

• Tab navigation looks good
• Colours styles look good
• Text styles look good

Noted inconsistencies in focus and active states & spacing.

[bndege2]

https://github.com/carbon-design-system/ibm-products/assets/157747366/8581c0d5-0812-47ba-a237-e4af1bf86d0e

Nav item 1-2 is triggering Nav list 2 expanded on page load to open when clicked

[lily-peng]

[matthewgallo]

Another option could be a render prop, if you need to add props to one of the children. This is used across Carbon (see Dropdown) and is also one of the recommended alternatives to cloneElement and Children.map from the React docs.

[lily-peng]

@davidmenendez The difficulty with line 122 of Nav.js is that the props being added probably aren't helpful if exposed to the consumer, since they are necessary for the component to work as intended, like activeHref to maintain the url so the page doesn't reload on every click. And props with handler functions like onListClick and onItemClick in lines 68 and 69.

If we don't worry about passing in an element in NavItem.js, would we assume all NavItems are a, and therefore kind of eliminates the need for a separate component like NavItemLink?

@matthewgallo I could use render props, but depending on if the child is a list or a list item, they should receive different props, which necessitates some sort of iteration.

Let me know if this makes sense, or if I'm understanding this correctly. Thanks!

[lily-peng]

The plan is to implement the changes and enhancements suggested by David at a later date.

[lily-peng]

Thanks David! It says I'm not authorized to merge the PR though :(

[matthewgallo]

Happy to pop it into the merge queue! 😄