@arbor-education/design-system.components 0.25.3 → 0.25.5

package/src/components/fileUpload/FileUpload.test.tsx

@@ -0,0 +1,172 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { FileUpload } from './FileUpload.js';
+
+const baseFile = {
+  fileName: 'report.pdf',
+  fileType: 'PDF',
+  fileSize: '1.2 MB',
+  onDelete: vi.fn(),
+};
+
+describe('FileUpload', () => {
+  describe('dropzone', () => {
+    test('renders default dropzone content', () => {
+      render(<FileUpload uploadedFiles={[]} uploadFiles={vi.fn()} />);
+      expect(screen.getByText('click to upload')).toBeInTheDocument();
+    });
+
+    test('renders custom dropzoneContent', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[]}
+          uploadFiles={vi.fn()}
+          dropzoneContent={<p>Custom content here</p>}
+        />,
+      );
+      expect(screen.getByText('Custom content here')).toBeInTheDocument();
+    });
+
+    test('calls uploadFiles when files are selected via the input', async () => {
+      const uploadFiles = vi.fn();
+      const { container } = render(
+        <FileUpload uploadedFiles={[]} uploadFiles={uploadFiles} />,
+      );
+
+      const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+      const file = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+      await userEvent.upload(input, file);
+
+      expect(uploadFiles).toHaveBeenCalledWith([file]);
+    });
+  });
+
+  describe('uploaded file list', () => {
+    test('renders file name, type, and size', () => {
+      render(<FileUpload uploadedFiles={[baseFile]} uploadFiles={vi.fn()} />);
+      expect(screen.getByText('report.pdf')).toBeInTheDocument();
+      expect(screen.getByText('PDF, 1.2 MB')).toBeInTheDocument();
+    });
+
+    test('renders multiple files', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[
+            baseFile,
+            { fileName: 'photo.jpg', fileType: 'JPEG', fileSize: '3.7 MB', onDelete: vi.fn() },
+          ]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(screen.getByText('report.pdf')).toBeInTheDocument();
+      expect(screen.getByText('photo.jpg')).toBeInTheDocument();
+    });
+
+    test('calls onDelete when delete button is clicked', async () => {
+      const onDelete = vi.fn();
+      render(
+        <FileUpload uploadedFiles={[{ ...baseFile, onDelete }]} uploadFiles={vi.fn()} />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: 'trash' }));
+      expect(onDelete).toHaveBeenCalledOnce();
+    });
+
+    test('renders download button when onDownload is provided', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, onDownload: vi.fn() }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(screen.getByRole('button', { name: 'download' })).toBeInTheDocument();
+    });
+
+    test('does not render download button when onDownload is not provided', () => {
+      render(<FileUpload uploadedFiles={[baseFile]} uploadFiles={vi.fn()} />);
+      expect(screen.queryByRole('button', { name: 'download' })).not.toBeInTheDocument();
+    });
+
+    test('calls onDownload when download button is clicked', async () => {
+      const onDownload = vi.fn();
+      render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, onDownload }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: 'download' }));
+      expect(onDownload).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('failed upload state', () => {
+    test('shows "Upload failed" text instead of file meta when hasUploadFailed is true', () => {
+      render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, hasUploadFailed: true }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(screen.getByText('Upload failed')).toBeInTheDocument();
+      expect(screen.queryByText('PDF, 1.2 MB')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('progress bar', () => {
+    test('renders progress bar when progressPercentage is less than 100', () => {
+      const { container } = render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, progressPercentage: 50 }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(container.querySelector('.ds-file-upload__progress-bar')).toBeInTheDocument();
+    });
+
+    test('does not render progress bar when progressPercentage equals 100', () => {
+      const { container } = render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, progressPercentage: 100 }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(container.querySelector('.ds-file-upload__progress-bar')).not.toBeInTheDocument();
+    });
+
+    test('does not render progress bar when progressPercentage is not set', () => {
+      const { container } = render(
+        <FileUpload uploadedFiles={[baseFile]} uploadFiles={vi.fn()} />,
+      );
+      expect(container.querySelector('.ds-file-upload__progress-bar')).not.toBeInTheDocument();
+    });
+
+    test('applies failed indicator class to progress bar when hasUploadFailed is true', () => {
+      const { container } = render(
+        <FileUpload
+          uploadedFiles={[{ ...baseFile, progressPercentage: 45, hasUploadFailed: true }]}
+          uploadFiles={vi.fn()}
+        />,
+      );
+      expect(
+        container.querySelector('.ds-file-upload__progress-bar-indicator--failed'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('className', () => {
+    test('applies custom className to root element', () => {
+      const { container } = render(
+        <FileUpload
+          uploadedFiles={[]}
+          uploadFiles={vi.fn()}
+          className="my-custom-class"
+        />,
+      );
+      expect(container.firstChild).toHaveClass('ds-file-upload', 'my-custom-class');
+    });
+  });
+});

package/src/components/fileUpload/FileUpload.tsx

@@ -0,0 +1,144 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { Card } from 'Components/card/Card';
+import type { IconName } from 'Components/icon/allowedIcons';
+import { Icon } from 'Components/icon/Icon';
+import { Separator } from 'Components/separator/Separator';
+import type { ReactNode } from 'react';
+import Dropzone from 'react-dropzone';
+import { Progress } from 'Components/progress/Progress';
+
+type UploadedFile = {
+  fileName: string;
+  icon?: IconName;
+  fileType: string;
+  fileSize: string;
+  onDownload?: () => void;
+  onDelete: () => void;
+  progressPercentage?: number;
+  hasUploadFailed?: boolean;
+};
+
+export type FileUploadProps = {
+  className?: string;
+  uploadedFiles: UploadedFile[];
+  uploadFiles: (files: File[]) => void;
+  dropzoneContent?: ReactNode;
+};
+
+export const FileUpload = (props: FileUploadProps) => {
+  const {
+    className,
+    uploadedFiles,
+    uploadFiles,
+    dropzoneContent = (
+      <p>
+        Drag and drop, or
+        {' '}
+        <Button variant="text-link">click to upload</Button>
+      </p>
+    ),
+  } = props;
+
+  return (
+    <div
+      className={classNames(
+        'ds-file-upload',
+        className,
+      )}
+    >
+      <Dropzone
+        onDrop={(acceptedFiles) => {
+          uploadFiles(acceptedFiles);
+        }}
+      >
+        {({ getRootProps, getInputProps }) => (
+          <Card>
+            <div
+              {...getRootProps()}
+              className="ds-file-upload__dropzone-input"
+            >
+              <input {...getInputProps()} />
+              <div className="ds-file-upload__dropzone-content">
+                <span className="ds-file-upload__icon-wrapper">
+                  <Icon
+                    name="cloud-upload"
+                    size={24}
+                    color="var(--color-brand-600)"
+                  />
+                </span>
+                <div className="ds-file-upload__dropzone-text-wrapper">
+                  {dropzoneContent}
+                </div>
+              </div>
+            </div>
+          </Card>
+        )}
+      </Dropzone>
+      {uploadedFiles.length > 0 && (
+        <Card className="ds-file-upload__file-list">
+          {uploadedFiles.map((file, index) => {
+            const {
+              fileName,
+              icon = 'file',
+              fileSize,
+              fileType,
+              onDelete,
+              onDownload,
+              hasUploadFailed,
+              progressPercentage,
+            } = file;
+            return (
+              <div key={fileName} className="ds-file-upload__file-outer">
+                <span className="ds-file-upload__file">
+                  <span className="ds-file-upload__icon-wrapper">
+                    <Icon size={24} name={icon} color="var(--color-brand-600)" />
+                  </span>
+                  <span className="ds-file-upload__file-details">
+                    <span className="ds-file-upload__file-name">{fileName}</span>
+                    {
+                      hasUploadFailed
+                        ? (
+                            <span className="ds-file-upload__upload-failed">
+                              <Icon name="circle-alert" />
+                              {' '}
+                              Upload failed
+                            </span>
+                          )
+                        : <span className="ds-file-upload__file-meta">{`${fileType}, ${fileSize}`}</span>
+                    }
+                  </span>
+                  {onDownload && (
+                    <Button
+                      variant="secondary"
+                      iconLeftName="download"
+                      onClick={onDownload}
+                    />
+                  )}
+                  {onDelete && (
+                    <Button
+                      variant="secondary"
+                      iconLeftName="trash"
+                      onClick={onDelete}
+                    />
+                  )}
+                </span>
+                {typeof progressPercentage === 'number' && progressPercentage < 100
+                  && (
+                    <Progress
+                      value={progressPercentage}
+                      className="ds-file-upload__progress-bar"
+                      indicatorClassName={classNames('ds-file-upload__progress-bar-indicator', {
+                        'ds-file-upload__progress-bar-indicator--failed': hasUploadFailed,
+                      })}
+                    />
+                  )}
+                {index < uploadedFiles.length - 1 && <Separator />}
+              </div>
+            );
+          })}
+        </Card>
+      )}
+    </div>
+  );
+};

package/src/components/fileUpload/fileUpload.scss

@@ -0,0 +1,74 @@
+.ds-file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+
+  &__file {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-small);
+  }
+
+  &__file-details {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__file-name {
+    font-weight: var(--font-weight-semi-bold);
+    color: var(--color-grey-900);
+  }
+
+  &__file-meta {
+    color: var(--color-grey-500);
+    font-size: var(--font-size-2-13);
+  }
+
+  &__icon-wrapper {
+    background-color: var(--color-brand-050);
+    border-radius: var(--border-radius-small);
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__dropzone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__dropzone-text-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-x-small);
+  }
+
+  &__upload-failed {
+    color: var(--color-semantic-destructive-600);
+  }
+
+  &__file-outer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-small);
+  }
+
+  &__progress-bar {
+    height: 2px;
+
+    &-indicator {
+      background-color: var(--color-semantic-info-600);
+
+      &--failed {
+        background-color: var(--color-semantic-destructive-600);
+      }
+    }
+  }
+}

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

@@ -153,13 +153,12 @@ const subjectOptionsWithIcons = [
   { label: 'Geography', value: 'geography', icon: 'flag' as const },
 ];
 
-const attendanceReasonOptions = [
-  { label: 'Authorised absence', value: 'authorised', header: 'Planned' },
-  { label: 'Holiday', value: 'holiday', header: 'Planned' },
-  { label: 'Medical appointment', value: 'medical', header: 'Health' },
-  { label: 'Illness', value: 'illness', header: 'Health' },
-  { label: 'Unauthorised absence', value: 'unauthorised', header: 'Unplanned' },
-  { label: 'Late arrival', value: 'late', header: 'Unplanned' },
+const staffMemberOptions = [
+  { value: 'jsmith', header: 'Jane Smith', label: 'Head of Mathematics' },
+  { value: 'rwilliams', header: 'Rhys Williams', label: 'English Teacher' },
+  { value: 'apatel', header: 'Anika Patel', label: 'Science Teacher' },
+  { value: 'lobrien', header: "Liam O'Brien", label: 'History Teacher' },
+  { value: 'mgarcia', header: 'Maria Garcia', label: 'Geography Teacher' },
 ];
 
 const groupedYearOptions = [
@@ -435,8 +434,8 @@ const WithIconsTemplate = () => (
 const WithItemHeadersTemplate = () => (
   <div style={{ maxWidth: '320px' }}>
     <SelectDropdown
-      placeholder="Select absence reason"
-      options={attendanceReasonOptions}
+      placeholder="Select a staff member"
+      options={staffMemberOptions}
       onSelectionChange={values => console.log(values)}
     />
   </div>
@@ -807,13 +806,13 @@ import { SelectDropdown } from '@arbor-education/design-system.components';
 function WithItemHeadersExample() {
   return (
     <SelectDropdown
-      placeholder="Select absence reason"
+      placeholder="Select a staff member"
       options={[
-        { label: 'Authorised absence', value: 'authorised', header: 'Planned' },
-        { label: 'Holiday', value: 'holiday', header: 'Planned' },
-        { label: 'Medical appointment', value: 'medical', header: 'Health' },
-        { label: 'Illness', value: 'illness', header: 'Health' },
-        { label: 'Unauthorised absence', value: 'unauthorised', header: 'Unplanned' },
+        { value: 'jsmith', header: 'Jane Smith', label: 'Head of Mathematics' },
+        { value: 'rwilliams', header: 'Rhys Williams', label: 'English Teacher' },
+        { value: 'apatel', header: 'Anika Patel', label: 'Science Teacher' },
+        { value: 'lobrien', header: "Liam O'Brien", label: 'History Teacher' },
+        { value: 'mgarcia', header: 'Maria Garcia', label: 'Geography Teacher' },
       ]}
       onSelectionChange={(values) => console.log(values)}
     />
@@ -825,7 +824,7 @@ export default WithItemHeadersExample;
       },
     },
   },
-  'The `header` prop on an option renders a small label above the option text, creating a two-line item layout. Use this to add context to complex options — for example, showing the category of an absence type alongside its name.',
+  'The `header` prop on an option renders a primary line above the supplementary `label` text, creating a two-line item layout. Use the `header` for the meaningful identifier (e.g. a person\'s name) and the `label` for supporting detail (e.g. their role). When an option with a `header` is selected, the trigger displays the `header` value.',
 );
 
 export const WithGroups: Story = withDescription(

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

@@ -183,6 +183,25 @@ describe('SelectDropdown component', () => {
     expect(screen.getByText('header1')).toBeInTheDocument();
   });
 
+  test('displays the header (not the label) in the trigger when a multiline item is selected', async () => {
+    render(
+      <SelectDropdown
+        options={[
+          { label: 'Head of Mathematics', value: 'jsmith', header: 'Jane Smith' },
+          { label: 'English Teacher', value: 'rwilliams', header: 'Rhys Williams' },
+        ]}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+    await userEvent.click(await screen.findByText('Head of Mathematics'));
+
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveTextContent('Jane Smith');
+    expect(trigger).not.toHaveTextContent('Head of Mathematics');
+  });
+
   describe('iconClickOnly', () => {
     test('does not apply the icon-click-only modifier by default', () => {
       render(

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

@@ -60,7 +60,7 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     else if (selectedValues.length === 1) {
       const selectedValue = selectedValues[0];
       const option = options.find(opt => opt.value === selectedValue);
-      const displayText = option?.label ?? option?.value ?? String(selectedValue);
+      const displayText = option?.header ?? option?.label ?? option?.value ?? String(selectedValue);
       setRenderedSelectContent(displayText || (placeholder ?? 'Select'));
     }
     else {

package/src/components/icon/allowedIcons.tsx

@@ -29,6 +29,7 @@ import {
   Clipboard,
   ClipboardList,
   Clock3,
+  CloudUpload,
   Copy,
   CornerDownLeft,
   Dot,
@@ -127,6 +128,7 @@ export const allowedIcons = {
   'clipboard-list': ClipboardList,
   'clipboard': Clipboard,
   'clock-3': Clock3,
+  'cloud-upload': CloudUpload,
   'copy': Copy,
   'corner-down-left': CornerDownLeft,
   'date': CalendarFold,

package/src/components/progress/progress.scss

@@ -9,5 +9,6 @@
     height: 100%;
     background-color: var(--color-brand-600);
     border-radius: var(--border-radius-large);
+    transition: transform 250ms linear;
   }
 }