Changes to Testimonials component to allow single card without carousel, and encapsulate styles used with it on home page

Author: webstackdev

@types/speech-recognition.d.ts

@@ -0,0 +1,42 @@
+// Minimal Web Speech API typings used by SearchBar voice input.
+// The project restricts global `types` in tsconfig, so we declare what we use here.
+
+declare global {
+  interface SpeechRecognitionErrorEvent extends Event {
+    error: string
+  }
+
+  interface SpeechRecognitionEvent extends Event {
+    resultIndex: number
+    results: ArrayLike<ArrayLike<{ transcript: string; confidence: number }> & { isFinal: boolean }>
+  }
+
+  interface SpeechRecognition extends EventTarget {
+    continuous: boolean
+    interimResults: boolean
+    lang: string
+
+    onstart: (() => void) | null
+    onend: (() => void) | null
+    onerror: ((event: SpeechRecognitionErrorEvent) => void) | null
+    onresult: ((event: SpeechRecognitionEvent) => void) | null
+
+    start(): void
+    stop(): void
+  }
+
+  // Constructor globals
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  var SpeechRecognition: {
+    prototype: SpeechRecognition
+    new (): SpeechRecognition
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  var webkitSpeechRecognition: {
+    prototype: SpeechRecognition
+    new (): SpeechRecognition
+  }
+}
+
+export {}

package-lock.json

@@ -100,7 +100,6 @@
     "@types/confusing-browser-globals": "1.0.3",
     "@types/cross-spawn": "6.0.6",
     "@types/dedent": "^0.7.2",
-    "@types/dom-speech-recognition": "^0.0.7",
     "@types/eslint": "^9.6.1",
     "@types/eslint-plugin-security": "3.0.0",
     "@types/glidejs__glide": "^3.6.6",

package.json

@@ -24,18 +24,15 @@ describe('Breadcrumbs (Astro)', () => {
     const renderedHtml = await response.text()
 
     await withJsdomEnvironment(async ({ window }) => {
-      // Prefer document.write here so any hoisted tags (e.g., JSON-LD scripts) are also available.
-      window.document.open()
-      window.document.write(renderedHtml)
-      window.document.close()
+      const doc = new window.DOMParser().parseFromString(renderedHtml, 'text/html')
 
-      const nav = window.document.querySelector('nav[aria-label="Breadcrumbs"]')
+      const nav = doc.querySelector('nav[aria-label="Breadcrumbs"]')
       expect(nav).toBeTruthy()
 
-      const current = window.document.querySelector('[aria-current="page"]')
+      const current = doc.querySelector('[aria-current="page"]')
       expect(current?.textContent).toContain('My Post Title')
 
-      const links = window.document.querySelectorAll('nav[aria-label="Breadcrumbs"] a[href]')
+      const links = doc.querySelectorAll<HTMLAnchorElement>('nav[aria-label="Breadcrumbs"] a[href]')
       expect(links.length).toBeGreaterThan(0)
       links.forEach(link => {
         expect(link.getAttribute('href')?.trim().length).toBeGreaterThan(0)
@@ -46,7 +43,7 @@ describe('Breadcrumbs (Astro)', () => {
         expect(link.tabIndex).toBeGreaterThanOrEqual(0)
       })
 
-      const jsonLdScripts = window.document.querySelectorAll('script[type="application/ld+json"]')
+      const jsonLdScripts = doc.querySelectorAll('script[type="application/ld+json"]')
       expect(jsonLdScripts.length).toBe(1)
 
       const jsonLdScript = jsonLdScripts.item(0)

src/components/Breadcrumbs/__tests__/index.spec.ts

@@ -57,8 +57,8 @@ describe('SearchBar web component', () => {
     container = await AstroContainer.create()
     searchQueryMock.mockReset()
 
-    delete (globalThis as unknown as Record<string, unknown>).SpeechRecognition
-    delete (globalThis as unknown as Record<string, unknown>).webkitSpeechRecognition
+    delete (globalThis as unknown as Record<string, unknown>)['SpeechRecognition']
+    delete (globalThis as unknown as Record<string, unknown>)['webkitSpeechRecognition']
   })
 
   const runComponentRender = async (

src/components/Search/SearchBar/client/__tests__/index.spec.ts

@@ -1,4 +1,4 @@
-.searchBar[data-search-variant='header'] button[data-search-toggle][data-state='open'] .icon--search {
+.searchBar button[data-search-toggle][data-state='open'] .icon--search {
   color: var(--color-primary);
   fill: var(--color-primary);
 }
@@ -9,25 +9,25 @@
   display: none;
 }
 
-.searchBar[data-search-variant='header'] button[data-search-clear] svg {
+.searchBar button[data-search-clear] svg {
   display: block;
+  fill: currentcolor;
   height: calc(var(--header-icon-svg-size) * 0.75);
   width: calc(var(--header-icon-svg-size) * 0.75);
-  fill: currentColor;
 }
 
-.searchBar[data-search-variant='header'] button[data-search-mic] svg {
+.searchBar button[data-search-mic] svg {
   display: block;
+  fill: currentcolor;
   height: calc(var(--header-icon-svg-size) * 0.75);
   width: calc(var(--header-icon-svg-size) * 0.75);
-  fill: currentColor;
 }
 
-.searchBar[data-search-variant='header'] button[data-search-mic]:not([hidden]) + button[data-search-clear] {
+.searchBar button:not([hidden]) + button[data-search-clear] {
   margin-left: -12px;
 }
 
-.searchBar[data-search-variant='header'] form[data-search-form][data-state='open'] {
+.searchBar form[data-search-form][data-state='open'] {
   box-shadow:
     var(--shadow-elevated, 0 0 0 0 transparent),
     inset 0 0 0 2px var(--color-spotlight);

src/components/Search/SearchBar/index.module.css

@@ -0,0 +1,38 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import Avatar from '@components/Avatar/index.astro'
+
+export interface Props {
+  testimonial: CollectionEntry<'testimonials'>
+}
+
+const { testimonial } = Astro.props
+---
+
+<article class="bg-page-base-offset rounded-xl p-8 shadow-lg border border-trim h-full flex flex-col">
+  <div class="text-primary mb-4">
+    <svg
+      class="w-8 h-8"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z" />
+    </svg>
+  </div>
+
+  <div class="flex-1 mb-6">
+    <blockquote class="text-lg leading-relaxed italic">
+      {testimonial.body}
+    </blockquote>
+  </div>
+
+  <div class="flex items-center gap-4">
+    <Avatar name={testimonial.data.name} class="shrink-0" />
+    <div>
+      <div class="font-semibold">{testimonial.data.name}</div>
+      <div class="text-sm text-content-active capitalize">{testimonial.data.organization}</div>
+    </div>
+  </div>
+</article>