@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/blog-cards-split-feature/BlogCardsSplitFeature.tsx

@@ -0,0 +1,214 @@
+import * as React from "react"
+import { ArrowRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Split Feature.
+ *
+ * One article, half text and half photo, on a `muted` band. The copy has an
+ * eyebrow, a large title, a summary, an outline category badge with the date
+ * and read time, a hairline, the author's initials with their name and the
+ * date, and a solid "Read the article" button with an arrow. The photo is a
+ * rounded cover, 600 by 480 on Desktop. The button is the link; the photo is
+ * a second, mouse-only link to the same place, hidden from assistive
+ * technology and the tab order, so a click on the picture works.
+ *
+ * Desktop (Figma 1440) sets the copy at the start and the cover at the end.
+ * Tablet (768) puts the cover above the copy at full width, 720 by 380.
+ * Mobile (360) does the same at 328 by 220, with the title a size down and the
+ * button across the full width.
+ *
+ * Hovering the cover scales it from 1.00 to 1.03 inside its rounded clip
+ * (280ms); the title, the summary and the author stay still, and the button
+ * has its own hover and press states. There is no hover on Mobile; pressing
+ * the picture dims it to 96%. Reduced motion turns both off. Nothing plays on
+ * load or on a timer. The cover is not focusable, so keyboard focus on the
+ * button does not scale it.
+ *
+ * Arabic mirrors by the page's `dir`: on Desktop the copy is at the right and
+ * the cover at the left, and the arrow is mirrored. The photograph is never
+ * flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+export interface BlogCardsSplitFeaturePost {
+  /** The cover photo. Without one the cover is a placeholder of the same size. */
+  image?: { src: string; alt: string }
+  /** The category badge. */
+  category: React.ReactNode
+  /** The date, as written: "Jun 30, 2026". Shown in the first line and again by the author. */
+  date: React.ReactNode
+  /** The read time, as written: "11 min read". */
+  readTime: React.ReactNode
+  /** The title, an `h2`. */
+  title: React.ReactNode
+  /** The summary. */
+  summary: React.ReactNode
+  /** The author's name. Their initials fill the avatar. */
+  author: string
+  /** The button's label. */
+  actionLabel: React.ReactNode
+  /** Where the button and the cover go. */
+  href: string
+}
+
+export interface BlogCardsSplitFeatureCopy {
+  /** The small line over the title. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The article. Without one the block shows `emptyLabel`. */
+  post: BlogCardsSplitFeaturePost | null
+  /** Shown instead of the article when `post` is null. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsSplitFeatureCopy> = {
+  en: {
+    eyebrow: "FEATURED",
+    post: {
+      category: "Typography",
+      date: "Jun 30, 2026",
+      readTime: "11 min read",
+      title: "A type ramp for two scripts",
+      summary:
+        "Latin and Arabic disagree about x-height, ascenders, and optical size. Building one ramp that serves both.",
+      author: "Yasmin Farouk",
+      actionLabel: "Read the article",
+      href: "#",
+    },
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    eyebrow: "مقال مميز",
+    post: {
+      category: "التايبوغرافيا",
+      date: "30 يونيو 2026",
+      readTime: "قراءة 11 دقيقة",
+      title: "سلّم خطوط لنظامي كتابة",
+      summary:
+        "اللاتينية والعربية تختلفان حول ارتفاع الأحرف والصواعد والحجم البصري. هكذا بنينا سلّماً واحداً يخدم الاثنين.",
+      author: "ياسمين فاروق",
+      actionLabel: "اقرأ المقال",
+      href: "#",
+    },
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsSplitFeatureCopy = COPY
+
+/*
+ * Every class below is written out whole: Tailwind finds a class by reading
+ * the source, so none is built from pieces. The hover ones are from Tablet up
+ * (Mobile has none).
+ */
+const COVER_HOVER = "group-hover/cover:[@container(min-width:40rem)]:motion-safe:scale-[1.03]"
+
+export interface BlogCardsSplitFeatureProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsSplitFeatureCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function BlogCardsSplitFeature({
+  locale = "en",
+  eyebrow,
+  post,
+  emptyLabel,
+  className,
+  ...props
+}: BlogCardsSplitFeatureProps) {
+  const copy = COPY[locale]
+  const titleId = React.useId()
+  const article = post === undefined ? copy.post : post
+  const line = eyebrow ?? copy.eyebrow
+
+  return (
+    <section
+      aria-labelledby={article ? titleId : undefined}
+      className={cn(
+        "[container-type:inline-size] bg-muted px-4 py-8 md:px-6 md:py-16 lg:px-20 lg:py-24",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto w-full max-w-[1280px]">
+        {!article ? (
+          <p className="text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+        ) : (
+          <div className="flex flex-col gap-8 [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-12">
+            <div className="flex min-w-0 flex-col gap-5 [@container(min-width:64rem)]:flex-1">
+              {line ? <p className="text-xs font-medium uppercase text-muted-foreground">{line}</p> : null}
+              <h2
+                id={titleId}
+                className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-5xl"
+              >
+                {article.title}
+              </h2>
+              <p className="text-lg text-muted-foreground">{article.summary}</p>
+              <div className="flex flex-wrap items-center gap-3">
+                <Badge variant="outline" tone="secondary" size="sm" radius="rounded">
+                  {article.category}
+                </Badge>
+                <span className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span>{article.date}</span>
+                  <span aria-hidden="true" className="size-[3px] rounded-full bg-muted-foreground" />
+                  <span>{article.readTime}</span>
+                </span>
+              </div>
+              <hr aria-hidden="true" className="h-px w-full border-0 bg-border" />
+              <div className="flex items-center gap-3">
+                <Avatar variant="initials" size="32" radius="rounded" name={article.author} aria-hidden="true" />
+                <span className="text-xs font-medium text-foreground">{article.author}</span>
+                <span aria-hidden="true" className="size-[3px] rounded-full bg-muted-foreground" />
+                <span className="text-xs text-muted-foreground">{article.date}</span>
+              </div>
+              <a
+                href={article.href}
+                className={cn(
+                  buttonVariants({ variant: "default", size: "md" }),
+                  "w-full [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:self-start"
+                )}
+              >
+                {article.actionLabel}
+                <ArrowRightIcon aria-hidden="true" className="size-4 rtl:-scale-x-100" />
+              </a>
+            </div>
+            <a
+              href={article.href}
+              tabIndex={-1}
+              aria-hidden="true"
+              className={cn(
+                "group/cover relative order-first block aspect-[328/220] w-full shrink-0 overflow-hidden rounded-xl bg-background transition-opacity duration-[120ms] motion-reduce:transition-none [@container(min-width:40rem)]:aspect-[720/380] [@container(min-width:64rem)]:order-last [@container(min-width:64rem)]:aspect-[600/480] [@container(min-width:64rem)]:w-[600px]",
+                "active:[@container(max-width:39.99rem)]:opacity-[0.96]"
+              )}
+            >
+              {article.image ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={article.image.src}
+                  alt={article.image.alt}
+                  loading="lazy"
+                  className={cn(
+                    "absolute inset-0 size-full object-cover transition-transform duration-[280ms] ease-out motion-reduce:transition-none",
+                    COVER_HOVER
+                  )}
+                />
+              ) : null}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-split-feature/index.ts

@@ -0,0 +1,6 @@
+export {
+  BlogCardsSplitFeature,
+  blogCardsSplitFeatureCopy,
+  type BlogCardsSplitFeatureCopy,
+  type BlogCardsSplitFeatureProps,
+} from "./BlogCardsSplitFeature"

package/registry/blocks/careers/careers.test.tsx

@@ -0,0 +1,414 @@
+import { describe, it, expect, vi } from "vitest"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import { CareersRoleAction, Figures, arabicCount, distinctValues, filterRoles, type CareersRole } from "./careers"
+import { CareersOpenRolesHairlineList, careersOpenRolesHairlineListCopy } from "../careers-open-roles-hairline-list/CareersOpenRolesHairlineList"
+import { CareersRoleCardsGrid, careersRoleCardsGridCopy } from "../careers-role-cards-grid/CareersRoleCardsGrid"
+import { CareersRolesByDepartment, careersRolesByDepartmentCopy } from "../careers-roles-by-department/CareersRolesByDepartment"
+import { CareersOpenVacanciesTable, careersOpenVacanciesTableCopy } from "../careers-open-vacancies-table/CareersOpenVacanciesTable"
+import {
+  CareersRolesListAccordionExpanded,
+  careersRolesListAccordionExpandedCopy,
+} from "../careers-roles-list-accordion-expanded/CareersRolesListAccordionExpanded"
+import { CareersAboutCardRoleList, careersAboutCardRoleListCopy } from "../careers-about-card-role-list/CareersAboutCardRoleList"
+import { CareersFeaturedRoleSpotlight, careersFeaturedRoleSpotlightCopy } from "../careers-featured-role-spotlight/CareersFeaturedRoleSpotlight"
+import { CareersPerksBenefits, careersPerksBenefitsCopy } from "../careers-perks-benefits/CareersPerksBenefits"
+import { CareersRoleDetailPanel, careersRoleDetailPanelCopy } from "../careers-role-detail-panel/CareersRoleDetailPanel"
+import { CareersRoleDetailPage, careersRoleDetailPageCopy } from "../careers-role-detail-page/CareersRoleDetailPage"
+import { Sheet, SheetContent, SheetTitle } from "../../ui/sheet/sheet"
+import { CareersNoOpenRolesEmptyState, careersNoOpenRolesEmptyStateCopy } from "../careers-no-open-roles-empty-state/CareersNoOpenRolesEmptyState"
+
+const ROLES: CareersRole[] = [
+  { id: "a", title: "Senior Product Designer", department: "Design", summary: "Own the system", location: "Remote", commitment: "Full-time" },
+  { id: "b", title: "Motion Designer", department: "Design", summary: "Define how it moves", location: "Dubai", commitment: "Contract" },
+  { id: "c", title: "Platform Engineer", department: "Engineering", summary: "Run the pipeline", location: "Remote", commitment: "Full-time" },
+]
+
+describe("filterRoles", () => {
+  it("narrows by team, place and type, and treats an empty or `all` value as no filter", () => {
+    expect(filterRoles(ROLES).map((role) => role.id)).toEqual(["a", "b", "c"])
+    expect(filterRoles(ROLES, { department: "all" }).map((role) => role.id)).toEqual(["a", "b", "c"])
+    expect(filterRoles(ROLES, { department: "Design" }).map((role) => role.id)).toEqual(["a", "b"])
+    expect(filterRoles(ROLES, { department: "Design", commitment: "Contract" }).map((role) => role.id)).toEqual(["b"])
+    expect(filterRoles(ROLES, { location: "Remote" }).map((role) => role.id)).toEqual(["a", "c"])
+  })
+
+  it("searches the title, the summary and the team without regard to case", () => {
+    expect(filterRoles(ROLES, { query: "PIPELINE" }).map((role) => role.id)).toEqual(["c"])
+    expect(filterRoles(ROLES, { query: "  motion " }).map((role) => role.id)).toEqual(["b"])
+    expect(filterRoles(ROLES, { query: "engineering" }).map((role) => role.id)).toEqual(["c"])
+    expect(filterRoles(ROLES, { query: "nothing here" })).toEqual([])
+  })
+})
+
+describe("distinctValues", () => {
+  it("lists each value once, in order of first appearance, and skips roles without one", () => {
+    expect(distinctValues(ROLES, "department")).toEqual(["Design", "Engineering"])
+    expect(distinctValues([...ROLES, { id: "d", title: "No team" }], "department")).toEqual(["Design", "Engineering"])
+  })
+})
+
+describe("arabicCount", () => {
+  const forms = { zero: "لا وظائف", one: "وظيفة", two: "وظيفتان", few: "{n} وظائف", many: "{n} وظيفة" }
+  it("picks the form that agrees with the number and writes it in Western digits", () => {
+    expect([0, 1, 2, 3, 10, 11, 25].map((n) => arabicCount(n, forms))).toEqual(["لا وظائف", "وظيفة", "وظيفتان", "3 وظائف", "10 وظائف", "11 وظيفة", "25 وظيفة"])
+  })
+})
+
+describe("Figures", () => {
+  it("keeps a pay range in one left-to-right run and each figure in an Arabic sentence in its own", () => {
+    const range = render(<Figures>{"$95K–$120K"}</Figures>)
+    expect([...range.container.querySelectorAll("bdi")].map((bdi) => bdi.textContent)).toEqual(["$95K–$120K"])
+    const sentence = render(<Figures>{"من 95 إلى 120 ألف دولار"}</Figures>)
+    expect([...sentence.container.querySelectorAll("bdi")].map((bdi) => bdi.textContent)).toEqual(["95", "120"])
+  })
+})
+
+describe("CareersRoleAction", () => {
+  const first = ROLES[0] as CareersRole
+  it("is a link when the role has an href, and a button that calls onSelect when it has none", () => {
+    const onSelect = vi.fn()
+    const { rerender } = render(<CareersRoleAction role={{ ...first, href: "/careers/a" }} label="View role" onSelect={onSelect} />)
+    expect(screen.getByRole("link", { name: "View role: Senior Product Designer" }).getAttribute("href")).toBe("/careers/a")
+    rerender(<CareersRoleAction role={first} label="View role" onSelect={onSelect} />)
+    fireEvent.click(screen.getByRole("button", { name: "View role: Senior Product Designer" }))
+    expect(onSelect).toHaveBeenCalledWith(first)
+  })
+})
+
+describe("Open Roles — Hairline List", () => {
+  it("filters the list with the team chips, and the count follows", () => {
+    render(<CareersOpenRolesHairlineList />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(6)
+    expect(screen.getByText("6 open roles")).toBeTruthy()
+    fireEvent.click(screen.getByRole("button", { name: "Design" }))
+    expect(screen.getByRole("button", { name: "Design" }).getAttribute("aria-pressed")).toBe("true")
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(2)
+    expect(screen.getByText("2 open roles")).toBeTruthy()
+    fireEvent.click(screen.getByRole("button", { name: "All roles" }))
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(6)
+  })
+
+  it("shows the total it is given while no chip is pressed, and says so when a chip leaves nothing", () => {
+    const { rerender } = render(<CareersOpenRolesHairlineList total={24} />)
+    expect(screen.getByText("24 open roles")).toBeTruthy()
+    rerender(<CareersOpenRolesHairlineList roles={[]} />)
+    expect(screen.getByText("No open roles match this team.")).toBeTruthy()
+  })
+
+  it("writes the Arabic count in the form that agrees with it", () => {
+    render(<CareersOpenRolesHairlineList locale="ar" />)
+    expect(screen.getByText("6 وظائف متاحة")).toBeTruthy()
+    fireEvent.click(screen.getByRole("button", { name: "التصميم" }))
+    expect(screen.getByText("وظيفتان متاحتان")).toBeTruthy()
+  })
+})
+
+describe("Role Cards Grid", () => {
+  it("searches the cards, and the count follows", () => {
+    render(<CareersRoleCardsGrid />)
+    expect(screen.getAllByRole("article")).toHaveLength(6)
+    expect(screen.getByText("Showing 6 of 6 roles")).toBeTruthy()
+    fireEvent.change(screen.getByRole("searchbox", { name: "Search roles or keywords" }), { target: { value: "motion" } })
+    expect(screen.getAllByRole("article")).toHaveLength(1)
+    expect(screen.getByText("Showing 1 of 6 roles")).toBeTruthy()
+    fireEvent.change(screen.getByRole("searchbox", { name: "Search roles or keywords" }), { target: { value: "zzz" } })
+    expect(screen.getByText(/No roles match your search/)).toBeTruthy()
+  })
+
+  it("saves a role with its bookmark and reports the saved ids", () => {
+    const onSavedChange = vi.fn()
+    render(<CareersRoleCardsGrid onSavedChange={onSavedChange} />)
+    fireEvent.click(screen.getByRole("button", { name: "Save role: Motion Designer" }))
+    expect(onSavedChange).toHaveBeenCalledWith(["motion-designer"])
+    expect(screen.getByRole("button", { name: "Saved: Motion Designer" }).getAttribute("aria-pressed")).toBe("true")
+  })
+})
+
+describe("Roles by Department", () => {
+  it("counts each team's roles from its own list", () => {
+    render(<CareersRolesByDepartment />)
+    expect(screen.getAllByText("3 open roles")).toHaveLength(2)
+    expect(screen.getAllByText("2 open roles")).toHaveLength(2)
+    expect(screen.getAllByRole("heading", { level: 3 }).map((heading) => heading.textContent)).toEqual(["Design", "Engineering", "Product", "Go-to-market"])
+  })
+
+  it("uses the Arabic dual for two roles", () => {
+    render(<CareersRolesByDepartment locale="ar" />)
+    expect(screen.getAllByText("وظيفتان متاحتان")).toHaveLength(2)
+    expect(screen.getAllByText("3 وظائف متاحة")).toHaveLength(2)
+  })
+})
+
+describe("Open Vacancies Table", () => {
+  it("pages the rows, six to a page, and the count follows the page", () => {
+    render(<CareersOpenVacanciesTable />)
+    expect(screen.getByText("10 vacancies")).toBeTruthy()
+    expect(screen.getByText("Showing 6 of 10 vacancies")).toBeTruthy()
+    expect(screen.getAllByRole("row")).toHaveLength(7)
+    fireEvent.click(screen.getByRole("link", { name: "Page 2" }))
+    expect(screen.getByText("Showing 4 of 10 vacancies")).toBeTruthy()
+    expect(screen.getAllByRole("row")).toHaveLength(5)
+    expect(screen.getByRole("link", { name: "Page 2" }).getAttribute("aria-current")).toBe("page")
+  })
+
+  it("opens a row to its description, one at a time", () => {
+    render(<CareersOpenVacanciesTable />)
+    const first = screen.getByRole("button", { name: "Expand: Senior Product Designer" })
+    expect(first.getAttribute("aria-expanded")).toBe("false")
+    fireEvent.click(first)
+    expect(screen.getByRole("button", { name: "Collapse: Senior Product Designer" }).getAttribute("aria-expanded")).toBe("true")
+    expect(screen.getByRole("button", { name: "View role: Senior Product Designer" })).toBeTruthy()
+    fireEvent.click(screen.getByRole("button", { name: "Expand: Motion Designer" }))
+    expect(screen.getByRole("button", { name: "Expand: Senior Product Designer" }).getAttribute("aria-expanded")).toBe("false")
+  })
+})
+
+describe("Roles List — Accordion Expanded", () => {
+  it("opens the Design Systems Engineer row to start, and opens one row at a time", () => {
+    render(<CareersRolesListAccordionExpanded />)
+    const trigger = (name: string) => screen.getByRole("button", { name: new RegExp(`^${name}`) })
+    expect(trigger("Design Systems Engineer").getAttribute("aria-expanded")).toBe("true")
+    expect(screen.getByText("About the role")).toBeTruthy()
+    fireEvent.click(trigger("Motion Designer"))
+    expect(trigger("Motion Designer").getAttribute("aria-expanded")).toBe("true")
+    expect(trigger("Design Systems Engineer").getAttribute("aria-expanded")).toBe("false")
+  })
+
+  it("lets the page open a row, and report which one the reader opened", () => {
+    const onExpandedChange = vi.fn()
+    render(<CareersRolesListAccordionExpanded defaultExpanded="motion-designer" onExpandedChange={onExpandedChange} />)
+    expect(screen.getByRole("button", { name: /^Motion Designer/ }).getAttribute("aria-expanded")).toBe("true")
+    fireEvent.click(screen.getByRole("button", { name: /^Developer Advocate/ }))
+    expect(onExpandedChange).toHaveBeenCalledWith("developer-advocate")
+  })
+})
+
+describe("About Card + Role List", () => {
+  it("calls onPlay from the play button, and lists every role with its button", () => {
+    const onPlay = vi.fn()
+    render(<CareersAboutCardRoleList onPlay={onPlay} />)
+    fireEvent.click(screen.getByRole("button", { name: "Play the team video" }))
+    expect(onPlay).toHaveBeenCalledTimes(1)
+    expect(screen.getAllByRole("button", { name: /^Apply Now:/ })).toHaveLength(4)
+  })
+
+  it("draws the photo it is given, and none without one", () => {
+    const { container, rerender } = render(<CareersAboutCardRoleList />)
+    expect(container.querySelector("img")).toBeNull()
+    rerender(<CareersAboutCardRoleList photo={{ src: "/team.jpg", alt: "The team at a table" }} />)
+    expect(within(container).getByAltText("The team at a table").getAttribute("src")).toBe("/team.jpg")
+  })
+})
+
+describe("Featured Role Spotlight", () => {
+  it("lists the role's four facts and the team's other roles", () => {
+    render(<CareersFeaturedRoleSpotlight />)
+    expect(screen.getByRole("heading", { level: 2 }).textContent).toContain("Senior Product Designer")
+    expect(screen.getAllByRole("term").map((term) => term.textContent)).toEqual(["Salary", "Location", "Commitment", "Team"])
+    expect(screen.getByRole("button", { name: /Motion Designer/ })).toBeTruthy()
+  })
+
+  it("copies the link where there is no share sheet, says so, and reports the press", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true })
+    const onShare = vi.fn()
+    render(<CareersFeaturedRoleSpotlight shareUrl="https://example.com/roles/1" onShare={onShare} />)
+    fireEvent.click(screen.getByRole("button", { name: "Share role" }))
+    expect(await screen.findByText("Link copied")).toBeTruthy()
+    expect(writeText).toHaveBeenCalledWith("https://example.com/roles/1")
+    expect(onShare).toHaveBeenCalledTimes(1)
+  })
+
+  it("sends a card without an href to onRoleSelect", () => {
+    const onRoleSelect = vi.fn()
+    render(<CareersFeaturedRoleSpotlight onRoleSelect={onRoleSelect} />)
+    fireEvent.click(screen.getByRole("button", { name: /Design Ops Lead/ }))
+    expect(onRoleSelect.mock.calls[0]?.[0].id).toBe("design-ops-lead")
+  })
+})
+
+describe("Perks & Benefits", () => {
+  it("lists the six perks, and the footer button is a link only when it has somewhere to go", () => {
+    const onSeeRoles = vi.fn()
+    const { rerender } = render(<CareersPerksBenefits onSeeRoles={onSeeRoles} />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(6)
+    fireEvent.click(screen.getByRole("button", { name: "See open roles" }))
+    expect(onSeeRoles).toHaveBeenCalledTimes(1)
+    rerender(<CareersPerksBenefits seeRolesHref="/careers" />)
+    expect(screen.getByRole("link", { name: "See open roles" }).getAttribute("href")).toBe("/careers")
+  })
+})
+
+describe("No Open Roles — Empty State", () => {
+  const type = (value: string) => fireEvent.change(screen.getByRole("textbox", { name: "Email address" }), { target: { value } })
+
+  it("refuses a bad address without calling onSubmit, and clears the message when typing resumes", () => {
+    const onSubmit = vi.fn()
+    render(<CareersNoOpenRolesEmptyState onSubmit={onSubmit} />)
+    type("not-an-email")
+    fireEvent.click(screen.getByRole("button", { name: "Notify me" }))
+    expect(screen.getByText("Enter a valid email address.")).toBeTruthy()
+    expect(onSubmit).not.toHaveBeenCalled()
+    type("a@b.co")
+    expect(screen.queryByText("Enter a valid email address.")).toBeNull()
+  })
+
+  it("sends the address with the topics chosen, then says thank you", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined)
+    const onInterestsChange = vi.fn()
+    render(<CareersNoOpenRolesEmptyState onSubmit={onSubmit} onInterestsChange={onInterestsChange} />)
+    fireEvent.click(screen.getByRole("button", { name: "Design" }))
+    fireEvent.click(screen.getByRole("button", { name: "Product" }))
+    fireEvent.click(screen.getByRole("button", { name: "Design" }))
+    expect(onInterestsChange.mock.calls.map((call) => call[0])).toEqual([["Design"], ["Design", "Product"], ["Product"]])
+    type("  yasmin@example.com ")
+    fireEvent.click(screen.getByRole("button", { name: "Notify me" }))
+    expect(await screen.findByText("Thank you. We will write before the roles go public.")).toBeTruthy()
+    expect(onSubmit).toHaveBeenCalledWith("yasmin@example.com", ["Product"])
+    expect(screen.queryByRole("textbox", { name: "Email address" })).toBeNull()
+  })
+
+  it("says so when the send fails, and keeps the form for another try", async () => {
+    render(<CareersNoOpenRolesEmptyState onSubmit={() => Promise.reject(new Error("offline"))} />)
+    type("a@b.co")
+    fireEvent.click(screen.getByRole("button", { name: "Notify me" }))
+    expect(await screen.findByText("We could not send that. Please try again.")).toBeTruthy()
+    expect(screen.getByRole("textbox", { name: "Email address" })).toBeTruthy()
+  })
+})
+
+describe("Role Detail Panel", () => {
+  it("draws the four sections, a close button only when asked, and Apply as a link when the posting has an href", () => {
+    const onClose = vi.fn()
+    const { rerender } = render(<CareersRoleDetailPanel />)
+    expect(screen.getAllByRole("heading", { level: 3 }).map((heading) => heading.textContent)).toEqual(["About the role", "What you'll do", "What we're looking for", "How we hire"])
+    expect(screen.queryByRole("button", { name: "Close" })).toBeNull()
+    rerender(<CareersRoleDetailPanel onClose={onClose} />)
+    fireEvent.click(screen.getByRole("button", { name: "Close" }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+    rerender(<CareersRoleDetailPanel posting={{ ...careersRoleDetailPanelCopy.en.posting, href: "/careers/spd" }} />)
+    expect(screen.getByRole("link", { name: "Apply now: Senior Product Designer" }).getAttribute("href")).toBe("/careers/spd")
+  })
+
+  it("reports Save and shows the saved state", () => {
+    const onSavedChange = vi.fn()
+    render(<CareersRoleDetailPanel onSavedChange={onSavedChange} />)
+    fireEvent.click(screen.getByRole("button", { name: "Save: Senior Product Designer" }))
+    expect(onSavedChange).toHaveBeenCalledWith(true)
+    expect(screen.getByRole("button", { name: "Saved: Senior Product Designer" }).getAttribute("aria-pressed")).toBe("true")
+  })
+
+  it("sits inside Sheet as its content, with no overlay logic of its own", () => {
+    render(
+      <Sheet defaultOpen>
+        <SheetContent side="bottom">
+          <SheetTitle className="sr-only">Senior Product Designer</SheetTitle>
+          <CareersRoleDetailPanel />
+        </SheetContent>
+      </Sheet>
+    )
+    expect(screen.getByRole("dialog")).toBeTruthy()
+    expect(within(screen.getByRole("dialog")).getByText("About the role")).toBeTruthy()
+  })
+})
+
+describe("Role Detail Page", () => {
+  it("has one h1, the breadcrumb ends on the page, and the posting's two paragraphs and six offers show", () => {
+    render(<CareersRoleDetailPage />)
+    expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1)
+    expect(screen.getByText("Careers").closest("a")?.getAttribute("href")).toBe("#")
+    expect(document.querySelector("[aria-current=page]")?.textContent).toBe("Senior Product Designer")
+    expect(screen.getByText(/This is a builder's role/)).toBeTruthy()
+    expect(screen.getByRole("heading", { name: "What we offer" }).parentElement?.querySelectorAll("li")).toHaveLength(6)
+  })
+
+  it("keeps the two Save buttons in step and reports each press", () => {
+    const onSavedChange = vi.fn()
+    render(<CareersRoleDetailPage onSavedChange={onSavedChange} />)
+    fireEvent.click(screen.getByRole("button", { name: "Save role" }))
+    expect(onSavedChange).toHaveBeenCalledWith(true)
+    expect(screen.getByRole("button", { name: "Saved for later" }).getAttribute("aria-pressed")).toBe("true")
+  })
+
+  it("copies the link, says so, and reports the channel; the email button is a mailto link", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true })
+    const onShare = vi.fn()
+    render(<CareersRoleDetailPage shareUrl="https://example.com/r/1" onShare={onShare} />)
+    fireEvent.click(screen.getByRole("button", { name: "Copy link" }))
+    expect(await screen.findByText("Link copied")).toBeTruthy()
+    expect(writeText).toHaveBeenCalledWith("https://example.com/r/1")
+    expect(onShare.mock.calls[0]?.[1]).toBe("link")
+    expect(screen.getByRole("link", { name: "Share by email" }).getAttribute("href")).toContain("mailto:?subject=Senior%20Product%20Designer&body=https%3A%2F%2Fexample.com%2Fr%2F1")
+  })
+
+  it("does not pin or scroll-drive anything", () => {
+    const { container } = render(<CareersRoleDetailPage />)
+    expect(container.innerHTML).not.toMatch(/sticky|fixed|scroll-spy/)
+  })
+})
+
+describe("Featured Role Spotlight pay tile", () => {
+  it("keeps the default pay on one line: 14 characters in English, 19 in Arabic", () => {
+    expect(String(careersFeaturedRoleSpotlightCopy.en.featured.pay).length).toBeLessThanOrEqual(14)
+    expect(String(careersFeaturedRoleSpotlightCopy.ar.featured.pay).length).toBeLessThanOrEqual(19)
+  })
+})
+
+describe("default copy stays inside the documented limits", () => {
+  const titleLimit = 27
+  const lists: [string, CareersRole[]][] = [
+    ["en hairline", careersOpenRolesHairlineListCopy.en.roles],
+    ["ar hairline", careersOpenRolesHairlineListCopy.ar.roles],
+    ["en cards", careersRoleCardsGridCopy.en.roles],
+    ["ar cards", careersRoleCardsGridCopy.ar.roles],
+    ["en department", careersRolesByDepartmentCopy.en.departments.flatMap((group) => group.roles)],
+    ["ar department", careersRolesByDepartmentCopy.ar.departments.flatMap((group) => group.roles)],
+    ["en table", careersOpenVacanciesTableCopy.en.roles],
+    ["ar table", careersOpenVacanciesTableCopy.ar.roles],
+    ["en accordion", careersRolesListAccordionExpandedCopy.en.roles],
+    ["ar accordion", careersRolesListAccordionExpandedCopy.ar.roles],
+    ["en spotlight", [careersFeaturedRoleSpotlightCopy.en.featured, ...careersFeaturedRoleSpotlightCopy.en.others]],
+    ["ar spotlight", [careersFeaturedRoleSpotlightCopy.ar.featured, ...careersFeaturedRoleSpotlightCopy.ar.others]],
+    ["en panel", [careersRoleDetailPanelCopy.en.posting]],
+    ["ar panel", [careersRoleDetailPanelCopy.ar.posting]],
+    ["en page", [careersRoleDetailPageCopy.en.posting]],
+    ["ar page", [careersRoleDetailPageCopy.ar.posting]],
+    ["en about card", careersAboutCardRoleListCopy.en.roles],
+    ["ar about card", careersAboutCardRoleListCopy.ar.roles],
+  ]
+
+  it.each(lists)("%s: a role's title is %i characters or fewer", (_name, roles) => {
+    for (const role of roles) expect(String(role.title).length).toBeLessThanOrEqual(titleLimit)
+  })
+
+  it("writes Arabic without a Latin letter, a middle dot or a dash", () => {
+    // Ids are keys, not copy; every other string is read by a person.
+    const strings = (value: unknown, key = ""): string[] =>
+      typeof value === "string"
+        ? key === "id" || key === "contactEmail"
+          ? []
+          : [value]
+        : Array.isArray(value)
+          ? value.flatMap((item) => strings(item))
+          : value && typeof value === "object"
+            ? Object.entries(value).flatMap(([name, item]) => strings(item, name))
+            : []
+    const arabic = strings([
+      careersOpenRolesHairlineListCopy.ar,
+      careersRoleCardsGridCopy.ar,
+      careersRolesByDepartmentCopy.ar,
+      careersOpenVacanciesTableCopy.ar,
+      careersRolesListAccordionExpandedCopy.ar,
+      careersAboutCardRoleListCopy.ar,
+      careersFeaturedRoleSpotlightCopy.ar,
+      careersPerksBenefitsCopy.ar,
+      careersNoOpenRolesEmptyStateCopy.ar,
+      careersRoleDetailPanelCopy.ar,
+      careersRoleDetailPageCopy.ar,
+    ]).join("\n")
+    expect(arabic).not.toMatch(/[A-Za-z]/)
+    // An en dash is allowed only inside a number range, as Figma writes the Spotlight tile's pay.
+    expect(arabic).not.toMatch(/[·—]|(?<!\d)–|–(?!\d)/)
+  })
+})