[search] Introduce search modal

[colleenmcginnis]

@katydecorah I had (maybe too much) fun exploring some possibilities here. This approach builds on your PR (#130) using a modified/simplified version of the mr-ui Modal component with a search bar in it on wide screens and uses the regular search bar below tabs on narrow screens.

Take a look and let me know what you think! If you think this is too complex for this stage of testing we can revisit this idea later. I think pulling this out of the top bar could also give us more room to add filters or other options in the future.

Wide screens:

Narrow screens:

[katydecorah]

@colleenmcginnis this is amazing!!!!!

I hopped in with some design and accessibility tweaks. I also added two props disableModal and narrow. Here are some screenshots:

Default component

Added a "Search" label for additional context and light styling

Dark vs light

disableModal option

For pages like 404 and docs landing page when we have lots of space.

narrow option

To remove label from search button for sites like /mapbox-gl-js

Modal

Made icon and text sizes a little bigger:

To do

• fix tests @katydecorah

[katydecorah]

@colleenmcginnis want to give this a second look?

[colleenmcginnis]

✅ The updates look beautiful, @katydecorah!

I did notice the button extending outside the lines just before hitting the breakpoint in this example, but I guess this would be solved by using the narrow option in a case with this many tab items?

[katydecorah]

@colleenmcginnis thanks for flagging! I think we should be ok. Looking at /mapbox-gl-js

The navigation folds to two lines and the Search component should follow suit.

The test case isn't as robust as the actual application, but I'll look out for this during the install process.

[katydecorah]

Gonna QA before the merge:

Responsive

• Check on mobile-size viewport.
• Check on tablet-size viewport.
• Check on laptop-size viewport.
• Check on big-monitor-size viewport.

Cross-browser

• Check in Chrome.
• Check in Firefox.
• Check in Safari.
• Check in Edge.
• Check in IE11.
• Check in mobile Safari.
• Check in Android's Chrome.