@thorprovider/blocks 1.0.0 → 2.0.0

package/src/blocks/e-commerce/product-list/product-card.tsx

@@ -26,6 +26,12 @@ export interface ProductCardProps {
   /** Host-resolved wishlist membership; reflects the rich presentation heart. */
   wishlisted?: boolean
   onAddToCart?: (item: ProductPresentation) => void
+  /**
+   * Hides the add-to-cart control for listings whose only action is opening the
+   * product. Without this a host with no cart callback would render an inert
+   * button.
+   */
+  hideAddToCart?: boolean
   onProductClick?: (item: ProductPresentation) => void
   /**
    * Host-owned wishlist toggle; reports the item and the next state from the
@@ -99,6 +105,7 @@ function RatingRow({ value }: { value: number }) {
 
 function ClassicPresentation({
   item,
+  hideAddToCart = false,
   onAddToCart,
   onProductClick,
   addToCartLabel,
@@ -138,7 +145,9 @@ function ClassicPresentation({
                 width={400}
                 height={400}
               />
-            ) : null}
+            ) : (
+              <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full rounded-md' />
+            )}
           </div>
 
           <div className='flex flex-1 flex-col'>
@@ -164,18 +173,20 @@ function ClassicPresentation({
         </CardContent>
 
         <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
-          <Button
-            variant='outline'
-            size='sm'
-            className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
-            disabled={!available}
-            onClick={(e) => {
-              e.stopPropagation()
-              onAddToCart?.(item)
-            }}
-          >
-            {addToCartLabel}
-          </Button>
+          {hideAddToCart ? null : (
+            <Button
+              variant='outline'
+              size='sm'
+              className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
+              disabled={!available}
+              onClick={(e) => {
+                e.stopPropagation()
+                onAddToCart?.(item)
+              }}
+            >
+              {addToCartLabel}
+            </Button>
+          )}
         </CardFooter>
       </Card>
     </motion.div>
@@ -184,6 +195,7 @@ function ClassicPresentation({
 
 function MinimalPresentation({
   item,
+  hideAddToCart = false,
   onAddToCart,
   onProductClick,
   addToCartLabel,
@@ -216,7 +228,9 @@ function MinimalPresentation({
               className='size-full object-cover transition-transform duration-300 group-hover:scale-105'
               loading='lazy'
             />
-          ) : null}
+          ) : (
+            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />
+          )}
         </div>
 
         <div className='flex flex-col gap-2'>
@@ -224,19 +238,21 @@ function MinimalPresentation({
           {rating !== undefined && <RatingRow value={rating} />}
           <div className='flex items-center justify-between gap-2'>
             <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />
-            <Button
-              variant='ghost'
-              size='icon'
-              className='size-8 shrink-0 cursor-pointer'
-              aria-label={addToCartLabel}
-              disabled={!available}
-              onClick={(e) => {
-                e.stopPropagation()
-                onAddToCart?.(item)
-              }}
-            >
-              <ShoppingCart className='size-4' aria-hidden='true' />
-            </Button>
+            {hideAddToCart ? null : (
+              <Button
+                variant='ghost'
+                size='icon'
+                className='size-8 shrink-0 cursor-pointer'
+                aria-label={addToCartLabel}
+                disabled={!available}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onAddToCart?.(item)
+                }}
+              >
+                <ShoppingCart className='size-4' aria-hidden='true' />
+              </Button>
+            )}
           </div>
         </div>
       </CardContent>
@@ -283,6 +299,7 @@ function WishlistHeart({
 
 function RichPresentation({
   item,
+  hideAddToCart = false,
   wishlisted = false,
   onAddToCart,
   onProductClick,
@@ -314,7 +331,9 @@ function RichPresentation({
               className='size-full object-cover'
               loading='lazy'
             />
-          ) : null}
+          ) : (
+            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />
+          )}
 
           {item.badge && (
             <Badge className='absolute start-2 top-2 z-20 flex items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs'>
@@ -361,18 +380,20 @@ function RichPresentation({
         <div className='flex flex-col gap-2 p-4'>
           <h3 className='font-medium text-balance'>{item.title}</h3>
           <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />
-          <Button
-            variant='outline'
-            size='sm'
-            className='mt-2 w-full cursor-pointer text-xs'
-            disabled={!available}
-            onClick={(e) => {
-              e.stopPropagation()
-              onAddToCart?.(item)
-            }}
-          >
-            {addToCartLabel}
-          </Button>
+          {hideAddToCart ? null : (
+            <Button
+              variant='outline'
+              size='sm'
+              className='mt-2 w-full cursor-pointer text-xs'
+              disabled={!available}
+              onClick={(e) => {
+                e.stopPropagation()
+                onAddToCart?.(item)
+              }}
+            >
+              {addToCartLabel}
+            </Button>
+          )}
         </div>
       </CardContent>
     </Card>
@@ -391,6 +412,7 @@ export function ProductCard({
   item,
   presentation = 'classic',
   wishlisted,
+  hideAddToCart,
   onAddToCart,
   onProductClick,
   onToggleWishlist,
@@ -405,6 +427,7 @@ export function ProductCard({
     item,
     presentation,
     wishlisted,
+    hideAddToCart,
     onAddToCart,
     onProductClick,
     onToggleWishlist,

package/src/blocks/e-commerce/shopping-carts/shopping-cart.test.tsx

@@ -191,8 +191,8 @@ describe('ShoppingCart — truthful evidence only', () => {
       promotions: [],
       totals: { subtotal: eur('110.00'), discount: eur('10.00'), tax: eur('8.00'), shipping: eur('0'), total: eur('108.00') },
     })
-    expect(html).toMatch(/EUR\s110\.00/)
-    expect(html).toMatch(/EUR\s108\.00/)
+    expect(html).toMatch(/(?:EUR|€)\s?110\.00/)
+    expect(html).toMatch(/(?:EUR|€)\s?108\.00/)
   })
 
   it('renders host-supplied promotion progress and activated copy from data', () => {

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')
+  })
+})

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

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

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

@@ -0,0 +1,11 @@
+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)
+  })
+})