feat(cc-search-bar): match text tokens against item id

Author: clara-layus-cc

src/components/cc-search-bar/cc-search-bar.js

@@ -29,7 +29,7 @@ const KEYWORD_TOKEN_REGEX = /^is:./;
  * - keyword tokens (`is:<value>`): an item passes only if every keyword token
  *   is present in its derived matchers (`is:<itemType>` and explicit `matchers`).
  * - text tokens: an item passes only if every text token is `includes`'d in its
- *   lowercased label.
+ *   lowercased label or its lowercased id.
  *
  * @param {SearchBarSection[]} sections
  * @param {string} value
@@ -54,7 +54,8 @@ function filterSections(sections, value) {
           return false;
         }
         const label = item.label.toLowerCase();
-        return textTokens.every((token) => label.includes(token));
+        const id = item.id?.toLowerCase() ?? '';
+        return textTokens.every((token) => label.includes(token) || id.includes(token));
       }),
     }))
     .filter((section) => section.items.length > 0);

src/components/cc-search-bar/cc-search-bar.types.d.ts

@@ -5,6 +5,7 @@ export type SearchBarItemType = 'app' | 'addon' | 'network-group' | 'cke';
 export interface SearchBarItem {
   label: string;
   href: string;
+  id?: string;
   itemType?: SearchBarItemType;
   matchers?: string[];
 }