@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/testimonials/testimonial-section.test.tsx

@@ -0,0 +1,171 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as blockExports from '../../../index'
+import { TestimonialSection, type TestimonialSectionProps } from './testimonial-section'
+
+beforeAll(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+  window.matchMedia = (query: string) =>
+    ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    }) as MediaQueryList
+
+  window.IntersectionObserver = class {
+    disconnect() {}
+
+    observe() {}
+
+    takeRecords() {
+      return []
+    }
+
+    unobserve() {}
+  } as unknown as typeof IntersectionObserver
+
+  window.ResizeObserver = class {
+    disconnect() {}
+
+    observe() {}
+
+    unobserve() {}
+  } as unknown as typeof ResizeObserver
+})
+
+const renderToHtml = (props: TestimonialSectionProps) =>
+  renderToStaticMarkup(<TestimonialSection {...props} />)
+
+describe('TestimonialSection — shared content', () => {
+  it('is the only public testimonial component export', () => {
+    expect(blockExports.TestimonialSection).toBe(TestimonialSection)
+    expect('Testimonial1' in blockExports).toBe(false)
+    expect('Testimonial2' in blockExports).toBe(false)
+  })
+
+  it('renders supplied testimonial identity, quote, and optional attribution', () => {
+    const html = renderToHtml({
+      presentation: 'bento',
+      items: [
+        {
+          id: 't-1',
+          name: 'Rosa Díaz',
+          role: 'Propietaria de taller',
+          avatar: '/rosa.png',
+          content: 'El servicio es excelente.',
+          rating: 4,
+        },
+      ],
+    })
+
+    expect(html).toContain('Rosa Díaz')
+    expect(html).toContain('Propietaria de taller')
+    expect(html).toContain('El servicio es excelente.')
+    expect(html).toContain('aria-label="4 out of 5 stars"')
+    expect(html).not.toContain('src=""')
+  })
+
+  it('does not invent absent attribution or emit an empty image source', () => {
+    const html = renderToHtml({
+      presentation: 'bento',
+      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
+    })
+
+    expect(html).toContain('Rosa Díaz')
+    expect(html).toContain('El servicio es excelente.')
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('rating')
+    expect(html).not.toContain('Propietaria')
+  })
+
+  it('renders no section or controls when the collection is empty', () => {
+    expect(
+      renderToHtml({
+        presentation: 'carousel',
+        items: [],
+        carouselLabels: { previous: 'Prev', next: 'Next', slide: 'Slide {n}' },
+      }),
+    ).toBe('')
+  })
+
+  it('supports host-provided carousel labels', () => {
+    const html = renderToHtml({
+      presentation: 'carousel',
+      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
+      carouselLabels: {
+        previous: 'Testimonio anterior',
+        next: 'Testimonio siguiente',
+        slide: 'Ir al testimonio {n}',
+      },
+    })
+
+    expect(html).toContain('aria-label="Testimonio anterior"')
+    expect(html).toContain('aria-label="Testimonio siguiente"')
+    expect(html).toContain('aria-label="Ir al testimonio 1"')
+  })
+
+  it.each([1, 2, 3])('renders every bento entry when the collection has %i items', count => {
+    const items = Array.from({ length: count }, (_, index) => ({
+      id: `t-${index + 1}`,
+      name: `Cliente ${index + 1}`,
+      content: `Cita ${index + 1}`,
+    }))
+
+    render(<TestimonialSection presentation='bento' items={items} />)
+
+    for (const item of items) {
+      expect(screen.getByText(item.content)).toBeTruthy()
+    }
+  })
+
+  it('renders every bento entry when the collection has more than four items', () => {
+    const items = Array.from({ length: 6 }, (_, index) => ({
+      id: `t-${index + 1}`,
+      name: `Cliente ${index + 1}`,
+      content: `Cita ${index + 1}`,
+    }))
+
+    render(<TestimonialSection presentation='bento' items={items} />)
+
+    for (const item of items) {
+      expect(screen.getByText(item.content)).toBeTruthy()
+    }
+  })
+
+  it('lets keyboard users select carousel entries with localized controls', async () => {
+    const user = userEvent.setup()
+    render(
+      <TestimonialSection
+        presentation='carousel'
+        items={[
+          { id: 't-1', name: 'Cliente 1', content: 'Cita 1' },
+          { id: 't-2', name: 'Cliente 2', content: 'Cita 2' },
+          { id: 't-3', name: 'Cliente 3', content: 'Cita 3' },
+        ]}
+        carouselLabels={{
+          previous: 'Testimonio anterior',
+          next: 'Testimonio siguiente',
+          slide: 'Ir al testimonio {n}',
+        }}
+      />,
+    )
+
+    const lastSlide = screen.getByRole('button', { name: 'Ir al testimonio 3' })
+    while (document.activeElement !== lastSlide) {
+      await user.tab()
+    }
+    await user.keyboard('{Enter}')
+
+    expect(lastSlide.getAttribute('aria-current')).toBe('true')
+    expect(screen.getByText('Cita 3')).toBeTruthy()
+  })
+})

package/src/blocks/marketing/testimonials/testimonial-section.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Quote, Star } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '../../../ui/carousel'
+
+export interface TestimonialItem {
+  id: string
+  name: string
+  content: string
+  role?: string
+  avatar?: string
+  rating?: number
+}
+
+export interface TestimonialCarouselLabels {
+  previous: string
+  next: string
+  slide: string
+}
+
+interface TestimonialSectionBaseProps {
+  items: TestimonialItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+export type TestimonialSectionProps = TestimonialSectionBaseProps &
+  (
+    | {
+        presentation: 'carousel'
+        carouselLabels: TestimonialCarouselLabels
+      }
+    | {
+        presentation: 'bento'
+        carouselLabels?: never
+      }
+  )
+
+const bentoGridClasses = [
+  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',
+  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',
+  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
+  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
+]
+
+const contentClasses = ['', 'h-full px-6', 'h-full pt-6 px-6', 'h-full pt-6 px-6']
+const textClasses = ['text-xl text-balance', 'text-base text-balance', 'text-base text-balance', 'text-base text-balance']
+
+function initials(name: string) {
+  return name
+    .split(' ')
+    .map(part => part[0])
+    .join('')
+}
+
+function Rating({ value }: { value: number }) {
+  return (
+    <div className='flex items-center gap-1' aria-label={`${value} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, index) => (
+        <Star
+          key={index}
+          aria-hidden='true'
+          className={cn('size-4', index < Math.floor(value) ? 'fill-foreground' : 'fill-none')}
+        />
+      ))}
+      <span className='text-muted-foreground ms-2 text-sm'>{value}</span>
+    </div>
+  )
+}
+
+function TestimonialAttribution({ item }: { item: TestimonialItem }) {
+  return (
+    <div className='grid grid-cols-[auto_1fr] items-center gap-3'>
+      <Avatar className='bg-muted size-12'>
+        {item.avatar && <AvatarImage src={item.avatar || undefined} alt={item.name} loading='lazy' />}
+        <AvatarFallback>{initials(item.name)}</AvatarFallback>
+      </Avatar>
+      <div>
+        <cite className='text-sm font-medium not-italic'>{item.name}</cite>
+        {item.role && <span className='text-muted-foreground block text-sm'>{item.role}</span>}
+      </div>
+    </div>
+  )
+}
+
+function BentoPresentation({
+  items,
+  title,
+  description,
+  className,
+}: TestimonialSectionBaseProps) {
+  return (
+    <section className={cn('py-12 md:py-16', className)}>
+      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8'>
+        {(title || description) && (
+          <header className='relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12'>
+            {title && <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>}
+            {description && (
+              <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>
+                {description}
+              </p>
+            )}
+          </header>
+        )}
+
+        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>
+          {items.map((item, index) => {
+            const tileIndex = index % bentoGridClasses.length
+
+            return (
+              <Card key={item.id} className={bentoGridClasses[tileIndex]}>
+                {tileIndex === 0 && (
+                  <CardHeader className='pb-6'>
+                    <div className='flex items-center justify-start'>
+                      <Quote className='text-muted-foreground/30 size-16 rotate-180' aria-hidden='true' />
+                    </div>
+                  </CardHeader>
+                )}
+                <CardContent className={contentClasses[tileIndex]}>
+                  <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>
+                    <p className={textClasses[tileIndex]}>{item.content}</p>
+                    <TestimonialAttribution item={item} />
+                    {item.rating !== undefined && <Rating value={item.rating} />}
+                  </blockquote>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CarouselPresentation({
+  items,
+  title,
+  description,
+  className,
+  carouselLabels,
+}: TestimonialSectionBaseProps & {
+  carouselLabels: TestimonialCarouselLabels
+}) {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+  const [selectedSlide, setSelectedSlide] = useState(0)
+
+  useEffect(() => {
+    if (!carouselApi) return
+
+    const updateSelectedSlide = () => setSelectedSlide(carouselApi.selectedScrollSnap())
+    updateSelectedSlide()
+    carouselApi.on('select', updateSelectedSlide)
+    carouselApi.on('reInit', updateSelectedSlide)
+
+    return () => {
+      carouselApi.off('select', updateSelectedSlide)
+      carouselApi.off('reInit', updateSelectedSlide)
+    }
+  }, [carouselApi])
+
+  return (
+    <section className={cn('py-12 lg:py-20', className)}>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {(title || description) && (
+          <header className='mb-12 text-center md:mb-16'>
+            {title && <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>}
+            {description && <p className='text-muted-foreground mx-auto mt-4 max-w-2xl'>{description}</p>}
+          </header>
+        )}
+
+        <Carousel
+          className='w-full'
+          opts={{ align: 'start', loop: true }}
+          setApi={setCarouselApi}
+          aria-label={title}
+        >
+          <CarouselContent className='-ml-1'>
+            {items.map(item => (
+              <CarouselItem key={item.id} className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'>
+                <Card className='h-full overflow-hidden border border-border py-6'>
+                  <CardHeader className='gap-0 px-6'>
+                    <TestimonialAttribution item={item} />
+                  </CardHeader>
+                  <CardContent className='px-6'>
+                    <blockquote className='text-muted-foreground text-base'>{item.content}</blockquote>
+                    {item.rating !== undefined && <Rating value={item.rating} />}
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className='cursor-pointer' aria-label={carouselLabels.previous} />
+          <CarouselNext className='cursor-pointer' aria-label={carouselLabels.next} />
+        </Carousel>
+        <div className='mt-6 flex justify-center gap-2'>
+          {items.map((item, index) => (
+            <button
+              key={item.id}
+              type='button'
+              className={cn(
+                'size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                selectedSlide === index ? 'bg-foreground' : 'bg-muted-foreground/40',
+              )}
+              aria-label={carouselLabels.slide.replace('{n}', String(index + 1))}
+              aria-current={selectedSlide === index ? 'true' : undefined}
+              onClick={() => carouselApi?.scrollTo(index)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function TestimonialSection(props: TestimonialSectionProps) {
+  if (props.items.length === 0) return null
+
+  if (props.presentation === 'carousel') {
+    return <CarouselPresentation {...props} />
+  }
+
+  return <BentoPresentation {...props} />
+}
+
+export default TestimonialSection