@arbor-education/design-system.components 4.4.0 → 4.6.0

package/src/components/datePicker/DatePickerPopover.tsx

@@ -0,0 +1,72 @@
+import { Popover } from 'radix-ui';
+import { useContext, useState, type ReactElement } from 'react';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
+import { formatTimeInputValue, mergeDateAndTime } from './dateInputUtils.js';
+import { DatePickerCalendar } from './DatePickerCalendar.js';
+import { DatePickerCalendarHeader } from './DatePickerCalendarHeader.js';
+
+const TIME_PRESERVATION_GRANULARITY = 'minute' as const;
+
+export type DatePickerPopoverProps = {
+  trigger: ReactElement;
+  value?: Date;
+  onChange?: (newDate: Date) => void;
+};
+
+export const DatePickerPopover = (props: DatePickerPopoverProps) => {
+  const { trigger, value, onChange } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [month, setMonth] = useState(value ?? new Date());
+  const popupParentRef = useContext(PopupParentContext);
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setMonth(value ?? new Date());
+    }
+    setIsOpen(open);
+  };
+
+  const selectDay = (day: Date) => {
+    const timeSource = value ?? day;
+    onChange?.(
+      mergeDateAndTime(
+        day,
+        formatTimeInputValue(timeSource, TIME_PRESERVATION_GRANULARITY),
+        TIME_PRESERVATION_GRANULARITY,
+      ),
+    );
+    setIsOpen(false);
+  };
+
+  const onDayPickerSelect = (day?: Date) => {
+    const selectedDay = day ?? value;
+    if (selectedDay) {
+      selectDay(selectedDay);
+    }
+  };
+
+  return (
+    <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
+      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Portal container={popupParentRef.current}>
+        <Popover.Content align="end" sideOffset={5} onOpenAutoFocus={e => e.preventDefault()}>
+          <div className="ds-date-picker__popup">
+            <DatePickerCalendarHeader month={month} onMonthChange={setMonth} />
+            <DatePickerCalendar
+              month={month}
+              setMonth={setMonth}
+              selectedDate={value}
+              onDayPickerSelect={onDayPickerSelect}
+              handleTodayClick={() => selectDay(new Date())}
+            />
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+export namespace DatePickerPopover {
+  export type Props = DatePickerPopoverProps;
+}

package/src/components/dot/Dot.tsx

@@ -12,6 +12,7 @@ export const Dot = ({ colour, label }: DotProps): React.JSX.Element => {
     <span
       aria-hidden={label ? undefined : 'true'}
       aria-label={label}
+      role="img"
       className={classNames('ds-dot', `ds-dot--${colour}`)}
     />
   );

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/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/index.ts

@@ -10,6 +10,7 @@ export { Card, type CardProps } from 'Components/card/Card';
 export { Combobox } from 'Components/combobox/Combobox';
 export { DataViewCard, type DataViewCardProps } from 'Components/dataViewCard/DataViewCard';
 export { DatePicker } from 'Components/datePicker/DatePicker';
+export { DatePickerPopover } from 'Components/datePicker/DatePickerPopover';
 export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
 export { Dot } from 'Components/dot/Dot';
 export { Dropdown } from 'Components/dropdown/Dropdown';

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}>