Skip to content

Commit

Permalink
Merge pull request #8401 from cfpb/ans_search_input
Browse files Browse the repository at this point in the history 
Add `o-search-input` component
  • Loading branch information
@anselmbradford
anselmbradford authored May 14, 2024
2 parents 175b6c5 + ece6628 commit ceef705
Show file tree
Hide file tree
Showing 32 changed files with 518 additions and 615 deletions.
67 changes: 25 additions & 42 deletions cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,54 +36,37 @@
max_length=autocomplete_max_chars
) %}
<div class="o-search-bar">
<form method="get" action="{{ _('/ask-cfpb/search/') }}">
<form method="get"
action="{{ _('/ask-cfpb/search/') }}"
data-cy="ask-search-form">
{% if show_label %}
<{{ 'h3' if is_subsection else 'h2' }}>
{{ _('Search for your question') }}
</{{ 'h3' if is_subsection else 'h2' }}>
{% endif %}

<div class="o-search-bar__input">
<div class="o-form--input-w-btn">
<div class="o-form--input-w-btn__input-container">
<div class="m-btn-inside-input
input-contains-label
{% if autocomplete %}m-autocomplete{% endif %}"
data-language="{{ language }}">
<label for="o-search-bar_query"
class="input-contains-label__before
input-contains-label__before--search">
{{ svg_icon('search') }}
<span class="u-visually-hidden">
{{ _('Search for your question') }}
</span>
</label>
<input class="a-text-input"
type="text"
name="q"
id="o-search-bar_query"
value="{{ ask_query }}"
placeholder="{{ placeholder }}"
maxlength="{{ max_length }}"
aria-describedby="o-search-bar_error-message">
</div>
<div class="a-form-alert a-form-alert--error u-hidden"
id="o-search-bar_error-message"
role="alert">
{{ svg_icon('error-round') }}
<p class="a-form-alert__text">
Searches are limited to {{ autocomplete_max_chars }}
characters.
</p>
</div>
</div>
<div class="o-form--input-w-btn__btn-container">
<button class="a-btn"
type="submit"
aria-label="{{ _('Search Ask CFPB for your question') }}">
{{ _('Search') }}
</button>
</div>
<div>
{% import 'v1/includes/organisms/search-input.html' as search_input %}
{% set placeholder_value = _('Search Ask CFPB for your question') %}
{{ search_input.render({
"input_aria_describedby_id": "o-search-bar_error-message",
"input_id": "o-search-bar_query",
"input_name": "q",
"input_value": ask_query,
"input_aria_label": _('Search for your question'),
"has_autocomplete": autocomplete,
"placeholder": placeholder_value,
"submit_aria_label": placeholder_value
}) }}

<div class="u-mt15 a-form-alert a-form-alert--error u-hidden"
id="o-search-bar_error-message"
role="alert">
{{ svg_icon('error-round') }}
<p class="a-form-alert__text">
Searches are limited to {{ autocomplete_max_chars }}
characters.
</p>
</div>
</div>
</form>
Expand Down
20 changes: 9 additions & 11 deletions cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2024-05-08 18:25-0400\n"
"POT-Creation-Date: 2024-05-10 14:37-0400\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <[email protected]>\n"
Expand All @@ -18,25 +18,19 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:44
#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:45
#: ask_cfpb/jinja2/ask-cfpb/see-all.html:87
msgid "/ask-cfpb/search/"
msgstr "/es/obtener-respuestas/buscar/"

#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:47
#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:63
#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:49
msgid "Search for your question"
msgstr "Busque su pregunta"

#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:93
#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:55
msgid "Search Ask CFPB for your question"
msgstr "Busque 'Obtener Respuestas' para su cuestionamiento"

#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:94
#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
msgid "Search"
msgstr "Buscar"

#: ask_cfpb/jinja2/ask-cfpb/answer-page.html:7
msgid "Consumer Financial Protection Bureau"
msgstr ""
Expand Down Expand Up @@ -101,7 +95,7 @@ msgstr "No se encontraron resultados para"
msgid "Please enter a search term in the box above."
msgstr "Por favor escriba su búsqueda arriba"

#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:6
#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:5
msgid "Read answer"
msgstr "Leer la respuesta"

Expand All @@ -117,6 +111,10 @@ msgstr "Búsqueda especial"
msgid "Search term"
msgstr "Palabra a buscar"

#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
msgid "Search"
msgstr "Buscar"

#: ask_cfpb/jinja2/ask-cfpb/see-all.html:63
msgid "Clear search"
msgstr "Borrar búsqueda"
Expand Down
20 changes: 10 additions & 10 deletions cfgov/cfgov/locale/es/LC_MESSAGES/django.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2024-03-29 11:30-0400\n"
"POT-Creation-Date: 2024-05-10 14:37-0400\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <[email protected]>\n"
Expand All @@ -18,39 +18,39 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

#: cfgov/settings/base.py:233
#: cfgov/settings/base.py:232
msgid "English"
msgstr ""

#: cfgov/settings/base.py:234
#: cfgov/settings/base.py:233
msgid "Spanish"
msgstr "Español"

#: cfgov/settings/base.py:235
#: cfgov/settings/base.py:234
msgid "Chinese"
msgstr ""

#: cfgov/settings/base.py:236
#: cfgov/settings/base.py:235
msgid "Vietnamese"
msgstr ""

#: cfgov/settings/base.py:237
#: cfgov/settings/base.py:236
msgid "Korean"
msgstr ""

#: cfgov/settings/base.py:238
#: cfgov/settings/base.py:237
msgid "Tagalog"
msgstr ""

#: cfgov/settings/base.py:239
#: cfgov/settings/base.py:238
msgid "Russian"
msgstr ""

#: cfgov/settings/base.py:240
#: cfgov/settings/base.py:239
msgid "Arabic"
msgstr ""

#: cfgov/settings/base.py:241
#: cfgov/settings/base.py:240
msgid "Haitian Creole"
msgstr ""

Expand Down
28 changes: 10 additions & 18 deletions cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,25 +64,18 @@ <h3 class="h4 u-mb5">Search within</h3>
</optgroup>
</select>
</div>

<div class="flex-all">
<div class="m-btn-inside-input input-contains-label">
<label for="searchText"
class="input-contains-label__before input-contains-label__before--search"
aria-hidden="true">
{{ svg_icon('search') }}
</label>
<input id="searchText"
type="text"
autocomplete="off"
class="a-text-input"
name="q"
placeholder="Enter search term"
value="{{ query }}"
aria-label="The term to search for">
<a class="a-btn a-btn--link" href="{{ remove_url_parameter(request, { 'q': [query] }) }}">{{ svg_icon('error') }} Clear</a>
</div>
{% import 'v1/includes/organisms/search-input.html' as search_input %}
{{ search_input.render({
"input_id": "searchText",
"input_name": "q",
"input_value": ask_query,
"input_aria_label": "The term to search for",
"placeholder": "Enter search term",
"submit_aria_label": "The term to search for"
}) }}
</div>
<button class="a-btn flex-fixed">Search</button>
</div>
</form>
</div>
Expand All @@ -100,4 +93,3 @@ <h3 class="h4 u-mb5">Search within</h3>
jsl(['{{ static("apps/prepaid-agreements/js/common.js") }}']);
</script>
{% endblock javascript %}

42 changes: 20 additions & 22 deletions cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
{% macro render(hidden_fields, q='') %}

<form action="." data-js-hook="behavior_submit-search">
<form action="."
data-js-hook="behavior_submit-search"
data-cy="regs-search-form">
<h2 class="h4">
Search term
</h2>
<div class="o-form--input-w-btn">
{% if hidden_fields | length > 0 %}
<div id="regs3k-hidden-filters">
{% for field in hidden_fields %}
{% for value in field.value.split(',') %}
<input type="hidden" name="{{ field.name }}" value="{{ value }}">
{% endfor %}
{% if hidden_fields | length > 0 %}
<div id="regs3k-hidden-filters">
{% for field in hidden_fields %}
{% for value in field.value.split(',') %}
<input type="hidden" name="{{ field.name }}" value="{{ value }}">
{% endfor %}
</div>
{% endif %}
<div class="o-form--input-w-btn__input-container">
<div class="m-btn-inside-input input-contains-label">
<label for="query" class="input-contains-label__before input-contains-label__before--search">
{{ svg_icon('search') }}
<span class="u-visually-hidden">Search</span>
</label>
<input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="{{ q }}" placeholder="Search terms">
</div>
{% endfor %}
</div>
<div class="o-form--input-w-btn__btn-container">
<button class="a-btn" aria-label="Search for a term in the regulations">Search</button>
</div>
</div>
{% endif %}

{% import 'v1/includes/organisms/search-input.html' as search_input %}
{{ search_input.render({
"input_id": "query",
"input_name": "q",
"input_value": q,
"input_aria_label": "Search for a term",
"placeholder": "Enter your search term",
"submit_aria_label": "Search for a term in the regulations"
}) }}
</form>

{% endmacro %}
11 changes: 8 additions & 3 deletions cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h1>
Search for terms in the sections, interpretations, and appendices in the Bureau regulations we currently have online.
</p>
</div>
<div class="search__wrapper u-mt30">
<div class="search__wrapper u-mt30 u-mb15">
{{ search_bar.render(
[{ 'name': 'regs', 'value': page.results.regs | join(',') }],
page.results.search_query
Expand All @@ -66,9 +66,14 @@ <h1>
{% if page.results.search_query %}
<div class="search__results">
<div class="block block--flush-top content content--1-3">
<aside class="content__sidebar content--flush-top-on-small content--flush-sides-on-small filters">
<aside class="content__sidebar
content--flush-top-on-small
content--flush-sides-on-small
filters">
<h3>Refine results</h3>
<form action="." method="get" data-js-hook="behavior_change-filter">
<form action="."
method="get"
data-js-hook="behavior_change-filter">
{% set expandable_settings = {
'label': 'Regulation',
'is_expanded': true,
Expand Down
37 changes: 14 additions & 23 deletions cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,20 @@
</section>
<div class="block block--padded-top block--flush-top u-mb30">
<h2>Search for activities</h2>
<form class="u-mt30" method="get" action="." data-js-hook="behavior_submit-search">
<div class="o-form--input-w-btn">
<div class="o-form--input-w-btn__input-container">
<div class="m-btn-inside-input input-contains-label">
<label for="search-text" class="input-contains-label__before input-contains-label__before--search">
{{ svg_icon('search') }}
<span class="u-visually-hidden">The term to search for</span>
</label>
<input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q"
placeholder="Enter your search term(s)"
value="{% if page.results.search_query: %}{{ page.results.search_query }}{% endif %}">
<label for="search-text"
class="input-contains-label__after
input-contains-label__after--clear
u-hidden" data-js-hook="behavior_clear-search">
Clear {{ svg_icon('error') }}
</label>
</div>
</div>
<div class="o-form--input-w-btn__btn-container">
<button class="a-btn" aria-label="Search for an activity">Search</button>
</div>
</div>
<form class="u-mt30"
method="get"
action="."
data-js-hook="behavior_submit-search">

{% import 'v1/includes/organisms/search-input.html' as search_input %}
{{ search_input.render({
"input_id": "search-text",
"input_name": "q",
"input_value": page.results.search_query if page.results.search_query else '',
"input_aria_label": "Search for a term",
"placeholder": "Enter your search term(s)",
"submit_aria_label": "Search for term(s)"
}) }}
</form>
</div>
<div id="tdp-search-facets-and-results">
Expand Down
17 changes: 0 additions & 17 deletions cfgov/unprocessed/apps/ask-cfpb/css/ask-search.less
View file

This file was deleted.

Loading

0 comments on commit ceef705

Please sign in to comment.