@thorprovider/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,117 @@
+import type { ReactElement, ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { FooterSection1 } from './footer-section-1'
+
+const base = {
+  brandName: 'ElectroCuba',
+  linkColumns: [],
+}
+
+type SubmitHandler = (event: { preventDefault: () => void }) => void
+
+function findForm(node: ReactNode): ReactElement<{ onSubmit?: SubmitHandler }> | undefined {
+  if (node === null || node === undefined || typeof node !== 'object') return undefined
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findForm(child)
+      if (found) return found
+    }
+    return undefined
+  }
+  const element = node as ReactElement<{ children?: ReactNode }>
+  if (element.type === 'form') return element as ReactElement<{ onSubmit?: SubmitHandler }>
+  return findForm(element.props?.children)
+}
+
+describe('FooterSection1 — optional brand accent', () => {
+  it('renders the brand name unchanged when no accent is supplied', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('text-brand-promo')
+  })
+
+  it('accents a matched trailing segment without duplicating the brand name', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} brandAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+    expect(html.match(/Electro/g)).toHaveLength(1)
+    expect(html.match(/Cuba/g)).toHaveLength(1)
+  })
+
+  it('accents the full brand name when the accent covers all of it', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} brandAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
+  })
+
+  it('does not accent when the segment is not a trailing match', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} brandAccent={{ text: 'Electro' }} />)
+    expect(html).toContain('>ElectroCuba</span>')
+  })
+})
+
+describe('FooterSection1 — newsletter requires a submit callback', () => {
+  it('renders no form, input, or button when the newsletter has no onSubmit', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', placeholder: 'tu@correo.com' }} />,
+    )
+    expect(html).not.toContain('<form')
+    expect(html).not.toContain('<input')
+    expect(html).not.toContain('<button')
+  })
+
+  it('renders the interactive form when a submit handler is supplied', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', onSubmit: () => {} }} />,
+    )
+    expect(html).toContain('<form')
+    expect(html).toContain('<input')
+    expect(html).toContain('<button')
+    expect(html).toContain('Suscribirse')
+  })
+
+  it('retains the supplied submit handler and forwards the email', () => {
+    const onSubmit = vi.fn()
+    const tree = FooterSection1({
+      ...base,
+      newsletter: { buttonLabel: 'Suscribirse', onSubmit },
+    })
+    const form = findForm(tree)
+    expect(form).toBeDefined()
+
+    vi.stubGlobal(
+      'FormData',
+      class {
+        get() {
+          return 'shopper@example.com'
+        }
+      },
+    )
+    try {
+      form?.props.onSubmit?.({ preventDefault: () => {} })
+    } finally {
+      vi.unstubAllGlobals()
+    }
+
+    expect(onSubmit).toHaveBeenCalledWith('shopper@example.com')
+  })
+})
+
+describe('FooterSection1 — optional outer surface className', () => {
+  it('keeps the default surface when className is omitted', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
+    expect(html).toContain('bg-secondary')
+  })
+
+  it('merges a branded surface onto the footer and drops the default background', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(html).toContain('bg-brand-nav')
+    expect(html).toContain('text-brand-nav-foreground')
+    expect(html).not.toContain('bg-secondary')
+  })
+})

package/src/blocks/marketing/footers/footer-section-1.tsx

@@ -3,6 +3,7 @@
 import { Input } from '../../../ui/input'
 import { Button } from '../../../ui/button'
 import { ArrowRight } from 'lucide-react'
+import { cn } from '../../../lib/utils'
 
 export interface FooterLink {
   label: string
@@ -17,24 +18,59 @@ export interface FooterLinkColumn {
 export interface FooterNewsletter {
   placeholder?: string
   buttonLabel: string
+  /**
+   * Submit handler. The interactive form (input + submit button) renders only
+   * when this is supplied. A newsletter without `onSubmit` renders no form,
+   * input, or button — never a fake form.
+   */
   onSubmit?: (email: string) => void
 }
 
+export interface BrandAccent {
+  /** Trailing segment of `brandName` to render with the accent styling. */
+  text: string
+  /** Consumer-supplied classes for the accent span (e.g. a brand color token). */
+  className?: string
+}
+
 export interface FooterSection1Props {
   brandName: string
+  /**
+   * Optional accent for a trailing segment of `brandName` (e.g. the "Cuba" in
+   * "ElectroCuba"). When omitted, or when `text` is not a trailing segment of
+   * `brandName`, the brand name renders unchanged.
+   */
+  brandAccent?: BrandAccent
   brandDescription?: string
   linkColumns: FooterLinkColumn[]
   newsletter?: FooterNewsletter
+  /**
+   * Consumer-supplied classes merged onto the outer `<footer>` as the final
+   * argument, so a semantic surface such as `bg-brand-nav
+   * text-brand-nav-foreground` overrides the default `bg-secondary`. Purely
+   * presentational: no layout, structure, or behavior changes.
+   */
+  className?: string
 }
 
 export function FooterSection1({
   brandName,
+  brandAccent,
   brandDescription,
   linkColumns,
   newsletter,
+  className,
 }: FooterSection1Props) {
+  const accentText = brandAccent?.text ?? ''
+  const hasAccent = accentText.length > 0 && brandName.endsWith(accentText)
+  const baseName = hasAccent ? brandName.slice(0, brandName.length - accentText.length) : brandName
+  const newsletterSubmit = newsletter?.onSubmit
+
   return (
-    <footer className='bg-secondary w-full py-16' aria-label='Pie de página'>
+    <footer
+      className={cn('bg-secondary w-full py-16', className)}
+      aria-label='Pie de página'
+    >
       <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
         <div className='grid grid-cols-1 gap-8 lg:grid-cols-12'>
           {/* Left Section */}
@@ -66,23 +102,24 @@ export function FooterSection1({
                 <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
                 <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
               </svg>
-              <span className='text-xl font-semibold'>{brandName}</span>
+              <span className='text-xl font-semibold'>
+                {baseName}
+                {hasAccent ? <span className={brandAccent?.className}>{accentText}</span> : null}
+              </span>
             </div>
             {brandDescription && (
               <p className='text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed text-balance'>
                 {brandDescription}
               </p>
             )}
-            {newsletter && (
+            {newsletter && newsletterSubmit ? (
               <form
                 className='relative'
                 onSubmit={e => {
                   e.preventDefault()
-                  if (newsletter.onSubmit) {
-                    const email = new FormData(e.currentTarget).get('email')
-                    if (typeof email === 'string') {
-                      newsletter.onSubmit(email)
-                    }
+                  const email = new FormData(e.currentTarget).get('email')
+                  if (typeof email === 'string') {
+                    newsletterSubmit(email)
                   }
                 }}
               >
@@ -103,7 +140,7 @@ export function FooterSection1({
                   <ArrowRight />
                 </Button>
               </form>
-            )}
+            ) : null}
           </div>
 
           {/* Right Section */}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.test.tsx

@@ -0,0 +1,54 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Navbar4CartSheet, type CartItem } from './navbar-4-cart-sheet'
+
+const items: CartItem[] = [
+  { id: 'line_1', name: 'Taladro', variant: 'Rojo', price: 45, qty: 2, image: 'https://cdn.example/t.jpg' },
+]
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const noop = () => {}
+
+describe('Navbar4CartSheet — authoritative subtotal', () => {
+  it('never renders a fake zero for a supplied but absent/malformed subtotal', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        subtotal={{ amount: '', currencyCode: 'USD' }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('—')
+  })
+
+  it('preserves a legitimate zero subtotal', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        subtotal={{ amount: '0', currencyCode: 'USD' }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('—')
+  })
+
+  it('falls back to the legacy local subtotal only when none is supplied', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).toContain('$90.00')
+  })
+})

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.tsx

@@ -15,21 +15,37 @@ import {
 } from '../../../ui/empty'
 import { Separator } from '../../../ui/separator'
 import { SheetClose } from '../../../ui/sheet'
+import type { Money } from '@thorprovider/types'
+import { formatMoney } from '../../../lib/money'
 
 export interface CartItem {
+  /** Backend cart line-item id — the stable identity for update/removal. */
   id: string
   name: string
-  variant: string
+  variant?: string
   price: number
   qty: number
-  image: string
+  /** Optional; an absent image is omitted rather than serialized as `""`. */
+  image?: string
 }
 
 export interface Navbar4CartSheetProps {
   items: CartItem[]
+  /**
+   * Quantity DELTA for a backend cart line-item id. The boundary converts the
+   * delta into an absolute quantity against the authoritative current line
+   * quantity before mutating the cart.
+   */
   onQtyChange: (id: string, delta: number) => void
+  /** Remove the backend cart line-item id. */
   onRemove: (id: string) => void
-  /** Override price formatting (locale, currency). Defaults to USD. */
+  /** Authoritative backend subtotal. Preferred over any local line math. */
+  subtotal?: Money
+  /** Shown when an authoritative subtotal is supplied but absent/malformed. */
+  subtotalUnavailableLabel?: string
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
+  /** @deprecated legacy numeric formatter; ignored when `subtotal` is supplied. */
   formatPrice?: (value: number) => string
   onCheckout?: () => void
   onViewCart?: () => void
@@ -59,13 +75,17 @@ export function Navbar4CartSheet({
   items,
   onQtyChange,
   onRemove,
+  subtotal: subtotalProp,
+  subtotalUnavailableLabel = '—',
+  formatMoney: formatMoneyProp,
   formatPrice,
   onCheckout,
   onViewCart,
 }: Navbar4CartSheetProps) {
   const reduceMotion = useReducedMotion()
   const format = formatPrice ?? (value => usdFormatter.format(value))
-  const subtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
+  const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
+  const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null
   const isEmpty = items.length === 0
   /** Wait for the last cart row's exit before revealing empty copy. */
   const [showEmpty, setShowEmpty] = useState(isEmpty)
@@ -100,18 +120,24 @@ export function Navbar4CartSheet({
                 className='border-border flex gap-4 border-b py-4 last:border-b-0'
                 style={{ willChange: 'transform, opacity, filter' }}
               >
-                <img
-                  src={item.image || undefined}
-                  alt=''
-                  width={80}
-                  height={96}
-                  className='bg-muted size-20 shrink-0 rounded-md object-cover'
-                />
+                {item.image ? (
+                  <img
+                    src={item.image || undefined}
+                    alt=''
+                    width={80}
+                    height={96}
+                    className='bg-muted size-20 shrink-0 rounded-md object-cover'
+                  />
+                ) : (
+                  <div aria-hidden='true' className='bg-muted size-20 shrink-0 rounded-md' />
+                )}
                 <div className='flex min-w-0 flex-1 flex-col'>
                   <div className='flex items-start justify-between gap-2'>
                     <div className='min-w-0'>
                       <p className='truncate text-sm font-medium'>{item.name}</p>
-                      <p className='text-muted-foreground text-sm'>{item.variant}</p>
+                      {item.variant ? (
+                        <p className='text-muted-foreground text-sm'>{item.variant}</p>
+                      ) : null}
                     </div>
                     <p className='text-sm font-medium'>{format(item.price * item.qty)}</p>
                   </div>
@@ -230,7 +256,11 @@ export function Navbar4CartSheet({
           <Separator />
           <div className='flex items-center justify-between text-sm'>
             <span className='text-muted-foreground'>Subtotal</span>
-            <span className='font-medium tabular-nums'>{format(subtotal)}</span>
+            <span className='font-medium tabular-nums'>
+              {subtotalProp !== undefined
+                ? authoritativeSubtotal ?? subtotalUnavailableLabel
+                : format(localSubtotal)}
+            </span>
           </div>
           <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
           <div className='flex flex-col gap-2'>

package/src/blocks/marketing/navbars/navbar-4.test.tsx

@@ -0,0 +1,112 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Navbar4 } from './navbar-4'
+
+const base = {
+  storeCategories: [],
+  shippingNote: 'Entrega segura',
+  utilityLinks: [],
+  logoText: 'ElectroCuba',
+}
+
+describe('Navbar4 — optional logo accent', () => {
+  it('renders the wordmark unchanged when no accent is supplied', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('text-brand-promo')
+  })
+
+  it('accents a matched trailing segment without duplicating the wordmark', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+    expect(html.match(/Electro/g)).toHaveLength(1)
+    expect(html.match(/Cuba/g)).toHaveLength(1)
+  })
+
+  it('accents the full wordmark when the accent covers all of it', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
+  })
+
+  it('does not accent when the segment is not a trailing match', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} logoAccent={{ text: 'Electro' }} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('<span class="">')
+  })
+
+  it('keeps the wordmark as the accessible text of the logo link', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoHref='/' logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('href="/"')
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+  })
+})
+
+const category = { href: '/herramientas', label: 'Herramientas' }
+
+// The desktop nav link (the mobile drawer also emits an anchor for the same
+// href, but only the desktop nav link carries `hover:bg-muted`).
+const navLinkClass = (html: string) =>
+  html.match(/<a href="\/herramientas" class="([^"]*hover:bg-muted[^"]*)"/)?.[1] ?? ''
+
+describe('Navbar4 — optional outer surface className', () => {
+  it('keeps the default surface (incl. backdrop-filter variant) and nav link color when className is omitted', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} storeCategories={[category]} />)
+    expect(html).toContain('bg-background/95')
+    expect(html).toContain('supports-backdrop-filter:bg-background/80')
+    expect(navLinkClass(html)).toContain('text-foreground')
+    expect(navLinkClass(html)).not.toContain('hover:text-foreground')
+  })
+
+  it('gives the consumer full surface ownership when className is supplied (no default background or variant)', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(html).toContain('bg-brand-nav')
+    expect(html).toContain('text-brand-nav-foreground')
+    expect(html).not.toContain('bg-background/95')
+    expect(html).not.toContain('supports-backdrop-filter:bg-background/80')
+    // Layout/border/sticky/backdrop classes stay internal and present.
+    expect(html).toContain('border-border')
+    expect(html).toContain('sticky')
+    expect(html).toContain('backdrop-blur-md')
+  })
+
+  it('lets nav links inherit the branded surface text color with a correct hover foreground', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(navLinkClass(html)).toContain('text-inherit')
+    expect(navLinkClass(html)).toContain('hover:text-foreground')
+  })
+})
+
+describe('Navbar4 — optional showSearch (E2 task 5.4)', () => {
+  it('renders the search control by default (legacy consumers unaffected)', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    expect(html).toContain('role="search"')
+    expect(html).toContain('type="search"')
+    expect(html).toContain('aria-label="Search products"')
+  })
+
+  it('renders no search control when showSearch is false, keeping the rest of the chrome', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={false} />)
+    expect(html).not.toContain('role="search"')
+    expect(html).not.toContain('type="search"')
+    expect(html).not.toContain('aria-label="Search products"')
+    // Non-search chrome is unaffected: the wordmark and cart trigger remain.
+    expect(html).toContain('ElectroCuba')
+    expect(html).toContain('aria-label="Cart, 0 items"')
+  })
+
+  it('renders the search control when showSearch is explicitly true', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={true} />)
+    expect(html).toContain('role="search"')
+    expect(html).toContain('type="search"')
+  })
+})