Implement search

[petesfrench]

Done

• Adds new route for '/search'
• Build search results page (copied from u.com)
• Updates the vanilla dependency reference
• Small change to the event delegation function to get the navigation search to submit properly

QA

• Go to https://canonical-com-1296.demos.haus/ open the navigation search
• Make a search using the 'enter'
• Make a search clicking the search icon in the bar
• Check clicking the 'X' clears the input
• Check the search results page matches u.com
• Check the next and previous buttons at the bottom of the page work
• Check it works on desktop, mobile and with the reduced nav ie. https://canonical-com-1296.demos.haus/data

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12996

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[petesfrench]

@lyubomir-popov can you take a look a the search results page, I couldn't find a design for it so just tried to make it align with the rest of the site. https://canonical-com-1296.demos.haus/search?q=pro

[lyubomir-popov]

looks good, a couple of things I noticed:

• unclickable chevron

• this page should be paper not dark

• two search fields - @juanruitina anything we can do about that?

• no fade on smaller screens, making the two searches issue even more prominent

[juanruitina]

@lyubomir-popov I'm personally OK with keeping the two search fields even if redundant, they're not both visible at the same time without user interaction. Having it in the text body is useful, having it in the navigation is predictable. I see that on apple.com and redhat.com.

If you think it's problematic visually, I see microsoft.com hiding the search button from the navigation when on a search page, I think that's also reasonable. The option I would oppose is hiding the always-visible field below the "Search results for [...]" heading, too much friction.