@thorprovider/blocks 2.0.0 → 3.0.0

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

@@ -1,195 +0,0 @@
-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

@@ -1,118 +0,0 @@
-// @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

@@ -1,131 +0,0 @@
-// @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')
-  })
-})

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

@@ -1,127 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render, screen } from '@testing-library/react'
-import { AtSign } from 'lucide-react'
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  FooterSection,
-  type FooterSectionProps,
-  type FooterSocialLink,
-} from './footer-section'
-
-const baseProps = {
-  presentation: 'contact',
-  brandName: 'Thor Provider',
-  linkColumns: [],
-} satisfies FooterSectionProps
-
-const instagram = {
-  label: 'Instagram',
-  href: '/redes/instagram',
-  icon: 'instagram',
-} satisfies FooterSocialLink
-
-describe('FooterSection serializable social content and list identities', () => {
-  it('round-trips social identifiers as plain JSON data', () => {
-    const serialized = JSON.stringify([instagram])
-
-    expect(serialized).toBe(
-      '[{"label":"Instagram","href":"/redes/instagram","icon":"instagram"}]',
-    )
-    expect(JSON.parse(serialized)).toEqual([instagram])
-  })
-
-  it('renders a host-bound icon for its serializable identifier', () => {
-    render(
-      <FooterSection
-        {...baseProps}
-        socialLinks={[instagram]}
-        socialIcons={{ instagram: AtSign }}
-        onSocialClick={() => undefined}
-      />,
-    )
-
-    const socialLink = screen.getByRole('link', { name: 'Instagram' })
-    expect(socialLink.getAttribute('href')).toBe('/redes/instagram')
-    expect(socialLink.querySelector('svg')).not.toBeNull()
-  })
-
-  it('uses an optional accessible name without changing the raw social label', () => {
-    const onSocialClick = vi.fn()
-    const socialLink = { ...instagram, ariaLabel: 'Seguir en Instagram' }
-
-    render(
-      <FooterSection
-        {...baseProps}
-        socialLinks={[socialLink]}
-        socialIcons={{ instagram: AtSign }}
-        onSocialClick={onSocialClick}
-      />,
-    )
-
-    const control = screen.getByRole('link', { name: 'Seguir en Instagram' })
-    expect(control.textContent).toContain('Instagram')
-    fireEvent.click(control)
-    expect(onSocialClick).toHaveBeenCalledWith('Instagram')
-  })
-
-  it('keeps the provider label visible when its icon identifier is unmapped', () => {
-    render(
-      <FooterSection
-        {...baseProps}
-        socialLinks={[instagram]}
-        socialIcons={{}}
-        onSocialClick={() => undefined}
-      />,
-    )
-
-    const socialLink = screen.getByRole('link', { name: 'Instagram' })
-    expect(socialLink.textContent).toContain('Instagram')
-    expect(socialLink.querySelector('svg')).toBeNull()
-  })
-
-  it('rejects duplicate column identities instead of emitting duplicate keys', () => {
-    expect(() =>
-      render(
-        <FooterSection
-          {...baseProps}
-          linkColumns={[
-            { title: 'Servicios', links: [{ label: 'Talleres' }] },
-            { title: 'Servicios', links: [{ label: 'Repuestos' }] },
-          ]}
-        />,
-      ),
-    ).toThrow(/column.*keys must be unique/i)
-  })
-
-  it('rejects duplicate link identities within a column', () => {
-    expect(() =>
-      render(
-        <FooterSection
-          {...baseProps}
-          linkColumns={[
-            {
-              title: 'Servicios',
-              links: [
-                { label: 'Talleres', href: '/talleres' },
-                { label: 'Talleres', href: '/talleres' },
-              ],
-            },
-          ]}
-        />,
-      ),
-    ).toThrow(/link.*keys must be unique/i)
-  })
-
-  it('rejects duplicate social identities instead of emitting duplicate keys', () => {
-    expect(() =>
-      render(
-        <FooterSection
-          {...baseProps}
-          socialLinks={[instagram, instagram]}
-          onSocialClick={() => undefined}
-        />,
-      ),
-    ).toThrow(/social.*keys must be unique/i)
-  })
-})

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

@@ -1,100 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from '@testing-library/react'
-import { AtSign } from 'lucide-react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { FooterSection, type FooterSectionProps } from './footer-section'
-
-const nativeProps = {
-  presentation: 'brand-columns',
-  linkBehavior: 'native',
-  brandName: 'Thor Provider',
-  linkColumns: [
-    {
-      title: 'Repuestos',
-      links: [{ label: 'Catálogo de repuestos', href: '/repuestos' }],
-    },
-  ],
-  socialLinks: [
-    { label: 'Instagram', href: '/redes/instagram', icon: 'instagram' },
-  ],
-  socialIcons: { instagram: AtSign },
-}
-
-describe('FooterSection native link compatibility', () => {
-  it('keeps native column hrefs separate from host-controlled social links', () => {
-    render(
-      <FooterSection
-        {...(nativeProps as unknown as FooterSectionProps)}
-      />,
-    )
-
-    expect(
-      screen
-        .getByRole('link', { name: 'Catálogo de repuestos' })
-        .getAttribute('href'),
-    ).toBe('/repuestos')
-    expect(screen.getByText('Instagram').closest('a')).toBeNull()
-  })
-
-  it('notifies native column callbacks without preventing browser navigation', () => {
-    const onLinkClick = vi.fn()
-    const props = {
-      ...nativeProps,
-      onLinkClick,
-    } as unknown as FooterSectionProps
-
-    render(<FooterSection {...props} />)
-
-    const columnLink = screen.getByRole('link', {
-      name: 'Catálogo de repuestos',
-    })
-    const columnEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    })
-    columnLink.dispatchEvent(columnEvent)
-
-    expect(onLinkClick).toHaveBeenCalledWith(
-      nativeProps.linkColumns[0]?.links[0],
-    )
-    expect(columnEvent.defaultPrevented).toBe(false)
-    expect(screen.getByText('Instagram').closest('a')).toBeNull()
-  })
-
-  it('keeps native social hrefs separate from host-controlled column links', () => {
-    const props = {
-      ...nativeProps,
-      linkBehavior: 'host',
-      socialLinkBehavior: 'native',
-    } as unknown as FooterSectionProps
-
-    render(<FooterSection {...props} />)
-
-    expect(screen.getByText('Catálogo de repuestos').closest('a')).toBeNull()
-    const socialLink = screen.getByRole('link', { name: 'Instagram' })
-    expect(socialLink.getAttribute('href')).toBe('/redes/instagram')
-  })
-
-  it('notifies native social callbacks without preventing browser navigation', () => {
-    const onSocialClick = vi.fn()
-    const props = {
-      ...nativeProps,
-      linkBehavior: 'host',
-      socialLinkBehavior: 'native',
-      onSocialClick,
-    } as unknown as FooterSectionProps
-
-    render(<FooterSection {...props} />)
-
-    const socialLink = screen.getByRole('link', { name: 'Instagram' })
-    const socialEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    })
-    socialLink.dispatchEvent(socialEvent)
-
-    expect(onSocialClick).toHaveBeenCalledWith('Instagram')
-    expect(socialEvent.defaultPrevented).toBe(false)
-  })
-})

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

@@ -1,11 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import * as blockExports from '../../../index'
-
-describe('Blocks footer package exports', () => {
-  it('exposes the canonical footer and omits retired numbered adapters', () => {
-    expect(blockExports.FooterSection).toEqual(expect.any(Function))
-    expect('FooterSection1' in blockExports).toBe(false)
-    expect('FooterSection3' in blockExports).toBe(false)
-    expect('FooterSection4' in blockExports).toBe(false)
-  })
-})