Hugo: add 'clear all items' button to filter dropdowns

- Added 'clear all items' functionality
- Added 'clear all items' styling

Testing:
1. Go to the search page (/search/?q=)
2. Select some of the filters in the dropdown
3. See that the "clear all items" option only shows when there is one
or more item(s) selected
4. Click on the "clear all items" button to deselect all the selected
options in that dropdown.

For https://linear.app/usmedia/issue/CUE-301

Closes #447 as merged as of commit e6698e3.

Signed-off-by: Anne van Gorkom <[email protected]>
Change-Id: I13ec3c3f2faced4009f7c5a18047c23dc2d32890
Dispatch-Trailer: {"type":"trybot","CL":1172309,"patchset":1,"ref":"refs/changes/09/1172309/1","targetBranch":"alpha"}

hugo/assets/scss/components/filter.scss

@@ -1,4 +1,5 @@
 @import '../config/colors';
+@import '../config/typography';
 @import '../mixins/button';
 @import '../mixins/sr-only';
 @import '../mixins/svg';
@@ -144,6 +145,12 @@
                 width: 12px;
             }
         }
+
+        &--clear {
+            color: $c-red;
+            justify-content: center;
+            padding: 0.5rem 1.875rem;
+        }
     }
 
     &__color {

hugo/assets/ts/widgets/search-filter.ts

@@ -84,20 +84,35 @@ export class SearchFilter extends BaseWidget {
             return `<li class="filter__item">
                 <button class="filter__link${ isSelected ? ' is-selected' : '' }"
                 type="button" data-value="${ item.name }">
-                    ${ item.color ? `<span class="filter__color filter__color--${ item.color }"></span>` : ''}
+                    ${ item.color ? `<span class="filter__color filter__color--${ item.color }"></span>` : '' }
                     ${ item.name }
                 </button>
             </li>`;
         });
 
+        if (this.selectedItems.length > 0) {
+            html.push(
+                `<li class="filter__item">
+                    <button class="filter__link filter__link--clear" type="button" data-clear=true>
+                        <span>Clear all items</span>
+                    </button>
+                </li>`
+            );
+        }
+
         this.listContainer.innerHTML = html.join('');
 
         const filterLinks = this.element.querySelectorAll<HTMLButtonElement>('button.filter__link');
         filterLinks.forEach((link) => {
-           link.addEventListener('click', (e) => {
-               e.preventDefault();
-               this.onClickFilter(link.dataset.value);
-           });
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+
+                if (link.dataset.value) {
+                    this.onClickFilter(link.dataset.value);
+                } else if (link.dataset.clear) {
+                    this.onClearFilter();
+                }
+            });
         });
     }
 
@@ -119,6 +134,11 @@ export class SearchFilter extends BaseWidget {
         }
     }
 
+    private onClearFilter() {
+        this.parsedQuery.facets[this.filterName] = [];
+        this.updateUrl();
+    }
+
     private updateUrl() {
         window.location.href = `${ window.location.href.split('?')[0] }?${ queryToUrlParams(this.parsedQuery) }`;
     }