feat: show matched tags in search suggestion (#903)

* update other files * Child select col elements * remove commented text * fix button alignment * add banner documentation * add autocomplete search to header * add search feature to ds header * fix component urls * add tag matching * add page tags for search * add button alignment text * center widget buttons * add flat polyfill * show matched tags in suggestion
wmcadigital · Dec 3, 2021 · be7c7ba · be7c7ba
1 parent 61bc550
commit be7c7ba
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/src/www/_layouts/_header-search.js b/src/www/_layouts/_header-search.js
@@ -48,39 +48,46 @@ const headerSearchJS = () => {
       const query = e.target.value;
       autoCompleteSuggestions.innerHTML = '';
       if (query.length > 2) {
-        const matchedPages = pages.filter(page => {
-          let hasMatch = false;
-          if (
-            page.name.toLowerCase().includes(e.target.value.toLowerCase()) ||
-            (page.parent && page.parent.toLowerCase().includes(e.target.value.toLowerCase())) ||
-            (page.grandparent &&
-              page.grandparent.toLowerCase().includes(e.target.value.toLowerCase())) ||
-            (page.tags && page.tags.toLowerCase().includes(e.target.value.toLowerCase()))
+        const matchedPages = [[], [], []];
+
+        pages.forEach(page => {
+          if (page.name.toLowerCase().includes(query.toLowerCase())) {
+            matchedPages[0].push(page);
+          } else if (page.tags && page.tags.toLowerCase().includes(query.toLowerCase())) {
+            matchedPages[1].push(page);
+          } else if (
+            (page.parent && page.parent.toLowerCase().includes(query.toLowerCase())) ||
+            (page.grandparent && page.grandparent.toLowerCase().includes(query.toLowerCase()))
           ) {
-            hasMatch = true;
+            matchedPages[2].push(page);
           }
-          return hasMatch;
         });
 
-        if (matchedPages.length) {
+        if (!matchedPages.every(arr => arr.length === 0)) {
           autoCompleteSuggestions.style.display = 'block';
-          matchedPages.forEach(page => {
+
+          const createSuggestionLink = page => {
             // Construct page text node
             const text = document.createTextNode(page.name);
             const suggestionText = document.createElement('strong');
             suggestionText.classList.add('wmnds-col-1');
             suggestionText.appendChild(text);
 
+            const suggestionInfo = document.createElement('div');
+            suggestionInfo.classList.add('wmnds-grid', 'wmnds-grid--spacing-md-2-md');
+
             // Construct breadcrumbs node
             const crumbs = document.createTextNode(
               `${page.grandparent ? `${page.grandparent} > ` : ''}${
                 page.parent ? `${page.parent} > ` : ''
               }${page.name}`
             );
-            const suggestionCrumbs = document.createElement('span');
+            const suggestionCrumbs = document.createElement('div');
+            suggestionCrumbs.classList.add('wmnds-col-1');
             suggestionCrumbs.appendChild(crumbs);
+            suggestionInfo.appendChild(suggestionCrumbs);
 
-            const url = str => str.toLowerCase().replace(' ', '-');
+            const url = str => str.toLowerCase().replaceAll(' ', '-');
             const suggestionHref =
               page.href ||
               `/${page.grandparent ? `${url(page.grandparent)}/` : ''}${
@@ -92,9 +99,33 @@ const headerSearchJS = () => {
             suggestionLink.setAttribute('tabindex', '0');
             suggestionLink.classList.add('wmnds-autocomplete-suggestions__li', 'wmnds-col-1');
             suggestionLink.appendChild(suggestionText);
-            suggestionLink.appendChild(suggestionCrumbs);
+            suggestionLink.appendChild(suggestionInfo);
+
+            if (page.tags) {
+              const tags = page.tags.split(', ');
+              const matchedTags = tags.filter(tag => tag.includes(query));
+              if (matchedTags.length > 0) {
+                const tagText = document.createTextNode(
+                  `Tag${matchedTags.length > 1 ? 's' : ''}: ${matchedTags.join(', ')}`
+                );
+                const suggestionTags = document.createElement('div');
+                suggestionCrumbs.classList.add('wmnds-col-md-2-3');
+                suggestionTags.classList.add(
+                  'wmnds-col-md-1-3',
+                  'wmnds-col-1',
+                  'wmnds-text-align-right'
+                );
+                suggestionTags.appendChild(tagText);
+                suggestionInfo.appendChild(suggestionTags);
+              }
+            }
+
+            return suggestionLink;
+          };
 
-            autoCompleteSuggestions.appendChild(suggestionLink);
+          matchedPages.forEach(arrayOfMatches => {
+            const suggestions = arrayOfMatches.map(page => createSuggestionLink(page));
+            suggestions.forEach(suggestion => autoCompleteSuggestions.appendChild(suggestion));
           });
         } else {
           autoCompleteSuggestions.style.display = 'none';

diff --git a/src/www/pages/styles/utility-classes/index.njk b/src/www/pages/styles/utility-classes/index.njk
@@ -101,7 +101,7 @@
 {# Text Align #}
 <h2>Text Align</h2>
 <p>
-  Aligns text in the intended direction.
+  Aligns text in the intended direction. These classes can also be used to align <a href="/components/buttons">buttons</a>.
 </p>
 
 <pre class="wmnds-col-1 wmnds-col-md-1-2">