feat: mobile site search for navbar #1559

[mpleroux]

🔗 Linked issue

CED-1950: Implement mobile site search navbar

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• Refactored mobile navbar to accommodate new search button (magnifying glass)
• Restyled mobile search form to match design in Figma
• Added an ID prop to EsSearchBar to prevent duplicate IDs from multiple forms on the same page
• Refactored EsSearchBar to accommodate mobile version without breaking current desktop version
• Restyled mobile search form
• Prevented overlay element from covering mobile search form
• Added new ID prop to EsSearchBar to prevent duplicate form IDs
• Adjusted mobile navbar markup to use showSearch prop
• Handle searchForm.focus() for either mobile or desktop
• Hide mobile search form when mobile menus are opened
• Hide desktop search form when desktop menus are opened

To Do

• Hide search form when mobile menus are opened
  • Attempts to resolve this have resulted in circular logic
• Close mobile menus when opening mobile search form
  • See comments below for details

🥼 Testing

• Testing locally at:
  • http://localhost:8500/organisms/es-nav-bar
  • http://localhost:8500/organisms/es-nav-bar-with-search

🧐 Feedback Requested / Focus Areas

• It may not be possible to use one nav-search-bar element for both mobile and desktop due to their locations in the navbar DOM

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.
• I have documented testing approach

[hroth1994]

👀

[ericdouglaspratt]

I see some CI failures on linting

[mpleroux]

I see some CI failures on linting

Thanks. I haven't been able to determine the cause of that error or other adjustments made to lines of code that I didn't modify. I believe Prettier is to blame, but the local editor configuration seems fine.

I disabled the VSCode extension in my workspace for that repo and manually reverted the changes. CI checks are now passing.

[ericdouglaspratt]

What's the circular logic when you call toggle_search_bar from show_mobile_menus?

[ericdouglaspratt]

Looks good! Understood that we have a small edge case where wide mobile can open a menu and then the search bar, but for an A/B test, I don't think that's serious enough to warrant spending more time on.