@fragments-sdk/ui 0.9.4 → 0.9.6

package/src/components/DataTable/DataTable.module.scss

@@ -0,0 +1,300 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+.wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Caption for accessibility
+.caption {
+  padding: var(--fui-space-3, $fui-space-3) 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  text-align: left;
+  caption-side: top;
+}
+
+// Visually hidden caption (screen readers only)
+.captionHidden {
+  @include visually-hidden;
+}
+
+// Size variants
+.sm {
+  .th,
+  .td {
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  }
+}
+
+.md {
+  .th,
+  .td {
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  }
+}
+
+// Header
+.thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.headerRow {
+  border-bottom: 1px solid var(--fui-border, $fui-border);
+}
+
+.th {
+  text-align: left;
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+
+  &:first-child {
+    border-top-left-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--fui-radius-md, $fui-radius-md);
+  }
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+}
+
+// Sortable header cell (for focus styles)
+.thSortable {
+  padding: 0;
+}
+
+.sortButton {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fui-space-1, $fui-space-1);
+  width: 100%;
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  color: inherit;
+  text-align: left;
+  transition: color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+}
+
+.sortIndicator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  flex-shrink: 0;
+
+  .sortButton:hover & {
+    color: var(--fui-text-secondary, $fui-text-secondary);
+  }
+}
+
+// Body
+.tbody {}
+
+.row {
+  border-bottom: 1px solid var(--fui-border, $fui-border);
+  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+}
+
+.clickable {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &:active {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+}
+
+.selected {
+  background-color: rgba($fui-color-accent, 0.08);
+
+  &:hover {
+    background-color: rgba($fui-color-accent, 0.12);
+  }
+}
+
+.td {
+  color: var(--fui-text-primary, $fui-text-primary);
+  vertical-align: middle;
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+}
+
+// Striped rows
+.striped {
+  .row:nth-child(even) {
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+  }
+
+  // Hover and selected override stripe
+  .clickable:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  .clickable:active {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  .selected {
+    background-color: rgba($fui-color-accent, 0.08);
+
+    &:hover {
+      background-color: rgba($fui-color-accent, 0.12);
+    }
+  }
+}
+
+// Bordered
+.bordered {
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  overflow: hidden;
+}
+
+// Fixed layout for explicit column sizes
+.fixedLayout {
+  table-layout: fixed;
+}
+
+// Checkbox column
+.checkboxCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Expandable rows
+.expandCell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+}
+
+.expandButton {
+  @include button-reset;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  transition: color var(--fui-transition-fast, $fui-transition-fast),
+              background-color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.subRow {
+  background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+}
+
+// Empty state
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fui-space-12, $fui-space-12) var(--fui-space-6, $fui-space-6);
+}
+
+.emptyMessage {
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
+// Responsive: allow horizontal scroll on small screens
+@include below-sm {
+  .wrapper {
+    margin-left: calc(-1 * var(--fui-space-4, $fui-space-4));
+    margin-right: calc(-1 * var(--fui-space-4, $fui-space-4));
+    padding-left: var(--fui-space-4, $fui-space-4);
+    padding-right: var(--fui-space-4, $fui-space-4);
+  }
+}
+
+// ============================================
+// Accessibility: High Contrast Mode
+// ============================================
+
+@media (prefers-contrast: more) {
+  .headerRow {
+    border-bottom-width: 2px;
+  }
+
+  .row {
+    border-bottom-width: 2px;
+  }
+
+  .sortButton:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .row {
+    transition: none;
+  }
+
+  .sortButton {
+    transition: none;
+  }
+}

package/src/components/DataTable/DataTable.test.tsx

@@ -0,0 +1,224 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { DataTable, createColumns } from './index';
+
+type Person = { id: string; name: string; age: number };
+
+const columns = createColumns<Person>([
+  { key: 'name', header: 'Name' },
+  { key: 'age', header: 'Age' },
+]);
+
+const data: Person[] = [
+  { id: '1', name: 'Alice', age: 30 },
+  { id: '2', name: 'Bob', age: 25 },
+  { id: '3', name: 'Carol', age: 35 },
+];
+
+describe('DataTable', () => {
+  it('renders a table element with column headers', () => {
+    render(<DataTable columns={columns} data={data} aria-label="People" />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(2);
+    expect(headers[0]).toHaveAttribute('scope', 'col');
+    expect(headers[0]).toHaveTextContent('Name');
+    expect(headers[1]).toHaveTextContent('Age');
+  });
+
+  it('renders data rows', () => {
+    render(<DataTable columns={columns} data={data} aria-label="People" />);
+    const rows = screen.getAllByRole('row');
+    // 1 header row + 3 data rows
+    expect(rows).toHaveLength(4);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('25')).toBeInTheDocument();
+  });
+
+  it('renders caption when provided', () => {
+    render(<DataTable columns={columns} data={data} caption="People Table" aria-label="People" />);
+    expect(screen.getByText('People Table')).toBeInTheDocument();
+  });
+
+  it('shows empty state message when data is empty', () => {
+    render(<DataTable columns={columns} data={[]} emptyMessage="Nothing here" aria-label="People" />);
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  it('defaults to "No data available" empty message', () => {
+    render(<DataTable columns={columns} data={[]} aria-label="People" />);
+    expect(screen.getByText('No data available')).toBeInTheDocument();
+  });
+
+  it('supports sortable columns with aria-sort', async () => {
+    const user = userEvent.setup();
+    render(<DataTable columns={columns} data={data} sortable aria-label="People" />);
+    const headers = screen.getAllByRole('columnheader');
+    // Initially aria-sort="none" for sortable columns
+    expect(headers[0]).toHaveAttribute('aria-sort', 'none');
+
+    // Click the sort button inside the first header
+    const sortButton = headers[0].querySelector('button')!;
+    await user.click(sortButton);
+    expect(headers[0]).toHaveAttribute('aria-sort', 'ascending');
+
+    await user.click(sortButton);
+    expect(headers[0]).toHaveAttribute('aria-sort', 'descending');
+  });
+
+  it('calls onRowClick when a row is clicked', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<DataTable columns={columns} data={data} onRowClick={handleClick} aria-label="People" />);
+    const rows = screen.getAllByRole('row');
+    // rows[0] is header, rows[1] is first data row
+    await user.click(rows[1]);
+    expect(handleClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it('applies striped class when striped prop is true', () => {
+    const { container } = render(<DataTable columns={columns} data={data} striped aria-label="People" />);
+    expect(container.querySelector('.striped')).toBeInTheDocument();
+  });
+
+  it('createColumns helper generates proper column defs', () => {
+    const cols = createColumns<Person>([
+      { key: 'name', header: 'Full Name', width: 200 },
+      { key: 'age', header: 'Years', cell: (row) => `${row.age} years` },
+    ]);
+    expect(cols).toHaveLength(2);
+    expect(cols[0].id).toBe('name');
+    expect(cols[0].header).toBe('Full Name');
+    expect(cols[0].size).toBe(200);
+    expect(cols[1].id).toBe('age');
+  });
+
+  it('supports row selection', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={data}
+        selectable
+        rowSelection={{ '1': true }}
+        getRowId={(row) => row.id}
+        aria-label="People"
+      />
+    );
+    const rows = screen.getAllByRole('row');
+    // First data row (id='1') should have data-selected
+    expect(rows[1]).toHaveAttribute('data-selected');
+  });
+
+  it('supports keyboard activation of clickable rows', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<DataTable columns={columns} data={data} onRowClick={handleClick} aria-label="People" />);
+    const rows = screen.getAllByRole('row');
+    rows[1].focus();
+    await user.keyboard('{Enter}');
+    expect(handleClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it('renders checkbox column when showCheckbox and selectable', async () => {
+    const user = userEvent.setup();
+    render(
+      <DataTable
+        columns={columns}
+        data={data}
+        selectable
+        showCheckbox
+        getRowId={(row) => row.id}
+        aria-label="People"
+      />
+    );
+    // 2 data columns + 1 checkbox column = 3 headers
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(3);
+
+    // "Select all" checkbox in header
+    const selectAll = screen.getByRole('checkbox', { name: 'Select all rows' });
+    expect(selectAll).toBeInTheDocument();
+
+    // Individual row checkboxes
+    const rowCheckboxes = screen.getAllByRole('checkbox', { name: /Select row/ });
+    expect(rowCheckboxes).toHaveLength(3);
+
+    // Click a row checkbox toggles selection
+    await user.click(rowCheckboxes[0]);
+    expect(rowCheckboxes[0]).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('does not render checkbox column when only showCheckbox without selectable', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={data}
+        showCheckbox
+        aria-label="People"
+      />
+    );
+    // Should only have the 2 data columns
+    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
+    expect(screen.queryByLabelText('Select all rows')).not.toBeInTheDocument();
+  });
+
+  it('renders expandable sub-rows with expand/collapse buttons', async () => {
+    type Node = { id: string; name: string; children?: Node[] };
+    const treeData: Node[] = [
+      {
+        id: '1', name: 'Parent',
+        children: [
+          { id: '1.1', name: 'Child A' },
+          { id: '1.2', name: 'Child B' },
+        ],
+      },
+      { id: '2', name: 'Standalone' },
+    ];
+    const treeCols = createColumns<Node>([
+      { key: 'name', header: 'Name' },
+    ]);
+
+    const user = userEvent.setup();
+    render(
+      <DataTable
+        columns={treeCols}
+        data={treeData}
+        getSubRows={(row) => row.children}
+        getRowId={(row) => row.id}
+        aria-label="Tree"
+      />
+    );
+
+    // Initially only top-level rows visible (1 header + 2 data)
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+    expect(screen.getByText('Parent')).toBeInTheDocument();
+    expect(screen.getByText('Standalone')).toBeInTheDocument();
+
+    // Expand button present for parent row
+    const expandBtn = screen.getByLabelText('Expand row');
+    expect(expandBtn).toHaveAttribute('aria-expanded', 'false');
+
+    // Click expand to show children
+    await user.click(expandBtn);
+    expect(screen.getAllByRole('row')).toHaveLength(5); // 1 header + 2 top + 2 children
+    expect(screen.getByText('Child A')).toBeInTheDocument();
+    expect(screen.getByText('Child B')).toBeInTheDocument();
+
+    // Button now shows "Collapse row"
+    const collapseBtn = screen.getByLabelText('Collapse row');
+    expect(collapseBtn).toHaveAttribute('aria-expanded', 'true');
+
+    // Child rows have data-depth attribute
+    const childRows = screen.getAllByRole('row').filter(r => r.getAttribute('data-depth'));
+    expect(childRows).toHaveLength(2);
+    expect(childRows[0]).toHaveAttribute('data-depth', '1');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <DataTable columns={columns} data={data} caption="People Table" aria-label="People" />
+    );
+    await expectNoA11yViolations(container);
+  });
+});