Issue #3514073 by grimreaper, laetitia_al: Section library: search

assets/js/section-library/section-library.js

+((Drupal, once) => {
+  Drupal.behaviors.sectionLibrary = {
+    attach(context) {
+      if (
+        once(
+          'choose-from-section-library',
+          '.js-layout-builder-section-library-filter-type',
+          context,
+        ).length
+      ) {
+        const filterLinks = document.querySelectorAll(
+          '.js-layout-builder-section-library-link',
+        );
+
+        const filterSearchInput = document.querySelector(
+          '.js-layout-builder-section-library-filter',
+        );
+        const filterTypeSelect = document.querySelector(
+          '.js-layout-builder-section-library-filter-type',
+        );
+
+        const toggleSectionLibraryEntry = (link) => {
+          const query = filterSearchInput.value
+            ? filterSearchInput.value.toLowerCase()
+            : '';
+          const filterType = filterTypeSelect.value.toLowerCase();
+
+          let filterResult;
+          // If we're filtering by Type "All", we only need to worry about text searching.
+          if (filterType === 'any') {
+            // Filter by the text search only.
+            filterResult =
+              link.textContent.toLowerCase().indexOf(query.toLowerCase()) !==
+              -1;
+          } else {
+            // Filter by the "Type" dropdown first.
+            filterResult =
+              link.dataset.sectionType.toLowerCase().indexOf(filterType) !== -1;
+
+            // Additionally filter by the text search.
+            if (filterResult) {
+              filterResult =
+                link.textContent.toLowerCase().indexOf(query.toLowerCase()) !==
+                -1;
+            }
+          }
+          if (filterResult) {
+            link.style.display = '';
+          } else {
+            link.style.display = 'none';
+          }
+        };
+
+        const filterSectionLibraryList = () => {
+          const query = filterSearchInput.value
+            ? filterSearchInput.value.toLowerCase()
+            : '';
+          const filterType = filterTypeSelect.value.toLowerCase();
+
+          // If text searching with more than 1 character, or choosing a "Type", narrow results.
+          if (filterType !== 'any' || query.length >= 2) {
+            filterLinks.forEach(toggleSectionLibraryEntry);
+          } else if (filterType === 'any' && query.length < 2) {
+            // If no filter is applied, show all links.
+            filterLinks.forEach((link) => {
+              link.style.display = '';
+            });
+            Drupal.announce(Drupal.t('All available sections are listed.'));
+          }
+        };
+
+        filterSearchInput.addEventListener(
+          'keyup',
+          Drupal.debounce(filterSectionLibraryList, 200, false),
+        );
+        filterTypeSelect.addEventListener('change', filterSectionLibraryList);
+      }
+    },
+  };
+})(Drupal, once);

components/dropdown/stories/dropdown.menu_content_divider.story.yml

@@ -14,4 +14,3 @@ props:
     - title: "Separated link"
       url: "#"
   button_variant: secondary
-

components/dropdown/stories/dropdown.menu_content_header.story.yml

@@ -14,4 +14,3 @@ props:
       url: "#"
   button_variant: secondary
   heading_level: 6
-

components/spinner/stories/spinner.margin.story.yml

@@ -6,4 +6,3 @@ props:
       - m-5
   aria_hidden: false
   visually_hidden_label: Loading...
-

components/table/stories/table.anatomy.story.yml

@@ -153,4 +153,3 @@ library_wrapper: >
     {% set example_story = _story %}
     {{ example_story|merge(example_props) }}
   {% endfor %}
-

components/table/stories/table.colors_table.story.yml

@@ -69,4 +69,3 @@ library_wrapper: >
     {% set example_story = _story %}
     {{ example_story|merge(example_props) }}
   {% endfor %}
-

ui_suite_bootstrap.info.yml

@@ -93,6 +93,8 @@ libraries-override:
     css:
       theme:
         css/section-library.css: false
+    js:
+      js/section-library.js: assets/js/section-library/section-library.js
   ui_icons/ui_icons.autocomplete:
     css:
       component: