@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/team-overlay-portrait-cards/team-overlay-portrait-cards.test.tsx

@@ -0,0 +1,49 @@
+import { beforeAll, describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { TeamOverlayPortraitCards, teamOverlayPortraitCardsCopy } from "./TeamOverlayPortraitCards"
+
+// jsdom has no matchMedia, which the shared reveal hook asks for.
+beforeAll(() => {
+  window.matchMedia ??= ((query: string) => ({ matches: false, media: query, addEventListener() {}, removeEventListener() {} })) as unknown as typeof window.matchMedia
+})
+
+describe("Team Overlay Portrait Cards", () => {
+  it.each(["en", "ar"] as const)("renders four portraits in %s, under an h2 that names the section", (locale) => {
+    const { container } = render(<TeamOverlayPortraitCards locale={locale} />)
+    const copy = teamOverlayPortraitCardsCopy[locale]
+    const heading = screen.getByRole("heading", { level: 2 })
+    expect(heading.textContent).toBe(copy.heading)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(screen.getAllByRole("listitem")).toHaveLength(4)
+    for (const person of copy.people) expect(screen.getByText(person.name as string)).toBeTruthy()
+  })
+
+  it("shows the sample bios in both languages, so the hover has something to reveal", () => {
+    const { container, rerender } = render(<TeamOverlayPortraitCards />)
+    expect(screen.getByText("Shapes how Fasla looks and sounds.")).toBeTruthy()
+    expect(container.querySelectorAll("article[tabindex='0']")).toHaveLength(4)
+    rerender(<TeamOverlayPortraitCards locale="ar" />)
+    expect(screen.getByText("تصوغ هوية فاصلة البصرية.")).toBeTruthy()
+  })
+
+  it("draws no bio unless a person has one, and a card with one takes focus so a keyboard can reveal it", () => {
+    const { container, rerender } = render(<TeamOverlayPortraitCards people={[{ id: "a", name: "A", role: "r" }]} />)
+    expect(container.querySelectorAll("article[tabindex]")).toHaveLength(0)
+    rerender(<TeamOverlayPortraitCards people={[{ id: "a", name: "A", role: "r", bio: "Ships the thing." }]} />)
+    expect(screen.getByText("Ships the thing.")).toBeTruthy()
+    expect(container.querySelectorAll("article[tabindex='0']")).toHaveLength(1)
+  })
+
+  it("paints the caption bar with the inverse tokens, so it follows the mode as the section does", () => {
+    const { container } = render(<TeamOverlayPortraitCards />)
+    const bar = container.querySelector("article > div:last-child")!
+    expect(bar.className).toContain("bg-background-inverse")
+    expect(bar.className).toContain("text-foreground-inverse")
+    expect(bar.className).not.toContain("dark:")
+  })
+
+  it("renders no cards for an empty list", () => {
+    render(<TeamOverlayPortraitCards people={[]} />)
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0)
+  })
+})

package/registry/blocks/team-portrait-wall/TeamPortraitWall.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { REVEAL, TeamHeader, TeamPortrait, TeamSection, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Portrait Wall.
+ *
+ * An eyebrow and heading, then twelve portraits with a name and a role under
+ * each. Desktop sets them six to a row, Tablet four, phones two. The portraits
+ * fade in on a diagonal wave that starts at the top-start corner (column plus
+ * row sets each one's delay, so right-to-left pages start from the right). On
+ * devices with hover, pointing at one portrait dims the others to 40% and
+ * lifts it 4px; touch devices get neither. Nothing is scroll-linked.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+export interface TeamPortraitWallCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The people, in reading order. Photos come with each person's `photo`. */
+  people: TeamPerson[]
+}
+
+/** Figma's copy, English and Arabic. Figma shows Nadia Rahman and Amira Sultan, whose photos can't ship: Clara Weiss and Yara Khalil stand in. */
+const COPY: Record<"en" | "ar", TeamPortraitWallCopy> = {
+  en: {
+    eyebrow: "EVERYONE",
+    heading: "Nineteen people, one system",
+    people: [
+      { name: "Layla Mansour", role: "Chief Executive" },
+      { name: "Karim Haddad", role: "Chief Technology" },
+      { name: "Clara Weiss", role: "Accessibility Lead" },
+      { name: "Tomas Vidal", role: "VP of Engineering" },
+      { name: "Omar Nasser", role: "Head of Product" },
+      { name: "Lukas Berg", role: "Design Systems Lead" },
+      { name: "Grace Okafor", role: "Principal Engineer" },
+      { name: "Elena Novak", role: "Staff Product Designer" },
+      { name: "Marcus Boateng", role: "Head of Marketing" },
+      { name: "Yara Khalil", role: "Product Manager" },
+      { name: "Rami Aziz", role: "Solutions Architect" },
+      { name: "Sofia Marchetti", role: "Brand Designer" },
+    ],
+  },
+  ar: {
+    eyebrow: "الجميع",
+    heading: "تسعة عشر شخصًا، نظام واحد",
+    people: [
+      { name: "ليلى منصور", role: "الرئيسة التنفيذية" },
+      { name: "كريم حداد", role: "رئيس التقنية" },
+      { name: "كلارا فايس", role: "قائدة إمكانية الوصول" },
+      { name: "توماس فيدال", role: "نائب رئيس الهندسة" },
+      { name: "عمر ناصر", role: "رئيس المنتج" },
+      { name: "لوكاس بيرغ", role: "قائد أنظمة التصميم" },
+      { name: "غرايس أوكافور", role: "مهندسة رئيسية" },
+      { name: "إيلينا نوفاك", role: "مصمِّمة منتجات أولى" },
+      { name: "ماركوس بواتينغ", role: "رئيس التسويق" },
+      { name: "يارا خليل", role: "مديرة المنتج" },
+      { name: "رامي عزيز", role: "مهندس حلول" },
+      { name: "صوفيا ماركيتي", role: "مصمِّمة هوية" },
+    ],
+  },
+}
+
+export const teamPortraitWallCopy = COPY
+
+export interface TeamPortraitWallProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamPortraitWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function TeamPortraitWall({ locale = "en", eyebrow, heading, people, className, ...props }: TeamPortraitWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} contentClassName="gap-16" {...props}>
+      <TeamHeader headingId={headingId} eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow} heading={heading ?? copy.heading} />
+      {list.length > 0 ? (
+        <ul
+          className={cn(
+            "group/wall grid w-full grid-cols-2 gap-x-3 gap-y-6",
+            "[@container(min-width:40rem)]:grid-cols-4 [@container(min-width:40rem)]:gap-x-4",
+            "[@container(min-width:64rem)]:grid-cols-6 [@container(min-width:64rem)]:gap-x-6"
+          )}
+        >
+          {list.map((person, index) => (
+            <li
+              key={index}
+              className={cn(
+                REVEAL,
+                // The wave: column + row, for whichever column count is showing.
+                "[--reveal-i:var(--team-wave-2)] [@container(min-width:40rem)]:[--reveal-i:var(--team-wave-4)] [@container(min-width:64rem)]:[--reveal-i:var(--team-wave-6)]"
+              )}
+              style={
+                {
+                  "--reveal-y": "12px",
+                  "--reveal-step": "70ms",
+                  "--team-wave-2": (index % 2) + Math.floor(index / 2),
+                  "--team-wave-4": (index % 4) + Math.floor(index / 4),
+                  "--team-wave-6": (index % 6) + Math.floor(index / 6),
+                } as React.CSSProperties
+              }
+            >
+              {/* Hover lives on this inner box so the reveal's delay never lags it. */}
+              <div
+                className={cn(
+                  "flex flex-col gap-2 motion-safe:transition-[opacity,transform] motion-safe:duration-200 motion-reduce:transition-none",
+                  "[@media(hover)]:group-hover/wall:opacity-40 hover:[@media(hover)]:!opacity-100 hover:[@media(hover)]:motion-safe:-translate-y-1 "
+                )}
+              >
+                <TeamPortrait person={person} className="aspect-[4/5] w-full" />
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium text-foreground">{person.name}</span>
+                  <span className="text-xs text-muted-foreground">{person.role}</span>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </TeamSection>
+  )
+}

package/registry/blocks/team-portrait-wall/index.ts

@@ -0,0 +1 @@
+export { TeamPortraitWall, teamPortraitWallCopy, type TeamPortraitWallCopy, type TeamPortraitWallProps } from "./TeamPortraitWall"

package/registry/blocks/team-portrait-wall/portrait-wall.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { TeamPortraitWall } from "./TeamPortraitWall"
+
+describe("Team Portrait Wall", () => {
+  it("renders Figma's English copy: an h2 naming the section and twelve people", () => {
+    render(<TeamPortraitWall />)
+    const heading = screen.getByRole("heading", { level: 2, name: "Nineteen people, one system" })
+    expect(screen.getByRole("region", { name: "Nineteen people, one system" })).toBeTruthy()
+    expect(heading.tagName).toBe("H2")
+    expect(screen.getAllByRole("listitem")).toHaveLength(12)
+    expect(screen.getByText("EVERYONE")).toBeTruthy()
+    expect(screen.getByText("Sofia Marchetti")).toBeTruthy()
+  })
+
+  it("renders the Arabic copy", () => {
+    render(<TeamPortraitWall locale="ar" />)
+    expect(screen.getByRole("heading", { level: 2, name: "تسعة عشر شخصًا، نظام واحد" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(12)
+    expect(screen.getByText("قائدة إمكانية الوصول")).toBeTruthy()
+  })
+
+  it("shows a photo with its alt, or initials without one", () => {
+    const { container } = render(
+      <TeamPortraitWall people={[{ name: "Layla Mansour", role: "CEO", photo: { src: "/a.webp", alt: "Layla" } }, { name: "Karim Haddad", role: "CTO" }]} />
+    )
+    expect(screen.getByAltText("Layla")).toBeTruthy()
+    expect(container.textContent).toContain("KH")
+  })
+
+  it("sets the wave delay from column plus row, per column count", () => {
+    render(<TeamPortraitWall />)
+    const items = screen.getAllByRole("listitem")
+    // The 8th person (index 7): 6 columns -> col 1 + row 1; 4 columns -> col 3 + row 1; 2 columns -> col 1 + row 3.
+    expect(items[7]!.style.getPropertyValue("--team-wave-6")).toBe("2")
+    expect(items[7]!.style.getPropertyValue("--team-wave-4")).toBe("4")
+    expect(items[7]!.style.getPropertyValue("--team-wave-2")).toBe("4")
+  })
+
+  it("renders no list for an empty roster", () => {
+    render(<TeamPortraitWall people={[]} />)
+    expect(screen.queryByRole("list")).toBeNull()
+    expect(screen.getByRole("heading", { level: 2 })).toBeTruthy()
+  })
+})

package/registry/blocks/team-split-intro-member-rail/TeamSplitIntroMemberRail.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { REVEAL, Reveal, TeamFigures, TeamPortrait, TeamSection, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: Team (46368:243916), Type=Split Intro + Member Rail (Desktop LTR 41435:1083).
+ *
+ * Two columns on Desktop: an intro at the start (eyebrow, a 3XL heading, a
+ * paragraph and a stat line, 420px wide) and a rail of eight member rows at the
+ * end. Each row is a 56px portrait, the name and role, and the location at the
+ * row's end, with a hairline under it. Nothing is pinned or sticky: the intro
+ * simply sits at the top of its column. Tablet and Mobile put the intro above
+ * the rail; on Mobile the location moves under the role in the name block.
+ *
+ * Motion (the approved card): the intro fades up 12px once; the rows then
+ * reveal 16px up, 40ms apart, the location sliding in 8px (it only fades on
+ * Mobile). Hover or focus tints a row with `muted` and slides the name 4px
+ * toward the end. All of it is `motion-safe:` and nothing replays or follows
+ * the scroll.
+ *
+ * Mobile first, by the block's own width: base = Figma Mobile (360),
+ * `[@container(min-width:40rem)]:` = Tablet, `[@container(min-width:64rem)]:` = Desktop.
+ */
+
+export interface TeamSplitMember extends TeamPerson {
+  /** The city, at the row's end. */
+  location: React.ReactNode
+  /** Makes the name a link; the whole row becomes its target. */
+  href?: string
+}
+
+export interface TeamSplitIntroMemberRailCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The paragraph under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** The line of figures under the paragraph. Hidden when empty. */
+  stats: React.ReactNode
+  /** The rail's rows, in reading order. Figma shows eight. */
+  members: TeamSplitMember[]
+}
+
+/** Figma's copy. Dana Haddad and Zainab Idris have no shippable photo, so Tomas Vidal and Omar Nasser stand in. */
+const COPY: Record<"en" | "ar", TeamSplitIntroMemberRailCopy> = {
+  en: {
+    eyebrow: "THE TEAM",
+    heading: "A small team with deep range",
+    description:
+      "We hire people who have shipped systems before and want to do it properly this time. Everyone here writes, designs or reviews the components you use.",
+    stats: "19 people · 7 disciplines · 4 cities",
+    members: [
+      { name: "Hana Kobayashi", role: "Motion Designer", location: "Singapore" },
+      { name: "Clara Weiss", role: "Accessibility Lead", location: "Berlin" },
+      { name: "Yara Khalil", role: "Product Manager", location: "Amman" },
+      { name: "Mei Tanaka", role: "Customer Success Lead", location: "Singapore" },
+      { name: "Tomas Vidal", role: "VP of Engineering", location: "Lisbon" },
+      { name: "Chloe Dubois", role: "Content Designer", location: "Lisbon" },
+      { name: "Omar Nasser", role: "Head of Product", location: "Dubai" },
+      { name: "Sofia Marchetti", role: "Brand Designer", location: "Lisbon" },
+    ],
+  },
+  ar: {
+    eyebrow: "الفريق",
+    heading: "فريق صغير بخبرة واسعة",
+    description: "نستقطب من سبق له بناء أنظمة ويريد إنجازها بالشكل الصحيح هذه المرة. كل فرد هنا يكتب أو يصمّم أو يراجع المكوّنات التي تستخدمها.",
+    stats: "19 فردًا · 7 تخصصات · 4 مدن",
+    members: [
+      { name: "هانا كوباياشي", role: "مصمِّمة حركة", location: "سنغافورة" },
+      { name: "كلارا فايس", role: "قائدة إمكانية الوصول", location: "برلين" },
+      { name: "يارا خليل", role: "مديرة المنتج", location: "عمّان" },
+      { name: "ماي تاناكا", role: "قائدة نجاح العملاء", location: "سنغافورة" },
+      { name: "توماس فيدال", role: "نائب رئيس الهندسة", location: "لشبونة" },
+      { name: "كلوي دوبوا", role: "مصمِّمة محتوى", location: "لشبونة" },
+      { name: "عمر ناصر", role: "رئيس المنتج", location: "دبي" },
+      { name: "صوفيا ماركيتي", role: "مصمِّمة هوية", location: "لشبونة" },
+    ],
+  },
+}
+
+export interface TeamSplitIntroMemberRailProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<TeamSplitIntroMemberRailCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function TeamSplitIntroMemberRail({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  stats,
+  members,
+  className,
+  ...props
+}: TeamSplitIntroMemberRailProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = members ?? copy.members
+  const eyebrowText = eyebrow === undefined ? copy.eyebrow : eyebrow
+  const descriptionText = description === undefined ? copy.description : description
+  const statsText = stats === undefined ? copy.stats : stats
+
+  return (
+    <TeamSection
+      labelledBy={headingId}
+      className={className}
+      contentClassName="gap-8 [@container(min-width:40rem)]:gap-12 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-20"
+      {...props}
+    >
+      {/* The intro is one block: it fades up once, and is not pinned. */}
+      <Reveal index={0} className="flex w-full flex-col gap-4 [@container(min-width:64rem)]:w-[26.25rem] [@container(min-width:64rem)]:shrink-0">
+        {eyebrowText ? <p className="text-sm font-medium text-muted-foreground">{eyebrowText}</p> : null}
+        <h2
+          id={headingId}
+          className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl"
+        >
+          <TeamFigures>{heading ?? copy.heading}</TeamFigures>
+        </h2>
+        {descriptionText ? (
+          <p className="text-base text-muted-foreground">
+            <TeamFigures>{descriptionText}</TeamFigures>
+          </p>
+        ) : null}
+        {statsText ? (
+          <p className="text-sm font-medium text-foreground">
+            <TeamFigures>{statsText}</TeamFigures>
+          </p>
+        ) : null}
+      </Reveal>
+
+      {list.length > 0 ? (
+        <ul className="m-0 flex w-full min-w-0 list-none flex-col p-0 [@container(min-width:64rem)]:flex-1">
+          {list.map((member, index) => (
+            <RailRow key={index} member={member} index={index} />
+          ))}
+        </ul>
+      ) : null}
+    </TeamSection>
+  )
+}
+
+function RailRow({ member, index }: { member: TeamSplitMember; index: number }) {
+  // Index 0 is the intro; the rows follow it, 40ms apart.
+  const order = index + 1
+  return (
+    <Reveal
+      as="li"
+      index={order}
+      y={16}
+      step={40}
+      className={cn(
+        "group/row relative isolate grid grid-cols-[3.5rem_minmax(0,1fr)] items-center gap-x-4 border-b border-border py-3",
+        "[@container(min-width:40rem)]:grid-cols-[3.5rem_minmax(0,1fr)_auto]",
+        // The tint is its own layer, so it can run past the row's text without moving the layout.
+        "before:absolute before:-inset-x-3 before:inset-y-0 before:-z-10 before:rounded-md before:bg-muted before:opacity-0 motion-safe:before:transition-opacity motion-safe:before:duration-150",
+        "hover:before:opacity-100 focus-within:before:opacity-100"
+      )}
+    >
+      <TeamPortrait person={member} className="row-span-3 size-14 rounded-md [@container(min-width:40rem)]:row-span-2" />
+      <span
+        className={cn(
+          "col-start-2 row-start-1 self-end text-base font-medium text-foreground",
+          "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out",
+          "group-hover/row:motion-safe:translate-x-1 group-focus-within/row:motion-safe:translate-x-1 rtl:group-hover/row:motion-safe:-translate-x-1 rtl:group-focus-within/row:motion-safe:-translate-x-1"
+        )}
+      >
+        {member.href ? (
+          <a
+            href={member.href}
+            className="rounded-sm outline-none after:absolute after:inset-0 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          >
+            {member.name}
+          </a>
+        ) : (
+          member.name
+        )}
+      </span>
+      <span className="col-start-2 row-start-2 self-start text-sm text-muted-foreground">{member.role}</span>
+      <span
+        style={{ "--reveal-i": order, "--reveal-y": "0px", "--reveal-step": "40ms" } as React.CSSProperties}
+        className={cn(
+          REVEAL,
+          // Mobile: under the role, fading in with its row. From Tablet it sits at the end and slides in 8px.
+          "col-start-2 row-start-3 self-start pt-0.5 text-xs text-muted-foreground [--reveal-x:0px]",
+          "[@container(min-width:40rem)]:col-start-3 [@container(min-width:40rem)]:row-span-2 [@container(min-width:40rem)]:row-start-1 [@container(min-width:40rem)]:self-center [@container(min-width:40rem)]:pt-0 [@container(min-width:40rem)]:text-sm [@container(min-width:40rem)]:[--reveal-x:8px]"
+        )}
+      >
+        {member.location}
+      </span>
+    </Reveal>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const teamSplitIntroMemberRailCopy = COPY

package/registry/blocks/team-split-intro-member-rail/index.ts

@@ -0,0 +1,7 @@
+export {
+  TeamSplitIntroMemberRail,
+  teamSplitIntroMemberRailCopy,
+  type TeamSplitIntroMemberRailCopy,
+  type TeamSplitIntroMemberRailProps,
+  type TeamSplitMember,
+} from "./TeamSplitIntroMemberRail"

package/registry/blocks/team-split-intro-member-rail/split-intro-member-rail.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest"
+import { render, screen, within } from "@testing-library/react"
+import { TeamSplitIntroMemberRail, teamSplitIntroMemberRailCopy } from "./TeamSplitIntroMemberRail"
+
+describe("Team Split Intro + Member Rail", () => {
+  it("names the section by its h2 and lists eight members", () => {
+    const { container } = render(<TeamSplitIntroMemberRail />)
+    const heading = screen.getByRole("heading", { level: 2, name: "A small team with deep range" })
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(screen.getAllByRole("listitem")).toHaveLength(8)
+    expect(screen.getByText("THE TEAM")).toBeTruthy()
+    expect(container.textContent).toContain("19 people · 7 disciplines · 4 cities")
+  })
+
+  it("shows a name, a role and a location in every row", () => {
+    render(<TeamSplitIntroMemberRail />)
+    const row = screen.getAllByRole("listitem")[0]!
+    expect(within(row).getByText("Hana Kobayashi")).toBeTruthy()
+    expect(within(row).getByText("Motion Designer")).toBeTruthy()
+    expect(within(row).getByText("Singapore")).toBeTruthy()
+  })
+
+  it("renders Figma's Arabic copy", () => {
+    render(<TeamSplitIntroMemberRail locale="ar" />)
+    expect(screen.getByRole("heading", { level: 2, name: "فريق صغير بخبرة واسعة" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(8)
+    expect(screen.getByText("هانا كوباياشي")).toBeTruthy()
+    expect(teamSplitIntroMemberRailCopy.ar.members).toHaveLength(8)
+  })
+
+  it("pins nothing: the intro is not sticky or fixed", () => {
+    const { container } = render(<TeamSplitIntroMemberRail />)
+    expect(container.innerHTML).not.toMatch(/sticky|fixed/)
+  })
+
+  it("makes the name a link, stretched over the row, when a member has an href", () => {
+    render(<TeamSplitIntroMemberRail members={[{ name: "Ada", role: "Engineer", location: "Oslo", href: "/ada" }]} />)
+    expect(screen.getByRole("link", { name: "Ada" }).getAttribute("href")).toBe("/ada")
+  })
+
+  it("renders no rail for an empty list", () => {
+    render(<TeamSplitIntroMemberRail members={[]} />)
+    expect(screen.queryByRole("list")).toBeNull()
+  })
+
+  it("accepts a photo and uses its alt", () => {
+    render(
+      <TeamSplitIntroMemberRail members={[{ name: "Ada", role: "Engineer", location: "Oslo", photo: { src: "/a.jpg", alt: "Ada at work" } }]} />
+    )
+    expect(screen.getByAltText("Ada at work")).toBeTruthy()
+  })
+})