@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/footer-two-tier-doormat/FooterTwoTierDoormat.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import { LifeBuoyIcon, MailIcon, MapPinIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { FaslaLogo } from "../../ui/fasla-logo/fasla-logo"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import {
+  FOOTER_COMMON,
+  FooterColumnTitle,
+  FooterCopyright,
+  FooterLinkItem,
+  FooterRule,
+  FooterSection,
+  type FooterColumn,
+  type FooterLink,
+  type FooterLocale,
+} from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Two-Tier Doormat.
+ *
+ * Two tiers. The doormat is five link columns of five links (Platform,
+ * Solutions, Resources, Community, Company). Under a hairline, the contact
+ * tier is four small cards (Head office, Talk to sales, Product support, Press
+ * & partnerships) with a Lucide icon in a 32px box, a title and two lines.
+ * Then a hairline and a legal bar: the logo and the copyright, the legal links
+ * and four 18px social marks. No motion: Figma has no chip for this Type.
+ *
+ * Desktop (Figma 1440): five columns 40px apart; four cards across. Tablet
+ * (768): three columns across, then two cards across. Mobile (360): two
+ * columns across and the cards stacked, the legal bar stacked. In Arabic
+ * everything mirrors by the page's `dir`; digits and addresses keep their own
+ * direction inside the Arabic lines.
+ *
+ * STAND-INS (temporary):
+ *  - `FooterContactCard` is a plain card (`card` surface, 1px `border`, 10px
+ *    radius, `shadow-sm`, which is Figma's `xs` on Tailwind 3). The library's
+ *    Card atom is 14px-rounded with a heavier shadow, and a block does not
+ *    restyle an atom.
+ */
+
+export type FooterContactIcon = "map-pin" | "mail" | "life-buoy"
+
+export interface FooterContact {
+  icon: FooterContactIcon
+  title: string
+  /** The lines under the title; the two Figma shows. */
+  lines: string[]
+}
+
+export interface FooterTwoTierDoormatCopy {
+  /** The doormat's link columns, in reading order. */
+  columns: FooterColumn[]
+  /** The contact cards, in reading order. */
+  contacts: FooterContact[]
+  copyright: string
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+}
+
+const links = (...labels: string[]): FooterLink[] => labels.map((label) => ({ label, href: "#" }))
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterTwoTierDoormatCopy> = {
+  en: {
+    columns: [
+      { title: "Platform", links: links("Overview", "Components", "Blocks", "Templates", "Integrations") },
+      { title: "Solutions", links: links("Design teams", "Engineering", "Agencies", "Enterprise", "Startups") },
+      { title: "Resources", links: links("Documentation", "Guides", "Blog", "Webinars", "Case studies") },
+      { title: "Community", links: links("Community chat", "Code repo", "Showcase", "Contributors", "Events") },
+      { title: "Company", links: links("About", "Careers", "Press", "Partners", "Contact") },
+    ],
+    contacts: [
+      { icon: "map-pin", title: "Head office", lines: ["123 Example Street", "12345 Example City"] },
+      { icon: "mail", title: "Talk to sales", lines: ["you@company.com", "company.com/contact"] },
+      { icon: "life-buoy", title: "Product support", lines: ["help.fasla.design", "Mon–Fri, 09:00–18:00 CET"] },
+      { icon: "mail", title: "Press & partnerships", lines: ["you@company.com", "Media kit and brand assets"] },
+    ],
+    copyright: FOOTER_COMMON.en.copyright,
+    legal: links("Privacy", "Terms", "Cookies"),
+    legalLabel: "Legal links",
+  },
+  ar: {
+    columns: [
+      { title: "المنصة", links: links("نظرة عامة", "المكوّنات", "الكتل", "القوالب", "التكاملات") },
+      { title: "الحلول", links: links("فرق التصميم", "الهندسة", "الوكالات", "المؤسسات", "الشركات الناشئة") },
+      { title: "الموارد", links: links("التوثيق", "الأدلة", "المدونة", "الندوات", "دراسات الحالة") },
+      { title: "المجتمع", links: links("دردشة المجتمع", "مستودع الشيفرة", "المعرض", "المساهمون", "الفعاليات") },
+      { title: "الشركة", links: links("من نحن", "الوظائف", "الصحافة", "الشركاء", "اتصل بنا") },
+    ],
+    contacts: [
+      { icon: "map-pin", title: "المقر الرئيسي", lines: ["123 شارع المثال", "12345 مدينة المثال"] },
+      { icon: "mail", title: "تحدّث إلى المبيعات", lines: ["you@company.com", "company.com/contact"] },
+      { icon: "life-buoy", title: "دعم المنتج", lines: ["help.fasla.design", "الاثنين–الجمعة، 09:00–18:00 CET"] },
+      { icon: "mail", title: "الصحافة والشراكات", lines: ["you@company.com", "الملف الإعلامي وأصول الهوية"] },
+    ],
+    copyright: FOOTER_COMMON.ar.copyright,
+    legal: links("الخصوصية", "الشروط", "ملفات تعريف الارتباط"),
+    legalLabel: "روابط قانونية",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerTwoTierDoormatCopy = COPY
+
+/** Numbers, emails, addresses and Latin words inside an Arabic line keep their own direction. */
+function bidi(text: string, locale: FooterLocale): React.ReactNode {
+  if (locale !== "ar") return text
+  return text.split(/([A-Za-z0-9][A-Za-z0-9@./:–-]*(?:\s[A-Z]{2,4}\b)?)/).map((part, index) => (index % 2 ? <bdi key={index} dir="ltr">{part}</bdi> : part))
+}
+
+const ICONS = { "map-pin": MapPinIcon, mail: MailIcon, "life-buoy": LifeBuoyIcon } as const
+
+function FooterContactCard({ contact, locale }: { contact: FooterContact; locale: FooterLocale }) {
+  const Icon = ICONS[contact.icon]
+  return (
+    <div className="flex h-full w-full min-w-0 flex-col gap-2 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm [@container(min-width:40rem)]:gap-3 [@container(min-width:40rem)]:p-5 [@container(min-width:64rem)]:p-6">
+      <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-md bg-secondary">
+        <Icon className="size-4" strokeWidth={1.5} />
+      </span>
+      <h3 className="text-sm font-semibold">{contact.title}</h3>
+      {contact.lines.length ? (
+        <div className="flex flex-col gap-1">
+          {contact.lines.map((line) => (
+            <p key={line} className="text-xs text-muted-foreground">
+              {bidi(line, locale)}
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function DoormatColumn({ column }: { column: FooterColumn }) {
+  const id = React.useId()
+  return (
+    <nav aria-labelledby={id} className="flex min-w-0 flex-col gap-3 [@container(min-width:64rem)]:gap-4">
+      <FooterColumnTitle id={id}>{column.title}</FooterColumnTitle>
+      <ul className="flex flex-col gap-2 [@container(min-width:40rem)]:gap-3">
+        {column.links.map((link) => (
+          <li key={`${link.label}-${link.href}`} className="flex">
+            <FooterLinkItem link={link} />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+/** The social marks at Figma's 18px for this Type: 12px apart (8 on phones). Marks are never mirrored. */
+function SocialMarks({ platforms }: { platforms: SocialPlatform[] }) {
+  return (
+    <ul className="flex items-center gap-2 [@container(min-width:40rem)]:gap-3">
+      {platforms.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 after:content-['']"
+          >
+            <SocialIcon platform={platform} color="negative" className="size-[18px]" />
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export interface FooterTwoTierDoormatProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterTwoTierDoormatCopy> {
+  /** 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"]
+
+export function FooterTwoTierDoormat({ locale = "en", columns, contacts, copyright, legal, legalLabel, socials = DEFAULT_SOCIALS, className, ...props }: FooterTwoTierDoormatProps) {
+  const copy = COPY[locale]
+  const cols = (columns ?? copy.columns).filter((column) => column.links.length > 0)
+  const cards = contacts ?? copy.contacts
+  const legalLinks = legal ?? copy.legal
+  return (
+    <FooterSection
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8", className)}
+      contentClassName="gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10"
+      {...props}
+    >
+      {cols.length ? (
+        <div className="grid grid-cols-2 gap-x-4 gap-y-6 [@container(min-width:40rem)]:grid-cols-3 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:grid-cols-5 [@container(min-width:64rem)]:gap-x-10">
+          {cols.map((column) => (
+            <DoormatColumn key={column.title} column={column} />
+          ))}
+        </div>
+      ) : null}
+      {cols.length && cards.length ? <FooterRule /> : null}
+      {cards.length ? (
+        <ul className="grid auto-rows-fr grid-cols-[minmax(0,1fr)] gap-4 [@container(min-width:40rem)]:grid-cols-[repeat(2,minmax(0,1fr))] [@container(min-width:64rem)]:grid-cols-[repeat(4,minmax(0,1fr))]">
+          {cards.map((contact) => (
+            <li key={contact.title} className="flex min-w-0">
+              <FooterContactCard contact={contact} locale={locale} />
+            </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 items-center gap-3 [@container(min-width:64rem)]:gap-4">
+          <FaslaLogo className="h-6" title="" />
+          <FooterCopyright>{bidi(copyright ?? copy.copyright, locale)}</FooterCopyright>
+        </div>
+        <div className="flex flex-col 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">
+          {legalLinks.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">
+                {legalLinks.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+          {socials.length ? <SocialMarks platforms={socials} /> : null}
+        </div>
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-two-tier-doormat/index.ts

@@ -0,0 +1,8 @@
+export {
+  FooterTwoTierDoormat,
+  footerTwoTierDoormatCopy,
+  type FooterContact,
+  type FooterContactIcon,
+  type FooterTwoTierDoormatCopy,
+  type FooterTwoTierDoormatProps,
+} from "./FooterTwoTierDoormat"

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

@@ -0,0 +1,406 @@
+import * as React from "react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import { FooterDashboardSlimBar, footerDashboardSlimBarCopy } from "./footer-dashboard-slim-bar"
+import { FooterDocsPage, footerDocsPageCopy } from "./footer-docs-page"
+import { FooterMultiRegion, footerMultiRegionCopy } from "./footer-multi-region"
+import { FooterProductFamilySwitcher, footerProductFamilySwitcherCopy } from "./footer-product-family-switcher"
+
+/** 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 container
+// queries and no hover, so the items Figma drops by breakpoint, the card lift,
+// the chevron slide and the scroll position were checked in a browser. Here
+// `matchMedia` and `scrollIntoView` are stubs, so the tests assert the
+// contract: what is on the page, which classes carry the drops and the hover,
+// how the vote and the region choice change the DOM, and what reduced motion
+// does instead.
+
+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(() => setMotion(false))
+afterEach(() => {
+  vi.restoreAllMocks()
+  // @ts-expect-error the stubs are removed again
+  delete window.matchMedia
+})
+
+const strings = (value: unknown): string[] =>
+  typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : []
+
+const landmarks = (container: HTMLElement) => {
+  expect(container.querySelectorAll("footer")).toHaveLength(1)
+  expect(screen.getAllByRole("contentinfo")).toHaveLength(1)
+  const navs = screen.getAllByRole("navigation")
+  navs.forEach((nav) => expect(nav.getAttribute("aria-label") || nav.getAttribute("aria-labelledby")).toBeTruthy())
+  return navs
+}
+
+const hasClass = (el: Element, text: string) => (el.getAttribute("class") ?? "").includes(text)
+
+describe.each(["en", "ar"] as const)("Dashboard Slim Bar (%s)", (locale) => {
+  const copy = footerDashboardSlimBarCopy[locale]
+
+  it("renders one footer landmark with a labelled nav for the release link and one for the help links", () => {
+    const { container } = render(<FooterDashboardSlimBar locale={locale} />)
+    expect(landmarks(container)).toHaveLength(2)
+    expect(screen.getByRole("navigation", { name: copy.releaseLabel })).toBeTruthy()
+    expect(screen.getByRole("navigation", { name: copy.helpLinksLabel })).toBeTruthy()
+  })
+
+  it("draws the online dot, the status, the version, the changelog, the hint, three links and the help Icon Button", () => {
+    const { container } = render(<FooterDashboardSlimBar locale={locale} />)
+    expect(screen.getByText(copy.status)).toBeTruthy()
+    expect(container.querySelector("span.bg-success .sr-only")?.textContent).toBe(copy.statusLabel)
+    expect(screen.getByText(copy.version)).toBeTruthy()
+    expect(screen.getByRole("link", { name: copy.changelog.label })).toBeTruthy()
+    expect(screen.getByText(copy.searchHint)).toBeTruthy()
+    expect(container.querySelector("kbd")?.textContent).toBe("⌘K")
+    copy.links.forEach((link) => expect(screen.getByRole("link", { name: link.label })).toBeTruthy())
+    const help = screen.getByRole("button", { name: copy.helpLabel })
+    expect(hasClass(help, "size-[1.625rem]")).toBe(true)
+    expect(container.querySelector("span.bg-success.size-2")).toBeTruthy()
+  })
+
+  it("keeps the English wording from Figma", () => {
+    if (locale !== "en") return
+    expect([copy.status, copy.version, copy.changelog.label, copy.searchHint, ...copy.links.map((l) => l.label)]).toEqual(["System status", "Latest", "Changelog", "to search", "Documentation", "Support", "Send feedback"])
+  })
+
+  it("has no em dash or middle dot in the Arabic copy; the facts are separated by a drawn dot", () => {
+    if (locale === "ar") strings(copy).forEach((text) => expect(text).not.toMatch(/[—·]/))
+    const { container } = render(<FooterDashboardSlimBar locale={locale} />)
+    expect(container.textContent).not.toMatch(/[·]/)
+    expect(container.querySelectorAll("span[aria-hidden='true'].rounded-full")).toHaveLength(1)
+  })
+
+  it("drops items by the block's own width: the hint below Desktop, the links below Tablet, the help button never", () => {
+    const { container } = render(<FooterDashboardSlimBar locale={locale} />)
+    const hint = container.querySelector("kbd")!.parentElement!
+    expect(hasClass(hint, "hidden")).toBe(true)
+    expect(hasVariants(hint.getAttribute("class") ?? "", "[@container(min-width:64rem)]:flex")).toBe(true)
+    const links = screen.getByRole("navigation", { name: copy.helpLinksLabel })
+    expect(hasClass(links, "hidden")).toBe(true)
+    expect(hasVariants(links.getAttribute("class") ?? "", "[@container(min-width:40rem)]:flex")).toBe(true)
+    const help = screen.getByRole("button", { name: copy.helpLabel })
+    expect(help.closest(".hidden")).toBeNull()
+    const bar = container.querySelector("footer")!
+    expect(hasClass(bar, "py-3")).toBe(true)
+    expect(hasVariants(bar.getAttribute("class") ?? "", "lg:py-4")).toBe(true)
+  })
+
+  it("accepts an empty link list without crashing", () => {
+    const { container } = render(<FooterDashboardSlimBar locale={locale} links={[]} />)
+    expect(container.querySelector("footer")).toBeTruthy()
+    expect(screen.queryByRole("navigation", { name: copy.helpLinksLabel })).toBeNull()
+  })
+
+  it("calls onHelp", () => {
+    const onHelp = vi.fn()
+    render(<FooterDashboardSlimBar locale={locale} onHelp={onHelp} />)
+    fireEvent.click(screen.getByRole("button", { name: copy.helpLabel }))
+    expect(onHelp).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe.each(["en", "ar"] as const)("Docs Page (%s)", (locale) => {
+  const copy = footerDocsPageCopy[locale]
+
+  it("renders one footer landmark with a labelled pager nav and a labelled links nav", () => {
+    const { container } = render(<FooterDocsPage locale={locale} />)
+    expect(landmarks(container)).toHaveLength(2)
+    expect(screen.getByRole("navigation", { name: copy.pagerLabel })).toBeTruthy()
+    expect(screen.getByRole("navigation", { name: copy.linksLabel })).toBeTruthy()
+  })
+
+  it("draws the prompt with outline sm Yes and No, the edit link, two pager cards, three avatars and the update line", () => {
+    const { container } = render(<FooterDocsPage locale={locale} />)
+    expect(screen.getByText(copy.prompt)).toBeTruthy()
+    const yes = screen.getByRole("button", { name: copy.yes })
+    const no = screen.getByRole("button", { name: copy.no })
+    ;[yes, no].forEach((button) => {
+      expect(hasClass(button, "ring-1")).toBe(true)
+      expect(hasClass(button, "h-8")).toBe(true)
+    })
+    expect(screen.getByRole("link", { name: copy.editLabel })).toBeTruthy()
+    expect(container.querySelector("a[rel='prev']")?.textContent).toContain(copy.previous.title)
+    expect(container.querySelector("a[rel='next']")?.textContent).toContain(copy.next.title)
+    const people = within(screen.getByRole("list", { name: copy.contributorsLabel })).getAllByRole("listitem")
+    expect(people).toHaveLength(3)
+    expect(container.textContent).toContain("2026")
+    copy.links.forEach((link) => expect(screen.getByRole("link", { name: link.label })).toBeTruthy())
+  })
+
+  it("has no em dash or middle dot in the Arabic copy and keeps the date's numbers left to right", () => {
+    if (locale !== "ar") return
+    strings(copy).forEach((text) => expect(text).not.toMatch(/[—·]/))
+    const { container } = render(<FooterDocsPage locale="ar" />)
+    const runs = Array.from(container.querySelectorAll("bdi[dir='ltr']")).map((el) => el.textContent)
+    expect(runs).toEqual(["14", "2026", "3"])
+  })
+
+  it("mirrors both chevrons by class and slides each toward its card's outer edge", () => {
+    const { container } = render(<FooterDocsPage locale={locale} />)
+    const left = container.querySelector("svg.lucide-chevron-left")!
+    const right = container.querySelector("svg.lucide-chevron-right")!
+    ;[left, right].forEach((chevron) => expect(hasVariants(chevron.getAttribute("class") ?? "", "rtl:-scale-x-100")).toBe(true))
+    expect(hasVariants(left.getAttribute("class") ?? "", "group-hover/card:-translate-x-1")).toBe(true)
+    expect(hasVariants(left.getAttribute("class") ?? "", "group-hover/card:translate-x-1")).toBe(true)
+    expect(hasVariants(right.getAttribute("class") ?? "", "group-hover/card:translate-x-1")).toBe(true)
+    expect(hasVariants(right.getAttribute("class") ?? "", "group-hover/card:-translate-x-1")).toBe(true)
+    const prev = container.querySelector("a[rel='prev']")!
+    expect(hasVariants(prev.getAttribute("class") ?? "", "hover:[@container(min-width:40rem)]:border-foreground")).toBe(true)
+    expect(hasClass(prev, "duration-[160ms]")).toBe(true)
+    expect(hasVariants(prev.getAttribute("class") ?? "", "active:[@media(hover:none)]:bg-secondary")).toBe(true)
+  })
+
+  it("votes once: the chosen button becomes default, both disable, the prompt becomes the thank-you line", () => {
+    const onVote = vi.fn()
+    const { container } = render(<FooterDocsPage locale={locale} onVote={onVote} />)
+    const yes = screen.getByRole("button", { name: copy.yes })
+    const no = screen.getByRole("button", { name: copy.no })
+    expect(screen.queryByRole("status")?.textContent ?? "").toBe("")
+    fireEvent.click(no)
+    expect(onVote).toHaveBeenCalledWith("no")
+    expect(hasClass(no, "bg-primary")).toBe(true)
+    expect(hasClass(yes, "bg-primary")).toBe(false)
+    expect((yes as HTMLButtonElement).disabled).toBe(true)
+    expect((no as HTMLButtonElement).disabled).toBe(true)
+    expect(no.getAttribute("aria-pressed")).toBe("true")
+    expect(screen.getByRole("status").textContent).toBe(copy.thanks)
+    // the prompt stays in place, faded, so the row keeps its width
+    const prompt = screen.getByText(copy.prompt)
+    expect(prompt.parentElement?.getAttribute("aria-hidden")).toBe("true")
+    expect(hasClass(prompt.parentElement!, "opacity-0")).toBe(true)
+    expect(hasClass(prompt.parentElement!, "duration-200")).toBe(true)
+    expect(hasVariants(prompt.parentElement!.className, "motion-reduce:transition-none")).toBe(true)
+    fireEvent.click(yes)
+    expect(onVote).toHaveBeenCalledTimes(1)
+    expect(container.querySelectorAll("[role='status']")).toHaveLength(1)
+  })
+
+  it("uses the approved thank-you line", () => {
+    expect(copy.thanks).toBe(locale === "en" ? "Thanks for the feedback." : "شكرًا على ملاحظاتك.")
+  })
+
+  it("can start with a vote already in", () => {
+    render(<FooterDocsPage locale={locale} defaultVote="yes" />)
+    expect(screen.getByRole("status").textContent).toBe(copy.thanks)
+    expect((screen.getByRole("button", { name: copy.yes, hidden: true }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it("accepts empty collections without crashing", () => {
+    const { container } = render(<FooterDocsPage locale={locale} contributors={[]} links={[]} />)
+    expect(container.querySelector("footer")).toBeTruthy()
+    expect(screen.queryByRole("list", { name: copy.contributorsLabel })).toBeNull()
+    expect(screen.queryByRole("navigation", { name: copy.linksLabel })).toBeNull()
+  })
+})
+
+describe.each(["en", "ar"] as const)("Multi-Region (%s)", (locale) => {
+  const copy = footerMultiRegionCopy[locale]
+  const cards = () => within(screen.getByRole("list", { name: copy.cardsLabel })).getAllByRole("button")
+
+  it("renders one footer landmark and a labelled legal nav", () => {
+    const { container } = render(<FooterMultiRegion locale={locale} />)
+    expect(landmarks(container)).toHaveLength(1)
+    expect(screen.getByRole("navigation", { name: copy.legalLabel })).toBeTruthy()
+  })
+
+  it("draws the title, three Selects and six region cards with cities, languages and hours", () => {
+    const { container } = render(<FooterMultiRegion locale={locale} />)
+    expect(screen.getByRole("heading", { level: 2 }).textContent).toBe(copy.title)
+    expect(screen.getByRole("combobox", { name: copy.regionLabel })).toBeTruthy()
+    expect(screen.getByRole("combobox", { name: copy.languageLabel })).toBeTruthy()
+    expect(screen.getByRole("combobox", { name: copy.currencyLabel })).toBeTruthy()
+    expect(cards()).toHaveLength(6)
+    expect(cards().map((card) => card.querySelector("span")?.textContent)).toEqual(copy.regions.map((r) => r.name))
+    expect(container.querySelectorAll("svg.lucide-map-pin")).toHaveLength(6)
+    expect(container.querySelectorAll("svg.lucide-languages")).toHaveLength(6)
+    expect(container.querySelectorAll("svg.lucide-clock")).toHaveLength(6)
+    expect(container.textContent).toContain(copy.copyright)
+  })
+
+  it("has no em dash or middle dot in the Arabic copy; the cities are separated by drawn dots", () => {
+    if (locale === "ar") strings(copy).forEach((text) => expect(text).not.toMatch(/[—·]/))
+    const { container } = render(<FooterMultiRegion locale={locale} />)
+    expect(container.textContent).not.toMatch(/[·]/)
+    // 2 + 2 + 1 + 1 + 0 + 1 dots between the cities
+    expect(container.querySelectorAll("span[aria-hidden='true'].rounded-full")).toHaveLength(7)
+  })
+
+  it("starts with Europe chosen, as the region Select shows it, and gives only the chosen card the foreground border", () => {
+    render(<FooterMultiRegion locale={locale} />)
+    expect(cards().map((card) => card.getAttribute("aria-pressed"))).toEqual(["true", "false", "false", "false", "false", "false"])
+    expect(hasClass(cards()[0]!, "border-foreground")).toBe(true)
+    expect(hasClass(cards()[1]!, "border-border")).toBe(true)
+  })
+
+  it("chooses a region on click or Enter, and only one at a time", () => {
+    const onRegionChange = vi.fn()
+    render(<FooterMultiRegion locale={locale} onRegionChange={onRegionChange} />)
+    fireEvent.click(cards()[2]!)
+    expect(onRegionChange).toHaveBeenLastCalledWith("north-america")
+    expect(cards().map((card) => card.getAttribute("aria-pressed"))).toEqual(["false", "false", "true", "false", "false", "false"])
+    expect(hasClass(cards()[2]!, "border-foreground")).toBe(true)
+    expect(hasClass(cards()[0]!, "border-border")).toBe(true)
+    // a button takes Enter as a click
+    cards()[4]!.focus()
+    fireEvent.keyDown(cards()[4]!, { key: "Enter" })
+    fireEvent.click(cards()[4]!)
+    expect(cards()[4]!.getAttribute("aria-pressed")).toBe("true")
+  })
+
+  it("starts with no card chosen when asked", () => {
+    render(<FooterMultiRegion locale={locale} defaultRegion={null} />)
+    expect(cards().every((card) => card.getAttribute("aria-pressed") === "false")).toBe(true)
+  })
+
+  it("scrolls the chosen card into view only when it is below the fold", () => {
+    const scroll = vi.fn()
+    Element.prototype.scrollIntoView = scroll
+    render(<FooterMultiRegion locale={locale} />)
+    const target = cards()[5]!
+    target.getBoundingClientRect = () => ({ bottom: window.innerHeight - 10 }) as DOMRect
+    fireEvent.click(target)
+    expect(scroll).not.toHaveBeenCalled()
+    target.getBoundingClientRect = () => ({ bottom: window.innerHeight + 200 }) as DOMRect
+    fireEvent.click(target)
+    expect(scroll).toHaveBeenCalledWith({ block: "nearest", behavior: "smooth" })
+    // @ts-expect-error the stub is removed again
+    delete Element.prototype.scrollIntoView
+  })
+
+  it("scrolls without smoothing under reduced motion, and drops the lift", () => {
+    setMotion(true)
+    const scroll = vi.fn()
+    Element.prototype.scrollIntoView = scroll
+    render(<FooterMultiRegion locale={locale} />)
+    const target = cards()[5]!
+    target.getBoundingClientRect = () => ({ bottom: window.innerHeight + 200 }) as DOMRect
+    fireEvent.click(target)
+    expect(scroll).toHaveBeenCalledWith({ block: "nearest", behavior: "auto" })
+    expect(hasClass(target, "motion-safe:")).toBe(true)
+    // @ts-expect-error the stub is removed again
+    delete Element.prototype.scrollIntoView
+  })
+
+  it("lifts a hovering card 2px from Tablet and changes its border at 160ms", () => {
+    render(<FooterMultiRegion locale={locale} />)
+    const card = cards()[1]!
+    expect(hasVariants(card.getAttribute("class") ?? "", "hover:[@container(min-width:40rem)]:border-foreground")).toBe(true)
+    expect(hasVariants(card.getAttribute("class") ?? "", "hover:-translate-y-0.5")).toBe(true)
+    expect(hasClass(card, "[@container(min-width:40rem)]:")).toBe(true)
+    expect(hasClass(card, "duration-[160ms]")).toBe(true)
+  })
+
+  it("accepts empty collections without crashing", () => {
+    const { container } = render(<FooterMultiRegion locale={locale} regions={[]} languages={[]} currencies={[]} legal={[]} />)
+    expect(container.querySelector("footer")).toBeTruthy()
+    expect(screen.queryAllByRole("combobox")).toHaveLength(0)
+    expect(screen.queryByRole("list", { name: copy.cardsLabel })).toBeNull()
+  })
+})
+
+describe.each(["en", "ar"] as const)("Product Family Switcher (%s)", (locale) => {
+  const copy = footerProductFamilySwitcherCopy[locale]
+
+  it("renders one footer landmark with labelled navs for the products, the company links and the legal links", () => {
+    const { container } = render(<FooterProductFamilySwitcher locale={locale} />)
+    expect(landmarks(container)).toHaveLength(3)
+    expect(screen.getByRole("navigation", { name: copy.productsLabel })).toBeTruthy()
+    expect(screen.getByRole("navigation", { name: copy.companyLabel })).toBeTruthy()
+    expect(screen.getByRole("navigation", { name: copy.legalLabel })).toBeTruthy()
+  })
+
+  it("draws four product tiles with their icons and an Explore arrow, a ghost sm Compare button and four social marks", () => {
+    const { container } = render(<FooterProductFamilySwitcher locale={locale} />)
+    const tiles = within(screen.getByRole("navigation", { name: copy.productsLabel })).getAllByRole("link")
+    expect(tiles).toHaveLength(4)
+    copy.products.forEach((product, index) => expect(tiles[index]!.textContent).toContain(product.name))
+    ;["sparkles", "book-open", "zap", "languages"].forEach((icon) => expect(container.querySelector(`svg.lucide-${icon}`)).toBeTruthy())
+    tiles.forEach((tile) => expect(tile.textContent).toContain(copy.explore))
+    const compare = screen.getByRole("link", { name: copy.compare.label })
+    expect(hasClass(compare, "h-8")).toBe(true)
+    expect(hasClass(compare, "bg-primary")).toBe(false)
+    // At the start edge of the title at its own width, at every breakpoint: no stretching, no centring.
+    expect(hasClass(compare, "w-full")).toBe(false)
+    expect(compare.parentElement!.className).toContain("items-start")
+    // From the Desktop container width (64rem) the row is Figma's: title at the start, button at the opposite end.
+    expect(compare.parentElement!.className).toContain("[@container(min-width:64rem)]:flex-row")
+    expect(compare.parentElement!.className).toContain("[@container(min-width:64rem)]:justify-between")
+    expect(compare.parentElement!.className).toContain("[@container(min-width:64rem)]:items-center")
+    expect(["LinkedIn", "X", "GitHub", "YouTube"].every((name) => container.querySelector(`a[aria-label="${name}"]`))).toBe(true)
+  })
+
+  it("keeps the product names as Figma has them", () => {
+    expect(copy.products.map((p) => p.name)).toEqual(locale === "en" ? ["Fasla Core", "Fasla Blocks", "Fasla Tokens", "Fasla Arabic"] : ["فاصلة كور", "فاصلة بلوكس", "فاصلة توكنز", "فاصلة العربية"])
+  })
+
+  it("has no em dash or middle dot in the Arabic copy", () => {
+    if (locale !== "ar") return
+    strings(copy).forEach((text) => expect(text).not.toMatch(/[—·]/))
+  })
+
+  it("mirrors the arrows by class and slides the Explore arrow toward its direction", () => {
+    const { container } = render(<FooterProductFamilySwitcher locale={locale} />)
+    const arrows = Array.from(container.querySelectorAll("svg.lucide-arrow-right"))
+    expect(arrows).toHaveLength(5)
+    arrows.forEach((arrow) => expect(hasVariants(arrow.getAttribute("class") ?? "", "rtl:-scale-x-100")).toBe(true))
+    const explore = arrows[1]!
+    expect(hasVariants(explore.getAttribute("class") ?? "", "group-hover/tile:translate-x-1")).toBe(true)
+    expect(hasVariants(explore.getAttribute("class") ?? "", "group-hover/tile:-translate-x-1")).toBe(true)
+  })
+
+  it("carries the tile hover on classes: border to foreground, a 2px lift at 160ms, an active tint on touch", () => {
+    render(<FooterProductFamilySwitcher locale={locale} />)
+    const tile = within(screen.getByRole("navigation", { name: copy.productsLabel })).getAllByRole("link")[0]!
+    expect(hasVariants(tile.getAttribute("class") ?? "", "hover:[@container(min-width:40rem)]:border-foreground")).toBe(true)
+    expect(hasVariants(tile.getAttribute("class") ?? "", "hover:-translate-y-0.5")).toBe(true)
+    expect(hasClass(tile, "motion-safe:")).toBe(true)
+    expect(hasClass(tile, "duration-[160ms]")).toBe(true)
+    expect(hasVariants(tile.getAttribute("class") ?? "", "active:[@media(hover:none)]:bg-secondary")).toBe(true)
+  })
+
+  it("accepts empty collections without crashing or drawing empty navs", () => {
+    const { container } = render(<FooterProductFamilySwitcher locale={locale} products={[]} company={[]} legal={[]} socials={[]} />)
+    expect(container.querySelector("footer")).toBeTruthy()
+    expect(screen.queryByRole("navigation", { name: copy.productsLabel })).toBeNull()
+    expect(screen.queryByRole("navigation", { name: copy.companyLabel })).toBeNull()
+  })
+})