basalt-ui 1.27.0 → 1.29.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/delta-badge.tsx

@@ -1,57 +0,0 @@
-/**
- * DeltaBadge — the KPI trend chip (docs/DESIGN-SPEC.md §5): mono 11.5px weight 600, status-color
- * text on a status-13% tint, control radius, 2px/7px padding, optional ▲/▼ glyph at 9px. Sign
- * alone drives the tone — positive reads as success, negative as danger, zero as a neutral faint
- * tint with no glyph. The label never carries a leading "+"; pass `format` to control the
- * magnitude string (defaults to a one-decimal percentage of the absolute value).
- *
- * Mantine-free (plain `<span>` + this folder's CSS module, docs/CONTROLS-SPEC.md §2.2) so
- * `WidgetHeader` can compose it from inside `charts/` without tripping `basalt/token-layer-
- * boundary` or `check-dist-layering.mjs`.
- *
- * @example
- * import { DeltaBadge } from 'basalt-ui'
- *
- * <DeltaBadge value={12.4} />                          // ▲ 12.4%, success tint
- * <DeltaBadge value={-3.1} />                           // ▼ 3.1%, danger tint
- * <DeltaBadge value={0} />                              // 0.0%, neutral faint tint, no glyph
- * <DeltaBadge value={182} format={(v) => `${Math.abs(v)}ms`} withGlyph={false} />
- */
-import { alpha, VX } from '../tokens'
-import classes from './widget-header.module.css'
-
-export type DeltaBadgeProps = {
-  /** Signed delta driving tone (positive/negative/zero) and, by default, the label magnitude. */
-  value: number
-  /** Formats the value into the label text. Defaults to `${Math.abs(value).toFixed(1)}%`. */
-  format?: (value: number) => string
-  /** Render the ▲/▼ direction glyph. Defaults to `true`; a zero value never shows a glyph. */
-  withGlyph?: boolean
-  /** Optional comparison timeframe rendered directly after the value in a dimmer shade of the same
-   * tone (e.g. `MoM`, `WoW`, `YTD`) — states what the delta is measured against without a hover. */
-  period?: string | undefined
-}
-
-const defaultFormat = (value: number): string => `${Math.abs(value).toFixed(1)}%`
-
-export function DeltaBadge({
-  value,
-  format = defaultFormat,
-  withGlyph = true,
-  period,
-}: DeltaBadgeProps) {
-  const tone = value > 0 ? VX.status.good : value < 0 ? VX.status.bad : VX.faint
-  const glyph = value > 0 ? '▲' : value < 0 ? '▼' : undefined
-  const showGlyph = withGlyph && glyph !== undefined
-
-  return (
-    <span
-      className={classes.deltaBadge}
-      style={{ backgroundColor: alpha(tone, 0.13), color: tone }}
-    >
-      {showGlyph && <span className={classes.deltaGlyph}>{glyph}</span>}
-      {format(value)}
-      {period !== undefined && <span className={classes.deltaPeriod}>{period}</span>}
-    </span>
-  )
-}

package/src/widget-header/index.ts

@@ -1,2 +0,0 @@
-export { WidgetHeader, type WidgetHeaderProps } from './widget-header'
-export { DeltaBadge, type DeltaBadgeProps } from './delta-badge'

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')
-})

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

@@ -1,213 +0,0 @@
-/**
- * WidgetHeader — the one heading primitive behind every section, card and table title
- * (docs/CONTROLS-SPEC.md §2.2, law C8). Plain elements + one CSS module, no `@mantine/*` import
- * anywhere in this folder, so it can be composed from inside `charts/` without tripping
- * `basalt/token-layer-boundary` or `check-dist-layering.mjs`.
- *
- * `tier: 'section'` renders an `<h2>` at the taller section-header height; `tier: 'widget'`
- * renders an `<h3>` at the tighter, display-only icon-tier height — both share the same head-font
- * 88%/550 title treatment. The title row holds title/icon/info/count/actions only; `value` +
- * `delta` render on their own hero-metric row directly beneath it, for both tiers — never inline
- * with the title. `StatCard`, `ChartCard`, `Section`, `SettingsSection`/`DangerZone` and
- * `BasaltDataTable` each compose this and render nothing else above their body (wave 3,
- * docs/CONTROLS-SPEC.md §2.2's composer table).
- *
- * @example
- * import { WidgetHeader } from 'basalt-ui'
- *
- * <WidgetHeader
- *   tier="widget"
- *   title="Active Users"
- *   value="12,483"
- *   delta={4.2}
- *   deltaPeriod="MoM"
- *   actions={<ActionIcon variant="subtle"><IconDots /></ActionIcon>}
- * />
- */
-import { useEffect, useId, useRef, useState } from 'react'
-import type { ReactNode } from 'react'
-import { IconSlot } from '../theme/icon-slot'
-import { DeltaBadge } from './delta-badge'
-import classes from './widget-header.module.css'
-
-export type WidgetHeaderProps = {
-  /** `section` renders an `<h2>` at the section-header height; `widget` renders an `<h3>` at the
-   * tighter icon-tier height, display-only. */
-  tier: 'section' | 'widget'
-  /** Head-font title (88% stretch, weight 550). */
-  title: string
-  /** Optional leading icon, rendered before the title. Decorative — hidden from assistive tech. */
-  icon?: ReactNode
-  /** Optional muted line rendered below the title row. */
-  subtitle?: string
-  /**
-   * Renders an info glyph BESIDE the heading (never inside it — this text would otherwise become
-   * part of the heading's accessible name, and an `info` paragraph read out in every headings list
-   * is what that cost). The glyph is named `More information`; the text itself reaches assistive
-   * tech through `aria-describedby` on a `role="tooltip"` bubble that opens on hover, focus and
-   * click — so a keyboard user gets it too. Mantine-free: a plain state bubble, not a Tooltip.
-   */
-  info?: string
-  /** Pre-formatted metric value (mono, hero size). Renders on its own row with `delta`, directly
-   * under the title row — never inline with the title. */
-  value?: string
-  /**
-   * The value's unit, rendered immediately after it on the hero row: muted, mono, `--vx-text-sm`.
-   *
-   * It exists because `value` is a pre-formatted `string` and a KPI's unit is not part of the
-   * number: `412` and `TSS` are two facts at two weights, and jamming them into one string paints
-   * the unit at the hero's 24px — which reads as a second numeral. `subtitle` was the only place a
-   * unit could go before this, and a unit on its own line under the value is a different claim (the
-   * BASIS: `7-day rolling`), so cards using both had to pick one.
-   *
-   * Never a substitute for the number's own formatting: a thousands separator, a currency symbol or
-   * a `%` belong in `value`, where they are part of how the numeral reads.
-   */
-  unit?: string
-  /** Signed delta rendered via `DeltaBadge`, on the same hero-metric row as `value`. */
-  delta?: number
-  /** Comparison timeframe forwarded to `DeltaBadge` (e.g. `MoM`). */
-  deltaPeriod?: string
-  /**
-   * Formats `delta` into the chip's label — forwarded to `DeltaBadge`'s `format`. Defaults to
-   * `${Math.abs(delta).toFixed(1)}%`.
-   *
-   * It exists because not every delta is a percentage: a pace card's trend is `0:12 /km` and a
-   * throughput card's is `0.3 km/h`, and the default printed both as a percent — a wrong unit on a
-   * KPI, which is worse than no chip. A FUNCTION rather than a label string, so the number stays the
-   * number: `delta` still drives the tone and the glyph, and there is exactly one place the sign is
-   * decided.
-   *
-   * The value arrives SIGNED, so a formatter that wants to print the sign itself (`−0:12 /km`) can —
-   * pair it with `deltaGlyph={false}` so the ▼ does not say the same thing twice.
-   */
-  deltaFormat?: (delta: number) => string
-  /** Render `DeltaBadge`'s ▲/▼ glyph. Defaults to `true`; a zero delta never shows one. Pass
-   * `false` when `deltaFormat` prints the sign itself. */
-  deltaGlyph?: boolean
-  /** Trend visual slot, rendered below the metric row. Carries `data-placement="right"` so a
-   * wave-3 composer's `bleed` layout can select it. */
-  sparkline?: ReactNode
-  /** Mono count tag rendered after the title (C11 — every table/list states its count). `0` is a
-   * real count and renders, distinct from omitting the prop entirely. */
-  count?: number
-  /** Right-aligned slot (`margin-inline-start: auto`) — the C1/C5 home for header actions. */
-  actions?: ReactNode
-}
-
-/**
- * The info affordance. A `title` attribute alone was never enough — it renders on hover only, so a
- * keyboard user focusing the glyph saw nothing at all. This is the bubble `ChartCard` used to own
- * before it composed `WidgetHeader`, moved down here so every tier gets the same behaviour:
- * opens on hover/focus/click, closes on leave/blur/Escape/outside pointer-down, and is wired to the
- * trigger with `aria-describedby` only while open.
- */
-function InfoGlyph({ text }: { text: string }) {
-  const [open, setOpen] = useState(false)
-  const tipId = useId()
-  const triggerRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const handlePointerDown = (event: PointerEvent) => {
-      if (triggerRef.current?.contains(event.target as Node)) return
-      setOpen(false)
-    }
-    document.addEventListener('pointerdown', handlePointerDown)
-    return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [open])
-
-  return (
-    <span className={classes.info}>
-      <button
-        ref={triggerRef}
-        type="button"
-        className={classes.infoTrigger}
-        // The GLYPH is named, not the text — `text` reaches AT through `aria-describedby` below, so
-        // it never lands in the heading's or the button's accessible name.
-        aria-label="More information"
-        aria-describedby={open ? tipId : undefined}
-        data-open={open}
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
-        onFocus={() => setOpen(true)}
-        onBlur={() => setOpen(false)}
-        onClick={() => setOpen(true)}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') setOpen(false)
-        }}
-      >
-        <svg width={11} height={11} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 5a1 1 0 0 1 1 1v7a1 1 0 1 1-2 0v-7a1 1 0 0 1 1-1z" />
-        </svg>
-      </button>
-      {open && (
-        <span id={tipId} role="tooltip" className={classes.infoBubble}>
-          {text}
-        </span>
-      )}
-    </span>
-  )
-}
-
-export function WidgetHeader({
-  tier,
-  title,
-  icon,
-  subtitle,
-  info,
-  value,
-  unit,
-  delta,
-  deltaPeriod,
-  deltaFormat,
-  deltaGlyph,
-  sparkline,
-  count,
-  actions,
-}: WidgetHeaderProps) {
-  const Heading = tier === 'section' ? 'h2' : 'h3'
-
-  return (
-    <div className={classes.root} data-tier={tier}>
-      <div className={classes.titleRow}>
-        <Heading className={classes.heading}>
-          {/* `IconSlot` owns the box; the TIER owns its size, through the
-              `--vx-space-icon-size` this module sets per `data-tier`. So a `tier="widget"`
-              heading draws 14px and a `tier="section"` heading 16px with no prop and no
-              per-component `> svg` rule — see `theme/icon-slot.tsx`. */}
-          {icon !== undefined && <IconSlot className={classes.icon}>{icon}</IconSlot>}
-          <span className={classes.titleText}>{title}</span>
-        </Heading>
-        {/* OUTSIDE the heading on purpose — see `info`'s own doc. */}
-        {info !== undefined && <InfoGlyph text={info} />}
-        {count !== undefined && <span className={classes.count}>{count}</span>}
-        {actions !== undefined && <span className={classes.actions}>{actions}</span>}
-      </div>
-      {(value !== undefined || delta !== undefined) && (
-        <div className={classes.metrics}>
-          {value !== undefined && <span className={classes.value}>{value}</span>}
-          {/* Gated on `value`, not on itself: a unit with nothing to qualify is a stray word, and a
-              card that lost its number must not keep printing `TSS` beside the empty space. */}
-          {value !== undefined && unit !== undefined && (
-            <span className={classes.unit}>{unit}</span>
-          )}
-          {delta !== undefined && (
-            <DeltaBadge
-              value={delta}
-              period={deltaPeriod}
-              {...(deltaFormat !== undefined && { format: deltaFormat })}
-              {...(deltaGlyph !== undefined && { withGlyph: deltaGlyph })}
-            />
-          )}
-        </div>
-      )}
-      {subtitle !== undefined && <span className={classes.subtitle}>{subtitle}</span>}
-      {sparkline !== undefined && (
-        <div className={classes.sparkline} data-placement="right">
-          {sparkline}
-        </div>
-      )}
-    </div>
-  )
-}