@arbor-education/design-system.components 4.7.1 → 4.9.0

package/src/components/heading/heading.scss

@@ -16,6 +16,24 @@
   }
 }
 
+.ds-heading__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.ds-heading__error-message {
+  display: flex;
+  align-items: center;
+  gap: var(--form-field-spacing-horizontal);
+  padding: 0 var(--page-heading-spacing-gap) var(--page-heading-spacing-gap);
+  color: var(--form-field-text-error-color-error-text);
+
+  .ds-icon {
+    color: var(--form-field-text-error-color-error-icon);
+  }
+}
+
 h1 {
   &.ds-heading, &.ds-heading .ds-heading__inner-container, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h1-family);

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

@@ -267,6 +267,22 @@ export const DisabledChecked: Story = withDescription(
   'Disabled state — pass `disabled: true` via `cellRendererParams` to prevent the user from toggling the value. Useful for read-only rows or conditional editing logic.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <CheckboxCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={false}
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        column={{} as CustomCellRendererProps['column']}
+        colDef={{ headerName: 'Enrolled', cellRendererParams: { hasError: true } }}
+      />
+    ),
+  },
+  'Error state — pass `hasError: true` via `cellRendererParams` to flag the checkbox. It forwards to `CheckboxInput`, which sets `aria-invalid="true"` and the error styling. Use it to show a required acknowledgement that has not been given.',
+);
+
 const CHECKBOX_IN_TABLE_DATA = [
   { name: 'Alice Johnson', enrolled: true },
   { name: 'Bob Smith', enrolled: false },

package/src/components/table/cellRenderers/CheckboxCellRenderer.test.tsx

@@ -33,6 +33,14 @@ describe('CheckboxCellRenderer', () => {
     expect(screen.getByRole('checkbox')).toBeChecked();
   });
 
+  test('sets aria-invalid when hasError is passed via cellRendererParams', () => {
+    const props = createMockProps({
+      colDef: { cellRendererParams: { hasError: true } },
+    });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
   test('calls node.setDataValue with toggled value on change', async () => {
     const setDataValue = vi.fn();
     const props = createMockProps({

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

@@ -158,6 +158,14 @@ const meta = {
       description: 'AG Grid column instance. Passed as the first argument to `node.setDataValue`.',
       table: { type: { summary: 'Column | null' } },
     },
+    hasError: {
+      control: 'boolean',
+      description: 'Applies the error style to the `TextInput` and sets `aria-invalid`. Pass via `cellRendererParams` (or a `cellRendererParams` function) to flag a cell. Visual and a11y only — the error message itself is not rendered by the cell.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 } satisfies Meta<typeof InlineTextCellRenderer>;
 
@@ -193,6 +201,20 @@ export const Default: Story = withDescription(
   'Pre-populated with an existing value. The `TextInput` is always visible — type to update the internal value, then press Enter to commit (in a real table, Enter calls `node.setDataValue`).',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <InlineTextCellRenderer
+        {...MOCK_CELL_PROPS}
+        value=""
+        hasError
+      />
+    ),
+  },
+  'Error state — `hasError` applies the error border to the `TextInput` and sets `aria-invalid="true"`. Pass it via `cellRendererParams` to flag a cell, for example when a required value is missing. The error message itself is not rendered in the cell; surface it through the grid\'s own validation or a tooltip if users need the wording.',
+);
+
 export const Empty: Story = withDescription(
   {
     parameters: {

package/src/components/table/cellRenderers/InlineTextCellRenderer.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { InlineTextCellRenderer } from './InlineTextCellRenderer.js';
+
+const createMockProps = (overrides: Partial<CustomCellRendererProps> & { hasError?: boolean } = {}) => ({
+  value: 'Alice',
+  node: { setDataValue: vi.fn() },
+  column: 'name',
+  ...overrides,
+} as unknown as CustomCellRendererProps & { value: string; hasError?: boolean });
+
+describe('InlineTextCellRenderer', () => {
+  test('renders a text input with the supplied value', () => {
+    render(<InlineTextCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).toHaveValue('Alice');
+  });
+
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<InlineTextCellRenderer {...createMockProps({ hasError: true })} />);
+    expect(screen.getByRole('textbox')).toHaveClass('ds-input--error');
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<InlineTextCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).not.toHaveClass('ds-input--error');
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+  });
+});

package/src/components/table/cellRenderers/InlineTextCellRenderer.tsx

@@ -5,10 +5,11 @@ import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
 type InlineTextCellRendererProps = CustomCellRendererProps & {
   value: string;
+  hasError?: boolean;
 };
 
 export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
-  const { value, valueFormatted, column, node } = props;
+  const { value, valueFormatted, column, node, hasError } = props;
   const [valueToRender, setValueToRender] = useState(String(valueFormatted ?? value ?? ''));
   const valueRef = useRef(valueToRender);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -41,6 +42,8 @@ export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
       <TextInput
         value={valueToRender}
         onChange={handleChange}
+        hasError={hasError}
+        aria-invalid={hasError}
       />
     </div>
   );

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

@@ -159,6 +159,14 @@ const meta = {
       description: '`colDef.field` is used as the key passed to `node.setDataValue`. Changes are silently ignored when `field` is absent.',
       table: { type: { summary: 'ColDef' } },
     },
+    hasError: {
+      control: 'boolean',
+      description: 'Applies the error style to the input container and sets `aria-invalid`. Pass via `cellRendererParams` (or a `cellRendererParams` function) to flag a cell. Visual and a11y only — the error message itself is not rendered by the cell.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 } satisfies Meta<typeof NumberInputCellRenderer>;
 
@@ -244,6 +252,22 @@ export const NullValue: Story = withDescription(
   '`value={null}` is coerced to `0` before being passed to `NumberInput`. This keeps the input always controlled with a valid numeric display.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <NumberInputCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={0}
+        hasError
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        colDef={{ field: 'count' }}
+      />
+    ),
+  },
+  'Error state — `hasError` adds the error border to the input container and sets `aria-invalid="true"`. Pass it via `cellRendererParams` to flag a cell, for example when the value falls outside an allowed range. The error message itself is not rendered in the cell.',
+);
+
 export const Disabled: Story = withDescription(
   {
     parameters: { controls: { disable: true } },

package/src/components/table/cellRenderers/NumberInputCellRenderer.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 import { NumberInputCellRenderer } from './NumberInputCellRenderer.js';
 
-const createMockProps = (overrides: Partial<CustomCellRendererProps & { value: number | null; min?: number; max?: number; disabled?: boolean }> = {}): CustomCellRendererProps => ({
+const createMockProps = (overrides: Partial<CustomCellRendererProps & { value: number | null; min?: number; max?: number; disabled?: boolean; hasError?: boolean }> = {}): CustomCellRendererProps => ({
   value: 0,
   node: { setDataValue: vi.fn() },
   colDef: { field: 'count' },
@@ -28,6 +28,18 @@ describe('NumberInputCellRenderer', () => {
     expect(screen.getByRole('textbox')).toHaveValue('0');
   });
 
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ hasError: true })} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByRole('textbox').closest('.ds-number-input__container')).toHaveClass('ds-number-input__container--error');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<NumberInputCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByRole('textbox').closest('.ds-number-input__container')).not.toHaveClass('ds-number-input__container--error');
+  });
+
   test('disables the input when disabled prop is true', () => {
     render(<NumberInputCellRenderer {...createMockProps({ disabled: true })} />);
     expect(screen.getByRole('textbox')).toBeDisabled();

package/src/components/table/cellRenderers/NumberInputCellRenderer.tsx

@@ -6,12 +6,13 @@ type NumberInputCellRendererProps = {
   min?: number;
   max?: number;
   disabled?: boolean;
+  hasError?: boolean;
 } & CustomCellRendererProps;
 
 export const NumberInputCellRenderer = (
   props: NumberInputCellRendererProps,
 ) => {
-  const { value, min, max, disabled, node, colDef = {} } = props;
+  const { value, min, max, disabled, hasError, node, colDef = {} } = props;
 
   return (
     <div className="cell-input-wrapper">
@@ -19,6 +20,8 @@ export const NumberInputCellRenderer = (
         min={min}
         max={max}
         disabled={disabled}
+        hasError={hasError}
+        aria-invalid={hasError}
         value={value ?? 0}
         onChange={(e) => {
           if (!colDef.field) {

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

@@ -326,6 +326,25 @@ export const Disabled: Story = withDescription(
   'Pass `disabled: true` via `cellRendererParams` to prevent the user from changing the selection for specific rows.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <SelectDropdownCellRenderer
+        {...MOCK_CELL_PROPS}
+        api={MOCK_API}
+        value=""
+        options={STATUS_OPTIONS}
+        placeholder="Select status"
+        hasError={true}
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        column={{} as CustomCellRendererProps['column']}
+      />
+    ),
+  },
+  'Error state — pass `hasError: true` via `cellRendererParams` to flag the trigger. It applies the error style and sets `aria-invalid="true"` for screen readers automatically. The error message itself is not rendered in the cell.',
+);
+
 export const WithBackgroundColor: Story = withDescription(
   {
     parameters: { controls: { disable: true } },

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.test.tsx

@@ -38,6 +38,17 @@ describe('SelectDropdownCellRenderer', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<SelectDropdownCellRenderer {...createMockProps()} hasError={true} />);
+    expect(screen.getByRole('button')).toHaveClass('ds-button--error');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<SelectDropdownCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('button')).not.toHaveClass('ds-button--error');
+  });
+
   describe('backgroundColor', () => {
     test('does not apply the custom-bg or text-contrast modifiers when not provided', () => {
       const { container } = render(<SelectDropdownCellRenderer {...createMockProps()} />);

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx

@@ -47,7 +47,7 @@ export const SelectDropdownCellRenderer = (
     hasError,
     id,
     'aria-describedBy': ariaDescribedBy,
-    'aria-invalid': ariaInvalid,
+    'aria-invalid': ariaInvalid = hasError,
     alwaysShowPlaceholder = false,
     backgroundColor,
     fillCell = false,