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

build/vnu-jar.mjs

@@ -44,7 +44,10 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     'Attribute “switch” not allowed on element “input” at this point.',
     'Element “style” not allowed as child of element “div” in this context.*',
     // Allow empty option in select
-    'Element “option” without attribute “label” must not be empty.'
+    'Element “option” without attribute “label” must not be empty.',
+    // Allow inputmode
+    '.*The “inputmode” attribute is not supported in all browsers.*'
+    // !!! WARNING !!! check both quotes you are using when updating this list
     // End mod
   ].join('|')
 

scss/_reboot.scss

@@ -624,10 +624,10 @@ textarea {
 // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
 
 fieldset {
-  min-width: 0; // 1
+  min-inline-size: 0; // 1
   padding: 0; // 2
   margin: 0; // 2
-  border: 0; // 2
+  border: unset; // 2
 }
 
 // 1. By using `float: left`, the legend will behave like a block element.
@@ -636,8 +636,7 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  float: left; // 1
-  width: 100%;
+  float: left;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
   font-weight: $legend-font-weight;

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-secondary">
       <div class="ratio-16x9 d-flex flex-column justify-content-center align-items-center" inert>

site/src/components/shortcodes/ComponentFinder.astro

@@ -0,0 +1,99 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import { componentsDetails } from '../../../data/components-details'
+
+const existingStartingLetters = [...new Set(componentsDetails.map((component) => component.name.charAt(0)))]
+---
+
+<ouds-component-finder>
+  <form class="needs-validation mb-gridgap" novalidate onsubmit="return false">
+    <div class="text-input mb-small">
+      <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">
+          Start typing to filter components <span class="visually-hidden">and update the component list below</span>
+        </label>
+        <input
+          type="search"
+          name="componentFinderInput"
+          id="oudsComponentFinderInput"
+          class="text-input-field"
+          pattern="[a-zA-Z \\-]+"
+          placeholder=" "
+          data-feedback-id="componentSearchFeedback"
+          inputmode="search"
+        />
+      </div>
+      <p id="usernameFeedback" class="error-text">Alphabetical characters only.</p>
+    </div>
+    <fieldset class="d-md-flex align-items-center gap-xsmall" data-alpha-filter>
+      <legend class="my-md-none flex-shrink-0">
+        <span class="visually-hidden">filter by </span>Starting letter:
+      </legend>
+      <div class="chips-container">
+        <div class="chip chip-filter">
+          <input type="radio" id="radioCheckAll" name="componentFinderAlpha" value="all" checked />
+          <label class="chip-interactive" for="radioCheckAll">No filter</label>
+        </div>
+        {
+          existingStartingLetters.map((char) => (
+            <div class="chip chip-filter">
+              <input type="radio" id={`radioCheck${char}`} name="componentFinderAlpha" value={char.toLowerCase()} />
+              <label class="chip-interactive" for={`radioCheck${char}`}>
+                {char}
+              </label>
+            </div>
+          ))
+        }
+      </div>
+    </fieldset>
+  </form>
+  <ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-2xl-4" data-component-list>
+    <slot />
+  </ul>
+</ouds-component-finder>
+
+<script>
+  class OudsComponentFinder extends HTMLElement {
+    connectedCallback() {
+      const searchForm = this.querySelector('form') as HTMLFormElement
+      if (!searchForm) return
+      const finderInput = searchForm.elements.namedItem('componentFinderInput') as HTMLInputElement
+      const finderAlpha = searchForm.elements.namedItem('componentFinderAlpha') as RadioNodeList
+      const alphaFieldset = this.querySelector('[data-alpha-filter]')
+      if (!finderInput || !alphaFieldset || !finderAlpha) return
+
+      finderInput.addEventListener('input', () => {
+        this.resetList()
+        this.resetAlphaFinder()
+        if (finderInput.value && finderInput.checkValidity()) {
+          this.querySelectorAll(
+            `ul[data-component-list] > :not([data-name*="${finderInput.value.toLowerCase()}"])`
+          ).forEach((elt) => elt.classList.add('d-none'))
+        }
+      })
+
+      alphaFieldset.addEventListener('change', () => {
+        this.resetList()
+        if (finderAlpha.value && finderAlpha.value !== 'all') {
+          this.querySelectorAll(`ul[data-component-list] > :not([data-name^="${finderAlpha.value}"])`).forEach((elt) =>
+            elt.classList.add('d-none')
+          )
+        }
+      })
+    }
+
+    resetList() {
+      this.querySelectorAll('ul[data-component-list] > *').forEach((elt) => elt.classList.remove('d-none'))
+    }
+
+    resetAlphaFinder() {
+      this.querySelectorAll('input[type=radio]').forEach((elt) => ((elt as HTMLInputElement).checked = false))
+      ;(this.querySelector('input[type=radio][value="all"]') as HTMLInputElement).checked = true
+    }
+  }
+
+  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-xl-3 row-cols-2xl-4">
+<ComponentFinder>
   {
     componentsDetails.map((component) => <ComponentCard component={component} idPrefix={'_alpha'} />)
   }
-</ul>
+</ComponentFinder>
 
 <hr />
 

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

@@ -14,6 +14,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 EnableBtnCloseTooltip: typeof import('@shortcodes/EnableBtnCloseTooltip.astro').default
   export const Example: typeof import('@shortcodes/Example.astro').default