Add o-search-input component

[anselmbradford]

Additions

• Add new search input component pattern.

Changes

• Migrate various search inputs to single search input component.

How to test this PR

The (x) inside the search input should not show up unless text is entered. It should darken on hover and it should get a focus rectangle on tabbing to the (x) icon.

Global search - Any page expand the global search.

Ask landing - search should show autocomplete
http://localhost:8000/ask-cfpb/

Ask landing Spanish - search show autocomplete
http://localhost:8000/es/obtener-respuestas/

Ask search - search should not show autocomplete
http://localhost:8000/ask-cfpb/search

eRegs
http://localhost:8000/rules-policy/regulations/search-regulations/results/?regs=1002

TDP
http://localhost:8000/consumer-tools/educator-tools/youth-financial-education/teach/activities/

Prepaid
http://localhost:8000/data-research/prepaid-accounts/search-agreements/

Screenshots

Ask CFPB:

Screen.Recording.2024-05-10.at.1.56.48.PM.mov

Before (mobile view):

After (mobile view):

Regs:

Before:

After:

TDP:

Before:

After:

Prepaid:

Before:

After:

iOS 17.2

Note

• This pattern will be added to the DS, once this is approved.
• The Ask answers page should maybe use this component too, see version on
  http://localhost:8000/consumer-tools/auto-loans/answers/
• The touch target makes the button wider than the x icon, but to align it correctly the icon is offset from the button center. To make the focus rectangle look correct, it is only on the icon. This means it's possible to push the button to the left of the focus rectangle, but I think this is fine.

[wpears]

🆒

[wpears]

cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html got borked by a merge conflict

[anselmbradford]

cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html got borked by a merge conflict

Fixed in 0c152c8
I'm not sure how that happened, as I fixed it via the GH UI editor 🤔 oh well…