@arbor-education/design-system.components 4.5.0 → 4.6.1

package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { fn } from 'storybook/test';
 import { CheckboxInput } from './CheckboxInput.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
@@ -1036,3 +1036,180 @@ export default LockedReportOptionsExample;
     '`disabled` prop inside `options` if you need partial disabling.',
   ].join(' '),
 );
+
+// ---------------------------------------------------------------------------
+// Rich labels
+// Each row shows the plain-text label (what the adaptor shipped before) beside
+// the rich label, so the before/after difference is visible in one story.
+// ---------------------------------------------------------------------------
+
+const EMAIL_ICON_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="3" width="12" height="8" rx="1" fill="none" stroke="#1b4f8a" stroke-width="1.5"/><path d="M1.5 3.5 7 8l5.5-4.5" fill="none" stroke="#1b4f8a" stroke-width="1.5"/></svg>',
+)}`;
+
+const RICH_LABEL_EXAMPLES: { type: string; plain: string; rich: ReactNode }[] = [
+  {
+    type: 'Bold text',
+    plain: 'Smith, Jane',
+    rich: (
+      <>
+        <b>Smith</b>
+        , Jane
+      </>
+    ),
+  },
+  {
+    type: 'Image',
+    plain: 'Email Send to email',
+    rich: (
+      <>
+        <img src={EMAIL_ICON_SRC} alt="Email" style={{ verticalAlign: 'middle', marginRight: 'var(--spacing-xsmall)' }} />
+        Send to email
+      </>
+    ),
+  },
+  {
+    type: 'Coloured text (warning)',
+    plain: 'No email address',
+    rich: <span style={{ color: 'var(--color-semantic-destructive-700)' }}>No email address</span>,
+  },
+  {
+    type: 'Mixed formatting',
+    plain: 'Maths: 0 students below target',
+    rich: (
+      <>
+        Maths:
+        {' '}
+        <u><span style={{ color: 'var(--color-semantic-destructive-700)', fontWeight: 'bold' }}>0</span></u>
+        {' '}
+        students below target
+      </>
+    ),
+  },
+];
+
+const RichLabelComparisonTemplate = () => {
+  const [checked, setChecked] = useState<Record<string, boolean>>({});
+
+  return (
+    <div style={{ maxWidth: '36rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      {RICH_LABEL_EXAMPLES.map(example => (
+        <div key={example.type} style={{ display: 'grid', gridTemplateColumns: '10rem 1fr 1fr', gap: 'var(--spacing-medium)', alignItems: 'center' }}>
+          <span style={{ color: 'var(--color-grey-600)', fontSize: 'var(--font-size-2-13)' }}>{example.type}</span>
+          <CheckboxInput
+            id={`plain-${example.type}`}
+            checked={!!checked[`plain-${example.type}`]}
+            onChange={e => setChecked(prev => ({ ...prev, [`plain-${example.type}`]: e.target.checked }))}
+            label={example.plain}
+          />
+          <CheckboxInput
+            id={`rich-${example.type}`}
+            checked={!!checked[`rich-${example.type}`]}
+            onChange={e => setChecked(prev => ({ ...prev, [`rich-${example.type}`]: e.target.checked }))}
+            label={example.rich}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const RichLabelComparison: Story = withDescription(
+  {
+    render: () => <RichLabelComparisonTemplate />,
+    parameters: {
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { CheckboxInput } from '@arbor-education/design-system.components';
+
+// label accepts any ReactNode. Keep formatting to the approved set
+// (bold, coloured text, icon) and keep the text itself meaningful on its own,
+// because it becomes the checkbox's accessible name.
+<CheckboxInput
+  id="student-smith"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+  label={<><b>Smith</b>, Jane</>}
+/>
+          `.trim(),
+        },
+      },
+    },
+  },
+  [
+    'Each row compares a plain-text label (left) with the rich label (right). The rich label keeps the',
+    'formatting that legacy SIS labels carry: bold names, icons, coloured warnings and highlighted counts.',
+    'The whole label remains the checkbox accessible name, so the text must make sense without the styling.',
+  ].join(' '),
+);
+
+const RICH_GUARDIAN_OPTIONS = [
+  {
+    id: 'rich-guardian-1',
+    label: (
+      <>
+        <b>Smith</b>
+        , Jane (mother)
+      </>
+    ),
+    checked: true,
+    onChange: fn(),
+  },
+  {
+    id: 'rich-guardian-2',
+    label: (
+      <>
+        <img src={EMAIL_ICON_SRC} alt="Email" style={{ verticalAlign: 'middle', marginRight: 'var(--spacing-xsmall)' }} />
+        Smith, Tom (father)
+      </>
+    ),
+    checked: false,
+    onChange: fn(),
+  },
+  {
+    id: 'rich-guardian-3',
+    label: (
+      <>
+        <span style={{ color: 'var(--color-semantic-destructive-700)' }}>No email address</span>
+        {' '}
+        — Smith, Ann
+      </>
+    ),
+    checked: false,
+    onChange: fn(),
+  },
+];
+
+export const RichLabelInCheckboxGroup: Story = withDescription(
+  {
+    render: () => (
+      <div style={{ maxWidth: '28rem', padding: 'var(--spacing-xlarge)' }}>
+        <CheckboxGroup
+          legend="Absence alert recipients"
+          options={RICH_GUARDIAN_OPTIONS}
+        />
+      </div>
+    ),
+    parameters: {
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { CheckboxGroup } from '@arbor-education/design-system.components';
+
+<CheckboxGroup
+  legend="Absence alert recipients"
+  options={[
+    { id: 'guardian-1', label: <><b>Smith</b>, Jane (mother)</>, checked: true, onChange },
+    { id: 'guardian-2', label: <><img src={emailIcon} alt="Email" />Smith, Tom (father)</>, checked: false, onChange },
+  ]}
+/>
+          `.trim(),
+        },
+      },
+    },
+  },
+  'Rich labels in a CheckboxGroup. Each option keeps its own formatting; the group legend still labels the set.',
+);

package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx

@@ -32,4 +32,62 @@ describe('CheckboxInput component', () => {
     expect(checkboxElement).toBeDisabled();
     expect(checkboxElement.matches(':disabled')).toBe(true);
   });
+
+  test('CheckboxInput renders a rich label with its formatting', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <b>Smith</b>
+            , Jane
+          </>
+        )}
+      />,
+    );
+
+    expect(screen.getByText('Smith').tagName).toBe('B');
+  });
+
+  test('CheckboxInput keeps the rich label as its accessible name', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <span style={{ color: 'red' }}>No email address</span>
+          </>
+        )}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', { name: 'No email address' }),
+    ).toBeInTheDocument();
+  });
+
+  test('CheckboxInput renders a numeric zero label inside the label text', () => {
+    const { container } = render(<CheckboxInput label={0} onChange={() => {}} />);
+
+    expect(container.querySelector('.ds-checkbox-label__text')?.textContent).toBe('0');
+  });
+
+  test('CheckboxInput keeps the accessible name of a rich image label', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <img src="/email.svg" alt="Email" />
+            {' '}
+            Send to email
+          </>
+        )}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', { name: 'Email Send to email' }),
+    ).toBeInTheDocument();
+  });
 });

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { useRef, useEffect, type InputHTMLAttributes } from 'react';
+import { useRef, useEffect, type InputHTMLAttributes, type ReactNode } from 'react';
 import { Icon } from 'Components/icon/Icon';
 
 export type CheckboxInputProps = {
   indeterminate?: boolean;
-  label?: string;
+  label?: ReactNode;
   hasError?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
 
@@ -76,7 +76,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
           />
         )}
       </span>
-      {label && (
+      {label !== undefined && label !== null && label !== false && label !== '' && (
         <span className="ds-checkbox-label__text">{label}</span>
       )}
     </label>

package/src/components/pill/Pill.tsx

@@ -56,6 +56,7 @@ export const Pill = (props: PillProps) => {
             checked={checked}
             onChange={() => {}}
             onClick={handleCheckboxClick}
+            aria-label={text}
           />
         </span>
       )}

package/src/components/searchBar/SearchBar.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { SearchBar } from './SearchBar.js';
 import userEvent from '@testing-library/user-event';
@@ -39,14 +39,14 @@ describe('SearchBar component', () => {
       const button = screen.getByTestId('search-bar-inactive');
       fireEvent.mouseEnter(button);
       fireEvent.mouseLeave(button);
-      expect(screen.getByText('Search')).toBeInTheDocument();
+      expect(within(button).getByText('Search', { selector: '.ds-search-bar--inactive__placeholder' })).toBeInTheDocument();
     });
 
     test('keeps placeholder on hover when no hoverText provided', () => {
       render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search" />);
       const button = screen.getByTestId('search-bar-inactive');
       fireEvent.mouseEnter(button);
-      expect(screen.getByText('Search')).toBeInTheDocument();
+      expect(within(button).getByText('Search', { selector: '.ds-search-bar--inactive__placeholder' })).toBeInTheDocument();
     });
   });
 

package/src/components/searchBar/SearchBar.tsx

@@ -80,6 +80,7 @@ export const SearchBar = (props: SearchBarProps) => {
       >
         <Icon
           name="search"
+          screenReaderText="Search"
           size={16}
           color="var(--search-global-default-color-icon)"
           className="ds-search-bar__icon"

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

@@ -516,7 +516,6 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   { field: 'status', valueFormatter: Table.DefaultValueFormatter },
   {
     field: 'marks',
-    cellDataType: 'number',
     type: 'dsNumberColumn',
     cellEditorParams: {
       min: 0,
@@ -528,13 +527,11 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'active',
     filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },
-    cellDataType: 'boolean',
     editable: false,
   },
   {
     field: 'time',
     filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },
-    cellDataType: 'string',
     editable: false,
   },
 ];
@@ -578,12 +575,10 @@ const verticalHeaderTextColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'marks',
     headerName: 'Overall Score (%)',
-    cellDataType: 'number',
   },
   {
     field: 'active',
     headerName: 'Active?',
-    cellDataType: 'boolean',
     editable: false,
   },
   {

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

@@ -1524,7 +1524,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1571,7 +1570,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1619,7 +1617,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1667,7 +1664,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 50,
@@ -1717,7 +1713,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,

package/src/utils/popupParent/PopupParentContext.stories.tsx

@@ -247,6 +247,7 @@ const WithCustomContainerTemplate = () => {
           minHeight: '2rem',
         }}
         aria-label="Custom popup container"
+        aria-hidden={true}
       />
 
       <PopupParentContext.Provider value={popupContainerRef}>