feat: add content tag filter to search results

zendesk · Aug 9, 2022 · 158e204 · 158e204
1 parent 8be27c8
commit 158e204
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -4615,6 +4615,39 @@ ul {
   unicode-bidi: embed;
 }
 
+.search-results-sidebar .sidenav-tag {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  flex-grow: 0;
+}
+
+.search-results-sidebar .sidenav-tag a {
+  background: #E9EBED;
+  border-radius: 4px;
+  padding: 4px 12px;
+  text-decoration: none;
+}
+
+.search-results-sidebar .sidenav-tag a .label {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 24px;
+  text-align: center;
+  letter-spacing: -0.000427656px;
+  color: #49545C;
+  flex-grow: 0;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.search-results-sidebar .sidenav-tag a .close-icon {
+  color: #555555;
+  vertical-align: middle;
+  display: inline-block;
+}
+
 .search-results-sidebar .collapsible-sidebar {
   margin-bottom: 30px;
 }

diff --git a/styles/_search_results.scss b/styles/_search_results.scss
@@ -46,6 +46,39 @@
       unicode-bidi: embed;
     }
 
+    .sidenav-tag {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-grow: 0;
+
+      a {
+        background: #E9EBED;
+        border-radius: 4px;
+        padding: 4px 12px;
+        text-decoration: none;
+
+        .label {
+          font-style: normal;
+            font-weight: 600;
+            font-size: 12px;
+            line-height: 24px;
+            text-align: center;
+            letter-spacing: -0.000427656px;
+            color: #49545C;
+            flex-grow: 0;
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        .close-icon {
+          color: #555555;
+            vertical-align: middle;
+            display: inline-block;
+        }
+      }
+    }
+
     .collapsible-sidebar {
       margin-bottom: 30px;
 

diff --git a/templates/search_results.hbs b/templates/search_results.hbs
@@ -106,6 +106,35 @@
           </ul>
         </section>
       {{/if}}
+      {{#if content_tag_filters}}
+        <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
+          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
+              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon x-icon">
+              <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
+            </svg>
+          </button>
+          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_content_tag'}}</h3>
+          <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
+            {{#each content_tag_filters}}
+            	{{#if selected}}
+                <li class="sidenav-tag">
+                  <a href="{{url}}" aria-current="page">
+                    <span class="label">{{name}}</span>
+                    <span>
+                      <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false"  aria-hidden="true" >
+                          <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
+                      </svg>
+                    </span>
+                  </a>
+                </li>
+              {{/if}}
+            {{/each}}
+          </ul>
+        </section>
+      {{/if}}
     </aside>
 
     <section id="main-content" class="search-results-column">