[DOP-1219] Searchbar Part 1: Desktop Searchbar UI

[jestapinski]

Staging Link

(The target branch is the feature branch for the project, also the addition to package/lock.json has been approved)

This PR adds in a basic searchbar (not mobile-responsive, desktop only) which uses LeafyGreen components. Locally I disabled the navbar in docs-tools, but this will show up even without doing so.

I updated the tabindex but also noticed this is a bit odd on Safari so will continue to look into that

Curious how the CSS style is compared to what the team traditionally does, so feedback there would be helpful!

[sophstad]

This looks good! Are you able to generate a staging link? Should be doable just by running make stage in the snooty root after building.

With regard to CSS, this is pretty similar to the direction we're heading towards. You can check out the components/landing/ directory for reference, as these are some newer components we've worked on. For that work, we started using a theme (theme/docsTheme.js) that is nearly the same as UP's theme, so feel free to use that as well. I'd encourage you to add any scaffolding you think would be helpful!

Also, I think adding unit tests for these components would be helpful. No worries if you were planning to to add that later on!

[sophstad]

Version 3.0.0 of this package was just released, so let's use that!

[jestapinski]

Oh wow literally today haha

[sophstad]

[nit] Any reason why this wouldn't just be a <div />?

[jestapinski]

Nope, I was playing around with the implementation using children but never switched back.

[sophstad]

Looks like this is green.light3 in the LeafyGreen palette package! (source)

[jestapinski]

This looks good! Are you able to generate a staging link? Should be doable just by running make stage in the snooty root after building.

With regard to CSS, this is pretty similar to the direction we're heading towards. You can check out the components/landing/ directory for reference, as these are some newer components we worked on. For that work, we started using a theme (theme/docsTheme.js) that is largely much the same as UP's theme, so feel free to use that as well. I'd encourage you to add any scaffolding you think would be helpful!

Also, I think adding unit tests for these components would be helpful. No worries if you were planning to to add that later on!

I think for unit testing I was hoping to add to the existing Navbar test now but worry about a new Searchbar one once the mobile functionality is added since that might change the rendered content structure. What do you think?

I'll also generate a staging link once these changes are made and update the description accordingly, thanks!

[jestapinski]

Got the staging link to work! I didn't update docs-tools for it but will work on locally doing so to remove the existing searchbar from the nav. Not a real issue for now though

[jestapinski]

thanks!