@scottish-government/designsystem-react 0.6.0 → 0.7.1

package/src/components/{date-picker/date-picker.test.tsx → DatePicker/DatePicker.test.tsx}

@@ -1,21 +1,21 @@
 import { test, expect, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
-import DatePicker from './date-picker';
+import DatePicker from './DatePicker';
 
-const labelText = 'Date of birth';
-const id = 'date-picker';
+const LABEL_TEXT = 'Date of birth';
+const DATE_PICKER_ID = 'date-picker';
 
 test('date picker renders correctly', () => {
     render(
         <DatePicker
-            id={id}
-            label={labelText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
         />
     );
 
     // a little hacky. maybe testid would be better?
     const datePicker = screen.getAllByRole('generic')[1];
-    const label = within(datePicker).getByText(labelText);
+    const label = within(datePicker).getByText(LABEL_TEXT);
     const textInput = within(datePicker).getByRole('textbox');
 
     expect(datePicker).toHaveClass('ds_datepicker');
@@ -23,36 +23,38 @@ test('date picker renders correctly', () => {
     expect(label).toHaveAttribute('for', textInput.id);
     expect(label.tagName).toEqual('LABEL');
     expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
-    expect(textInput.id).toEqual(id);
+    expect(textInput.id).toEqual(DATE_PICKER_ID);
 
     // todo: check for DS script being fired
 });
 
 test('date picker with disabled dates', () => {
-    const disabledDates = '18/05/2023 19/05/2023'
+    const DISABLED_DATES = '18/05/2023 19/05/2023'
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            disabledDates={disabledDates}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            disabledDates={DISABLED_DATES}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
 
-    expect(datePicker).toHaveAttribute('data-disableddates', disabledDates);
+    expect(datePicker).toHaveAttribute('data-disableddates', DISABLED_DATES);
 });
 
 test('date picker with hint text', () => {
-    const hintText = 'My hint text'
+    const HINT_TEXT = 'My hint text'
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            hintText={hintText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            hintText={HINT_TEXT}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
-    const hintTextEl = screen.getByText(hintText);
+    const hintTextEl = screen.getByText(HINT_TEXT);
     const textInput = within(datePicker).getByRole('textbox');
 
     expect(hintTextEl).toBeInTheDocument();
@@ -60,56 +62,60 @@ test('date picker with hint text', () => {
 });
 
 test('date picker with custom icon path', () => {
-    const iconPath = '/my/icon/path'
+    const ICON_PATH = '/my/icon/path'
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            iconPath={iconPath}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            iconPath={ICON_PATH}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
-    const label = within(datePicker).getByText(labelText);
+    const label = within(datePicker).getByText(LABEL_TEXT);
     const textInput = within(datePicker).getByRole('textbox');
 
     // todo
 });
 
 test('date picker with max date', () => {
-    const maxDate = '28/05/2023'
+    const MAX_DATE = '28/05/2023'
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            maxDate={maxDate}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            maxDate={MAX_DATE}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
 
-    expect(datePicker).toHaveAttribute('data-maxDate', maxDate);
+    expect(datePicker).toHaveAttribute('data-maxDate', MAX_DATE);
 });
 
 test('date picker with min date', () => {
-    const minDate = '28/05/2023'
+    const MIN_DATE = '28/05/2023'
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            minDate={minDate}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            minDate={MIN_DATE}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
 
-    expect(datePicker).toHaveAttribute('data-mindate', minDate);
+    expect(datePicker).toHaveAttribute('data-mindate', MIN_DATE);
 });
 
 test('date picker with blur fn', () => {
-    const onBlurFn = vi.fn();
+    const ONBLUR_FUNCTION = vi.fn();
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            onBlur={onBlurFn}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            onBlur={ONBLUR_FUNCTION}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
@@ -117,16 +123,17 @@ test('date picker with blur fn', () => {
 
     fireEvent.blur(textInput);
 
-    expect(onBlurFn).toHaveBeenCalled();
+    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
 });
 
 test('date picker with change fn', () => {
-    const onChangeFn = vi.fn();
+    const ONCHANGE_FUNCTION = vi.fn();
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            onChange={onChangeFn}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            onChange={ONCHANGE_FUNCTION}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
@@ -134,32 +141,34 @@ test('date picker with change fn', () => {
 
     fireEvent.change(textInput, {target: {value: 'foo'}});
 
-    expect(onChangeFn).toHaveBeenCalled();
+    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
 });
 
 test('date picker with initial value', () => {
-    const initialValue = '28/05/2023';
+    const INITIAL_VALUE = '28/05/2023';
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
-            value={initialValue}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
+            value={INITIAL_VALUE}
         />
     );
     const datePicker = screen.getAllByRole('generic')[1];
     const textInput = within(datePicker).getByRole('textbox');
 
-    expect(textInput).toHaveValue(initialValue);
+    expect(textInput).toHaveValue(INITIAL_VALUE);
 });
 
 test('date picker with multiple inputs', () => {
-    const initialValue = '28/05/2023';
+    const INITIAL_VALUE = '28/05/2023';
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
             multiple
-            value={initialValue}
+            value={INITIAL_VALUE}
         />
     );
 
@@ -174,13 +183,13 @@ test('date picker with multiple inputs', () => {
 
     expect(textInputs.length).toEqual(3);
 
-    expect(dateInput).toHaveValue(initialValue.split('/')[0]);
-    expect(monthInput).toHaveValue(initialValue.split('/')[1]);
-    expect(yearInput).toHaveValue(initialValue.split('/')[2]);
+    expect(dateInput).toHaveValue(INITIAL_VALUE.split('/')[0]);
+    expect(monthInput).toHaveValue(INITIAL_VALUE.split('/')[1]);
+    expect(yearInput).toHaveValue(INITIAL_VALUE.split('/')[2]);
 
-    expect(dateInput).toHaveAttribute('id', `${id}-day`);
-    expect(monthInput).toHaveAttribute('id', `${id}-month`);
-    expect(yearInput).toHaveAttribute('id', `${id}-year`);
+    expect(dateInput).toHaveAttribute('id', `${DATE_PICKER_ID}-day`);
+    expect(monthInput).toHaveAttribute('id', `${DATE_PICKER_ID}-month`);
+    expect(yearInput).toHaveAttribute('id', `${DATE_PICKER_ID}-year`);
 
     expect(dateInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-date');
     expect(monthInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-month');
@@ -196,18 +205,19 @@ test('date picker with multiple inputs', () => {
 });
 
 test('date picker with error message', () => {
-    const errorMessage = 'This is a required field';
+    const ERROR_MESSAGE_TEXT = 'This is a required field';
+
     render(
         <DatePicker
-            id={id}
-            label={labelText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
             error
-            errorMessage={errorMessage}
+            errorMessage={ERROR_MESSAGE_TEXT}
         />
     );
 
     const textInput = screen.getByRole('textbox');
-    const errorMessageElement = screen.getByText(errorMessage);
+    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
 
     expect(textInput).toHaveClass('ds_input--error')
     expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -219,8 +229,8 @@ test('date picker with error message', () => {
 test('passing additional props', () => {
     render(
         <DatePicker
-            id={id}
-            label={labelText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
             data-test="foo"
         />
     )
@@ -232,8 +242,8 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <DatePicker
-            id={id}
-            label={labelText}
+            id={DATE_PICKER_ID}
+            label={LABEL_TEXT}
             className="foo"
         />
     )

package/src/components/{date-picker/date-picker.tsx → DatePicker/DatePicker.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 // @ts-ignore
 import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
-import ErrorMessage from '../error-message/error-message';
-import TextInput from '../text-input/text-input';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import TextInput from '../TextInput/TextInput';
 
 const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
     className,

package/src/components/{details/details.test.tsx → Details/Details.test.tsx}

@@ -1,19 +1,19 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import Details from './details';
+import Details from './Details';
 
-const summaryText = 'I can\'t sign in';
-const content = '<p>hello</p>';
+const SUMARY_TEXT = 'I can\'t sign in';
+const CONTENT = '<p>hello</p>';
 
 test('details renders correctly', () => {
 
     render(
-        <Details summary={summaryText}>
+        <Details summary={SUMARY_TEXT}>
             <p>hello</p>
         </Details>
     );
 
-    const summaryElement = screen.getByText(summaryText);
+    const summaryElement = screen.getByText(SUMARY_TEXT);
     const detailsElement = summaryElement.parentElement;
     const textElement = summaryElement.nextElementSibling;
 
@@ -22,29 +22,29 @@ test('details renders correctly', () => {
     expect(summaryElement).toHaveClass('ds_details__summary');
     expect(summaryElement?.tagName).toEqual('SUMMARY');
     expect(textElement).toHaveClass('ds_details__text');
-    expect(textElement?.innerHTML).toEqual(content);
+    expect(textElement?.innerHTML).toEqual(CONTENT);
 });
 
 test('passing additional props', () => {
     render(
-        <Details data-test="foo" summary={summaryText}>
+        <Details data-test="foo" summary={SUMARY_TEXT}>
             <p>hello</p>
         </Details>
     )
 
-    const summaryElement = screen.getByText(summaryText);
+    const summaryElement = screen.getByText(SUMARY_TEXT);
     const detailsElement = summaryElement.parentElement;
     expect(detailsElement?.dataset.test).toEqual('foo');
 });
 
 test('passing additional CSS classes', () => {
     render(
-        <Details className="foo" summary={summaryText}>
+        <Details className="foo" summary={SUMARY_TEXT}>
             <p>hello</p>
         </Details>
     )
 
-    const summaryElement = screen.getByText(summaryText);
+    const summaryElement = screen.getByText(SUMARY_TEXT);
     const detailsElement = summaryElement.parentElement;
     expect(detailsElement).toHaveClass('foo', 'ds_details');
 });

package/src/components/{error-message/error-message.test.tsx → ErrorMessage/ErrorMessage.test.tsx}

@@ -1,28 +1,28 @@
 import { test, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import ErrorMessage from './error-message';
+import ErrorMessage from './ErrorMessage';
 
-const errorText = 'Error message';
-const errorId = 'errormessage';
+const ERROR_TEXT = 'Error message';
+const ERROR_ID = 'errormessage';
 
 test('error message renders correctly', () => {
 
     render(
-        <ErrorMessage text={errorText} id={errorId}/>
+        <ErrorMessage text={ERROR_TEXT} id={ERROR_ID}/>
     );
 
     const errorMessageElement = screen.getByRole('paragraph');
 
-    expect(errorMessageElement).toHaveAttribute('id', errorId);
+    expect(errorMessageElement).toHaveAttribute('id', ERROR_ID);
     expect(errorMessageElement).toHaveClass('ds_question__error-message');
-    expect(errorMessageElement.textContent).toEqual(errorText);
+    expect(errorMessageElement.textContent).toEqual(ERROR_TEXT);
 });
 
 test('error message with HTML content', () => {
-    const errorId = 'errormessage';
+    const ERROR_ID = 'errormessage';
 
     render(
-        <ErrorMessage id={errorId}>hello <a href="#foo">world</a></ErrorMessage>
+        <ErrorMessage id={ERROR_ID}>hello <a href="#foo">world</a></ErrorMessage>
     );
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -32,7 +32,7 @@ test('error message with HTML content', () => {
 
 test('passing additional props', () => {
     render(
-        <ErrorMessage data-test="foo" text={errorText} id={errorId}/>
+        <ErrorMessage data-test="foo" text={ERROR_TEXT} id={ERROR_ID}/>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');
@@ -41,7 +41,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorMessage className="foo" text={errorText} id={errorId}/>
+        <ErrorMessage className="foo" text={ERROR_TEXT} id={ERROR_ID}/>
     )
 
     const errorMessageElement = screen.getByRole('paragraph');

package/src/components/{error-summary/error-summary.test.tsx → ErrorSummary/ErrorSummary.test.tsx}

@@ -1,19 +1,18 @@
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
-import ErrorSummary from './error-summary';
-import { title } from 'process';
+import ErrorSummary from './ErrorSummary';
 
-const errors = [
+const ERRORS = [
     { fragmentId: 'did-resolve', title: 'Did this resolve your issue?' },
     { fragmentId: 'what-topics', title: 'What topics are you interested in?' },
     { fragmentId: 'more-detail', title: 'Please provide more detail' }
 ];
 
 test('error summary renders correctly', () => {
-    const titleId = 'error-summary-title';
+    const TITLE_ID = 'error-summary-title';
 
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} />
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -28,30 +27,30 @@ test('error summary renders correctly', () => {
     expect(errorSummaryElement.tagName).toEqual('DIV');
 
     expect(errorSummaryTitle).toHaveClass('ds_error-summary__title');
-    expect(errorSummaryTitle).toHaveAttribute('id', titleId);
+    expect(errorSummaryTitle).toHaveAttribute('id', TITLE_ID);
     expect(errorSummaryTitle.tagName).toEqual('H2');
     expect(errorSummaryTitle.textContent).toEqual('There is a problem');
 
     expect(errorSummaryList).toHaveClass('ds_error-summary__list');
     expect(errorSummaryList.tagName).toEqual('UL');
 
-    expect(errorSummaryItems.length).toEqual(errors.length);
+    expect(errorSummaryItems.length).toEqual(ERRORS.length);
 
-    expect(errorSummaryLink1).toHaveAttribute('href', `#${errors[0].fragmentId}`);
-    expect(errorSummaryLink1.textContent).toEqual(errors[0].title);
+    expect(errorSummaryLink1).toHaveAttribute('href', `#${ERRORS[0].fragmentId}`);
+    expect(errorSummaryLink1.textContent).toEqual(ERRORS[0].title);
 });
 
 test('error summary with custom title', () => {
-    const title = 'Foo';
+    const TITLE_TEXT = 'Foo';
 
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} title={title} />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} title={TITLE_TEXT} />
     );
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
     const errorSummaryTitle = within(errorSummaryElement).getByRole('heading');
 
-    expect(errorSummaryTitle.textContent).toEqual(title);
+    expect(errorSummaryTitle.textContent).toEqual(TITLE_TEXT);
 });
 
 test('error summary with no errors (empty array) should not display', () => {
@@ -89,7 +88,7 @@ test('error sumary item with no link', () => {
 
 test('passing additional props', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} data-test="foo" />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} data-test="foo" />
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -98,7 +97,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <ErrorSummary data-testid="errorsummary" errors={errors} className="foo" />
+        <ErrorSummary data-testid="errorsummary" errors={ERRORS} className="foo" />
     )
 
     const errorSummaryElement = screen.getByTestId('errorsummary');

package/src/components/{error-summary/error-summary.tsx → ErrorSummary/ErrorSummary.tsx}

@@ -1,4 +1,4 @@
-import ConditionalWrapper from '../../common/conditional-wrapper';
+import ConditionalWrapper from '../../common/ConditionalWrapper';
 
 const Error: React.FC<SGDS.Component.ErrorSummary.Error> = ({
     fragmentId,

package/src/components/{file-download/file-download.test.tsx → FileDownload/FileDownload.test.tsx}

@@ -1,13 +1,13 @@
 import { test, expect } from 'vitest';
 import { screen, render } from '@testing-library/react';
-import FileDownload from './file-download';
+import FileDownload from './FileDownload';
 
-const title = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
-const fileUrl = 'my-file.file';
+const FILE_TITLE = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
+const FILE_URL = 'my-file.file';
 
 test('inset text renders correctly', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -26,7 +26,7 @@ test('inset text renders correctly', () => {
     expect(thumbnailLink).toHaveClass('ds_file-download__thumbnail-link');
     expect(thumbnailLink).toHaveAttribute('aria-hidden', 'true');
     expect(thumbnailLink).toHaveAttribute('tabindex', '-1');
-    expect(thumbnailLink).toHaveAttribute('href', fileUrl);
+    expect(thumbnailLink).toHaveAttribute('href', FILE_URL);
     expect(thumbnailLink?.tagName).toEqual('A');
 
     expect(thumbnailContainer).toHaveClass('ds_file-download__thumbnail');
@@ -38,14 +38,14 @@ test('inset text renders correctly', () => {
     expect(contentContainer?.parentElement).toEqual(fileDownload);
 
     expect(fileLink).toHaveClass('ds_file-download__title');
-    expect(fileLink).toHaveAttribute('href', fileUrl);
+    expect(fileLink).toHaveAttribute('href', FILE_URL);
     expect(fileLink?.tagName).toEqual('A');
-    expect(fileLink?.textContent).toEqual(title);
+    expect(fileLink?.textContent).toEqual(FILE_TITLE);
 });
 
 test('highlighted file download', () => {
     render(
-        <FileDownload highlighted fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload highlighted fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -58,25 +58,25 @@ test('highlighted file download', () => {
 // });
 
 test('file download with cover image', () => {
-    const coverUrl = 'my-image.png';
+    const COVER_URL = 'my-image.png';
 
     render(
-        <FileDownload cover={coverUrl} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload cover={COVER_URL} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const thumbnailImage = screen.getByRole('presentation', {hidden: true});
 
     expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
     expect(thumbnailImage).toHaveAttribute('alt', '');
-    expect(thumbnailImage).toHaveAttribute('src', coverUrl);
+    expect(thumbnailImage).toHaveAttribute('src', COVER_URL);
     expect(thumbnailImage.tagName).toEqual('IMG');
 });
 
 test('file download with file size', () => {
-    const fileSize = '1.2 MB';
+    const FILE_SIZE = '1.2 MB';
 
     render(
-        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileSize={FILE_SIZE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const metadataKey = screen.getByRole('term');
@@ -98,15 +98,15 @@ test('file download with file size', () => {
     expect(metadataKey.textContent).toEqual('File size');
 
     expect(metadataValue).toHaveClass('ds_metadata__value');
-    expect(metadataValue.textContent).toEqual(fileSize);
+    expect(metadataValue.textContent).toEqual(FILE_SIZE);
     expect(metadataValue.previousElementSibling).toEqual(metadataKey);
 });
 
 test('file download with file type', () => {
-    const fileType = '5 page PDF';
+    const FILE_TYPE = '5 page PDF';
 
     render(
-        <FileDownload fileType={fileType} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileType={FILE_TYPE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const metadataKey = screen.getByRole('term');
@@ -128,15 +128,15 @@ test('file download with file type', () => {
     expect(metadataKey.textContent).toEqual('File type');
 
     expect(metadataValue).toHaveClass('ds_metadata__value');
-    expect(metadataValue.textContent).toEqual(fileType + ',');
+    expect(metadataValue.textContent).toEqual(FILE_TYPE + ',');
     expect(metadataValue.previousElementSibling).toEqual(metadataKey);
 });
 
 test('association of metadata with file link', () => {
-    const fileSize = '1.2 MB';
+    const FILE_SIZE = '1.2 MB';
 
     render(
-        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+        <FileDownload fileSize={FILE_SIZE} fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" />
     );
 
     const fileLink = screen.getByRole('link');
@@ -150,7 +150,7 @@ test('association of metadata with file link', () => {
 
 test('passing additional props', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" data-test="foo" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" data-test="foo" />
     );
 
     const fileDownload = screen.getByTestId('file-download');
@@ -159,7 +159,7 @@ test('passing additional props', () => {
 
 test('passing additional CSS classes', () => {
     render(
-        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" className="foo" />
+        <FileDownload fileUrl={FILE_URL} title={FILE_TITLE} data-testid="file-download" className="foo" />
     );
 
     const fileDownload = screen.getByTestId('file-download');

package/src/components/{file-download/file-download.tsx → FileDownload/FileDownload.tsx}

@@ -1,5 +1,5 @@
 import { useId } from 'react';
-import FileIcon from '../../common/file-icon';
+import FileIcon from '../../common/FileIcon';
 
 const FileDownload: React.FC<SGDS.Component.FileDownload> = ({
     className,