diff --git a/apps/website/e2e/primitives.spec.ts b/apps/website/e2e/primitives.spec.ts deleted file mode 100644 index 3d008f780..000000000 --- a/apps/website/e2e/primitives.spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('UI primitives showcase', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/dev/primitives'); - }); - - test('renders the page heading', async ({ page }) => { - await expect(page.locator('[data-testid="primitives-page-title"]')).toBeVisible(); - }); - - test('renders LogoMark', async ({ page }) => { - // Scope to the dev showcase main content (Nav + Footer also render LogoMark site-wide). - const logos = page.locator('main [data-ui="logo-mark"]'); - await expect(logos).toHaveCount(3); - }); - - test('renders Eyebrow in all tones', async ({ page }) => { - // Scope to main; Footer renders accent-toned Eyebrows for its column headings. - await expect(page.locator('main [data-ui="eyebrow"][data-tone="muted"]').first()).toBeVisible(); - await expect(page.locator('main [data-ui="eyebrow"][data-tone="accent"]').first()).toBeVisible(); - await expect(page.locator('main [data-ui="eyebrow"][data-tone="angular"]').first()).toBeVisible(); - }); - - test('renders Pill in all variants', async ({ page }) => { - await expect(page.locator('[data-ui="pill"][data-variant="neutral"]')).toBeVisible(); - await expect(page.locator('[data-ui="pill"][data-variant="accent"]')).toBeVisible(); - await expect(page.locator('[data-ui="pill"][data-variant="angular"]')).toBeVisible(); - }); - - test('renders Button variants', async ({ page }) => { - await expect(page.locator('[data-ui="button"][data-variant="primary"]').first()).toBeVisible(); - await expect(page.locator('[data-ui="button"][data-variant="secondary"]')).toBeVisible(); - await expect(page.locator('[data-ui="button"][data-variant="ghost"]')).toBeVisible(); - // Large primary renders as an with href - const linkButton = page.locator('a[data-ui="button"][data-size="lg"]'); - await expect(linkButton).toHaveAttribute('href', '/docs'); - }); - - test('renders Card variants including hoverable', async ({ page }) => { - const cards = page.locator('[data-ui="card"]'); - await expect(cards).toHaveCount(3); - await expect(page.locator('[data-ui="card"][data-hoverable]')).toHaveCount(1); - }); - - test('renders BrowserFrame with URL pill', async ({ page }) => { - const frame = page.locator('[data-ui="browser-frame"]'); - await expect(frame).toBeVisible(); - await expect(frame).toContainText('cockpit.threadplane.ai'); - }); - - test('renders Section with tinted surface variant', async ({ page }) => { - await expect(page.locator('[data-ui="section"][data-surface="tinted"]')).toBeVisible(); - }); - - test('FAQ items toggle open and closed', async ({ page }) => { - const firstItem = page.locator('[data-ui="faq-item"]').first(); - await expect(firstItem).not.toHaveAttribute('open', ''); - await firstItem.locator('summary').click(); - await expect(firstItem).toHaveAttribute('open', ''); - await firstItem.locator('summary').click(); - await expect(firstItem).not.toHaveAttribute('open', ''); - }); - - test('FAQ summary is keyboard-focusable', async ({ page }) => { - const summary = page.locator('[data-ui="faq-item"]').first().locator('summary'); - await summary.focus(); - await expect(summary).toBeFocused(); - }); -}); diff --git a/apps/website/src/app/dev/primitives/page.tsx b/apps/website/src/app/dev/primitives/page.tsx deleted file mode 100644 index 0d15dff5f..000000000 --- a/apps/website/src/app/dev/primitives/page.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { Container } from '../../../components/ui/Container'; -import { Section } from '../../../components/ui/Section'; -import { Eyebrow } from '../../../components/ui/Eyebrow'; -import { Pill } from '../../../components/ui/Pill'; -import { Button } from '../../../components/ui/Button'; -import { Card } from '../../../components/ui/Card'; -import { BrowserFrame } from '../../../components/ui/BrowserFrame'; -import { LogoMark } from '../../../components/ui/LogoMark'; -import { FAQ, type FAQItem } from '../../../components/ui/FAQ'; - -export const metadata = { title: 'UI primitives — dev only' }; - -const FAQ_ITEMS: FAQItem[] = [ - { - q: 'Is this real?', - a: 'Yes — this page is for verifying the primitives during refactor Phase 1.', - }, - { - q: 'Will it stay forever?', - a: 'No, this route gets deleted once the marketing pages have migrated.', - }, -]; - -export default function PrimitivesDevPage() { - return ( - <> -
- -

- UI primitives -

- -

LogoMark

-
- - - -
- -

Eyebrow

-
- Default muted - Accent - Angular -
- -

Pill

-
- MIT - LangGraph - Angular 20+ -
- -

Button

-
- - - - -
- -

Card

-
- - Standard -

A basic card with default padding.

- - - Hoverable -

Hover me — gentle lift + stronger shadow.

- - - Tinted, lg padding -

Used for emphasized callouts.

- -
- -

BrowserFrame

-
- -
- Placeholder content -
- -
- -
- -
- -

Section surface = tinted

-

This section uses the tinted surface variant.

- -
- -
- -

FAQ

- - -
- - ); -} diff --git a/apps/website/src/app/docs/page.tsx b/apps/website/src/app/docs/page.tsx index 066baa729..bdfa0ffaa 100644 --- a/apps/website/src/app/docs/page.tsx +++ b/apps/website/src/app/docs/page.tsx @@ -162,7 +162,7 @@ function LogoChip({ src }: { src: string }) { } function GlyphChip({ size, children }: { size: number; children: ReactNode }) { - return {children}; + return {children}; } export default function DocsLandingPage() { diff --git a/apps/website/src/app/solutions/[slug]/page.tsx b/apps/website/src/app/solutions/[slug]/page.tsx index f4bbdfa5b..70b0f34dc 100644 --- a/apps/website/src/app/solutions/[slug]/page.tsx +++ b/apps/website/src/app/solutions/[slug]/page.tsx @@ -47,7 +47,7 @@ function PainPoints({ items, accent }: { items: SolutionPainPoint[]; accent: str
- The problem + The problem

Why this is hard today.

@@ -82,7 +82,7 @@ function Architecture({
- Architecture + Architecture

How the three libraries compose.

@@ -130,7 +130,7 @@ function Capabilities({ items, accent }: { items: ProofPoint[]; accent: string }
- What you ship + What you ship

Capabilities the framework delivers.

@@ -138,7 +138,7 @@ function Capabilities({ items, accent }: { items: ProofPoint[]; accent: string }
{items.map((p) => ( -
+
{p.metric}

@@ -163,7 +163,7 @@ export default async function SolutionPage({ params }: PageProps) {

- {solution.eyebrow} + {solution.eyebrow}

{solution.title}

diff --git a/apps/website/src/components/docs/mdx/Card.tsx b/apps/website/src/components/docs/mdx/Card.tsx index 7dc083e2c..0d7d72a41 100644 --- a/apps/website/src/components/docs/mdx/Card.tsx +++ b/apps/website/src/components/docs/mdx/Card.tsx @@ -5,9 +5,7 @@ export function CardGroup({ cols = 2, children }: { cols?: number; children: Rea return (
{children}
diff --git a/apps/website/src/components/pricing/CompareTable.tsx b/apps/website/src/components/pricing/CompareTable.tsx index 48db280a1..5dabf2262 100644 --- a/apps/website/src/components/pricing/CompareTable.tsx +++ b/apps/website/src/components/pricing/CompareTable.tsx @@ -308,14 +308,8 @@ function SectionTable({ function CtaStrip({ cycle }: { cycle: BillingCycle }) { return (
{TIERS.map((tier) => ( diff --git a/apps/website/src/components/shared/AnnouncementToast.tsx b/apps/website/src/components/shared/AnnouncementToast.tsx index b51411dbd..ba86f79e2 100644 --- a/apps/website/src/components/shared/AnnouncementToast.tsx +++ b/apps/website/src/components/shared/AnnouncementToast.tsx @@ -89,10 +89,7 @@ export function AnnouncementToast() { role="alert" aria-live="polite" className="toast-root" - style={{ - opacity: mounted ? 1 : 0, - transform: mounted ? 'translateY(0)' : 'translateY(12px)', - }} + data-mounted={mounted || undefined} > {/* Dismiss button */}