feat(docs): add an inline search field for component in list doc page

site/src/components/shortcodes/ComponentCard.astro

@@ -17,7 +17,7 @@ interface Props {
 const { component, idPrefix } = Astro.props
 ---
 
-<li class="col">
+<li class="col" data-name={component.name.toLowerCase()}>
   <div class="card h-100">
     <div class="card-top bg-inverse-high">
       <div class="ratio-16x9 d-flex justify-content-center align-items-center" data-bs-theme="root-inverted" inert>

site/src/components/shortcodes/ComponentFinder.astro

@@ -0,0 +1,54 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+---
+
+<ouds-component-finder>
+  <form class="needs-validation" novalidate onsubmit="return false">
+    <div class="text-input mb-gridgap">
+      <div class="text-input-container">
+        <svg aria-hidden="true">
+          <use xlink:href={getVersionedDocsPath('assets/img/ouds-web-sprite.svg#search')}></use>
+        </svg>
+        <label for="oudsComponentFinderInput"
+          >Find component <span class="visually-hidden">and update the component list below</span></label
+        >
+        <input
+          type="search"
+          class="text-input-field"
+          id="oudsComponentFinderInput"
+          pattern="[a-zA-Z \\-]+"
+          placeholder=" "
+          data-feedback-id="componentSearchFeedback"
+        />
+      </div>
+      <p id="usernameFeedback" class="error-text">Alphabetical characters only.</p>
+    </div>
+  </form>
+  <ul
+    class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-2xl-5"
+    data-component-list
+  >
+    <slot />
+  </ul>
+</ouds-component-finder>
+
+<script>
+  class OudsComponentFinder extends HTMLElement {
+    connectedCallback() {
+      const searchInput = document.getElementById('oudsComponentFinderInput') as HTMLInputElement
+      if (!searchInput) return
+      searchInput.addEventListener('input', () => {
+        setTimeout(() => {
+          this.querySelectorAll('ul[data-component-list] > *').forEach((elt) => elt.classList.remove('d-none'))
+          if (searchInput.value && searchInput.checkValidity()) {
+            this.querySelectorAll(
+              `ul[data-component-list] > :not([data-name*="${searchInput.value.toLowerCase()}"])`
+            ).forEach((elt) => elt.classList.add('d-none'))
+          }
+        }, 0)
+      })
+    }
+  }
+
+  customElements.define('ouds-component-finder', OudsComponentFinder)
+</script>

site/src/content/docs/components.mdx

@@ -6,17 +6,20 @@ aliases:
   - "/docs/components/"
   - "/docs/[[config:docs_version]]/components/"
 toc: true
+extra_js:
+  - src: "[[docsref:/assets/js/validate-forms.js]]"
+    async: true
 ---
 
 import { componentsDetails } from '../../../data/components-details'
 
 ## Alphabetical order
 
-<ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-2xl-5">
+<ComponentFinder>
   {
     componentsDetails.map((component) => <ComponentCard component={component} idPrefix={'_alpha'} />)
   }
-</ul>
+</ComponentFinder>
 
 <hr />
 

site/src/types/auto-import.d.ts

@@ -15,6 +15,7 @@ export declare global {
   export const CalloutSoon: typeof import('@shortcodes/CalloutSoon.astro').default
   export const Code: typeof import('@shortcodes/Code.astro').default
   export const ComponentCard: typeof import('@shortcodes/ComponentCard.astro').default
+  export const ComponentFinder: typeof import('@shortcodes/ComponentFinder.astro').default
   export const DeprecatedIn: typeof import('@shortcodes/DeprecatedIn.astro').default
   export const DesignCalloutAlert: typeof import('@shortcodes/DesignCalloutAlert.astro').default
   export const EnableBtnCloseTooltip: typeof import('@shortcodes/EnableBtnCloseTooltip.astro').default