@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/custom/ActiveWork/SessionListItem.tsx

@@ -0,0 +1,152 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, type ReactNode } from 'react'
+import { Pressable, View } from 'react-native'
+import { Tooltip, useHoverState } from '../../ui/tooltip'
+import { DateTime } from '../DateTime'
+import { Typography } from '../Typography'
+import { formatSessionDuration, formatTaskAge } from './format-time'
+import { extractTaskRefs } from './session-linkers'
+
+/** One recorded session, as the session reader consumes it. */
+export interface SessionSummary {
+  id: string
+  /** The session file's name, when the host has it. */
+  filename?: string
+  /** ISO timestamps. */
+  started: string
+  ended: string
+  /** `canonical` is the mainline thread; anything else (`sidecar`, `adhoc`) is folded or parallel work. */
+  track: string
+  /** The log's first heading, without the leading `#`. */
+  title: string
+  /** The session log's markdown body. */
+  body: string
+}
+
+export interface SessionListItemProps {
+  session: SessionSummary
+  /** Reference instant for the age label, injected so renders are deterministic. */
+  now: number
+  /** Renders the selected treatment (raised fill + leading accent bar). */
+  selected?: boolean
+  onSelect?: () => void
+}
+
+/** The row's footer as one string: age, wall-clock length, distinct tasks touched, and the track. */
+export function sessionRowMeta(session: SessionSummary, now: number, taskCount: number): string {
+  const parts = [formatTaskAge(session.ended, now)]
+  const duration = formatSessionDuration(session.started, session.ended)
+  if (duration) parts.push(duration)
+  if (taskCount > 0) parts.push(`${taskCount} ${taskCount === 1 ? 'task' : 'tasks'}`)
+  parts.push(session.track)
+  return parts.join(' · ')
+}
+
+function MetaText({ children }: { children: ReactNode }) {
+  return (
+    <Typography variant="caption" className="leading-none text-text-tertiary">
+      {children}
+    </Typography>
+  )
+}
+
+/**
+ * A footer segment with a hover detail. The Tooltip is controlled and renders
+ * no Pressable, so the row underneath keeps its press.
+ */
+function MetaHover({
+  tip,
+  testID,
+  children,
+}: {
+  tip: ReactNode
+  testID: string
+  children: string
+}) {
+  const { hovered, hoverProps } = useHoverState()
+  return (
+    <Tooltip usePortal isOpen={hovered} content={tip}>
+      <View {...hoverProps} testID={testID}>
+        <MetaText>{children}</MetaText>
+      </View>
+    </Tooltip>
+  )
+}
+
+/** The exact end time behind the relative age. */
+export function ExactTime({ session }: { session: SessionSummary }) {
+  return (
+    <DateTime value={session.ended} format="datetime" isUTC variant="caption" color="primary" />
+  )
+}
+
+/** The task ids behind the count. */
+export function TaskIds({ refs }: { refs: string[] }) {
+  return (
+    <Typography variant="mono" className="text-text-primary">
+      {refs.join(' ')}
+    </Typography>
+  )
+}
+
+function RowMeta({ session, now, refs }: { session: SessionSummary; now: number; refs: string[] }) {
+  const duration = formatSessionDuration(session.started, session.ended)
+  const count = refs.length
+  return (
+    <View className="flex-row flex-wrap items-center">
+      <MetaHover tip={<ExactTime session={session} />} testID="session-age">
+        {formatTaskAge(session.ended, now)}
+      </MetaHover>
+      {duration ? <MetaText>{` · ${duration}`}</MetaText> : null}
+      {count > 0 ? (
+        <>
+          <MetaText>{' · '}</MetaText>
+          <MetaHover tip={<TaskIds refs={refs} />} testID="session-task-count">
+            {`${count} ${count === 1 ? 'task' : 'tasks'}`}
+          </MetaHover>
+        </>
+      ) : null}
+      <MetaText>{` · ${session.track}`}</MetaText>
+    </View>
+  )
+}
+
+/**
+ * SessionListItem — one session in the reader's list, led by its title, with
+ * a footer of age · duration · tasks touched · track. Hovering the age shows
+ * the exact end time; hovering the task count lists the task ids.
+ *
+ * Composes {@link Tooltip} (controlled, so the row keeps its press),
+ * {@link DateTime} and {@link Typography}. Used by {@link SessionList}.
+ */
+export function SessionListItem({
+  session,
+  now,
+  selected = false,
+  onSelect,
+}: SessionListItemProps) {
+  const refs = useMemo(() => extractTaskRefs(session.body), [session.body])
+  return (
+    <Pressable
+      onPress={onSelect}
+      // Raw `role`/`aria-selected` rather than `accessibilityState={{ selected }}`:
+      // RNW silently drops the latter, so selection would never reach AT.
+      role="option"
+      aria-selected={selected}
+      accessibilityLabel={`${session.title}, ${sessionRowMeta(session, now, refs.length)}`}
+      testID="session-list-item"
+      className={`relative gap-1 rounded-md px-3 py-2 ${selected ? 'bg-surface-raised' : ''}`}
+    >
+      {selected ? (
+        <View
+          testID="session-list-item-accent"
+          className="absolute bottom-2 left-0 top-2 w-[3px] rounded-r-[3px] bg-brand-primary"
+        />
+      ) : null}
+      <Typography variant="body2" numberOfLines={2} className="font-medium text-text-primary">
+        {session.title}
+      </Typography>
+      <RowMeta session={session} now={now} refs={refs} />
+    </Pressable>
+  )
+}

package/src/components/custom/ActiveWork/SessionReader.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View } from 'react-native'
+import { Surface } from '../../ui/surface'
+import { SessionDetail } from './SessionDetail'
+import { SessionList } from './SessionList'
+import type { SessionSummary } from './SessionListItem'
+import { SESSION_FIXTURE, SESSION_NOW, SESSION_TASK_FIXTURE } from './session-fixture'
+import type { TaskListItem } from './TaskRow'
+
+interface ReaderArgs {
+  sessions: SessionSummary[]
+  /** The host's task store; the detail looks its touched ids up here. */
+  tasks: TaskListItem[]
+  now: number
+  onPressTask: (id: string) => void
+  onPressLink: (name: string) => void
+  onPressPr: (number: number) => void
+}
+
+/**
+ * The two halves composed the way a host would: the host owns `selectedId`
+ * and lays the list beside the detail. There is deliberately no
+ * `SessionReader` organism; this story is the reference composition.
+ */
+function SessionReader({ sessions, tasks, now, onPressTask, onPressLink, onPressPr }: ReaderArgs) {
+  const [selectedId, setSelectedId] = useState(sessions[0]?.id)
+  const selected = sessions.find((s) => s.id === selectedId) ?? sessions[0]
+  return (
+    <View className="flex-row gap-4">
+      <SessionList
+        className="w-72"
+        sessions={sessions}
+        now={now}
+        selectedId={selected?.id}
+        onSelect={(s) => setSelectedId(s.id)}
+      />
+      {selected ? (
+        <SessionDetail
+          className="flex-1"
+          session={selected}
+          tasks={tasks}
+          now={now}
+          onPressTask={onPressTask}
+          onPressLink={onPressLink}
+          onPressPr={onPressPr}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+/**
+ * **M1 · Session reader** — a selectable list of session logs beside the
+ * selected log, rendered as prose with task ids, `[[name]]` links and PR
+ * numbers auto-linked.
+ *
+ * Composes `SessionList` (→ `SessionListItem`) and `SessionDetail`
+ * (→ `MarkdownProse`). Selection lives in the host.
+ */
+const meta: Meta<ReaderArgs> = {
+  title: 'Custom/ActiveWork/SessionReader',
+  component: SessionReader,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    sessions: SESSION_FIXTURE,
+    tasks: SESSION_TASK_FIXTURE,
+    now: SESSION_NOW,
+  },
+  argTypes: {
+    sessions: { table: { disable: true } },
+    tasks: { table: { disable: true } },
+    now: { table: { disable: true } },
+    onPressTask: { action: 'onPressTask' },
+    onPressLink: { action: 'onPressLink' },
+    onPressPr: { action: 'onPressPr' },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <View className="w-full max-w-[1100px]">
+          <Story />
+        </View>
+      </Surface>
+    ),
+  ],
+  parameters: {
+    // Fullscreen: the page Surface is the host plane the detail card lifts off, so it owns the frame.
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **SessionList** (→ SessionListItem) · **SessionDetail** (→ MarkdownProse, Card, Divider, Pill, DateTime). The host owns selection.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<ReaderArgs>
+
+/** Six real sessions, newest first; the newest is selected. */
+export const Default: Story = {}
+
+/** A single session, so the list and detail read without neighbours. */
+export const OneSession: Story = {
+  args: { sessions: SESSION_FIXTURE.slice(0, 1) },
+}
+
+/** No task store: the tasks-touched strip stays pills with no table toggle. */
+export const WithoutTaskStore: Story = {
+  args: { tasks: [] },
+}

package/src/components/custom/ActiveWork/SeverityLabel.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { SeverityLabel, SEVERITY_ORDER } from './SeverityLabel'
+
+/**
+ * **SeverityLabel** — a task's severity as a coloured dot plus its label.
+ * Composes `Indicator`; the family's single owner of the severity vocabulary
+ * (type, order, rank, dot and bar colours).
+ */
+const meta: Meta<typeof SeverityLabel> = {
+  title: 'Custom/ActiveWork/SeverityLabel',
+  component: SeverityLabel,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { severity: 'high' },
+  argTypes: {
+    severity: { control: 'select', options: [...SEVERITY_ORDER, undefined] },
+    dotOnly: { control: 'boolean' },
+  },
+  parameters: {
+    docs: { description: { component: 'Composes **Indicator** · **Typography**.' } },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof SeverityLabel>
+
+export const Default: Story = {}
+
+/** All four severities, worst-first — the canonical `SEVERITY_ORDER`. */
+export const AllSeverities: Story = {
+  render: () => (
+    <View className="gap-2">
+      {SEVERITY_ORDER.map((severity) => (
+        <SeverityLabel key={severity} severity={severity} />
+      ))}
+    </View>
+  ),
+}
+
+/** Dot only, for a legend key or a very tight column. */
+export const DotOnly: Story = {
+  args: { dotOnly: true },
+}
+
+/**
+ * Unset severity renders an em-dash rather than nothing, so a table column keeps
+ * its alignment instead of collapsing.
+ */
+export const Unset: Story = {
+  args: { severity: undefined },
+}

package/src/components/custom/ActiveWork/SeverityLabel.test.tsx

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  SeverityLabel,
+  SEVERITY_ORDER,
+  SEVERITY_RANK,
+  SEVERITY_BAR_COLOR,
+  severityRank,
+} from './SeverityLabel'
+
+describe('SeverityLabel', () => {
+  it('renders the dot and the label for a severity', () => {
+    render(<SeverityLabel severity="critical" />)
+    expect(screen.getByText('Critical')).toBeInTheDocument()
+    expect(screen.getByTestId('severity-dot-critical')).toBeInTheDocument()
+  })
+
+  it('renders every severity with its own label', () => {
+    for (const severity of SEVERITY_ORDER) {
+      const { unmount } = render(<SeverityLabel severity={severity} />)
+      expect(screen.getByTestId(`severity-dot-${severity}`)).toBeInTheDocument()
+      unmount()
+    }
+  })
+
+  it('drops the label but keeps the dot when dotOnly', () => {
+    render(<SeverityLabel severity="high" dotOnly />)
+    expect(screen.getByTestId('severity-dot-high')).toBeInTheDocument()
+    expect(screen.queryByText('High')).not.toBeInTheDocument()
+  })
+
+  it('renders an em-dash and no dot when severity is unset', () => {
+    render(<SeverityLabel />)
+    expect(screen.getByText('—')).toBeInTheDocument()
+    expect(screen.queryByTestId(/^severity-dot-/)).not.toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<SeverityLabel severity="medium" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})
+
+describe('severity vocabulary', () => {
+  it('ranks worst-first, matching SEVERITY_ORDER', () => {
+    const byRank = [...SEVERITY_ORDER].sort((a, b) => SEVERITY_RANK[a] - SEVERITY_RANK[b])
+    expect(byRank).toEqual(SEVERITY_ORDER)
+  })
+
+  it('ranks an unset severity after every real one', () => {
+    for (const severity of SEVERITY_ORDER) {
+      expect(severityRank(severity)).toBeLessThan(severityRank(undefined))
+    }
+  })
+
+  it('does not rank alphabetically — low is last, not second', () => {
+    // The bug this guards: 'critical' < 'high' < 'low' < 'medium' as strings,
+    // which reads as "low is more urgent than medium".
+    expect(severityRank('low')).toBeGreaterThan(severityRank('medium'))
+  })
+
+  it('covers every severity in the bar palette', () => {
+    for (const severity of SEVERITY_ORDER) {
+      expect(SEVERITY_BAR_COLOR[severity]).toBeTruthy()
+    }
+  })
+})

package/src/components/custom/ActiveWork/SeverityLabel.tsx

@@ -0,0 +1,97 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { resolveColor } from '../../../theme/resolve-color'
+import { Indicator } from '../../ui/indicator'
+import { Typography } from '../Typography'
+
+/** How much a task hurts if left undone. Ordered worst-first by {@link SEVERITY_RANK}. */
+export type TaskSeverity = 'critical' | 'high' | 'medium' | 'low'
+
+/**
+ * Sort weight per severity, worst-first. Exported so a table can rank a severity
+ * column by meaning rather than alphabetically ("critical" < "high" < "low" as
+ * strings puts low in the middle).
+ */
+export const SEVERITY_RANK: Record<TaskSeverity, number> = {
+  critical: 0,
+  high: 1,
+  medium: 2,
+  low: 3,
+}
+
+/** Severities worst-first — the canonical order for legends and pickers. */
+export const SEVERITY_ORDER: TaskSeverity[] = ['critical', 'high', 'medium', 'low']
+
+/** Rank for a possibly-absent severity; unset sorts after every real value. */
+export function severityRank(severity?: TaskSeverity): number {
+  return severity ? SEVERITY_RANK[severity] : SEVERITY_ORDER.length
+}
+
+/**
+ * Severity to its display label and {@link Indicator} colour. Critical and high
+ * both read as error; the vivid step separates "drop everything" from "serious".
+ */
+export const SEVERITY_META: Record<
+  TaskSeverity,
+  { label: string; dot: React.ComponentProps<typeof Indicator>['color'] }
+> = {
+  critical: { label: 'Critical', dot: 'error-vivid' },
+  high: { label: 'High', dot: 'error' },
+  medium: { label: 'Medium', dot: 'warning' },
+  low: { label: 'Low', dot: 'info' },
+}
+
+/**
+ * Severity as a fill for an area mark (a {@link SegmentedBar} segment), where
+ * {@link SEVERITY_META} gives the point-mark dot colour.
+ *
+ * `low` diverges deliberately: as a dot among four it needs to stay legible, but
+ * as a bar segment it should recede, so it takes `text-tertiary` rather than
+ * `status-info`. Both live here so the severity vocabulary has one owner.
+ */
+export const SEVERITY_BAR_COLOR: Record<TaskSeverity, string> = {
+  critical: resolveColor('status-error-vivid'),
+  high: resolveColor('status-error'),
+  medium: resolveColor('status-warning'),
+  low: resolveColor('text-tertiary'),
+}
+
+export interface SeverityLabelProps {
+  /** Omitted renders the em-dash placeholder rather than nothing, so columns stay aligned. */
+  severity?: TaskSeverity
+  /** Hides the text, leaving only the dot — for a legend key or a very tight column. */
+  dotOnly?: boolean
+  className?: string
+}
+
+/**
+ * SeverityLabel — a task's severity as a coloured dot plus its label.
+ *
+ * Composes {@link Indicator}; never hand-roll a status dot (there are already two
+ * dot primitives in the system, and this is not a third). Used by
+ * {@link TaskRow} and {@link TaskTable}'s legend.
+ *
+ * @deprecated Use `<Pill tone="…" leading="dot">` — removed after AW-127 consumer migration.
+ */
+export function SeverityLabel({ severity, dotOnly = false, className }: SeverityLabelProps) {
+  if (!severity) {
+    return (
+      <Typography variant="caption" className={cn('text-text-tertiary', className)}>
+        —
+      </Typography>
+    )
+  }
+
+  const { label, dot } = SEVERITY_META[severity]
+  return (
+    <View className={cn('flex-row items-center gap-1.5', className)}>
+      <Indicator size="sm" color={dot} testID={`severity-dot-${severity}`} />
+      {dotOnly ? null : (
+        <Typography variant="caption" color="inherit" className="text-text-secondary">
+          {label}
+        </Typography>
+      )}
+    </View>
+  )
+}

package/src/components/custom/ActiveWork/TaskRow.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { Table, TableBody } from '../Table'
+import { TaskRow } from './TaskRow'
+import { TASK_LIST_FIXTURE } from './task-list-fixture'
+
+/**
+ * **TaskRow** — one task as a dense grid row. Composes `TableRow`/`TableCell`,
+ * so it must render inside a `Table` to pick up row semantics and density.
+ */
+const meta: Meta<typeof TaskRow> = {
+  title: 'Custom/ActiveWork/TaskRow',
+  component: TaskRow,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    task: TASK_LIST_FIXTURE[0],
+    ageLabel: '2d ago',
+  },
+  decorators: [
+    (Story) => (
+      <Surface
+        level="base"
+        className="min-h-screen w-full max-w-[1100px] p-6"
+        testID="page-surface"
+      >
+        <Table density="dense">
+          <TableBody>
+            <Story />
+          </TableBody>
+        </Table>
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **TableRow** · **TableCell** · **SeverityLabel** · **Pill** · **Typography**.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof TaskRow>
+
+export const Default: Story = {}
+
+/** A critical task carrying more tags than the row shows — the rest collapse to a `+n`. */
+export const CriticalWithOverflowingTags: Story = {
+  args: { task: TASK_LIST_FIXTURE[2], ageLabel: 'today' },
+}
+
+/** No severity and no estimate: both columns hold an em-dash so the grid stays aligned. */
+export const MissingSeverityAndEstimate: Story = {
+  args: { task: TASK_LIST_FIXTURE[5], ageLabel: '29d ago' },
+}
+
+/** A title long enough to clip to one line rather than wrapping the row taller. */
+export const LongTitle: Story = {
+  args: { task: TASK_LIST_FIXTURE[0], ageLabel: '1d ago' },
+}

package/src/components/custom/ActiveWork/TaskRow.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Table, TableBody } from '../Table'
+import { TaskRow } from './TaskRow'
+import type { TaskListItem } from './TaskRow'
+
+const task: TaskListItem = {
+  slug: 'active-work',
+  id: 'AW-22',
+  title: 'Read-only dashboard prototypes',
+  severity: 'high',
+  priority: 20,
+  estimate: 8,
+  tags: ['dashboard', 'titan', 'specimen', 'extra'],
+  updated: '2026-08-29T10:00:00Z',
+}
+
+/** TaskRow composes TableRow/TableCell, so it needs a Table for row semantics. */
+function renderRow(
+  overrides: Partial<TaskListItem> = {},
+  ageLabel = '1d ago',
+  severityDotOnly = false
+) {
+  return render(
+    <Table density="dense">
+      <TableBody>
+        <TaskRow
+          task={{ ...task, ...overrides }}
+          ageLabel={ageLabel}
+          severityDotOnly={severityDotOnly}
+        />
+      </TableBody>
+    </Table>
+  )
+}
+
+describe('TaskRow', () => {
+  it('shows only the severity dot when collapsed, with the word on hover', () => {
+    renderRow({}, '1d ago', true)
+    expect(screen.queryByText('High')).not.toBeInTheDocument()
+    fireEvent.mouseEnter(screen.getByTestId('severity-dot-high').parentElement!.parentElement!)
+    expect(screen.getByText('High')).toBeInTheDocument()
+  })
+
+  it('reveals the elided tags when the overflow count is hovered', () => {
+    renderRow()
+    expect(screen.queryByText('specimen')).not.toBeInTheDocument()
+    fireEvent.mouseEnter(screen.getByText('+2').parentElement!)
+    expect(screen.getByText('specimen')).toBeInTheDocument()
+    expect(screen.getByText('extra')).toBeInTheDocument()
+  })
+
+  it('shows the exact date behind the age label on hover', () => {
+    renderRow()
+    fireEvent.mouseEnter(screen.getByText('1d ago').parentElement!)
+    expect(screen.getByText('Aug 29, 2026')).toBeInTheDocument()
+  })
+
+  it('renders every column of a fully-populated task', () => {
+    renderRow()
+    expect(screen.getByText('active-work')).toBeInTheDocument()
+    expect(screen.getByText('AW-22')).toBeInTheDocument()
+    expect(screen.getByText('Read-only dashboard prototypes')).toBeInTheDocument()
+    expect(screen.getByText('High')).toBeInTheDocument()
+    expect(screen.getByText('20')).toBeInTheDocument()
+    expect(screen.getByText('8')).toBeInTheDocument()
+    expect(screen.getByText('1d ago')).toBeInTheDocument()
+  })
+
+  it('shows the first two tags and collapses the rest into a count', () => {
+    renderRow()
+    expect(screen.getByText('dashboard')).toBeInTheDocument()
+    expect(screen.getByText('titan')).toBeInTheDocument()
+    expect(screen.queryByText('specimen')).not.toBeInTheDocument()
+    expect(screen.getByText('+2')).toBeInTheDocument()
+  })
+
+  it('omits the overflow count when the tags all fit', () => {
+    renderRow({ tags: ['one'] })
+    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument()
+  })
+
+  it('handles a task with no tags at all', () => {
+    renderRow({ tags: undefined })
+    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument()
+    expect(screen.getByText('AW-22')).toBeInTheDocument()
+  })
+
+  it('renders an em-dash for an absent estimate rather than a zero', () => {
+    renderRow({ estimate: undefined })
+    expect(screen.getByText('—')).toBeInTheDocument()
+    expect(screen.queryByText('0')).not.toBeInTheDocument()
+  })
+
+  it('renders an em-dash in the severity column when severity is unset', () => {
+    renderRow({ severity: undefined, estimate: 8 })
+    expect(screen.getByText('—')).toBeInTheDocument()
+    expect(screen.queryByTestId(/^severity-dot-/)).not.toBeInTheDocument()
+  })
+
+  it('exposes one row with eight cells to assistive tech', () => {
+    renderRow()
+    expect(screen.getByRole('row')).toBeInTheDocument()
+    expect(screen.getAllByRole('cell')).toHaveLength(8)
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = renderRow()
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})