@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/features/feature.test.tsx

@@ -0,0 +1,153 @@
+import { Zap } from 'lucide-react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import {
+  featureCardsSpecSchema,
+  featurePropsSchema,
+  featureSplitSpecSchema,
+} from '../../../lib/contracts'
+import Feature, { type FeatureItem, type FeatureProps } from './feature'
+
+const items: FeatureItem[] = [
+  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: Zap },
+  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: Zap },
+]
+
+const specItems = [
+  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
+  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: 'Zap' },
+]
+
+const render = (props: FeatureProps) => renderToStaticMarkup(<Feature {...props} />)
+
+describe('Feature — canonical render', () => {
+  it('renders the cards structure by default (former Feature1)', () => {
+    const html = render({
+      items,
+      badge: 'Why us',
+      title: 'Benefits',
+      description: 'Everything you need',
+      learnMoreLabel: 'Learn more',
+      ctaLabel: 'See all',
+      onCtaClick: () => {},
+      onLearnMore: () => {},
+    })
+    expect(html).toContain('Why us')
+    expect(html).toContain('Benefits')
+    expect(html).toContain('Fast')
+    expect(html).toContain('Learn more')
+    expect(html).toContain('See all')
+  })
+
+  it('renders the split structure with presentation: split (former Feature2)', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      title: 'Benefits',
+      description: 'Everything you need',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+      className: 'bg-background',
+    })
+    expect(html).toContain('Benefits')
+    expect(html).toContain('Fast')
+    expect(html).toContain('https://cdn.example/img.jpg')
+    expect(html).toContain('grayscale')
+    expect(html).toContain('bg-background')
+  })
+
+  it('omits the badge and per-item learn-more in the split presentation', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      badge: 'Why us',
+      title: 'Benefits',
+      learnMoreLabel: 'Learn more',
+      onLearnMore: () => {},
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    } as unknown as FeatureProps)
+    expect(html).not.toContain('Why us')
+    expect(html).not.toContain('Learn more')
+  })
+
+  it('renders no empty chrome when optional content is absent (cards)', () => {
+    const html = render({ items })
+    expect(html).not.toContain('badge')
+    expect(html).not.toContain('Learn more')
+    expect(html).not.toContain('See all')
+  })
+
+  it('rejects split without an image at the serialized boundary', () => {
+    expect(() =>
+      featureSplitSpecSchema.parse({ items: specItems, presentation: 'split' }),
+    ).toThrow()
+    expect(() =>
+      featurePropsSchema.parse({ items: specItems, presentation: 'split' }),
+    ).toThrow()
+  })
+
+  it('rejects split with a blank image source', () => {
+    expect(() =>
+      featureSplitSpecSchema.parse({
+        items: specItems,
+        presentation: 'split',
+        image: { src: '   ', alt: 'Workshop' },
+      }),
+    ).toThrow()
+  })
+
+  it('accepts cards without an image at the serialized boundary', () => {
+    expect(() => featurePropsSchema.parse({ items: specItems })).not.toThrow()
+    expect(() =>
+      featurePropsSchema.parse({ items: specItems, presentation: 'cards' }),
+    ).not.toThrow()
+    expect(() =>
+      featureCardsSpecSchema.parse({ items: specItems }),
+    ).not.toThrow()
+  })
+
+  it('throws a configuration error for untyped split callers without an image', () => {
+    expect(() =>
+      render({ items, presentation: 'split' } as unknown as FeatureProps),
+    ).toThrow(/presentation="split".*image/)
+    expect(() =>
+      render({
+        items,
+        presentation: 'split',
+        image: { src: '   ', alt: 'Workshop' },
+      } as unknown as FeatureProps),
+    ).toThrow(/presentation="split".*image/)
+  })
+
+  it('renders one image with the supplied src and alt and never emits an empty src', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    })
+    expect(html).toContain('<img')
+    expect(html).toContain('src="https://cdn.example/img.jpg"')
+    expect(html).toContain('alt="Workshop"')
+    expect(html.match(/<img/g)).toHaveLength(1)
+    expect(html).not.toContain('src=""')
+  })
+
+  it('renders an empty items list without item chrome or errors', () => {
+    const html = render({ items: [], title: 'Benefits' })
+    expect(html).toContain('Benefits')
+    expect(html).not.toContain('<article')
+    expect(html).not.toContain('<h3')
+  })
+
+  it('validates a serialized props object against featurePropsSchema', () => {
+    const spec = {
+      items: [
+        { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
+      ],
+      presentation: 'split',
+      title: 'Benefits',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    }
+    const parsed = featurePropsSchema.parse(spec)
+    expect(parsed.items[0]?.icon).toBe('Zap')
+  })
+})

package/src/blocks/marketing/features/feature.tsx

@@ -0,0 +1,195 @@
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { ArrowRight } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+export interface FeatureItem {
+  id: string
+  title: string
+  description: string
+  icon: LucideIcon
+}
+
+/**
+ * The bounded presentation surface. `cards` is the card grid with a centered
+ * header, per-item learn-more and a section CTA; `split` is the editorial
+ * split layout with a required image column and deliberately ignores the
+ * badge and per-item learn-more. The value changes structure, never the item
+ * contract.
+ */
+export type FeaturePresentation = 'cards' | 'split'
+
+interface FeatureBaseProps {
+  items: FeatureItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+export interface FeatureCardsProps extends FeatureBaseProps {
+  /** Bounded presentation option; defaults to `cards`. */
+  presentation?: 'cards'
+  /** `cards`-only header chrome. */
+  badge?: string
+  /** Section CTA (`cards` only). */
+  ctaLabel?: string
+  onCtaClick?: () => void
+  /** Per-item link (`cards` only). */
+  learnMoreLabel?: string
+  onLearnMore?: (item: FeatureItem) => void
+}
+
+export interface FeatureSplitProps extends FeatureBaseProps {
+  presentation: 'split'
+  /** Required editorial image; a non-empty `src` is part of the contract. */
+  image: { src: string; alt: string }
+}
+
+export type FeatureProps = FeatureCardsProps | FeatureSplitProps
+
+function SplitFeature({ items, title, description, image, className }: FeatureSplitProps) {
+  if (!image?.src || image.src.trim() === '') {
+    throw new Error(
+      'Feature: presentation="split" requires a non-empty image.src. Pass { image: { src, alt } } or use presentation="cards".',
+    )
+  }
+
+  return (
+    <section
+      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
+    >
+      <div className='grid gap-12 lg:grid-cols-2 lg:gap-16'>
+        <div className='flex flex-col gap-10'>
+          {(title || description) && (
+            <header className='flex flex-col gap-4'>
+              {title && (
+                <h2 className='text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl'>
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p className='text-muted-foreground text-base text-pretty md:text-lg'>
+                  {description}
+                </p>
+              )}
+            </header>
+          )}
+
+          <div className='grid gap-6 sm:grid-cols-2 sm:gap-8'>
+            {items.map(item => (
+              <div key={item.id} className='group flex flex-col items-start gap-3 rounded-lg'>
+                <div className='bg-secondary text-secondary-foreground inline-flex size-10 items-center justify-center rounded-full'>
+                  <item.icon className='size-5' aria-hidden='true' />
+                </div>
+                <div className='flex flex-col gap-1.5'>
+                  <h3 className='text-foreground text-base font-semibold md:text-lg'>{item.title}</h3>
+                  <p className='text-muted-foreground text-sm text-balance'>{item.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className='relative'>
+          <div className='bg-muted relative z-10 overflow-hidden rounded-lg shadow-sm transition-all duration-300 hover:shadow-md'>
+            <div className='aspect-[4/3] w-full'>
+              <img
+                src={image.src}
+                alt={image.alt}
+                className='size-full object-cover grayscale'
+                loading='lazy'
+                decoding='async'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CardsFeature({
+  items,
+  badge,
+  title,
+  description,
+  ctaLabel,
+  onCtaClick,
+  learnMoreLabel,
+  onLearnMore,
+  className,
+}: FeatureCardsProps) {
+  return (
+    <section
+      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
+    >
+      {(badge || title || description) && (
+        <header className='mx-auto mb-12 max-w-2xl text-center'>
+          {badge && (
+            <Badge variant='secondary' className='h-auto mb-4 rounded-full px-4 py-1 font-medium'>
+              {badge}
+            </Badge>
+          )}
+          {title && (
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>{title}</h2>
+          )}
+          {description && (
+            <p className='text-muted-foreground text-pretty'>{description}</p>
+          )}
+        </header>
+      )}
+
+      <div className='grid gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3'>
+        {items.map(feature => (
+          <article key={feature.id} className='group'>
+            <Card className='relative h-full overflow-hidden transition-all hover:shadow-md'>
+              <CardContent className='px-6'>
+                <div className='bg-secondary text-secondary-foreground mb-4 inline-flex size-12 items-center justify-center rounded-xl'>
+                  <feature.icon className='size-5' aria-hidden='true' />
+                </div>
+                <h3 className='mb-2 text-lg font-semibold'>{feature.title}</h3>
+                <p className='text-muted-foreground mb-4 text-sm'>{feature.description}</p>
+
+                {learnMoreLabel && (
+                  <Button
+                    variant='link'
+                    size='sm'
+                    className='h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer !p-0 text-sm'
+                    onClick={onLearnMore ? () => onLearnMore(feature) : undefined}
+                  >
+                    {learnMoreLabel}
+                    <ArrowRight />
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          </article>
+        ))}
+      </div>
+
+      {ctaLabel && (
+        <div className='mt-12 text-center'>
+          <Button
+            size='lg'
+            className='h-10 cursor-pointer rounded-lg !px-8'
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+            <ArrowRight />
+          </Button>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function Feature(props: FeatureProps) {
+  if (props.presentation === 'split') {
+    return <SplitFeature {...props} />
+  }
+  return <CardsFeature {...props} />
+}
+
+export default Feature

package/src/blocks/marketing/footers/footer-section-accessibility.test.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AtSign } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  FooterSection,
+  type FooterSectionProps,
+} from './footer-section'
+
+const presentations = [
+  'brand-columns',
+  'newsletter-grid',
+  'contact',
+] as const satisfies readonly FooterSectionProps['presentation'][]
+
+function createProps(
+  presentation: FooterSectionProps['presentation'] = 'contact',
+): FooterSectionProps {
+  return {
+    presentation,
+    brandName: 'Thor Provider',
+    linkColumns: [
+      {
+        title: 'Repuestos',
+        links: [{ label: 'Catálogo', href: '/repuestos' }],
+      },
+    ],
+    newsletter: {
+      title: 'Novedades para talleres',
+      buttonLabel: 'Suscribirme',
+    },
+    contact: {
+      heading: 'Contacto',
+      address: { label: 'Av. Talleres 123' },
+      phone: { label: '+34 900 123 456', href: 'tel:+34900123456' },
+      email: { label: 'ventas@thorprovider.es', href: 'mailto:ventas@thorprovider.es' },
+    },
+    socialLinks: [
+      { label: 'Instagram', href: '/redes/instagram', icon: 'instagram' },
+    ],
+    socialIcons: { instagram: AtSign },
+    onNewsletterSubmit: vi.fn(),
+    onLinkClick: vi.fn(),
+    onSocialClick: vi.fn(),
+  }
+}
+
+describe('FooterSection accessibility', () => {
+  it('uses consumer-supplied localized copy as the newsletter field label', () => {
+    render(<FooterSection {...createProps()} />)
+
+    expect(
+      screen.getByRole('textbox', { name: 'Novedades para talleres' }),
+    ).toBeDefined()
+  })
+
+  it('exposes named footer and navigation landmarks', () => {
+    render(<FooterSection {...createProps()} />)
+
+    expect(
+      screen.getByRole('contentinfo', { name: 'Thor Provider footer' }),
+    ).toBeDefined()
+    expect(screen.getByRole('navigation', { name: 'Repuestos' })).toBeDefined()
+    expect(screen.getByRole('navigation', { name: 'Social media' })).toBeDefined()
+  })
+
+  it('keeps decorative newsletter and social icons hidden from assistive technology', () => {
+    render(<FooterSection {...createProps()} />)
+
+    const newsletterIcon = screen
+      .getByRole('button', { name: 'Suscribirme' })
+      .querySelector('svg')
+    const socialIcon = screen
+      .getByRole('link', { name: 'Instagram' })
+      .querySelector('svg')
+
+    expect(newsletterIcon?.getAttribute('aria-hidden')).toBe('true')
+    expect(socialIcon?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('keeps every actionable item keyboard reachable in page order', async () => {
+    const user = userEvent.setup()
+    const props = createProps()
+    render(<FooterSection {...props} />)
+
+    const phone = screen.getByRole('link', { name: '+34 900 123 456' })
+    const email = screen.getByRole('link', { name: 'ventas@thorprovider.es' })
+    const newsletter = screen.getByRole('textbox', {
+      name: 'Novedades para talleres',
+    })
+    const submit = screen.getByRole('button', { name: 'Suscribirme' })
+    const columnLink = screen.getByRole('link', { name: 'Catálogo' })
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+
+    for (const control of [phone, email, newsletter, submit, columnLink, socialLink]) {
+      await user.tab()
+      expect(document.activeElement).toBe(control)
+    }
+
+    expect(columnLink.getAttribute('class')).toContain('focus-visible')
+    expect(socialLink.getAttribute('class')).toContain('focus-visible')
+
+    await user.keyboard('{Enter}')
+    expect(props.onSocialClick).toHaveBeenCalledWith('Instagram')
+  })
+
+  it.each(presentations)(
+    'keeps the %s layout constrained responsively',
+    (presentation) => {
+      render(<FooterSection {...createProps(presentation)} />)
+
+      const footer = screen.getByRole('contentinfo')
+      expect(footer.querySelector('[class*="md:grid-cols"]')).not.toBeNull()
+    },
+  )
+})

package/src/blocks/marketing/footers/footer-section-actions.test.tsx

@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AtSign } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FooterSection, type FooterSectionProps } from './footer-section'
+
+const sharedProps = {
+  brandName: 'Thor Provider',
+  brandDescription: 'Repuestos y soluciones para talleres.',
+  linkColumns: [
+    {
+      title: 'Repuestos',
+      links: [{ label: 'Catálogo de repuestos', href: '/repuestos' }],
+    },
+  ],
+  newsletter: {
+    title: 'Recibe novedades',
+    placeholder: 'Correo electrónico',
+    buttonLabel: 'Suscribirme',
+  },
+  socialLinks: [
+    {
+      label: 'Instagram',
+      href: 'https://instagram.com/thorprovider',
+      icon: 'instagram',
+    },
+  ],
+  socialIcons: { instagram: AtSign },
+  contact: {
+    heading: 'Contacto',
+    phone: { label: '+56 2 2345 6789', href: 'tel:+56223456789' },
+    email: {
+      label: 'hola@thorprovider.cl',
+      href: 'mailto:hola@thorprovider.cl',
+    },
+  },
+} satisfies Omit<FooterSectionProps, 'presentation'>
+
+describe('FooterSection host actions', () => {
+  it('reports the entered newsletter email through the host callback', async () => {
+    const user = userEvent.setup()
+    const onNewsletterSubmit = vi.fn()
+
+    render(
+      <FooterSection
+        {...sharedProps}
+        presentation="newsletter-grid"
+        onNewsletterSubmit={onNewsletterSubmit}
+      />,
+    )
+
+    await user.type(
+      screen.getByPlaceholderText('Correo electrónico'),
+      'taller@thorprovider.cl',
+    )
+    await user.click(screen.getByRole('button', { name: 'Suscribirme' }))
+
+    expect(onNewsletterSubmit).toHaveBeenCalledTimes(1)
+    expect(onNewsletterSubmit).toHaveBeenCalledWith('taller@thorprovider.cl')
+  })
+
+  it('keeps newsletter controls visible but disabled without a callback', () => {
+    render(<FooterSection {...sharedProps} presentation="newsletter-grid" />)
+
+    expect(
+      (screen.getByPlaceholderText('Correo electrónico') as HTMLInputElement)
+        .disabled,
+    ).toBe(true)
+    expect(
+      (screen.getByRole('button', { name: 'Suscribirme' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true)
+  })
+
+  it('renders footer-column and social destinations as text without callbacks', () => {
+    render(<FooterSection {...sharedProps} presentation="contact" />)
+
+    expect(screen.getByText('Catálogo de repuestos').closest('a')).toBeNull()
+    expect(screen.getByText('Instagram').closest('a')).toBeNull()
+  })
+
+  it('reports host-routed footer and social actions while retaining their hrefs', async () => {
+    const user = userEvent.setup()
+    const onLinkClick = vi.fn()
+    const onSocialClick = vi.fn()
+
+    render(
+      <FooterSection
+        {...sharedProps}
+        presentation="contact"
+        onLinkClick={onLinkClick}
+        onSocialClick={onSocialClick}
+      />,
+    )
+
+    const footerLink = screen.getByRole('link', {
+      name: 'Catálogo de repuestos',
+    })
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+    expect(footerLink.getAttribute('href')).toBe('/repuestos')
+    expect(socialLink.getAttribute('href')).toBe(
+      'https://instagram.com/thorprovider',
+    )
+
+    await user.click(footerLink)
+    await user.click(socialLink)
+
+    expect(onLinkClick).toHaveBeenCalledWith({
+      label: 'Catálogo de repuestos',
+      href: '/repuestos',
+    })
+    expect(onSocialClick).toHaveBeenCalledWith('Instagram')
+  })
+
+  it('preserves native telephone and email contact destinations', () => {
+    render(<FooterSection {...sharedProps} presentation="contact" />)
+
+    expect(
+      screen
+        .getByRole('link', { name: '+56 2 2345 6789' })
+        .getAttribute('href'),
+    ).toBe('tel:+56223456789')
+    expect(
+      screen
+        .getByRole('link', { name: 'hola@thorprovider.cl' })
+        .getAttribute('href'),
+    ).toBe('mailto:hola@thorprovider.cl')
+  })
+})