Refactor page header to use USWDS components

NASA-IMPACT / veda-ui

Frontend for the Dashboard Evolution project

Other

25 stars 5 forks source link

Refactor page header to use USWDS components #1247

Open sandrahoang686 opened 3 weeks ago

sandrahoang686 commented 3 weeks ago

Related Ticket: Close #1137 Related PR: NextJs PR https://github.com/developmentseed/next-veda-ui/pull/20

Description of Changes

This change implements the page header with the USWDS ui components

Notes & Questions About Changes

The new header will have some design inconsistencies with the rest of the page, but that is intentional as we go through the revamp of the ui.

Validation / Testing

[ ] Validate the header contents
[ ] Use the navigation to access different pages
[ ] Use keyboard navigation, making sure the navigation is accessible
[ ] Instances can use the header and customize its content
- [x] logo
- [x] heading
- [x] primary nav items
- [x] secondary nav items

netlify[bot] commented 3 weeks ago

Deploy Preview for veda-ui ready!

Name	Link
Latest commit	e4cd0f38e24fefefbe30db850f813e242d546a0d
Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/674700c31b5cbe0008df5553
Deploy Preview	https://deploy-preview-1247--veda-ui.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.

AliceR commented 1 week ago

TODOs left to be ready:

[x] dark mode is not fully implemented (only the background color changes to dark). I think this should be done at the theme level, though?

Other issues:

[ ] menu isn't closing when selecting a nav item (should be handled by the library: https://github.com/uswds/uswds/blob/develop/packages/usa-header/src/index.js#L213)
[ ] mobile menu isn't closing when resizing the window (should be handled by the library: https://github.com/uswds/uswds/blob/2415b5be7fb8d134a823dcd4806ea2e7e2cd313b/packages/usa-header/src/index.js#L156)

hanbyul-here commented 1 day ago

I noticed that 'skip to main content' button is not there anymore when I navigate with keyboard - is this intentional decision? - if not, can we put this back for accessibility?

Another quirky behavior I found with keyboard navigation- when dropdown is opened, I can't use return key to route to the other page. (In the screenshot below, where the drop down is open, I can't route to data catalog page.)

Another nitpick is I think we can use the spacing generally better on smaller screen - more room?

faustoperez commented 39 minutes ago

Great job team 🎉 !

Just a few comments:

Screenshot 👇

We don't need negative letter spacing on the site title.
The secondary menu weight should be regular, also the gray spacer line is too tall, the color might also be different, it should be theme-color-base-dark.
Please review the tag component here, the font-weight seems off : https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=252-609&t=XfW4VpTLZVJZDQTM-1
Have a look at the color of the chevrons 🙏
Please also review the general spacing and padding as it is on the component here https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=245-178&t=XfW4VpTLZVJZDQTM-1

Designs 👇