basalt-ui 1.27.0 → 1.28.0

package/src/widget-header/delta-badge.test.tsx

@@ -1,60 +0,0 @@
-/**
- * `DeltaBadge` — sign-driven tone/glyph, `withGlyph`, custom `format`, and `period` (docs/
- * DESIGN-SPEC.md §5). Mantine-free, so no `MantineProvider` wrapper is needed.
- *
- * CSS-module class hashes are unavailable under `bun test` (see `app-mobile-nav.test.tsx`'s doc) —
- * every query below goes through text content, never `classes.*`.
- */
-import { render, screen } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { DeltaBadge } from './delta-badge'
-
-describe('sign drives tone and glyph', () => {
-  test('positive renders the up glyph and the formatted magnitude', () => {
-    render(<DeltaBadge value={12.4} />)
-    expect(screen.getByText('▲')).toBeDefined()
-    expect(screen.getByText('12.4%')).toBeDefined()
-  })
-
-  test('negative renders the down glyph and the formatted magnitude', () => {
-    render(<DeltaBadge value={-3.1} />)
-    expect(screen.getByText('▼')).toBeDefined()
-    expect(screen.getByText('3.1%')).toBeDefined()
-  })
-
-  test('zero renders the formatted magnitude with no glyph', () => {
-    render(<DeltaBadge value={0} />)
-    expect(screen.getByText('0.0%')).toBeDefined()
-    expect(screen.queryByText('▲')).toBeNull()
-    expect(screen.queryByText('▼')).toBeNull()
-  })
-})
-
-test('withGlyph={false} suppresses the glyph even for a signed value', () => {
-  render(<DeltaBadge value={12.4} withGlyph={false} />)
-  expect(screen.getByText('12.4%')).toBeDefined()
-  expect(screen.queryByText('▲')).toBeNull()
-})
-
-test('a zero value never shows a glyph, even with withGlyph={true}', () => {
-  render(<DeltaBadge value={0} withGlyph={true} />)
-  expect(screen.queryByText('▲')).toBeNull()
-  expect(screen.queryByText('▼')).toBeNull()
-})
-
-test('a custom format overrides the default percentage label', () => {
-  render(<DeltaBadge value={182} format={(v) => `${Math.abs(v)}ms`} withGlyph={false} />)
-  expect(screen.getByText('182ms')).toBeDefined()
-  expect(screen.queryByText('182.0%')).toBeNull()
-})
-
-test('period renders after the value, in the same badge', () => {
-  render(<DeltaBadge value={4.2} period="MoM" />)
-  expect(screen.getByText('4.2%')).toBeDefined()
-  expect(screen.getByText('MoM')).toBeDefined()
-})
-
-test('omitting period renders no extra text', () => {
-  render(<DeltaBadge value={4.2} />)
-  expect(screen.queryByText('MoM')).toBeNull()
-})

package/src/widget-header/no-mantine.test.ts

@@ -1,33 +0,0 @@
-/**
- * `src/widget-header/**` must stay Mantine-free (docs/CONTROLS-SPEC.md §2.2) — so `ChartCard`
- * (inside the `charts/` boundary) can compose `WidgetHeader`/`DeltaBadge` without tripping
- * `basalt/token-layer-boundary` or `check-dist-layering.mjs`. Source-level regex check, same idiom
- * as `styles.floor.test.ts`'s direct read of shipped text — independent of oxlint, which only runs
- * over changed files locally and could be skipped.
- *
- * The pattern matches an actual import/re-export specifier, not any mention of "@mantine" in
- * prose — this module's own doc comments say "Mantine-free" and name `@mantine/*` on purpose.
- */
-import { readdirSync, readFileSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, test } from 'bun:test'
-
-const WIDGET_HEADER_DIR = dirname(fileURLToPath(import.meta.url))
-const MANTINE_IMPORT = /(?:from|import)\s*\(?\s*['"]@mantine\//
-
-const sourceFiles = readdirSync(WIDGET_HEADER_DIR).filter(
-  (name) =>
-    (name.endsWith('.ts') || name.endsWith('.tsx')) &&
-    !name.endsWith('.test.ts') &&
-    !name.endsWith('.test.tsx'),
-)
-
-describe('src/widget-header — Mantine-free', () => {
-  for (const name of sourceFiles) {
-    test(`${name} imports no '@mantine/*' module`, () => {
-      const text = readFileSync(join(WIDGET_HEADER_DIR, name), 'utf8')
-      expect(text).not.toMatch(MANTINE_IMPORT)
-    })
-  }
-})

package/src/widget-header/widget-header.test.tsx

@@ -1,187 +0,0 @@
-/**
- * `WidgetHeader` — the tier/heading contract, the count tag, the actions slot, and the info glyph's
- * accessibility contract (docs/CONTROLS-SPEC.md §2.2). Mantine-free, so components mount with no
- * `MantineProvider` at all (unlike `stat-card.test.tsx`'s `renderToStaticMarkup` harness).
- *
- * CSS-module class hashes are unavailable under `bun test` (see `app-mobile-nav.test.tsx`'s doc) —
- * nothing here selects on `classes.*`; every query goes through role/accessible-name/text content.
- */
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { WidgetHeader } from './widget-header'
-
-const CSS = readFileSync(join(import.meta.dir, 'widget-header.module.css'), 'utf8')
-
-/** The declaration block of one class in this module — CSS-module hashes are unavailable under
- *  `bun test`, so the rules themselves are read from the file (same idiom as
- *  `theme/layout-rhythm-css.test.ts` and `controls/filter-set.test.tsx`). */
-function block(selector: string): string {
-  const start = CSS.indexOf(`${selector} {`)
-  expect(start).toBeGreaterThan(-1)
-  return CSS.slice(start, CSS.indexOf('}', start))
-}
-
-describe('the hero-metric row — value → delta spacing and alignment', () => {
-  test('the value→badge gap is the 8px rhythm step, and a TOKEN so density tracks it', () => {
-    // It shipped as `gap: 4px`. 4px is the rhythm's smallest step — label-to-thing distance — and at
-    // that distance the DeltaBadge read as a superscript hanging off the numeral. A literal would
-    // also have frozen the gap while every other spacing in the header moved with the density knob.
-    const metrics = block('.metrics')
-    expect(metrics).toContain('gap: var(--vx-space-stack-sm)')
-    expect(metrics).not.toContain('gap: 4px')
-    expect(metrics).not.toMatch(/gap:\s*\d/)
-  })
-
-  test('the badge is CENTRED on the value, not baseline-aligned to it', () => {
-    // A DeltaBadge is a padded box with an 11.5px mono label; aligning its TEXT baseline to a 24px
-    // KPI numeral's baseline put the box itself low — top edge under the numeral's x-height, bottom
-    // edge hanging below its baseline. The `count` tag in the title row already centres for the
-    // same reason.
-    const metrics = block('.metrics')
-    expect(metrics).toContain('align-items: center')
-    expect(metrics).not.toContain('align-items: baseline')
-  })
-})
-
-describe('tier picks the heading level', () => {
-  test('section renders an h2', () => {
-    render(<WidgetHeader tier="section" title="Overview" />)
-    expect(screen.getByRole('heading', { level: 2, name: 'Overview' })).toBeDefined()
-  })
-
-  test('widget renders an h3', () => {
-    render(<WidgetHeader tier="widget" title="Active Users" />)
-    expect(screen.getByRole('heading', { level: 3, name: 'Active Users' })).toBeDefined()
-  })
-})
-
-test('count renders a mono tag after the title', () => {
-  render(<WidgetHeader tier="section" title="Recent orders" count={42} />)
-  expect(screen.getByText('42')).toBeDefined()
-})
-
-test('count={0} renders "0" — a real count, distinct from an omitted one', () => {
-  render(<WidgetHeader tier="section" title="Recent orders" count={0} />)
-  expect(screen.getByText('0')).toBeDefined()
-})
-
-test('omitting count renders no tag', () => {
-  render(<WidgetHeader tier="section" title="Recent orders" />)
-  expect(screen.queryByText('0')).toBeNull()
-})
-
-describe('the actions slot renders only when passed', () => {
-  test('absent by default', () => {
-    render(<WidgetHeader tier="widget" title="Active Users" />)
-    expect(screen.queryByRole('button', { name: 'Menu' })).toBeNull()
-  })
-
-  test('present when given', () => {
-    render(
-      <WidgetHeader
-        tier="widget"
-        title="Active Users"
-        actions={<button type="button">Menu</button>}
-      />,
-    )
-    expect(screen.getByRole('button', { name: 'Menu' })).toBeDefined()
-  })
-})
-
-describe('the info glyph', () => {
-  const INFO = 'Measured over the trailing 30 days.'
-
-  test("is named `More information` — the text is NOT the button's accessible name", () => {
-    render(<WidgetHeader tier="widget" title="Uptime" info={INFO} />)
-    expect(screen.getByRole('button', { name: 'More information' })).toBeDefined()
-    expect(screen.queryByRole('button', { name: INFO })).toBeNull()
-  })
-
-  test("leaves the heading's accessible name as the title ALONE", () => {
-    // The glyph used to live inside the heading, so an `info` paragraph was read out with the title
-    // in every headings list. This is the assertion that keeps it outside.
-    render(<WidgetHeader tier="widget" title="Uptime" info={INFO} />)
-    const heading = screen.getByRole('heading', { level: 3 })
-    expect(heading.textContent).toBe('Uptime')
-    expect(heading.querySelector('button')).toBeNull()
-    expect(screen.getByRole('heading', { level: 3, name: 'Uptime' })).toBeDefined()
-  })
-
-  test('the bubble is closed until asked, and describes the trigger while open', () => {
-    render(<WidgetHeader tier="section" title="Uptime" info={INFO} />)
-    const trigger = screen.getByRole('button', { name: 'More information' })
-    expect(trigger.getAttribute('aria-describedby')).toBeNull()
-    expect(screen.queryByRole('tooltip')).toBeNull()
-
-    fireEvent.focus(trigger)
-    const bubble = screen.getByRole('tooltip')
-    expect(bubble.textContent).toBe(INFO)
-    expect(trigger.getAttribute('aria-describedby')).toBe(bubble.id)
-  })
-
-  test('KEYBOARD reaches it — focus opens, Escape and blur close', () => {
-    // A `title` attribute alone rendered on hover only, which is the whole reason this bubble exists.
-    render(<WidgetHeader tier="widget" title="Uptime" info={INFO} />)
-    const trigger = screen.getByRole('button', { name: 'More information' })
-
-    fireEvent.focus(trigger)
-    expect(screen.getByRole('tooltip')).toBeDefined()
-
-    fireEvent.keyDown(trigger, { key: 'Escape' })
-    expect(screen.queryByRole('tooltip')).toBeNull()
-
-    fireEvent.focus(trigger)
-    fireEvent.blur(trigger)
-    expect(screen.queryByRole('tooltip')).toBeNull()
-  })
-
-  test('a pointer-down outside closes it', () => {
-    render(<WidgetHeader tier="widget" title="Uptime" info={INFO} />)
-    fireEvent.click(screen.getByRole('button', { name: 'More information' }))
-    expect(screen.getByRole('tooltip')).toBeDefined()
-
-    fireEvent.pointerDown(document.body)
-    expect(screen.queryByRole('tooltip')).toBeNull()
-  })
-})
-
-test('omitting info renders no glyph', () => {
-  render(<WidgetHeader tier="widget" title="Uptime" />)
-  expect(screen.queryByRole('button')).toBeNull()
-})
-
-test('value + delta render together, delta via DeltaBadge', () => {
-  render(<WidgetHeader tier="widget" title="Active Users" value="12,483" delta={4.2} />)
-  expect(screen.getByText('12,483')).toBeDefined()
-  expect(screen.getByText('4.2%')).toBeDefined()
-})
-
-describe('value + delta render on their own row under the title, for both tiers', () => {
-  for (const tier of ['section', 'widget'] as const) {
-    test(tier, () => {
-      render(<WidgetHeader tier={tier} title="Active Users" value="12,483" delta={4.2} />)
-      const valueNode = screen.getByText('12,483')
-      // Never inline with the title — the heading holds title/icon/info/count/actions only.
-      expect(valueNode.closest('h2, h3')).toBeNull()
-    })
-  }
-})
-
-test('subtitle renders below the title row', () => {
-  render(<WidgetHeader tier="section" title="Profile" subtitle="Your public identity." />)
-  expect(screen.getByText('Your public identity.')).toBeDefined()
-})
-
-test('the sparkline slot carries a data-placement for a future bleed layout', () => {
-  render(
-    <WidgetHeader
-      tier="widget"
-      title="Active Users"
-      sparkline={<span data-testid="spark">trend</span>}
-    />,
-  )
-  const spark = screen.getByTestId('spark')
-  expect(spark.closest('[data-placement]')?.getAttribute('data-placement')).toBe('right')
-})