@arbor-education/design-system.components 0.25.0 → 0.25.2

package/src/components/datePicker/DatePickerCalendarHeader.tsx

@@ -33,14 +33,18 @@ export const DatePickerCalendarHeader = ({
 
   const handleMonthSelection = (selectedValues: string[]) => {
     const nextMonthIndex = Number.parseInt(selectedValues[0] ?? String(month.getMonth()), 10);
-    if (Number.isNaN(nextMonthIndex)) return;
+    if (Number.isNaN(nextMonthIndex)) {
+      return;
+    }
 
     onMonthChange(new Date(month.getFullYear(), nextMonthIndex, 1));
   };
 
   const handleYearSelection = (selectedValues: string[]) => {
     const nextYear = Number.parseInt(selectedValues[0] ?? String(month.getFullYear()), 10);
-    if (Number.isNaN(nextYear)) return;
+    if (Number.isNaN(nextYear)) {
+      return;
+    }
 
     onMonthChange(new Date(nextYear, month.getMonth(), 1));
   };

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -9,7 +9,9 @@ describe('DateTimePicker', () => {
   beforeEach(() => {
     globalThis.ResizeObserver = class {
       observe() {}
+
       unobserve() {}
+
       disconnect() {}
     } as unknown as typeof ResizeObserver;
   });

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -199,6 +199,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
 
   const popupParentRef = useContext(PopupParentContext);
 
+  const nativeStep = granularity === 'second' ? 1 : 60;
+
   return (
     <div className={classNames('ds-date-time-picker', className)}>
       <div
@@ -215,7 +217,7 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           onPointerDown={onNativeFieldHintPointerDown}
           readOnly={hasCustomEmptyHint}
           id={id}
-          step={isNative ? (granularity === 'second' ? 1 : 60) : undefined}
+          step={isNative ? nativeStep : undefined}
           placeholder={showFieldHint ? '' : resolvedPlaceholder}
           hasError={hasError}
           aria-describedby={ariaDescribedBy}

package/src/components/dropdown/Dropdown.stories.tsx

@@ -392,11 +392,16 @@ const SchoolContextExampleTemplate = () => {
     year11 && 'Year 11',
   ].filter(Boolean);
 
-  const label = allYears
-    ? 'All year groups'
-    : selectedYears.length === 0
-      ? 'Select year groups'
-      : selectedYears.join(', ');
+  let label: string;
+  if (allYears) {
+    label = 'All year groups';
+  }
+  else if (selectedYears.length === 0) {
+    label = 'Select year groups';
+  }
+  else {
+    label = selectedYears.join(', ');
+  }
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)', padding: 'var(--spacing-xlarge)', minWidth: '280px' }}>
@@ -450,9 +455,15 @@ export const Default: Story = withDescription(
             <Button variant="primary">Open menu</Button>
           </Dropdown.Trigger>
           <Dropdown.Content>
-            <Dropdown.Item onSelect={() => {}}>View student profile</Dropdown.Item>
-            <Dropdown.Item onSelect={() => {}}>Edit assessment details</Dropdown.Item>
-            <Dropdown.Item onSelect={() => {}}>Archive record</Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              View student profile
+            </Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              Edit assessment details
+            </Dropdown.Item>
+            <Dropdown.Item onSelect={() => {}}>
+              Archive record
+            </Dropdown.Item>
           </Dropdown.Content>
         </Dropdown>
       </div>

package/src/components/filterBar/FilterBar.stories.tsx

@@ -553,7 +553,9 @@ const ModalWiringTemplate = () => {
   };
 
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      return;
+    }
 
     const frame = requestAnimationFrame(() => {
       document.getElementById(pendingFocusFieldId)?.focus();
@@ -582,7 +584,9 @@ const ModalWiringTemplate = () => {
 
   const items: FilterBar.TagItem[] = APPLIED_ITEM_SEEDS.flatMap((item) => {
     const value = fieldValues[item.fieldId]?.trim();
-    if (!value) return [];
+    if (!value) {
+      return [];
+    }
 
     return [{
       ...item,
@@ -593,7 +597,9 @@ const ModalWiringTemplate = () => {
       removeLabel: `Remove ${item.label.toLowerCase()} ${item.type}`,
       onClick: clickedItem => openModal(clickedItem.type, clickedItem.fieldId ?? PANEL_FIELD_IDS[clickedItem.type]),
       onRemove: (removedItem) => {
-        if (!removedItem.fieldId) return;
+        if (!removedItem.fieldId) {
+          return;
+        }
         updateFieldValue(removedItem.fieldId, '');
       },
     }];

package/src/components/filterBar/FilterBar.test.tsx

@@ -122,9 +122,15 @@ describe('FilterBar', () => {
     const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function mockRect(this: HTMLElement) {
       let width = 0;
 
-      if (this.classList.contains('ds-tag-list__viewport')) width = 220;
-      else if (this.classList.contains('ds-tag-list__item')) width = 84;
-      else if (this.classList.contains('ds-tag-list__overflow')) width = 76;
+      if (this.classList.contains('ds-tag-list__viewport')) {
+        width = 220;
+      }
+      else if (this.classList.contains('ds-tag-list__item')) {
+        width = 84;
+      }
+      else if (this.classList.contains('ds-tag-list__overflow')) {
+        width = 76;
+      }
 
       return {
         width,

package/src/components/filterBar/FilterBar.tsx

@@ -73,7 +73,9 @@ const FILTER_BAR_TYPE_ICONS: Record<FilterBarType, IconName> = {
 };
 
 const getVisibleCount = (count?: number | null): string | null => {
-  if (typeof count !== 'number' || count <= 0) return null;
+  if (typeof count !== 'number' || count <= 0) {
+    return null;
+  }
   return count > 99 ? '99+' : `${count}`;
 };
 
@@ -267,7 +269,9 @@ const FilterBarActiveList = ({
   }
 
   if (!children) {
-    if (!emptyState) return null;
+    if (!emptyState) {
+      return null;
+    }
     return <div className={classNames('ds-filter-bar__empty-state', className)}>{emptyState}</div>;
   }
 

package/src/components/formField/fieldset/Fieldset.stories.tsx

@@ -320,9 +320,24 @@ export const Default: Story = {
   },
   render: args => (
     <Fieldset {...args}>
-      <CheckboxInput id="consent-trips" name="consent" label="Consent for school trips" onChange={() => {}} />
-      <CheckboxInput id="consent-photos" name="consent" label="Consent for photographs" onChange={() => {}} />
-      <CheckboxInput id="consent-data" name="consent" label="Consent for data sharing with partner schools" onChange={() => {}} />
+      <CheckboxInput
+        id="consent-trips"
+        name="consent"
+        label="Consent for school trips"
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-photos"
+        name="consent"
+        label="Consent for photographs"
+        onChange={() => {}}
+      />
+      <CheckboxInput
+        id="consent-data"
+        name="consent"
+        label="Consent for data sharing with partner schools"
+        onChange={() => {}}
+      />
     </Fieldset>
   ),
 };

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import { RadioButtonInput } from './RadioButtonInput.js';
-import { Fieldset, type FieldsetProps } from '../../fieldset/Fieldset.js';
+import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset.js';
 
 export type RadioGroupOption = {
   id: string;

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -72,7 +72,9 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
   const UNGROUPED_KEY = 'Ungrouped';
   const groupedOptions = options.reduce((acc, option) => {
     const key = option.group ?? UNGROUPED_KEY;
-    if (!acc[key]) acc[key] = [];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
     acc[key].push(option);
     return acc;
   }, {} as Record<string, SelectDropdownItemProps[]>);

package/src/components/formField/inputs/textArea/TextArea.stories.tsx

@@ -353,11 +353,16 @@ const ControlledWithCharacterCountTemplate = () => {
   const isApproaching = remaining <= 100 && remaining > 0;
   const isAtLimit = remaining <= 0;
 
-  const countColour = isAtLimit
-    ? 'var(--color-semantic-destructive-600)'
-    : isApproaching
-      ? 'var(--color-semantic-caution-600)'
-      : 'var(--color-grey-600)';
+  let countColour: string;
+  if (isAtLimit) {
+    countColour = 'var(--color-semantic-destructive-600)';
+  }
+  else if (isApproaching) {
+    countColour = 'var(--color-semantic-caution-600)';
+  }
+  else {
+    countColour = 'var(--color-grey-600)';
+  }
 
   return (
     <div style={{ maxWidth: '28rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xsmall)' }}>

package/src/components/formField/inputs/time/TimeInput.test.tsx

@@ -8,7 +8,9 @@ describe('TimeInput', () => {
   beforeEach(() => {
     globalThis.ResizeObserver = class {
       observe() {}
+
       unobserve() {}
+
       disconnect() {}
     } as unknown as typeof ResizeObserver;
   });

package/src/components/formField/inputs/time/TimeInput.tsx

@@ -82,16 +82,16 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, re
 
   const focusAndSelectHours = useCallback(() => {
     const input = inputRef.current;
-    if (!input) return;
+    if (!input) {
+      return;
+    }
 
     input.focus();
 
     try {
       input.setSelectionRange(0, 2);
     }
-    catch {
-      // Some browsers do not expose selection APIs on time inputs.
-    }
+    catch { /* Some browsers do not expose selection APIs on time inputs. */ }
   }, []);
 
   const timeOptions = useMemo<ComboboxOption[]>(

package/src/components/heading/Heading.stories.tsx

@@ -368,7 +368,10 @@ const WithBackControlLegacyTemplate = () => (
 const WithEditableTitleTemplate = () => (
   <div style={{ padding: 'var(--spacing-xlarge)' }}>
     <Heading level={1}>
-      <EditableText text="Form 7B Registration" onEditSave={() => {}} />
+      <EditableText
+        text="Form 7B Registration"
+        onEditSave={() => {}}
+      />
     </Heading>
   </div>
 );
@@ -377,7 +380,10 @@ const WithEditableTitleAndActionTemplate = () => (
   <div style={{ padding: 'var(--spacing-xlarge)' }}>
     <Heading level={1}>
       <Heading.InnerContainer>
-        <EditableText text="Form 7B Registration" onEditSave={() => {}} />
+        <EditableText
+          text="Form 7B Registration"
+          onEditSave={() => {}}
+        />
       </Heading.InnerContainer>
       <Heading.InnerContainer>
         <Button variant="primary" type="button">Save changes</Button>
@@ -393,7 +399,10 @@ const WithEditableTitleAndMultipleActionsTemplate = () => (
         <Button variant="tertiary" type="button" iconLeftName="chevron-left" iconLeftScreenReaderText="Go back">
           Back
         </Button>
-        <EditableText text="Autumn term report" onEditSave={() => {}} />
+        <EditableText
+          text="Autumn term report"
+          onEditSave={() => {}}
+        />
       </Heading.InnerContainer>
       <Heading.InnerContainer className="medium-spacing-gap">
         <Button variant="secondary" type="button">Export to CSV</Button>

package/src/components/modal/Modal.stories.tsx

@@ -548,11 +548,21 @@ const WithDropdownInsideModalTemplate = () => {
               <Button variant="dropdown">Select a teacher</Button>
             </Dropdown.Trigger>
             <Dropdown.Content>
-              <Dropdown.Item onSelect={() => {}}>Ms A. Johnson — English</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mr B. Patel — Mathematics</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mrs C. Williams — Science</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Mr D. Thompson — History</Dropdown.Item>
-              <Dropdown.Item onSelect={() => {}}>Ms E. Okonkwo — Art</Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Ms A. Johnson — English
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mr B. Patel — Mathematics
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mrs C. Williams — Science
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Mr D. Thompson — History
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => {}}>
+                Ms E. Okonkwo — Art
+              </Dropdown.Item>
             </Dropdown.Content>
           </Dropdown>
         </Modal.Body>

package/src/components/progress/Progress.stories.tsx

@@ -274,7 +274,9 @@ const InteractiveLoadingTemplate = (args: React.ComponentProps<typeof Progress>)
   const [running, setRunning] = useState(true);
 
   useEffect(() => {
-    if (!running) return;
+    if (!running) {
+      return;
+    }
     if (progress >= 100) {
       setRunning(false);
       return;

package/src/components/row/Row.stories.tsx

@@ -11,6 +11,9 @@ import {
 import { fn } from 'storybook/test';
 
 import { Row } from './Row.js';
+import { Badge } from 'Components/badge/Badge';
+import { Tag } from 'Components/tag/Tag';
+import { Icon } from 'Components/icon/Icon';
 
 // ---------------------------------------------------------------------------
 // Content strings for the custom DocsPage
@@ -85,12 +88,13 @@ const DEVELOPER_NOTES = [
   '```ts',
   "import { Row } from '@arbor-education/design-system.components';",
   "import type { RowProps } from '@arbor-education/design-system.components';",
+  "import type { ReactNode } from 'react';",
   '',
   'type RowProps = {',
   '  className?: string;',
-  '  label?: string;',
-  '  value?: string;',
-  '  note?: string;',
+  '  label?: ReactNode;',
+  '  value?: ReactNode;',
+  '  note?: ReactNode;',
   '  onClick?: MouseEventHandler<HTMLDivElement>;',
   '};',
   '```',
@@ -148,7 +152,7 @@ const meta: Meta<typeof Row> = {
       ].join(' '),
       control: 'text',
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
       },
     },
@@ -159,7 +163,7 @@ const meta: Meta<typeof Row> = {
       ].join(' '),
       control: 'text',
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
       },
     },
@@ -170,7 +174,7 @@ const meta: Meta<typeof Row> = {
       ].join(' '),
       control: 'text',
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
       },
     },
@@ -499,3 +503,134 @@ export default PupilDetailPanel;
   },
   'A realistic pupil detail panel — the most common real-world usage. Static and clickable rows can be freely mixed. The `gap: var(--spacing-small)` wrapper token matches the spacing the component uses internally, keeping visual rhythm consistent.',
 );
+
+export const ReactNodeInValue: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Row, Badge } from '@arbor-education/design-system.components';
+
+function SENStatusRows() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <Row label="SEN status" value={<Badge colour="orange">SEN Support</Badge>} />
+      <Row label="Admission type" value={<Badge colour="blue">Looked after child</Badge>} />
+    </div>
+  );
+}
+export default SENStatusRows;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+        <Row label="SEN status" value={<Badge colour="orange">SEN Support</Badge>} />
+        <Row label="Admission type" value={<Badge colour="blue">Looked after child</Badge>} />
+      </div>
+    ),
+  },
+  'The `value` prop accepts any `ReactNode`, so status badges, coloured indicators, or formatted markup can replace plain strings. A `Badge` communicates urgency or category at a glance without the reader having to interpret the text alone.',
+);
+
+export const ReactNodeInNote: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Row, Tag } from '@arbor-education/design-system.components';
+
+function AttendanceRows() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <Row label="Attendance this term" value="91.4%" note={<Tag color="orange">Below target</Tag>} />
+      <Row label="Reading age" value="8y 4m" note={<Tag color="green">On track</Tag>} />
+    </div>
+  );
+}
+export default AttendanceRows;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+        <Row label="Attendance this term" value="91.4%" note={<Tag color="orange">Below target</Tag>} />
+        <Row label="Reading age" value="8y 4m" note={<Tag color="green">On track</Tag>} />
+      </div>
+    ),
+  },
+  'The `note` slot accepts any `ReactNode` — a coloured `Tag` conveys urgency or status at a glance without burying it in prose. Pair with a plain-text `value` so the primary reading stays clean while the note provides a quick visual cue about whether the value is within an expected range.',
+);
+
+export const ReactNodeInLabel: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Row, Icon } from '@arbor-education/design-system.components';
+
+function AnnotatedLabelRows() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+      <Row
+        label={
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            Pupil premium <Icon name="info" size={16} />
+          </span>
+        }
+        value="Free school meals — ever 6"
+      />
+      <Row
+        label={
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            EHCP status <Icon name="info" size={16} />
+          </span>
+        }
+        value="EHC plan in place"
+      />
+    </div>
+  );
+}
+export default AnnotatedLabelRows;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-small)' }}>
+        <Row
+          label={(
+            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              Pupil premium
+              {' '}
+              <Icon name="info" size={16} />
+            </span>
+          )}
+          value="Free school meals — ever 6"
+        />
+        <Row
+          label={(
+            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              EHCP status
+              {' '}
+              <Icon name="info" size={16} />
+            </span>
+          )}
+          value="EHC plan in place"
+        />
+      </div>
+    ),
+  },
+  'The `label` slot accepts any `ReactNode` — inline icons can annotate labels that require clarification. An `Icon` placed inline with the label text signals to the user that more information is available, without cluttering the value column.',
+);

package/src/components/row/Row.test.tsx

@@ -79,4 +79,27 @@ describe('Row component', () => {
       expect(handleClick.mock.calls[0]?.[0]).toBeDefined();
     });
   });
+
+  describe('ReactNode content', () => {
+    test('accepts ReactNode label', () => {
+      render(<Row label={<span className="foo">bar</span>} />);
+      const label = screen.getByText('bar');
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveClass('foo');
+    });
+
+    test('accepts ReactNode value', () => {
+      render(<Row value={<span className="foo">bar</span>} />);
+      const value = screen.getByText('bar');
+      expect(value).toBeInTheDocument();
+      expect(value).toHaveClass('foo');
+    });
+
+    test('accepts ReactNode note', () => {
+      render(<Row note={<span className="foo">bar</span>} />);
+      const note = screen.getByText('bar');
+      expect(note).toBeInTheDocument();
+      expect(note).toHaveClass('foo');
+    });
+  });
 });

package/src/components/row/Row.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import type { CSSProperties, MouseEvent, MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEvent, MouseEventHandler, ReactNode } from 'react';
 import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
 
 export type RowProps = {
   className?: string;
   style?: CSSProperties;
-  label?: string;
-  value?: string;
-  note?: string;
+  label?: ReactNode;
+  value?: ReactNode;
+  note?: ReactNode;
   onClick?: MouseEventHandler<HTMLDivElement>;
 };
 

package/src/components/sidebarNav/SidebarNavItem.tsx

@@ -97,6 +97,32 @@ export const SidebarNavItem = (props: SidebarNavItemProps) => {
     linkElementProps as AnchorHTMLAttributes<HTMLAnchorElement> | undefined,
   );
 
+  const renderAnchorElement = () => renderLink
+    ? renderLink({
+        href: href!,
+        className: linkClassName,
+        ariaCurrent: current ? 'page' : undefined,
+        linkProps,
+        linkElementProps: anchorLinkElementProps as Omit<
+          AnchorHTMLAttributes<HTMLAnchorElement>,
+          'href' | 'className' | 'children'
+        > | undefined,
+        onClick: handleClick,
+        children: linkChildren,
+      })
+    : (
+        <a
+          href={href}
+          className={linkClassName}
+          aria-current={current ? 'page' : undefined}
+          {...linkProps}
+          {...anchorLinkElementProps}
+          onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}
+        >
+          {linkChildren}
+        </a>
+      );
+
   const linkElementNode = linkElement === 'button'
     ? (
         <button
@@ -109,31 +135,7 @@ export const SidebarNavItem = (props: SidebarNavItemProps) => {
           {linkChildren}
         </button>
       )
-    : renderLink
-      ? renderLink({
-          href: href!,
-          className: linkClassName,
-          ariaCurrent: current ? 'page' : undefined,
-          linkProps,
-          linkElementProps: anchorLinkElementProps as Omit<
-            AnchorHTMLAttributes<HTMLAnchorElement>,
-            'href' | 'className' | 'children'
-          > | undefined,
-          onClick: handleClick,
-          children: linkChildren,
-        })
-      : (
-          <a
-            href={href}
-            className={linkClassName}
-            aria-current={current ? 'page' : undefined}
-            {...linkProps}
-            {...anchorLinkElementProps}
-            onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}
-          >
-            {linkChildren}
-          </a>
-        );
+    : renderAnchorElement();
 
   return (
     <li