feat: header component #83

[eamahanna]

PR Description

This PR creates components which are necessary to create the uswds basic header described here.

Created Components:

• Header
• NavList
• Title (Already okay'd in previous pr)
• MegaMenu
• PrimaryNav
• Menu
• NavButton
• ExtendedNav

Each of the components has associated stories and tests.

For Reviewers

This is a huge PR......my bad. Next time I will try and break up the changes better. The title component is good to go already. Please let me know if there are any organization changes. I broke up the components the best I could, but having another set of eyes on everything is good! Thank you in advance!

[haworku]

Hey @eamahanna realized I have something similar to the navigation work you are taking on in the Footer work. I'd love to pair on with you!

[suzubara]

Had some small nitpick comments after reading tests and comparing w/ the uswds markup.
Also question - theExtendedHeader and Header look the same except for a single class. To me this looks like a single component <Header/> with a prop extended. Am I missing something?

This is something I discussed with @suzubara. She suggested making to different components for each to keep them a little cleaner. I am happy to make the extended prop though. @suzubara thoughts?

Hm I thought there was some difference in markup between the two as well? If it's just a matter of an additional CSS class then an extended prop sounds fine..

[suzubara]

I think we should regroup on organizing the various header/footer/nav subcomponents!

[suzubara]

I left a lot of more nitpicky comments now that I've had a chance to compare this markup with the USWDS markup. let me know if there's anything I can help with or needs clarification!

Additionally, nav items should be able to be indicated as "current" (so they can apply the usa-current class). I think the class may be applied to the simple links directly in the stories, but menu items & dropdown buttons may need to accept a prop like isCurrent in order to apply the class

[haworku]

@suzubara Thanks for bringing up the current thing for the nav I've been wondering if this should be a prop for the header /footer work. I'll try to implement in the footer but I may have more questions about this.

[suzubara]

@suzubara Thanks for bringing up the current thing for the nav I've been wondering if this should be a prop for the header /footer work. I'll try to implement in the footer but I may have more questions about this.

👍 ok, I'm not sure if it's relevant for the footer since I think it's less common for footer links to show a "current" class (as opposed to the header nav)

[haworku]

I see nothing major blocking. I'm going to approve since my comments are just cleanup, trust @eamahanna to integrate what makes sense.

[suzubara]

Great work, you took on a whole lot with this component! all of my comments are suggestions, I'm approving and leaving it up to you if you want to incorporate them :)