@arbor-education/design-system.components 0.25.9 → 1.0.1

package/src/components/sidebar/Sidebar.test.tsx

@@ -0,0 +1,155 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Icon } from 'Components/icon/Icon';
+import { Separator } from 'Components/separator/Separator';
+import { describe, expect, test, vi } from 'vitest';
+import { Sidebar } from './Sidebar.js';
+import { SidebarItem } from './SidebarItem.js';
+
+describe('Sidebar', () => {
+  test('renders a nav element with default aria-label', () => {
+    render(<Sidebar />);
+    expect(screen.getByRole('navigation', { name: 'Sidebar' })).toBeInTheDocument();
+  });
+
+  test('renders a nav element with a custom ariaLabel', () => {
+    render(<Sidebar ariaLabel="App navigation" />);
+    expect(screen.getByRole('navigation', { name: 'App navigation' })).toBeInTheDocument();
+  });
+
+  test('applies data-testid to the nav', () => {
+    render(<Sidebar />);
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+});
+
+describe('SidebarItem', () => {
+  test('renders an anchor when href is provided', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/home');
+  });
+
+  test('renders a button when no href is provided', () => {
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" onClick={vi.fn()}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Menu' });
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  test('applies selected class and aria-current when current is true on a link', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home" selected>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toHaveClass('ds-sidebar__item--selected');
+    expect(link).toHaveAttribute('aria-current', 'true');
+  });
+
+  test('applies selected class on a button when selected is true', () => {
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" selected onClick={vi.fn()}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Menu' });
+    expect(button).toHaveClass('ds-sidebar__item--selected');
+    expect(button).toHaveAttribute('aria-current', 'true');
+  });
+
+  test('does not apply selected class or aria-current when current is false', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).not.toHaveClass('ds-sidebar__item--selected');
+    expect(link).toHaveAttribute('aria-current', 'false');
+  });
+
+  test('calls onClick when the button is clicked', async () => {
+    const onClick = vi.fn();
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" onClick={onClick}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('passes through extra HTML attributes to the button', () => {
+    render(
+      <Sidebar>
+        <SidebarItem
+          aria-label="Toggle nav"
+          aria-expanded={false}
+          aria-controls="nav-panel"
+          onClick={vi.fn()}
+        >
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Toggle nav' });
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+    expect(button).toHaveAttribute('aria-controls', 'nav-panel');
+  });
+
+  test('applies data-testid to the rendered element', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home" data-testid="home-item">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    expect(screen.getByTestId('home-item')).toBeInTheDocument();
+  });
+});
+
+describe('Sidebar + SidebarItem + Separator composition', () => {
+  test('renders items and a separator together', () => {
+    render(
+      <Sidebar ariaLabel="App navigation">
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+        <Separator orientation="horizontal" decorative />
+        <SidebarItem href="/calendar" aria-label="Calendar">
+          <Icon name="date" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+
+    expect(screen.getByRole('navigation', { name: 'App navigation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Calendar' })).toBeInTheDocument();
+    expect(document.querySelector('.ds-separator')).toBeInTheDocument();
+  });
+});

package/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { SidebarItem, type SidebarItemProps } from './SidebarItem.js';
+
+export type SidebarProps = {
+  ariaLabel?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const Sidebar = (props: SidebarProps) => {
+  const { ariaLabel = 'Sidebar', className, children, ...rest } = props;
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={classNames('ds-sidebar', className)}
+      data-testid="sidebar"
+      {...rest}
+    >
+      {children}
+    </nav>
+  );
+};
+
+Sidebar.Item = SidebarItem;
+
+export namespace Sidebar {
+  export type Props = SidebarProps;
+  export type ItemProps = SidebarItemProps;
+}

package/src/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { Tooltip } from 'Components/tooltip/Tooltip.js';
+
+export type SidebarItemProps = {
+  'href'?: string;
+  'selected'?: boolean;
+  'data-testid'?: string;
+} & React.HTMLAttributes<HTMLElement>;
+
+export const SidebarItem = (props: SidebarItemProps) => {
+  const {
+    href,
+    onClick,
+    selected,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const itemClassName = classNames(
+    'ds-sidebar__item',
+    { 'ds-sidebar__item--selected': Boolean(selected) },
+    className,
+  );
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        {href
+          ? (
+              <a
+                href={href}
+                className={itemClassName}
+                aria-current={selected ? 'true' : 'false'}
+                aria-label={ariaLabel}
+                onClick={onClick}
+                data-testid={dataTestId}
+                {...rest}
+              >
+                {children}
+              </a>
+            )
+          : (
+              <button
+                type="button"
+                className={itemClassName}
+                aria-current={selected ? 'true' : 'false'}
+                aria-label={ariaLabel}
+                onClick={onClick}
+                data-testid={dataTestId}
+                {...rest}
+              >
+                {children}
+              </button>
+            )}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="right">
+        {ariaLabel}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/sidebar/sidebar.scss

@@ -0,0 +1,65 @@
+.ds-sidebar {
+  margin: 0;
+  width: var(--sidebar-nav-rail-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-small);
+  gap: var(--spacing-large);
+  box-sizing: border-box;
+  border-right: var(--border-weight) solid var(--page-base-color-border);
+}
+
+.ds-sidebar__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-nav-rail-item-size);
+  height: var(--sidebar-nav-rail-item-size);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: var(--border-radius-round);
+  color: var(--sidebar-nav-rail-item-color-icon);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'],
+  &[data-state='open'] {
+    color: var(--sidebar-nav-rail-item-color-icon-hover);
+    background: var(--sidebar-nav-rail-item-color-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-sidebar__item--selected {
+  color: var(--sidebar-nav-rail-item-color-icon-selected);
+  background: var(--sidebar-nav-rail-item-color-background-selected);
+
+  &:hover,
+  &:active,
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'],
+  &[data-state='open'] {
+    color: var(--sidebar-nav-rail-item-color-icon-selected);
+    background: var(--sidebar-nav-rail-item-color-background-selected);
+  }
+}
+
+.ds-sidebar__item .ds-badge {
+  position: absolute;
+  top: var(--spacing-xsmall);
+  right: var(--spacing-xsmall);
+}

package/src/components/table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import {
   Controls,
   Heading as DocHeading,
@@ -503,7 +503,7 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'marks',
     cellDataType: 'number',
-    cellEditor: 'dsNumberCellEditor',
+    type: 'dsNumberColumn',
     cellEditorParams: {
       min: 0,
       max: 100,
@@ -1042,11 +1042,7 @@ const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
       {
         field: 'name',
         headerTooltip: 'The name of the user',
-        cellRenderer: 'dsButtonCellRenderer',
-        cellRendererParams: {
-          suppressCellFocusAndFocusFirstElement: true,
-        },
-        editable: false,
+        type: 'dsButtonColumn',
       },
       {
         field: 'email',
@@ -1370,13 +1366,7 @@ export const WithInlineTextCellRenderer: Story = {
     columnDefs: [
       {
         field: 'name',
-        cellRenderer: 'dsInlineTextCellRenderer',
-        cellRendererParams: {
-          suppressCellFocusAndFocusFirstElement: true,
-          suppressCount: true,
-          suppressDoubleClickExpand: true,
-          suppressEnterExpand: true,
-        },
+        type: 'dsInlineTextColumn',
       },
     ],
     defaultColDef,
@@ -1572,7 +1562,7 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: (params: CustomCellRendererProps) => {
       return {
         options: assessmentComponentOptions,
@@ -1580,16 +1570,12 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
         hasError: params.node.data.assessmentComponent === 'comp-maths',
       };
     },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Visibility',
     field: 'visibility',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Editable',
@@ -1973,29 +1959,17 @@ const dateEditorColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'dateOfBirth',
     headerName: 'Date of Birth',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
   {
     field: 'enrollmentDate',
     headerName: 'Enrollment Date',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
   {
     field: 'graduationDate',
     headerName: 'Graduation Date',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
 ];
 
@@ -2039,14 +2013,12 @@ const booleanCellRendererColumnDefs: ColDef<BooleanRowData>[] = [
   {
     field: 'hasPet',
     headerName: 'Has Pet',
-    cellRenderer: 'dsBooleanCellRenderer',
-    editable: false,
+    type: 'dsBooleanColumn',
   },
   {
     field: 'isEnrolled',
     headerName: 'Is Enrolled',
-    cellRenderer: 'dsBooleanCellRenderer',
-    editable: false,
+    type: 'dsBooleanColumn',
   },
 ];
 
@@ -2129,20 +2101,12 @@ const checkboxColumnDefs: ColDef[] = [
   {
     field: 'attended',
     headerName: 'Attended',
-    cellRenderer: 'dsCheckboxCellRenderer',
-    cellRendererParams: {
-      suppressCellFocusAndFocusFirstElement: true,
-    },
-    editable: false,
+    type: 'dsCheckboxColumn',
   },
   {
     field: 'consented',
     headerName: 'Consented',
-    cellRenderer: 'dsCheckboxCellRenderer',
-    cellRendererParams: {
-      suppressCellFocusAndFocusFirstElement: true,
-    },
-    editable: false,
+    type: 'dsCheckboxColumn',
   },
 ];
 
@@ -2273,23 +2237,20 @@ const selectDropdownColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'status',
     headerName: 'Status',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: statusOptions, placeholder: 'Select status' },
-    editable: false,
   },
   {
     field: 'priority',
     headerName: 'Priority',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: priorityOptions, placeholder: 'Select priority' },
-    editable: false,
   },
   {
     field: 'category',
     headerName: 'Category',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: categoryOptions, placeholder: 'Select category' },
-    editable: false,
   },
 ];
 
@@ -2361,34 +2322,26 @@ const comboboxColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'subject',
     headerName: 'Subject (single, input)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: subjectOptions, placeholder: 'Select subject' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'level',
     headerName: 'Level (single, button)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: levelOptions, placeholder: 'Select level', triggerVariant: 'button' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'tags',
     headerName: 'Tags (multi, button)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: tagOptions, placeholder: 'Select tags', multiple: true, triggerVariant: 'button' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'skills',
     headerName: 'Skills (multi, input)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: skillOptions, placeholder: 'Select skills', multiple: true },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
 ];
 
@@ -2422,17 +2375,15 @@ const numberInputColDefs: (ColDef | ColGroupDef)[] = [
     field: 'sessions',
     headerName: 'Sessions',
     flex: 1,
-    editable: false,
-    cellRenderer: 'dsNumberInputCellRenderer',
-    cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+    type: 'dsNumberInputColumn',
+    cellRendererParams: { min: 0 },
   },
   {
     field: 'score',
     headerName: 'Score (/100)',
     flex: 1,
-    editable: false,
-    cellRenderer: 'dsNumberInputCellRenderer',
-    cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+    type: 'dsNumberInputColumn',
+    cellRendererParams: { min: 0, max: 100 },
   },
 ];
 

package/src/components/table/Table.tsx

@@ -36,6 +36,7 @@ import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer.js';
 import { ComboboxCellRenderer } from './cellRenderers/ComboboxCellRenderer.js';
 import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer.js';
 import { NumberInputCellRenderer } from './cellRenderers/NumberInputCellRenderer.js';
+import { columnTypes } from './columnTypes.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -214,6 +215,7 @@ export const Table = (props: TableProps) => {
               dsNumberInputCellRenderer: NumberInputCellRenderer,
               ...components,
             }}
+            columnTypes={columnTypes}
             {...rest}
             {...(hasSearch && { quickFilterText: searchValue })}
           />

package/src/components/table/cellEditors/DateCellEditor.stories.tsx

@@ -21,7 +21,9 @@ const DESCRIPTION_INTRO = [
   '`DateCellEditor` is an AG Grid cell editor component that renders an Arbor `DatePicker` inside a table cell.',
   'It is invoked when a user begins editing a date column (e.g. by pressing Enter or double-clicking the cell).',
   '',
-  'Register it via the AG Grid `cellEditor` column definition property.',
+  'Register it via `type: \'dsDateColumn\'` on the column definition (pre-registered by Arbor\'s `Table`,',
+  'and also applies a `valueFormatter` that renders `Date` values as `en-GB` strings), or via the AG Grid',
+  '`cellEditor` column definition property directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -35,12 +37,22 @@ const USAGE_GUIDANCE = [
   '### Registration',
   '',
   '```tsx',
+  'const colDefs = [',
+  '  {',
+  "    field: 'dob',",
+  "    headerName: 'Date of birth',",
+  "    type: 'dsDateColumn', // preferred — pre-registered on Arbor's Table",
+  '  },',
+  '];',
+  '',
+  '// or register the editor directly:',
   "import { DateCellEditor } from '@arbor-education/design-system.components';",
   '',
   'const colDefs = [',
   '  {',
   "    field: 'dob',",
   "    headerName: 'Date of birth',",
+  '    editable: true,',
   '    cellEditor: DateCellEditor,',
   '    // or via string key:',
   "    cellEditor: 'dsDateCellEditor',",
@@ -200,12 +212,7 @@ function DateCellEditorExample() {
           field: 'dateOfBirth',
           headerName: 'Date of birth',
           flex: 1,
-          editable: true,
-          cellEditor: 'dsDateCellEditor',
-          valueFormatter: (params) =>
-            params.value instanceof Date
-              ? params.value.toLocaleDateString('en-GB')
-              : params.value,
+          type: 'dsDateColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -228,12 +235,7 @@ export default DateCellEditorExample;
             field: 'dateOfBirth',
             headerName: 'Date of birth',
             flex: 1,
-            editable: true,
-            cellEditor: 'dsDateCellEditor',
-            valueFormatter: params =>
-              params.value instanceof Date
-                ? params.value.toLocaleDateString('en-GB')
-                : params.value,
+            type: 'dsDateColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -241,5 +243,5 @@ export default DateCellEditorExample;
       />
     ),
   },
-  '`dsDateCellEditor` wired up inside a full `Table`. Double-click (or press F2/Enter) on a Date of birth cell to open the `DatePicker` editor — AG Grid mounts the editor component and passes the current cell value as `value`. The `valueFormatter` formats the stored `Date` object as a localised string for display.',
+  '`type: \'dsDateColumn\'` wired up inside a full `Table`. Double-click (or press F2/Enter) on a Date of birth cell to open the `DatePicker` editor — AG Grid mounts the editor component and passes the current cell value as `value`. The column type\'s `valueFormatter` formats the stored `Date` object as a localised string for display.',
 );

package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'A `true` value renders a green check icon; a `false` value renders a red ✕ icon;',
   'any other value (including `null` and `undefined`) renders nothing.',
   '',
-  'Register it via the string key `dsBooleanCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsBooleanColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsBooleanCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -55,7 +56,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'isActive',",
   "    headerName: 'Active',",
-  "    cellRenderer: 'dsBooleanCellRenderer',  // string key — no import needed",
+  "    type: 'dsBooleanColumn',  // pre-registered column type — no import needed",
   '  },',
   '];',
   '```',
@@ -241,8 +242,7 @@ function BooleanCellRendererExample() {
           field: 'active',
           headerName: 'Active',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsBooleanCellRenderer',
+          type: 'dsBooleanColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -265,8 +265,7 @@ export default BooleanCellRendererExample;
             field: 'active',
             headerName: 'Active',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsBooleanCellRenderer',
+            type: 'dsBooleanColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -274,5 +273,5 @@ export default BooleanCellRendererExample;
       />
     ),
   },
-  '`dsBooleanCellRenderer` wired up inside a full `Table`. `true` renders a check, `false` renders a ✕, and `null` leaves the cell empty. The Active column is set to `editable: false` — this renderer is display-only.',
+  '`type: \'dsBooleanColumn\'` wired up inside a full `Table`. `true` renders a check, `false` renders a ✕, and `null` leaves the cell empty. The column type sets `editable: false` — this renderer is display-only.',
 );