Merge pull request #8401 from cfpb/ans_search_input

Add `o-search-input` component

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

@@ -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>

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

@@ -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 <LL@li.org>\n"
@@ -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 ""
@@ -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"
 
@@ -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"

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

@@ -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 <LL@li.org>\n"
@@ -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 ""
 

cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html

@@ -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>
@@ -100,4 +93,3 @@ <h3 class="h4 u-mb5">Search within</h3>
       jsl(['{{ static("apps/prepaid-agreements/js/common.js") }}']);
     </script>
 {% endblock javascript %}
-

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

@@ -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 %}

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

@@ -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
@@ -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,

cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html

@@ -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">