Search improvements

[markvanaalst]

Description / Motivation

One PR that holds small search improvements:

• Search results now show different colors per type (closes Search: Different tag colors for different types of articles #468)
• Clicking on a suggested term term in search preview triggers new search with that phrase (issue 2 in Search Feedback #448)
• Styling improvements for quick search (suggestions box was overflowing)
• Remove article preview for mobile through CSS (only shows suggestions)
• Replaced search specific loader icon with the loader from UI library

How Has This Been Tested?

Local and Vercel

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update (non-breaking change; modified files are limited to the /data directory or other markdown files)

Checklist:

• I have read the Contributing guide.
• My code/comments/docs fully adhere to the Code of Conduct.
• My change is a code change.
• My change is a documentation change and there are NO other updates required.
• My change has new or updated images which are stored in the /public/images folder that need to be migrated to Sitecore DAM

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
developer-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2023 3:07pm

[markvanaalst]

@jst-cyr could you test these changes from a functional perspective?

@robearlam I implemented a small function in the PreviewSearchInput component that triggers onClick of a suggested term. Can you have a look to see whether this conflicts with any of the events/analytics? Probably not, but I just want to double check.

[jst-cyr]

• Search results now show different colors per type (closes Search: Different tag colors for different types of articles #468)

  • ✅This seems to work as expected. The 4 types seem to have four different colours.

• Clicking on a suggested term term in search preview triggers new search with that phrase (issue 2 in Search Feedback #448)

  • ✅The very first time I used this it didn't work, but then I haven't been able to reproduce since then so I'm guessing I must have made a mistake or there was a delay in loading a package or something. Seems to work.

• Styling improvements for quick search (suggestions box was overflowing)

  • ⚠Currently using my laptop and it still seems to have a vertical size that is too big and is running off the screen:

• Remove article preview for mobile through CSS (only shows suggestions)

  • ✅ Looks good!

• Replaced search specific loader icon with the loader from UI library

  • ✅ Looks good!

Note that I found a low-priority issue that I will log, unrelated to these changes. Seems to be a problem in production too.

[robearlam]

Looks good, just that minor comment about the console.log being included.