Skip to content

Commit ceef705

Browse files
anselmbradfordanselmbradford
authored
Merge pull request #8401 from cfpb/ans_search_input
Add `o-search-input` component
2 parents 175b6c5 + ece6628 commit ceef705

32 files changed

Lines changed: 518 additions & 615 deletions

File tree

‎cfgov/ask_cfpb/jinja2/ask-cfpb/_ask-search.html‎

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -36,54 +36,37 @@
3636
max_length=autocomplete_max_chars
3737
) %}
3838
<div class="o-search-bar">
39-
<form method="get" action="{{ _('/ask-cfpb/search/') }}">
39+
<form method="get"
40+
action="{{ _('/ask-cfpb/search/') }}"
41+
data-cy="ask-search-form">
4042
{% if show_label %}
4143
<{{ 'h3' if is_subsection else 'h2' }}>
4244
{{ _('Search for your question') }}
4345
</{{ 'h3' if is_subsection else 'h2' }}>
4446
{% endif %}
4547

46-
<div class="o-search-bar__input">
47-
<div class="o-form--input-w-btn">
48-
<div class="o-form--input-w-btn__input-container">
49-
<div class="m-btn-inside-input
50-
input-contains-label
51-
{% if autocomplete %}m-autocomplete{% endif %}"
52-
data-language="{{ language }}">
53-
<label for="o-search-bar_query"
54-
class="input-contains-label__before
55-
input-contains-label__before--search">
56-
{{ svg_icon('search') }}
57-
<span class="u-visually-hidden">
58-
{{ _('Search for your question') }}
59-
</span>
60-
</label>
61-
<input class="a-text-input"
62-
type="text"
63-
name="q"
64-
id="o-search-bar_query"
65-
value="{{ ask_query }}"
66-
placeholder="{{ placeholder }}"
67-
maxlength="{{ max_length }}"
68-
aria-describedby="o-search-bar_error-message">
69-
</div>
70-
<div class="a-form-alert a-form-alert--error u-hidden"
71-
id="o-search-bar_error-message"
72-
role="alert">
73-
{{ svg_icon('error-round') }}
74-
<p class="a-form-alert__text">
75-
Searches are limited to {{ autocomplete_max_chars }}
76-
characters.
77-
</p>
78-
</div>
79-
</div>
80-
<div class="o-form--input-w-btn__btn-container">
81-
<button class="a-btn"
82-
type="submit"
83-
aria-label="{{ _('Search Ask CFPB for your question') }}">
84-
{{ _('Search') }}
85-
</button>
86-
</div>
48+
<div>
49+
{% import 'v1/includes/organisms/search-input.html' as search_input %}
50+
{% set placeholder_value = _('Search Ask CFPB for your question') %}
51+
{{ search_input.render({
52+
"input_aria_describedby_id": "o-search-bar_error-message",
53+
"input_id": "o-search-bar_query",
54+
"input_name": "q",
55+
"input_value": ask_query,
56+
"input_aria_label": _('Search for your question'),
57+
"has_autocomplete": autocomplete,
58+
"placeholder": placeholder_value,
59+
"submit_aria_label": placeholder_value
60+
}) }}
61+
62+
<div class="u-mt15 a-form-alert a-form-alert--error u-hidden"
63+
id="o-search-bar_error-message"
64+
role="alert">
65+
{{ svg_icon('error-round') }}
66+
<p class="a-form-alert__text">
67+
Searches are limited to {{ autocomplete_max_chars }}
68+
characters.
69+
</p>
8770
</div>
8871
</div>
8972
</form>

‎cfgov/ask_cfpb/locale/es/LC_MESSAGES/django.po‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ msgid ""
88
msgstr ""
99
"Project-Id-Version: PACKAGE VERSION\n"
1010
"Report-Msgid-Bugs-To: \n"
11-
"POT-Creation-Date: 2024-05-08 18:25-0400\n"
11+
"POT-Creation-Date: 2024-05-10 14:37-0400\n"
1212
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1313
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1414
"Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,25 +18,19 @@ msgstr ""
1818
"Content-Transfer-Encoding: 8bit\n"
1919
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
2020

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

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

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

35-
#: ask_cfpb/jinja2/ask-cfpb/_ask-search.html:94
36-
#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
37-
msgid "Search"
38-
msgstr "Buscar"
39-
4034
#: ask_cfpb/jinja2/ask-cfpb/answer-page.html:7
4135
msgid "Consumer Financial Protection Bureau"
4236
msgstr ""
@@ -101,7 +95,7 @@ msgstr "No se encontraron resultados para"
10195
msgid "Please enter a search term in the box above."
10296
msgstr "Por favor escriba su búsqueda arriba"
10397

104-
#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:6
98+
#: ask_cfpb/jinja2/ask-cfpb/landing-page.html:5
10599
msgid "Read answer"
106100
msgstr "Leer la respuesta"
107101

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

114+
#: ask_cfpb/jinja2/ask-cfpb/see-all.html:59
115+
msgid "Search"
116+
msgstr "Buscar"
117+
120118
#: ask_cfpb/jinja2/ask-cfpb/see-all.html:63
121119
msgid "Clear search"
122120
msgstr "Borrar búsqueda"

‎cfgov/cfgov/locale/es/LC_MESSAGES/django.po‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ msgid ""
88
msgstr ""
99
"Project-Id-Version: PACKAGE VERSION\n"
1010
"Report-Msgid-Bugs-To: \n"
11-
"POT-Creation-Date: 2024-03-29 11:30-0400\n"
11+
"POT-Creation-Date: 2024-05-10 14:37-0400\n"
1212
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
1313
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
1414
"Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,39 +18,39 @@ msgstr ""
1818
"Content-Transfer-Encoding: 8bit\n"
1919
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
2020

21-
#: cfgov/settings/base.py:233
21+
#: cfgov/settings/base.py:232
2222
msgid "English"
2323
msgstr ""
2424

25-
#: cfgov/settings/base.py:234
25+
#: cfgov/settings/base.py:233
2626
msgid "Spanish"
2727
msgstr "Español"
2828

29-
#: cfgov/settings/base.py:235
29+
#: cfgov/settings/base.py:234
3030
msgid "Chinese"
3131
msgstr ""
3232

33-
#: cfgov/settings/base.py:236
33+
#: cfgov/settings/base.py:235
3434
msgid "Vietnamese"
3535
msgstr ""
3636

37-
#: cfgov/settings/base.py:237
37+
#: cfgov/settings/base.py:236
3838
msgid "Korean"
3939
msgstr ""
4040

41-
#: cfgov/settings/base.py:238
41+
#: cfgov/settings/base.py:237
4242
msgid "Tagalog"
4343
msgstr ""
4444

45-
#: cfgov/settings/base.py:239
45+
#: cfgov/settings/base.py:238
4646
msgid "Russian"
4747
msgstr ""
4848

49-
#: cfgov/settings/base.py:240
49+
#: cfgov/settings/base.py:239
5050
msgid "Arabic"
5151
msgstr ""
5252

53-
#: cfgov/settings/base.py:241
53+
#: cfgov/settings/base.py:240
5454
msgid "Haitian Creole"
5555
msgstr ""
5656

‎cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -64,25 +64,18 @@ <h3 class="h4 u-mb5">Search within</h3>
6464
</optgroup>
6565
</select>
6666
</div>
67+
6768
<div class="flex-all">
68-
<div class="m-btn-inside-input input-contains-label">
69-
<label for="searchText"
70-
class="input-contains-label__before input-contains-label__before--search"
71-
aria-hidden="true">
72-
{{ svg_icon('search') }}
73-
</label>
74-
<input id="searchText"
75-
type="text"
76-
autocomplete="off"
77-
class="a-text-input"
78-
name="q"
79-
placeholder="Enter search term"
80-
value="{{ query }}"
81-
aria-label="The term to search for">
82-
<a class="a-btn a-btn--link" href="{{ remove_url_parameter(request, { 'q': [query] }) }}">{{ svg_icon('error') }} Clear</a>
83-
</div>
69+
{% import 'v1/includes/organisms/search-input.html' as search_input %}
70+
{{ search_input.render({
71+
"input_id": "searchText",
72+
"input_name": "q",
73+
"input_value": ask_query,
74+
"input_aria_label": "The term to search for",
75+
"placeholder": "Enter search term",
76+
"submit_aria_label": "The term to search for"
77+
}) }}
8478
</div>
85-
<button class="a-btn flex-fixed">Search</button>
8679
</div>
8780
</form>
8881
</div>
@@ -100,4 +93,3 @@ <h3 class="h4 u-mb5">Search within</h3>
10093
jsl(['{{ static("apps/prepaid-agreements/js/common.js") }}']);
10194
</script>
10295
{% endblock javascript %}
103-

‎cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
{% macro render(hidden_fields, q='') %}
22

3-
<form action="." data-js-hook="behavior_submit-search">
3+
<form action="."
4+
data-js-hook="behavior_submit-search"
5+
data-cy="regs-search-form">
46
<h2 class="h4">
57
Search term
68
</h2>
7-
<div class="o-form--input-w-btn">
8-
{% if hidden_fields | length > 0 %}
9-
<div id="regs3k-hidden-filters">
10-
{% for field in hidden_fields %}
11-
{% for value in field.value.split(',') %}
12-
<input type="hidden" name="{{ field.name }}" value="{{ value }}">
13-
{% endfor %}
9+
{% if hidden_fields | length > 0 %}
10+
<div id="regs3k-hidden-filters">
11+
{% for field in hidden_fields %}
12+
{% for value in field.value.split(',') %}
13+
<input type="hidden" name="{{ field.name }}" value="{{ value }}">
1414
{% endfor %}
15-
</div>
16-
{% endif %}
17-
<div class="o-form--input-w-btn__input-container">
18-
<div class="m-btn-inside-input input-contains-label">
19-
<label for="query" class="input-contains-label__before input-contains-label__before--search">
20-
{{ svg_icon('search') }}
21-
<span class="u-visually-hidden">Search</span>
22-
</label>
23-
<input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="{{ q }}" placeholder="Search terms">
24-
</div>
15+
{% endfor %}
2516
</div>
26-
<div class="o-form--input-w-btn__btn-container">
27-
<button class="a-btn" aria-label="Search for a term in the regulations">Search</button>
28-
</div>
29-
</div>
17+
{% endif %}
18+
19+
{% import 'v1/includes/organisms/search-input.html' as search_input %}
20+
{{ search_input.render({
21+
"input_id": "query",
22+
"input_name": "q",
23+
"input_value": q,
24+
"input_aria_label": "Search for a term",
25+
"placeholder": "Enter your search term",
26+
"submit_aria_label": "Search for a term in the regulations"
27+
}) }}
3028
</form>
3129

3230
{% endmacro %}

‎cfgov/regulations3k/jinja2/regulations3k/search-regulations.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h1>
5656
Search for terms in the sections, interpretations, and appendices in the Bureau regulations we currently have online.
5757
</p>
5858
</div>
59-
<div class="search__wrapper u-mt30">
59+
<div class="search__wrapper u-mt30 u-mb15">
6060
{{ search_bar.render(
6161
[{ 'name': 'regs', 'value': page.results.regs | join(',') }],
6262
page.results.search_query
@@ -66,9 +66,14 @@ <h1>
6666
{% if page.results.search_query %}
6767
<div class="search__results">
6868
<div class="block block--flush-top content content--1-3">
69-
<aside class="content__sidebar content--flush-top-on-small content--flush-sides-on-small filters">
69+
<aside class="content__sidebar
70+
content--flush-top-on-small
71+
content--flush-sides-on-small
72+
filters">
7073
<h3>Refine results</h3>
71-
<form action="." method="get" data-js-hook="behavior_change-filter">
74+
<form action="."
75+
method="get"
76+
data-js-hook="behavior_change-filter">
7277
{% set expandable_settings = {
7378
'label': 'Regulation',
7479
'is_expanded': true,

‎cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,29 +28,20 @@
2828
</section>
2929
<div class="block block--padded-top block--flush-top u-mb30">
3030
<h2>Search for activities</h2>
31-
<form class="u-mt30" method="get" action="." data-js-hook="behavior_submit-search">
32-
<div class="o-form--input-w-btn">
33-
<div class="o-form--input-w-btn__input-container">
34-
<div class="m-btn-inside-input input-contains-label">
35-
<label for="search-text" class="input-contains-label__before input-contains-label__before--search">
36-
{{ svg_icon('search') }}
37-
<span class="u-visually-hidden">The term to search for</span>
38-
</label>
39-
<input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q"
40-
placeholder="Enter your search term(s)"
41-
value="{% if page.results.search_query: %}{{ page.results.search_query }}{% endif %}">
42-
<label for="search-text"
43-
class="input-contains-label__after
44-
input-contains-label__after--clear
45-
u-hidden" data-js-hook="behavior_clear-search">
46-
Clear {{ svg_icon('error') }}
47-
</label>
48-
</div>
49-
</div>
50-
<div class="o-form--input-w-btn__btn-container">
51-
<button class="a-btn" aria-label="Search for an activity">Search</button>
52-
</div>
53-
</div>
31+
<form class="u-mt30"
32+
method="get"
33+
action="."
34+
data-js-hook="behavior_submit-search">
35+
36+
{% import 'v1/includes/organisms/search-input.html' as search_input %}
37+
{{ search_input.render({
38+
"input_id": "search-text",
39+
"input_name": "q",
40+
"input_value": page.results.search_query if page.results.search_query else '',
41+
"input_aria_label": "Search for a term",
42+
"placeholder": "Enter your search term(s)",
43+
"submit_aria_label": "Search for term(s)"
44+
}) }}
5445
</form>
5546
</div>
5647
<div id="tdp-search-facets-and-results">

‎cfgov/unprocessed/apps/ask-cfpb/css/ask-search.less‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)