Search WordPress post (#733)

Permettre de rechercher un post de blog WordPress (notamment quand ils sont utilisés pour des archives comme Campus Lectures, Archizoom, etc.) - added the ability to customize form label names - added a search field to the blog homepage sidebar
epfl-si · Jul 24, 2024 · 0f69bc9 · 0f69bc9
1 parent 83d7a82
commit 0f69bc9
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 34 deletions.
diff --git a/assets/components/atoms/select/select.twig b/assets/components/atoms/select/select.twig
@@ -1,5 +1,5 @@
 <div class="form-group">
-<label>Choose wisely</label>
+<label>{% if label %} {{~ label}} {% else %}Choose wisely{% endif %}</label>
 <select id="select-input" class="custom-select">
   <option selected>Make a choice...</option>
   <option value="1">Legolas</option>

diff --git a/assets/components/molecules/filters/filters-blog.twig b/assets/components/molecules/filters/filters-blog.twig
@@ -14,34 +14,14 @@
     </button>
   </div>
   <div class="collapse collapse-lg-show collapse-drop" id="form-filters">
+
     <form class="p-3 p-lg-0 mt-md-3">
 
-      <div class="form-group">
-        <div class="form-group">
-          <label>Catégories</label>
-          <select id="select-input" class="custom-select">
-            <option selected>Toutes les catégories</option>
-            <option value="1">Catégorie 1</option>
-            <option value="2">Catégorie 2</option>
-            <option value="3">Catégorie 3</option>
-            <option value="4">The fourth choice</option>
-            <option value="5">42</option>
-          </select>
-        </div>
-      </div>
+      {% include "@molecules/form-group/form-group-search.twig" %}
+
+      {% include "@molecules/form-group/form-group-select.twig" with {'label': 'Catégories'} %}
 
-      <div class="form-group">
-        <div class="form-group">
-          <label>Archives</label>
-          <select id="select-input" class="custom-select">
-            <option selected>Toutes les années</option>
-            <option value="2020">2020</option>
-            <option value="2019">2019</option>
-            <option value="2018">2018</option>
-            <option value="2017">2017</option>
-          </select>
-        </div>
-      </div>
+      {% include "@molecules/form-group/form-group-select.twig" with {'label': 'Archives'} %}
 
     </form>
   </div>

diff --git a/assets/components/molecules/form-group/form-group-checkboxes.twig b/assets/components/molecules/form-group/form-group-checkboxes.twig
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="custom-check1">Checkboxes (multiple choice)</label>
+  <label for="custom-check1">{% if label %} {{~ label}} {% else %}Checkboxes (multiple choice){% endif %}</label>
 
   {% for i in [1,2,3] %}
   {% include "@atoms/checkbox/checkbox.twig" with {

diff --git a/assets/components/molecules/form-group/form-group-error.twig b/assets/components/molecules/form-group/form-group-error.twig
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="error-input" class="invalid-label">Input's label</label>
+  <label for="error-input" class="invalid-label">{% if label %} {{~ label}} {% else %}Input's label{% endif %}</label>
   <input
     type="text"
     id="error-input"

diff --git a/assets/components/molecules/form-group/form-group-radio.twig b/assets/components/molecules/form-group/form-group-radio.twig
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="custom-radio1">Radio button (single choice)</label>
+  <label for="custom-radio1">{% if label %} {{~ label}} {% else %}Radio button (single choice){% endif %}</label>
 
   {% for i in [1,2,3] %}
   {% include "@atoms/radio/radio.twig" with {

diff --git a/assets/components/molecules/form-group/form-group-search.twig b/assets/components/molecules/form-group/form-group-search.twig
@@ -1,5 +1,5 @@
 <div class="form-group form-group-search">
-  <label for="search-field" class="sr-only">Search</label>
+  <label for="search-field" class="sr-only">{% if label %} {{~ label}} {% else %}Search{% endif %}</label>
   <p class="search-container icon-right">
     <input
       type="search"
@@ -8,6 +8,6 @@
       placeholder="Keywords..."
       aria-describedby="search-field-help"
     >
-    {% include '@atoms/icon/icon.twig' with { icon:  'icon-search' } %}
+    {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
   </p>
 </div>
diff --git a/assets/components/molecules/form-group/form-group-textarea.twig b/assets/components/molecules/form-group/form-group-textarea.twig
@@ -1,4 +1,4 @@
 <div class="form-group">
-  <label for="awesome-textarea">Text area</label>
+  <label for="awesome-textarea">{% if label %} {{~ label}} {% else %}Text area{% endif %}</label>
   <textarea class="form-control" id="awesome-textarea" rows="3">Multiple lines can be typed here…</textarea>
 </div>
diff --git a/assets/components/molecules/form-group/form-group-upload.twig b/assets/components/molecules/form-group/form-group-upload.twig
@@ -1,4 +1,4 @@
 <div class="form-group">
-  <label for="upload-input">File upload</label>
+  <label for="upload-input">{% if label %} {{~ label}} {% else %}File upload{% endif %}</label>
   {% include "@atoms/upload/upload.twig" %}
 </div>
diff --git a/assets/components/molecules/form-group/form-group.twig b/assets/components/molecules/form-group/form-group.twig
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label for="awesome-input">Input's label</label>
+  <label for="awesome-input">{% if label %} {{~ label}} {% else %}Input's label{% endif %}</label>
   <input
     type="text"
     id="awesome-input"