@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/contact-us-global-offices-table.test.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest"
+import { renderToString } from "react-dom/server"
+import { render, screen, within } from "@testing-library/react"
+import { ContactUsGlobalOfficesTable, contactUsGlobalOfficesTableCopy } from "./contact-us-global-offices-table"
+
+// jsdom has no layout: the Figma sizes and the container-query layouts were
+// measured in a browser. These assert the contract around them.
+
+const NOW = "2026-04-07T10:20:00Z"
+const strings = (value: unknown): string[] =>
+  typeof value === "string" ? [value] : Array.isArray(value) ? value.flatMap(strings) : value && typeof value === "object" && !("$$typeof" in value) ? Object.values(value).flatMap(strings) : []
+const keys = (value: unknown): string[] => Object.keys(value as object).sort()
+const textOf = (node: React.ReactNode) => render(<>{node}</>).container.textContent ?? ""
+
+describe("Global Offices Table", () => {
+  it.each(["en", "ar"] as const)("is a labelled section with an h2 (%s)", (locale) => {
+    const { container } = render(<ContactUsGlobalOfficesTable locale={locale} now={NOW} />)
+    const section = container.querySelector("section")!
+    const heading = within(section).getByRole("heading", { level: 2 })
+    expect(section.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(heading.textContent).toBe(contactUsGlobalOfficesTableCopy[locale].heading)
+  })
+
+  it("has the same copy keys, and the same offices, in English and Arabic", () => {
+    const { en, ar } = contactUsGlobalOfficesTableCopy
+    expect(keys(ar)).toEqual(keys(en))
+    expect(ar.offices.length).toBe(en.offices.length)
+    expect(ar.offices.map((o) => o.timeZone)).toEqual(en.offices.map((o) => o.timeZone))
+  })
+
+  it("keeps the Arabic rules: no middle dot, no dash outside digits, no Arabic-Indic digit, no percent sign", () => {
+    const text = strings({ ...contactUsGlobalOfficesTableCopy.ar, description: textOf(contactUsGlobalOfficesTableCopy.ar.description) }).join(" ")
+    expect(text).not.toMatch(/·/)
+    expect(text).not.toMatch(/[–—]/)
+    expect(text).not.toMatch(/[٠-٩۰-۹]/)
+    expect(text).not.toContain("%")
+    expect(text).not.toContain("*")
+  })
+
+  it("is a real table with column and row headers", () => {
+    render(<ContactUsGlobalOfficesTable now={NOW} />)
+    const table = screen.getByRole("table")
+    const columns = within(table).getAllByRole("columnheader").map((c) => c.textContent)
+    expect(columns).toEqual(["Office", "Region", "Phone", "Local time", "Hours"])
+    const rows = within(table).getAllByRole("rowheader").map((c) => c.textContent)
+    expect(rows.map((r) => r?.replace("Open now", ""))).toEqual(["Dubai — HQ", "Riyadh", "Amman", "London", "Singapore"])
+    expect(table.querySelectorAll("th[scope=col]").length).toBe(5)
+    expect(table.querySelectorAll("th[scope=row]").length).toBe(5)
+  })
+
+  it("shows Figma's local times at the frozen moment, in Western digits", () => {
+    const { container } = render(<ContactUsGlobalOfficesTable now={NOW} />)
+    const text = container.textContent ?? ""
+    for (const time of ["14:20 GST", "13:20 AST", "13:20 EEST", "11:20 BST", "18:20 SGT"]) expect(text).toContain(time)
+  })
+
+  it("keeps Western digits and 24 hours in Arabic", () => {
+    const { container } = render(<ContactUsGlobalOfficesTable locale="ar" now={NOW} />)
+    const text = container.textContent ?? ""
+    expect(text).toContain("14:20 GST")
+    expect(text).not.toMatch(/[٠-٩]/)
+  })
+
+  it("a different moment changes the times", () => {
+    const { container } = render(<ContactUsGlobalOfficesTable now="2026-04-07T22:05:00Z" />)
+    const text = container.textContent ?? ""
+    expect(text).toContain("02:05 GST")
+    expect(text).not.toContain("14:20 GST")
+  })
+
+  it("reads --:-- before any time is known", () => {
+    // The first render, as the server draws it, before a time is known.
+    const html = renderToString(<ContactUsGlobalOfficesTable />)
+    expect(html).toContain("--:--")
+    expect(html).not.toContain("GST")
+    expect(html).not.toContain("Open now")
+  })
+
+  it("marks the offices that are open, and not the one that is closed", () => {
+    render(<ContactUsGlobalOfficesTable now={NOW} />)
+    const open = (name: string) => within(screen.getByRole("rowheader", { name: new RegExp(name) })).queryByText("Open now")
+    for (const name of ["Dubai", "Riyadh", "Amman", "London"]) expect(open(name)).not.toBeNull()
+    expect(open("Singapore")).toBeNull()
+  })
+
+  it("takes offices, and a press kit link", () => {
+    const offices = [{ ...contactUsGlobalOfficesTableCopy.en.offices[0]!, name: "Cairo", phone: "+20 2 1234 5678" }]
+    render(<ContactUsGlobalOfficesTable now={NOW} offices={offices} pressKitHref="/press.zip" />)
+    expect(screen.getByRole("rowheader", { name: /Cairo/ })).toBeTruthy()
+    expect(screen.queryByText("Riyadh")).toBeNull()
+    expect(screen.getByRole("link", { name: "Download press kit" }).getAttribute("href")).toBe("/press.zip")
+  })
+
+  it("has no Copy address button, and no form, so nothing is required", () => {
+    const { container } = render(<ContactUsGlobalOfficesTable now={NOW} />)
+    expect(screen.queryByText(/copy address/i)).toBeNull()
+    expect(container.querySelector("form, input")).toBeNull()
+    expect(container.textContent).not.toContain("*")
+  })
+})

package/registry/blocks/contact-us-grand-headline-form/ContactUsGrandHeadlineForm.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContactUsField,
+  ContactUsForm,
+  ContactUsSection,
+  ContactUsSubmit,
+  contactUsFormMessages,
+  splitCopy,
+  useContactUsForm,
+  useReveal,
+  type ContactUsFieldDef,
+  type ContactUsFormBlockProps,
+  type ContactUsFormMessages,
+  type ContactUsLocale,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Grand Headline Form.
+ *
+ * A centred, shouting headline over a bordered form, on a page of faint grid
+ * lines. An eyebrow in `foreground` and a headline in `info`, both set in capitals (the
+ * headline at 6XL, bold), then a frame with an `info` border: first name and
+ * email side by side, phone, a line of consent in XS, an optional checkbox
+ * and a large SUBMIT button. The fields are the large size (40px).
+ *
+ * The grid is 72px squares drawn in `border` at 60%, from the section's top
+ * and start corner, across the whole section. This Type's padding is 64px on
+ * Desktop (the others use 96).
+ *
+ * Desktop sets the frame 720px wide with 48px of padding; Tablet 560px with
+ * 24px; Mobile spans the section with 16px, the headline steps from 6XL to
+ * 5XL to 3XL, and first name and email stack.
+ *
+ * The form is real. It calls `onSubmit(values)` with firstName, email, phone
+ * and updates. On first view the eyebrow and the grid fade in, the headline
+ * rises, and the frame and its fields follow.
+ *
+ * Content limits: the eyebrow up to 30 characters, the headline up to 28
+ * (it is set at 6XL), the consent line up to 200. The other limits are in
+ * the block's documentation page, which the default copy stays inside.
+ */
+
+export interface ContactUsGrandHeadlineFormCopy extends ContactUsFormMessages {
+  /** The line above the headline. */
+  eyebrow: string
+  /** The headline, an `h2`. */
+  heading: string
+  /** The first name field's label. */
+  firstName: string
+  /** The first name field's placeholder. */
+  firstNamePlaceholder: string
+  /** The email field's label. */
+  email: string
+  /** The email field's placeholder. */
+  emailPlaceholder: string
+  /** The phone field's label. */
+  phone: string
+  /** The phone field's placeholder. */
+  phonePlaceholder: string
+  /** The line of consent over the checkbox. */
+  consentNote: string
+  /** The optional checkbox's label. */
+  updates: string
+  /** The button's label. */
+  submit: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsGrandHeadlineFormCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    eyebrow: "WANT TO TALK ABOUT FASLA?",
+    heading: "FILL OUT THE FORM BELOW!",
+    firstName: "First name",
+    firstNamePlaceholder: "First name",
+    email: "Email",
+    emailPlaceholder: "you@company.com",
+    phone: "Phone number",
+    phonePlaceholder: "+971 50 123 4567",
+    consentNote:
+      "By clicking submit, you give Fasla your consent to contact you by email or phone about your request. You can opt out at any time by replying STOP. See the privacy policy and terms on the website.",
+    updates: "I agree to receive other communications from Fasla.",
+    submit: "SUBMIT",
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    eyebrow: "هل تريد التحدث عن فاصلة؟",
+    heading: "املأ النموذج أدناه!",
+    firstName: "الاسم الأول",
+    firstNamePlaceholder: "الاسم الأول",
+    email: "البريد الإلكتروني",
+    emailPlaceholder: "you@company.com",
+    phone: "رقم الهاتف",
+    phonePlaceholder: "+971 50 123 4567",
+    consentNote:
+      "بالضغط على إرسال، تمنح فاصلة موافقتك على التواصل معك عبر البريد الإلكتروني أو الهاتف بخصوص طلبك. يمكنك إلغاء الاشتراك في أي وقت بالرد بكلمة STOP. اطّلع على سياسة الخصوصية والشروط في الموقع.",
+    updates: "أوافق على تلقي رسائل أخرى من فاصلة.",
+    submit: "إرسال",
+  },
+}
+
+export type ContactUsGrandHeadlineFormProps = ContactUsFormBlockProps & Partial<ContactUsGrandHeadlineFormCopy>
+
+/**
+ * Figma's grid: 72px squares in `border` at 60%, one 1px line along each
+ * square's start and top. Written out whole, as Tailwind reads classes as
+ * they are written.
+ */
+const GRID_CLASS =
+  "pointer-events-none absolute inset-0 [background-image:linear-gradient(to_right,color-mix(in_oklab,var(--border)_60%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklab,var(--border)_60%,transparent)_1px,transparent_1px)] [background-size:72px_72px]"
+
+export function ContactUsGrandHeadlineForm({ locale = "en", ...given }: ContactUsGrandHeadlineFormProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+
+  const f = {
+    firstName: { name: "firstName", kind: "text", label: copy.firstName, placeholder: copy.firstNamePlaceholder, autoComplete: "given-name", required: true, size: "lg" },
+    email: { name: "email", kind: "email", label: copy.email, placeholder: copy.emailPlaceholder, autoComplete: "email", required: true, size: "lg" },
+    phone: { name: "phone", kind: "tel", label: copy.phone, placeholder: copy.phonePlaceholder, autoComplete: "tel", size: "lg" },
+    updates: { name: "updates", kind: "checkbox", label: copy.updates, size: "md" },
+  } satisfies Record<string, ContactUsFieldDef>
+  const form = useContactUsForm({ fields: Object.values(f), messages: copy, onSubmit, disabled })
+
+  return (
+    <ContactUsSection
+      labelledBy={headingId}
+      padding="md"
+      gap="md"
+      backdrop={<div aria-hidden data-reveal="fade" data-reveal-delay="0" className={GRID_CLASS} />}
+      className={className}
+      {...html}
+    >
+      <div ref={reveal} className="flex flex-col items-center gap-10">
+        <div className="flex w-full max-w-[47.5rem] flex-col items-center gap-4 text-center">
+          <p data-reveal="fade" data-reveal-delay="0" className="text-sm font-semibold text-foreground">
+            {copy.eyebrow}
+          </p>
+          <h2
+            id={headingId}
+            data-reveal="rise"
+            data-reveal-delay="60"
+            className="text-3xl font-bold text-info [@container(min-width:40rem)]:text-5xl [@container(min-width:64rem)]:text-6xl"
+          >
+            {copy.heading}
+          </h2>
+        </div>
+
+        <ContactUsForm
+          form={form}
+          data-reveal="fade"
+          data-reveal-delay="140"
+          className="flex w-full flex-col gap-5 border border-info bg-background p-4 [@container(min-width:40rem)]:max-w-[35rem] [@container(min-width:40rem)]:p-6 [@container(min-width:64rem)]:max-w-[45rem] [@container(min-width:64rem)]:p-12"
+        >
+          <div className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2">
+            <ContactUsField field={f.firstName} reveal />
+            <ContactUsField field={f.email} reveal />
+          </div>
+          <ContactUsField field={f.phone} reveal />
+          <p className="text-xs text-muted-foreground">{copy.consentNote}</p>
+          <ContactUsField field={f.updates} reveal />
+          <div className="flex">
+            <ContactUsSubmit size="lg">
+              {copy.submit}
+            </ContactUsSubmit>
+          </div>
+        </ContactUsForm>
+      </div>
+    </ContactUsSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const contactUsGrandHeadlineFormCopy = COPY

package/registry/blocks/contact-us-grand-headline-form/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsGrandHeadlineForm,
+  contactUsGrandHeadlineFormCopy,
+  type ContactUsGrandHeadlineFormCopy,
+  type ContactUsGrandHeadlineFormProps,
+} from "./ContactUsGrandHeadlineForm"