@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/footer-contact-first/FooterContactFirst.tsx

@@ -0,0 +1,242 @@
+import * as React from "react"
+import { ArrowUpRightIcon, MailIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { FooterCopyright, FooterLinkItem, FooterLogo, FooterRule, FooterSection, type FooterLink, type FooterLocale, type FooterPhoto } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Contact-First. Motion chip: 47356:8524.
+ *
+ * The footer opens with how to reach the company: a small label, the address
+ * to write to set very large in Light with an arrow-up-right after it, and one
+ * sentence. Under it the offices (a photo, the city, the address and an email
+ * each), a hairline, and the legal bar (logo, copyright, three legal links, five
+ * social marks).
+ *
+ * Motion (the chip): on hover and on keyboard focus the arrow moves 6px up and
+ * towards the end of the line while its opacity goes .6 to 1, and an underline
+ * draws under the address, both 220ms ease-out; in Arabic the arrow is mirrored
+ * (up and to the left) and the underline draws from right to left. On touch,
+ * hover is replaced by active:: the address tints `muted-foreground` for 120ms.
+ * Reduced motion keeps only the colour change. The office photos do not animate.
+ *
+ * Desktop (1440) sets the address at 5XL, the offices side by side, a 400x200
+ * photo above each, 80px above and 32px below. Tablet (768) sets it at 3XL (30px: the style is 4XL, its size follows the responsive variable) with
+ * the offices 2-up and the photo filling its column. Mobile (360) stacks the
+ * offices 1-up and the legal bar. In Arabic everything mirrors by the page's `dir`.
+ */
+
+export interface FooterOffice {
+  /** The city, as the office's heading. */
+  city: string
+  /** The address, one line per entry. */
+  address: string[]
+  /** The office's email address. */
+  email: string
+  /** The office's photo. Without one the slot shows the muted ground at the same size. */
+  image?: FooterPhoto
+}
+
+export interface FooterContactFirstCopy {
+  /** The small label above the address. */
+  label: string
+  /** The address to write to, set large. Hidden when empty. */
+  email: string
+  /** The sentence under it. Hidden when empty. */
+  sub: string
+  /** The offices, in reading order. */
+  offices: FooterOffice[]
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. Hidden when empty. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+  /** The accessible name of the social marks. */
+  socialLabel: string
+  /** The accessible name of the list of offices. */
+  officesLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterContactFirstCopy> = {
+  en: {
+    label: "Start a conversation",
+    email: "you@company.com",
+    sub: "Or book time directly with a design engineer — we answer within one business day.",
+    offices: [
+      { city: "Example City", address: ["123 Example Street", "12345 Example City"], email: "you@company.com" },
+      { city: "Sample Town", address: ["456 Sample Road", "54321 Sample Town"], email: "you@company.com" },
+    ],
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: ["Privacy", "Terms", "Cookies"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+    socialLabel: "Social",
+    officesLabel: "Offices",
+  },
+  ar: {
+    label: "ابدأ محادثة",
+    email: "you@company.com",
+    sub: "أو احجز وقتًا مباشرة مع مهندس تصميم، ونجيب خلال يوم عمل واحد.",
+    offices: [
+      { city: "مدينة المثال", address: ["123 شارع المثال", "12345 مدينة المثال"], email: "you@company.com" },
+      { city: "بلدة النموذج", address: ["456 شارع النموذج", "54321 بلدة النموذج"], email: "you@company.com" },
+    ],
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "ملفات تعريف الارتباط"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+    socialLabel: "التواصل الاجتماعي",
+    officesLabel: "المكاتب",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerContactFirstCopy = COPY
+
+export interface FooterContactFirstProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterContactFirstCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["linkedin", "x", "github", "instagram", "youtube"]
+
+/** Latin and digit runs inside Arabic text keep their own direction. */
+const LATIN = /([A-Za-z0-9][A-Za-z0-9@.:/+_–-]*(?:\s[A-Za-z0-9][A-Za-z0-9@.:/+_–-]*)*)/g
+function bidi(text: string, on: boolean): React.ReactNode {
+  if (!on) return text
+  return text.split(LATIN).map((part, index) =>
+    index % 2 ? (
+      <bdi key={index} dir="ltr">
+        {part}
+      </bdi>
+    ) : (
+      part
+    )
+  )
+}
+
+/**
+ * The address to write to: 5XL Light with an arrow-up-right. Hover and focus move
+ * the arrow 6px up and towards the end (mirrored in Arabic) and draw the underline,
+ * 220ms ease-out, only where a pointer can hover and motion is allowed.
+ */
+const LEAD_LINK =
+  "group relative inline-flex items-center gap-3 rounded-sm text-foreground transition-colors duration-[120ms] [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:text-muted-foreground hover:motion-reduce:text-muted-foreground focus-visible:motion-reduce:text-muted-foreground [@container(min-width:64rem)]:gap-4"
+const LEAD_TEXT =
+  "inline-block bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-[position:0_100%] bg-no-repeat text-2xl font-light transition-[background-size] duration-[220ms] ease-out motion-reduce:transition-none rtl:bg-[position:100%_100%] group-hover:motion-safe:[@container(min-width:40rem)]:bg-[length:100%_1px] motion-safe:group-focus-visible:bg-[length:100%_1px] [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-5xl"
+const LEAD_ARROW =
+  "inline-flex shrink-0 opacity-60 transition-[transform,opacity] duration-[220ms] ease-out motion-reduce:transition-none group-hover:[@container(min-width:40rem)]:opacity-100 group-focus-visible:opacity-100 group-hover:motion-safe:[@container(min-width:40rem)]:-translate-y-1.5 group-hover:motion-safe:[@container(min-width:40rem)]:translate-x-1.5 group-hover:motion-safe:rtl:[@container(min-width:40rem)]:-translate-x-1.5 motion-safe:group-focus-visible:-translate-y-1.5 motion-safe:group-focus-visible:translate-x-1.5 motion-safe:rtl:group-focus-visible:-translate-x-1.5"
+
+export function FooterContactFirst({
+  locale = "en",
+  label,
+  email,
+  sub,
+  offices,
+  copyright,
+  legal,
+  legalLabel,
+  socialLabel,
+  officesLabel,
+  socials = DEFAULT_SOCIALS,
+  className,
+  ...props
+}: FooterContactFirstProps) {
+  const copy = COPY[locale]
+  const ar = locale === "ar"
+  const lead = email ?? copy.email
+  const text = label ?? copy.label
+  const subline = sub ?? copy.sub
+  const places = offices ?? copy.offices
+  const links = legal ?? copy.legal
+  return (
+    <FooterSection
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8 lg:pt-20", className)}
+      contentClassName="gap-8 [@container(min-width:40rem)]:gap-12 [@container(min-width:64rem)]:gap-16"
+      {...props}
+    >
+      {text || lead || subline ? (
+        <div className="flex flex-col items-start gap-3 [@container(min-width:64rem)]:gap-4">
+          {text ? <p className="text-list-header font-medium uppercase text-muted-foreground">{text}</p> : null}
+          {lead ? (
+            <a href={`mailto:${lead}`} className={LEAD_LINK}>
+              <span className={LEAD_TEXT}>
+                <bdi dir="ltr">{lead}</bdi>
+              </span>
+              <span aria-hidden="true" className={LEAD_ARROW}>
+                <ArrowUpRightIcon className="size-8 rtl:-scale-x-100" strokeWidth={1.5} />
+              </span>
+            </a>
+          ) : null}
+          {subline ? <p className="text-base text-muted-foreground">{bidi(subline, ar)}</p> : null}
+        </div>
+      ) : null}
+      {places.length ? (
+        <ul aria-label={officesLabel ?? copy.officesLabel} className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2">
+          {places.map((office) => (
+            <li key={`${office.city}-${office.email}`} className="flex min-w-0 flex-col gap-3 [@container(min-width:64rem)]:gap-4">
+              <div className="h-[170px] w-full overflow-hidden rounded-lg bg-muted [@container(min-width:40rem)]:h-[180px] [@container(min-width:64rem)]:h-[200px] [@container(min-width:64rem)]:w-[400px] [@container(min-width:64rem)]:max-w-full">
+                {office.image ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={office.image.src} alt={office.image.alt} loading="lazy" className="size-full object-cover" />
+                ) : null}
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">{office.city}</h3>
+              <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+                {office.address.map((line) => (
+                  <p key={line}>{bidi(line, ar)}</p>
+                ))}
+              </div>
+              {office.email ? (
+                <a
+                  href={`mailto:${office.email}`}
+                  className="relative inline-flex w-fit items-center gap-2 rounded-sm text-sm font-medium text-foreground transition-colors duration-[120ms] motion-reduce:transition-none [outline:none] hover:text-muted-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:text-muted-foreground after:absolute after:-inset-x-1 after:-inset-y-3 after:content-['']"
+                >
+                  <MailIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                  <bdi dir="ltr">{office.email}</bdi>
+                </a>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <FooterRule />
+      <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+        <div className="flex flex-col items-start gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:gap-6">
+          <FooterLogo className="h-6" />
+          <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+          {links.length ? (
+            <nav aria-label={legalLabel ?? copy.legalLabel}>
+              <ul className="flex flex-wrap items-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+                {links.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+        {socials.length ? (
+          <nav aria-label={socialLabel ?? copy.socialLabel}>
+            <ul className="flex items-center gap-3 [@container(min-width:64rem)]:gap-4">
+              {socials.map((platform) => (
+                <li key={platform} className="flex">
+                  <a
+                    href="#"
+                    aria-label={SOCIAL_PLATFORM_NAMES[platform]}
+                    className="relative inline-flex rounded-sm [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-3.5 after:content-['']"
+                  >
+                    <SocialIcon platform={platform} color="negative" className="size-[18px]" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-contact-first/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterContactFirst,
+  footerContactFirstCopy,
+  type FooterContactFirstCopy,
+  type FooterContactFirstProps,
+  type FooterOffice,
+} from "./FooterContactFirst"

package/registry/blocks/footer-contact.test.tsx

@@ -0,0 +1,285 @@
+import * as React from "react"
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { act, render, screen } from "@testing-library/react"
+import { FooterContactFirst, footerContactFirstCopy } from "./footer-contact-first"
+import { FooterSupportContact, footerSupportContactCopy } from "./footer-support-contact"
+import { FooterLocalBusiness, footerLocalBusinessCopy } from "./footer-local-business"
+
+/** Whether some class on `cls` has every variant in `spec`, in any order, and the same utility: `a:b:x` matches `b:a:x`. */
+function hasVariants(cls: string, spec: string): boolean {
+  const split = (token: string) => {
+    const out: string[] = []
+    let cur = ""
+    let depth = 0
+    for (const ch of token) {
+      if (ch === "[" || ch === "(") depth++
+      if (ch === "]" || ch === ")") depth--
+      if (ch === ":" && depth === 0) {
+        out.push(cur)
+        cur = ""
+      } else cur += ch
+    }
+    out.push(cur)
+    return out
+  }
+  const want = split(spec)
+  const util = want.pop()
+  return cls.split(/\s+/).some((token) => {
+    const have = split(token)
+    return have.pop() === util && want.every((variant) => have.includes(variant))
+  })
+}
+
+
+// What these tests can and cannot prove: jsdom has no layout, no Web Animations
+// and no hover, so the 220ms arrow and underline, the card lift, the breakpoints
+// and the photo sizes were checked in a browser. Here `Element.animate`,
+// `matchMedia` and `IntersectionObserver` are stubs, so the tests assert the
+// contract around the motion (what starts it, the timings handed to it, what
+// reduced motion does instead) and the classes that carry the hover and focus
+// rules, the copy, the landmarks and the empty cases.
+
+type Animation = { el: Element; keyframes: Keyframe[]; options: KeyframeAnimationOptions }
+let animations: Animation[] = []
+let observers: { callback: IntersectionObserverCallback; live: boolean }[] = []
+
+const setMotion = (reduced: boolean) => {
+  window.matchMedia = ((query: string) => ({
+    matches: reduced && query.includes("reduce"),
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia
+}
+
+beforeEach(() => {
+  animations = []
+  observers = []
+  setMotion(false)
+  Element.prototype.animate = function (this: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions) {
+    animations.push({ el: this, keyframes, options })
+    return {} as globalThis.Animation
+  } as typeof Element.prototype.animate
+  window.IntersectionObserver = class {
+    entry: { callback: IntersectionObserverCallback; live: boolean }
+    constructor(callback: IntersectionObserverCallback) {
+      this.entry = { callback, live: true }
+      observers.push(this.entry)
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {
+      this.entry.live = false
+    }
+    takeRecords() {
+      return []
+    }
+  } as unknown as typeof IntersectionObserver
+})
+afterEach(() => {
+  // @ts-expect-error the stubs are removed again
+  delete window.matchMedia
+  // @ts-expect-error the stubs are removed again
+  delete Element.prototype.animate
+  // @ts-expect-error the stubs are removed again
+  delete window.IntersectionObserver
+})
+
+const strings = (value: unknown): string[] =>
+  typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : []
+
+const intersect = () => act(() => observers.filter((o) => o.live).forEach((o) => o.callback([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)))
+
+const TYPES = [
+  { name: "Contact-First", Component: FooterContactFirst, copy: footerContactFirstCopy, text: { en: "Start a conversation", ar: "ابدأ محادثة" }, navs: 2, empty: { offices: [], legal: [], socials: [], sub: "", email: "", label: "" } },
+  { name: "Support & Contact", Component: FooterSupportContact, copy: footerSupportContactCopy, text: { en: "How can we help?", ar: "كيف نساعدك؟" }, navs: 2, empty: { topics: [], channels: [], legal: [] } },
+  { name: "Local Business", Component: FooterLocalBusiness, copy: footerLocalBusinessCopy, text: { en: "Opening hours", ar: "ساعات العمل" }, navs: 2, empty: { hours: [], address: [], legal: [], socials: [], mapLabel: [], email: "" } },
+] as const
+
+describe.each(TYPES)("$name", ({ Component, copy, text, navs, empty }) => {
+  const C = Component as React.ComponentType<Record<string, unknown>>
+  it.each(["en", "ar"] as const)("renders in %s with one footer landmark and the Figma copy", (locale) => {
+    const { container } = render(<C locale={locale} />)
+    expect(container.querySelectorAll("footer")).toHaveLength(1)
+    expect(screen.getAllByRole("contentinfo")).toHaveLength(1)
+    expect(container.textContent).toContain(text[locale])
+  })
+
+  it.each(["en", "ar"] as const)("labels every link group in %s", (locale) => {
+    const { container } = render(<C locale={locale} />)
+    const groups = container.querySelectorAll("nav")
+    expect(groups.length).toBeGreaterThanOrEqual(navs - 1)
+    groups.forEach((nav) => expect(nav.getAttribute("aria-label")?.trim()).toBeTruthy())
+  })
+
+  it("has no em dash or middle dot in the Arabic copy", () => {
+    for (const value of strings((copy as Record<string, unknown>).ar)) expect(value).not.toMatch(/[—·]/)
+  })
+
+  it("accepts empty collections without crashing or drawing an empty group", () => {
+    const { container } = render(<C {...empty} />)
+    expect(container.querySelectorAll("footer")).toHaveLength(1)
+    expect(container.querySelectorAll("ul:empty, nav ul:empty")).toHaveLength(0)
+  })
+})
+
+describe("Contact-First", () => {
+  it("draws the address as a mailto link with an arrow that mirrors in RTL and 220ms hover and focus rules", () => {
+    const { container } = render(<FooterContactFirst />)
+    const link = container.querySelector("a[href='mailto:you@company.com']") as HTMLElement
+    expect(link.className).toContain("group")
+    const arrow = link.querySelector("svg") as SVGElement
+    expect(arrow.getAttribute("class")).toContain("rtl:-scale-x-100")
+    const mover = arrow.parentElement as HTMLElement
+    expect(mover.className).toContain("duration-[220ms]")
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover:-translate-y-1.5")).toBe(true)
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover:translate-x-1.5")).toBe(true)
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover:rtl:[@container(min-width:40rem)]:-translate-x-1.5")).toBe(true)
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-focus-visible:-translate-y-1.5")).toBe(true)
+    expect(mover.className).toContain("opacity-60")
+    expect(hasVariants(mover.getAttribute("class") ?? "", "motion-reduce:transition-none")).toBe(true)
+    const underline = link.querySelector("span") as HTMLElement
+    expect(underline.className).toContain("duration-[220ms]")
+    expect(hasVariants(underline.getAttribute("class") ?? "", "rtl:bg-[position:100%_100%]")).toBe(true)
+    expect(hasVariants(underline.getAttribute("class") ?? "", "group-focus-visible:bg-[length:100%_1px]")).toBe(true)
+  })
+
+  it("only moves where hover exists and motion is allowed, and tints on :active", () => {
+    const { container } = render(<FooterContactFirst />)
+    const link = container.querySelector("a[href='mailto:you@company.com']") as HTMLElement
+    expect(hasVariants(link.getAttribute("class") ?? "", "active:text-muted-foreground")).toBe(true)
+    expect(hasVariants(link.getAttribute("class") ?? "", "hover:motion-reduce:text-muted-foreground")).toBe(true)
+    const mover = link.querySelectorAll("span")[1]!
+    expect(mover.className.split(/\s+/).filter((c) => c.includes("group-hover")).every((c) => c.includes("[@container(min-width:40rem)]"))).toBe(true)
+    expect(mover.className).toContain("motion-safe:")
+  })
+
+  it("shows a photo per office when given, the muted ground when not", () => {
+    const { container, rerender } = render(<FooterContactFirst />)
+    expect(container.querySelectorAll("img")).toHaveLength(0)
+    expect(container.querySelectorAll("ul > li > div.bg-muted")).toHaveLength(2)
+    rerender(
+      <FooterContactFirst
+        offices={[
+          { city: "A", address: ["1 Road"], email: "a@x.com", image: { src: "/a.jpg", alt: "Office A" } },
+          { city: "B", address: ["2 Road"], email: "b@x.com" },
+        ]}
+      />
+    )
+    const img = screen.getByAltText("Office A")
+    expect(img.getAttribute("loading")).toBe("lazy")
+    expect(img.className).not.toContain("scale-x")
+    expect(container.querySelectorAll("img")).toHaveLength(1)
+  })
+
+  it("writes the Arabic digits and emails as left-to-right runs", () => {
+    const { container } = render(<FooterContactFirst locale="ar" />)
+    const runs = Array.from(container.querySelectorAll("bdi[dir='ltr']")).map((n) => n.textContent)
+    expect(runs).toContain("123")
+    expect(runs).toContain("you@company.com")
+  })
+})
+
+describe("Support & Contact", () => {
+  it("has a search field with a search icon and a name", () => {
+    const { container } = render(<FooterSupportContact />)
+    const field = screen.getByRole("searchbox", { name: /Search the help centre/ })
+    expect(field).toBeTruthy()
+    expect(container.querySelectorAll("svg.lucide-search, svg[class*='lucide-search']").length).toBeGreaterThan(0)
+  })
+
+  it("draws three channel cards, each with an arrow that mirrors in RTL and slides only where hover exists", () => {
+    const { container } = render(<FooterSupportContact />)
+    const cards = container.querySelectorAll("ul[aria-label='Contact channels'] > li")
+    expect(cards).toHaveLength(3)
+    cards.forEach((card) => {
+      const arrow = card.querySelector("a svg") as SVGElement
+      expect(arrow.getAttribute("class")).toContain("rtl:-scale-x-100")
+      const mover = arrow.parentElement as HTMLElement
+      expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover/card:motion-safe:[@container(min-width:40rem)]:translate-x-1")).toBe(true)
+      expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover/card:rtl:[@container(min-width:40rem)]:-translate-x-1")).toBe(true)
+      const surface = card.firstElementChild as HTMLElement
+      expect(surface.className).toContain("shadow-sm")
+      expect(hasVariants(surface.getAttribute("class") ?? "", "hover:shadow-md")).toBe(true)
+      expect(hasVariants(surface.getAttribute("class") ?? "", "hover:-translate-y-0.5")).toBe(true)
+      expect(surface.className).toContain("duration-[160ms]")
+      expect(hasVariants(surface.getAttribute("class") ?? "", "active:shadow-md")).toBe(true)
+    })
+  })
+
+  it("brings the topic links in 40ms apart on first view, and nothing before", () => {
+    render(<FooterSupportContact />)
+    expect(animations).toHaveLength(0)
+    intersect()
+    expect(animations).toHaveLength(6)
+    expect(animations.map((a) => a.options.delay)).toEqual([0, 40, 80, 120, 160, 200])
+    expect(animations.every((a) => (a.el as HTMLElement).hasAttribute("data-reveal"))).toBe(true)
+  })
+
+  it("plays no entrance under reduced motion", () => {
+    setMotion(true)
+    render(<FooterSupportContact />)
+    intersect()
+    expect(animations).toHaveLength(0)
+  })
+
+  it("writes Arabic availability with its numbers and zone as left-to-right runs", () => {
+    const { container } = render(<FooterSupportContact locale="ar" />)
+    const runs = Array.from(container.querySelectorAll("bdi[dir='ltr']")).map((n) => n.textContent)
+    expect(runs).toContain("09:00")
+    expect(runs).toContain("18:00 CET")
+  })
+})
+
+describe("Local Business", () => {
+  it("shortens a long email inside its button instead of pushing the page sideways", () => {
+    // Found at the 40-character documented limit on a 360px phone: the email button was 351px wide in a 328px column.
+    render(<FooterLocalBusiness email="a-really-long-address-at-the-limit@example.com" />)
+    const link = screen.getByRole("link", { name: /a-really-long-address/ })
+    expect(link.className).toContain("max-w-full")
+    expect(link.className).toContain("min-w-0")
+    expect(link.querySelector("bdi")!.className).toContain("truncate")
+  })
+
+  it("shows the map photo when given and the muted ground when not", () => {
+    const { container, rerender } = render(<FooterLocalBusiness />)
+    expect(container.querySelectorAll("img")).toHaveLength(0)
+    expect(container.querySelector(".bg-muted")).toBeTruthy()
+    rerender(<FooterLocalBusiness map={{ src: "/map.jpg", alt: "Map of the studio" }} />)
+    const img = screen.getByAltText("Map of the studio")
+    expect(img.getAttribute("loading")).toBe("lazy")
+    expect(img.className).not.toContain("scale-x")
+  })
+
+  it("draws the pill with a dot between its parts in English and without one in Arabic", () => {
+    const { container, rerender } = render(<FooterLocalBusiness />)
+    const pill = () => container.querySelector(".rounded-full.bg-background") as HTMLElement
+    expect(pill().textContent).toBe("Fasla StudioExample City")
+    expect(pill().querySelectorAll("span[aria-hidden='true'].rounded-full")).toHaveLength(1)
+    rerender(<FooterLocalBusiness locale="ar" />)
+    expect(pill().querySelectorAll("span[aria-hidden='true'].rounded-full")).toHaveLength(0)
+    expect(pill().textContent).not.toMatch(/[·—]/)
+  })
+
+  it("has two buttons: Get directions (solid primary) and the email (outline)", () => {
+    render(<FooterLocalBusiness />)
+    const directions = screen.getByRole("link", { name: "Get directions" })
+    const email = screen.getByRole("link", { name: "you@company.com" })
+    expect(directions.querySelector("svg")).toBeTruthy()
+    expect(email.querySelector("svg")).toBeTruthy()
+    expect(directions.className).toContain("h-9")
+    expect(email.className).toContain("h-9")
+    expect(directions.className).toContain("bg-primary")
+    expect(email.className).not.toContain("bg-primary")
+  })
+
+  it("lists three opening-hours rows", () => {
+    const { container } = render(<FooterLocalBusiness />)
+    expect(container.querySelectorAll("li.border-b")).toHaveLength(3)
+    expect(screen.getAllByText("Closed")).toHaveLength(2)
+  })
+})

package/registry/blocks/footer-controls.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { render } from "@testing-library/react"
+import hidden from "../../../../apps/storybook/stories/blocks/footer/footer-hidden-controls.json"
+
+// Storybook's Controls table for every Footer story. The rule: every control in
+// the table visibly changes the preview, so a copy prop that changes nothing
+// on screen (an accessible name, a message shown only after the visitor acts)
+// is hidden from the table. `footer-hidden-controls.json` (beside the stories)
+// lists the hidden ones per story; the stories read it. This test renders each
+// Type once per copy prop with an Arabic string typed in and proves both
+// halves: a control that is not hidden shows the typed text on screen (as text
+// or as the field's placeholder), and a hidden one does not. jsdom has no CSS,
+// so a prop that is only hidden at one breakpoint cannot be told apart here;
+// the browser pass over the running Storybook covers that and the non-text controls.
+
+// Vite's glob import, which the package's tsconfig does not type.
+const modules = (import.meta as unknown as { glob: (pattern: string, options: { eager: true }) => Record<string, Record<string, unknown>> }).glob("./footer-*/Footer*.tsx", { eager: true })
+
+const TYPED = "ZQ مرحبا"
+/** The messages blockArgTypes already drops from every table: they show only once the visitor acts. */
+const BY_RULE = new Set(["pendingLabel", "retryingLabel", "success", "error", "emailError", "retryError", "requestError", "sendError", "requiredError", "consentError", "againLabel", "thanks", "copiedLabel", "cancelled", "redirecting", "empty"])
+const hiddenByStory = hidden as Record<string, string[]>
+
+/** Stories beyond the one-per-Type: the newsletter's forced states, with the prop the story sets. */
+const STATES: Record<string, Record<string, unknown>> = {
+  "newsletter-split-loading": { status: "loading" },
+  "newsletter-split-sent": { status: "sent" },
+  "newsletter-split-error": { status: "error" },
+}
+
+const stories = Object.entries(modules).flatMap(([path, mod]) => {
+  const slug = path.split("/")[1]!.replace(/^footer-/, "")
+  const Component = Object.entries(mod).find(([name, value]) => /^Footer[A-Z]/.test(name) && typeof value === "function")?.[1] as React.ComponentType<Record<string, unknown>>
+  const copy = Object.entries(mod).find(([name]) => /^footer.*Copy$/.test(name))?.[1] as { en: Record<string, unknown> }
+  const states = Object.entries(STATES).filter(([id]) => id.startsWith(`${slug}-`)).map(([id, props]) => ({ id, props }))
+  return [{ id: slug, props: {} }, ...states].map(({ id, props }) => ({ id, slug, Component, copy, props }))
+})
+
+beforeEach(() => {
+  window.matchMedia = ((query: string) => ({ matches: false, media: query, addEventListener() {}, removeEventListener() {}, addListener() {}, removeListener() {}, onchange: null, dispatchEvent: () => false })) as typeof window.matchMedia
+})
+afterEach(() => {
+  vi.restoreAllMocks()
+  // @ts-expect-error the stub is removed again
+  delete window.matchMedia
+})
+
+const shows = (container: HTMLElement) =>
+  (container.textContent ?? "").includes(TYPED) || [...container.querySelectorAll("input")].some((input) => input.placeholder.includes(TYPED))
+
+describe("Footer Storybook controls", () => {
+  it("covers all 33 Types", () => {
+    expect(new Set(stories.map((story) => story.slug)).size).toBe(33)
+  })
+
+  describe.each(stories)("$id", ({ id, Component, copy, props }) => {
+    const keys = Object.entries(copy.en).filter(([key, value]) => typeof value === "string" && !/Href$/.test(key) && !BY_RULE.has(key)).map(([key]) => key)
+
+    it("hides exactly the copy props that change nothing on screen", () => {
+      const silent = keys.filter((key) => {
+        const { container } = render(<Component locale="en" {...props} {...{ [key]: TYPED }} />)
+        const result = !shows(container)
+        container.remove()
+        return result
+      })
+      expect(silent.sort()).toEqual([...(hiddenByStory[id] ?? [])].sort())
+    })
+
+    it("shows Arabic typed into an English story, for every control left in the table", () => {
+      for (const key of keys.filter((key) => !(hiddenByStory[id] ?? []).includes(key))) {
+        const { container } = render(<Component locale="en" {...props} {...{ [key]: TYPED }} />)
+        expect(shows(container), `${id}: ${key}`).toBe(true)
+        container.remove()
+      }
+    })
+  })
+})