@squiz/formatted-text-editor 1.33.1-alpha.1 → 1.33.1-alpha.3

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor, select } from '../../../../tests';
+import { renderWithEditor } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
@@ -12,6 +12,7 @@ describe('ImageButton', () => {
   const openModal = async () => {
     fireEvent.click(screen.getByRole('button', { name: 'Image (cmd+L)' }));
     await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };
 
   beforeEach(() => {
@@ -35,7 +36,7 @@ describe('ImageButton', () => {
 
     // verify the modal opens
     await act(() => editor.selectText(2));
-    expect(await screen.findByLabelText('Source')).toHaveValue('');
+    expect(await screen.findByLabelText('Asset ID')).toHaveValue('');
   });
 
   it('Adds a new image', async () => {
@@ -215,7 +216,10 @@ describe('ImageButton', () => {
     fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/529.jpg' } });
     fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: '' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-    expect(await screen.findByText('Alternative description is required')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(document.querySelector('img[src="https://httpcats.com/529.jpg"]')).toBeInTheDocument();
+    });
   });
 
   it('Adds a new image with no width or height text', async () => {
@@ -246,7 +250,7 @@ describe('ImageButton', () => {
 
     // open the modal and add an image.
     await openModal();
-    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
@@ -282,7 +286,7 @@ describe('ImageButton', () => {
     await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
@@ -317,7 +321,7 @@ describe('ImageButton', () => {
       await renderWithEditor(<ImageButton />, { context: { matrix: { resolveMatrixAsset } } });
 
       await openModal();
-      select(screen.getByLabelText('Type'), 'Asset image');
+      fireEvent.click(screen.getByRole('button', { name: 'From source' }));
       fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: assetId } });
       await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
@@ -332,11 +336,8 @@ describe('ImageButton', () => {
     await act(async () => {
       fireEvent.change(screen.getByLabelText('Source'), { target: { value: ' ' } });
     });
-    await act(async () => {
-      fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: ' ' } });
-    });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(1);
   });
 });

package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx

@@ -13,6 +13,7 @@ const mockSubmitFunction = jest.fn();
 const mockCancelFunction = jest.fn();
 const setup = async () => {
   const utils = await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   const sourceInput = screen.getByRole('textbox', { name: /source/i }) as HTMLInputElement;
   const altInput = screen.getByRole('textbox', { name: /alt/i }) as HTMLInputElement;
   const widthInput = screen.getByRole('spinbutton', { name: /Width/i }) as HTMLInputElement;

package/src/EditorToolbar/Tools/Image/ImageModal.tsx

@@ -1,6 +1,7 @@
 import ImageForm, { ImageFormData } from './Form/ImageForm';
 import React from 'react';
 import { useCurrentSelection } from '@remirror/react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
 import { NodeSelection } from 'prosemirror-state';
@@ -16,13 +17,13 @@ const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const currentImage = selection?.node;
   const currentImageAttrs = { ...currentImage?.attrs };
   const formData = {
-    imageType: currentImage?.type.name === NodeName.AssetImage ? NodeName.AssetImage : NodeName.Image,
+    imageType: currentImage?.type.name === NodeName.Image ? NodeName.Image : NodeName.AssetImage,
     image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
     assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
   };
 
   return (
-    <FormModal title="Image" onCancel={onCancel}>
+    <FormModal title="Image" icon={<ImageRoundedIcon />} onCancel={onCancel}>
       <ImageForm data={formData} onSubmit={onSubmit} />
     </FormModal>
   );

package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx

@@ -27,32 +27,31 @@ describe('Link Form', () => {
   it('Renders the form with expected default values when no data is provided', () => {
     render(<LinkForm onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
-    expect(screen.getByLabelText('URL')).toHaveValue('');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
+    expect(screen.getByLabelText('Asset ID')).toHaveValue('');
     expect(screen.getByLabelText('Text')).toHaveValue('');
-    expect(screen.getByLabelText('Title')).toHaveValue('');
-    expect(screen.getByLabelText('Target')).toHaveTextContent('Current window');
-    expect(document.querySelectorAll('label')).toHaveLength(5);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(2);
   });
 
   it('Renders the form with the expected fields for arbitrary links', () => {
     render(<LinkForm data={data} onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From URL');
     expect(screen.getByLabelText('URL')).toHaveValue('https://www.squiz.net/link-form');
     expect(screen.getByLabelText('Text')).toHaveValue('Link text');
     expect(screen.getByLabelText('Title')).toHaveValue('Link title');
-    expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
-    expect(document.querySelectorAll('label')).toHaveLength(5);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(3);
   });
 
   it('Renders the form with the expected fields for asset links', () => {
     render(<LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to asset');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
     expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
     expect(screen.getByLabelText('Text')).toHaveValue('Link text');
-    expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
-    expect(document.querySelectorAll('label')).toHaveLength(4);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(2);
   });
 });

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { FromToProps } from 'remirror';
 import { Input } from '../../../../ui/Fields/Input/Input';
-import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
+import { Checkbox } from '../../../../ui/Fields/Checkbox/Checkbox';
 import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
 import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
@@ -11,6 +11,7 @@ import { EditorContext } from '../../../../Editor/EditorContext';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
 import { noEmptySpacesValidation } from '../../../../utils/validation';
+import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
 
 export type LinkFormData = {
   linkType: MarkName;
@@ -25,14 +26,9 @@ export type FormProps = {
   onSubmit: SubmitHandler<LinkFormData>;
 };
 
-const linkTypeOptions: SelectOptions = {
-  [MarkName.Link]: { label: 'Link to URL' },
-  [MarkName.AssetLink]: { label: 'Link to asset' },
-};
-
-const targetOptions: SelectOptions = {
-  [LinkTarget.Self]: { label: 'Current window' },
-  [LinkTarget.Blank]: { label: 'New window' },
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
 };
 
 export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
@@ -46,14 +42,12 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<LinkFormData>({
     defaultValues: data,
   });
-  const linkType = watch('linkType') || MarkName.Link;
+  const linkType = watch('linkType') || MarkName.AssetLink;
 
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
-      <div className="squiz-fte-form-group mb-2">
-        <Select
-          name="linkType"
-          label="Type"
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
           value={linkType}
           options={linkTypeOptions}
           onChange={(value) => setValue('linkType', value as MarkName)}
@@ -90,25 +84,15 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
             />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input
-              label="Title"
-              required
-              error={errors?.link?.title?.message}
-              {...register('link.title', {
-                required: 'Title is required',
-                validate: {
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
-            />
+            <Input label="Title" error={errors?.link?.title?.message} {...register('link.title')} />
           </div>
-          <div className={clsx('squiz-fte-form-group mb-0')}>
-            <Select
-              name="link.target"
-              label="Target"
-              value={data?.link?.target || '_self'}
-              options={targetOptions}
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Checkbox
+              label="Open link in new window"
               onChange={(value) => setValue('link.target', value as LinkTarget)}
+              defaultChecked={data?.link?.target === LinkTarget.Blank}
+              unchecked={LinkTarget.Self}
+              checked={LinkTarget.Blank}
             />
           </div>
         </>
@@ -147,13 +131,13 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
               })}
             />
           </div>
-          <div className={clsx('squiz-fte-form-group mb-0')}>
-            <Select
-              name="assetLink.target"
-              label="Target"
-              value={data?.assetLink?.target || '_self'}
-              options={targetOptions}
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Checkbox
+              label="Open link in new window"
               onChange={(value) => setValue('assetLink.target', value as LinkTarget)}
+              defaultChecked={data?.assetLink?.target === '_blank'}
+              unchecked={'_self' as LinkTarget}
+              checked={'_blank' as LinkTarget}
             />
           </div>
         </>

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -1,13 +1,14 @@
 import '@testing-library/jest-dom';
 import { act, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
 import React from 'react';
-import { renderWithEditor, select } from '../../../../tests';
+import { renderWithEditor } from '../../../../tests';
 import LinkButton from './LinkButton';
 
 describe('LinkButton', () => {
   const openModal = async () => {
     fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' }));
     await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };
 
   it('Adds a new link', async () => {
@@ -21,7 +22,7 @@ describe('LinkButton', () => {
     fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.squiz.net/link-button' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
     fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Link title' } });
-    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -246,7 +247,7 @@ describe('LinkButton', () => {
     });
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
@@ -290,9 +291,9 @@ describe('LinkButton', () => {
     await act(() => editor.selectText(5));
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
-    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -332,7 +333,7 @@ describe('LinkButton', () => {
     await renderWithEditor(<LinkButton />, { context: { matrix: { resolveMatrixAsset } } });
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: 'invalid-asset-id' } });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
@@ -351,7 +352,6 @@ describe('LinkButton', () => {
 
     expect(screen.getByText('URL is required')).toBeInTheDocument();
     expect(screen.getByText('Text is required')).toBeInTheDocument();
-    expect(screen.getByText('Title is required')).toBeInTheDocument();
   });
 
   it('Shows an error if the field value is just an empty space', async () => {
@@ -363,6 +363,6 @@ describe('LinkButton', () => {
     fireEvent.change(screen.getByLabelText('Title'), { target: { value: ' ' } });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(3);
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
   });
 });

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -1,6 +1,7 @@
 import { LinkForm, LinkFormData } from './Form/LinkForm';
 import React from 'react';
 import { useRemirrorContext } from '@remirror/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
 import { useExpandedSelection } from '../../../hooks';
@@ -19,7 +20,7 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
   const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
   const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
   const data = {
-    linkType: marks[0]?.type?.name === MarkName.AssetLink ? MarkName.AssetLink : MarkName.Link,
+    linkType: marks[0]?.type?.name === MarkName.Link ? MarkName.Link : MarkName.AssetLink,
     text: selectedText,
     link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
     assetLink: { ...marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs },
@@ -27,7 +28,7 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
   };
 
   return (
-    <FormModal title="Link" onCancel={onCancel}>
+    <FormModal title="Link" icon={<InsertLinkRoundedIcon />} onCancel={onCancel}>
       <LinkForm data={data} onSubmit={onSubmit} />
     </FormModal>
   );

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -49,7 +49,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: MarkName.Link,
+      excludes: [this.name, MarkName.Link].join(' '),
       ...override,
       attrs: {
         ...extra.defaults(),

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -43,7 +43,7 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: MarkName.AssetLink,
+      excludes: [this.name, MarkName.AssetLink].join(' '),
       ...override,
       attrs: {
         ...extra.defaults(),

package/src/index.scss

@@ -15,5 +15,6 @@
 @import './ui/Button/button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
+@import './ui/Fields/Checkbox/checkbox';
 
 @import './ui/Modal/modal';

package/src/ui/Fields/Checkbox/Checkbox.spec.tsx

@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import { LinkTarget } from '../../../Extensions/LinkExtension/common';
+
+describe('Input', () => {
+  const mockOnChange = jest.fn();
+
+  const CheckboxComponent = ({ defaultChecked = false }: { defaultChecked?: boolean }) => {
+    return (
+      <Checkbox
+        label="This is a test checkbox"
+        onChange={mockOnChange}
+        defaultChecked={defaultChecked}
+        unchecked={'self' as LinkTarget}
+        checked={'_blank' as LinkTarget}
+      />
+    );
+  };
+
+  it('Renders the checkbox label', () => {
+    render(<CheckboxComponent />);
+    // Check that the supplied label renders
+    const checkboxLabel = screen.getByText('This is a test checkbox');
+    expect(checkboxLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default checkmark', () => {
+    render(<CheckboxComponent defaultChecked={true} />);
+    // Check that default value supplied renders
+    expect(screen.getByTestId('CheckRoundedIcon')).toBeInTheDocument();
+  });
+
+  it('Does not render the default checkmark', () => {
+    render(<CheckboxComponent defaultChecked={false} />);
+    expect(screen.queryByTestId('CheckRoundedIcon')).toBeFalsy();
+  });
+
+  it('Toggles checkbox when it is clicked', () => {
+    render(<CheckboxComponent />);
+    const checkbox = screen.getAllByRole('button')[0];
+
+    expect(checkbox).toBeTruthy();
+    fireEvent.click(checkbox);
+
+    expect(mockOnChange).toHaveBeenCalled();
+    expect(screen.getByTestId('CheckRoundedIcon')).toBeInTheDocument();
+  });
+});

package/src/ui/Fields/Checkbox/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+
+export type CheckboxProps<TChecked, TUnchecked> = {
+  label: string;
+  onChange: (value: TChecked | TUnchecked) => void;
+  defaultChecked?: boolean;
+  unchecked: TUnchecked;
+  checked: TChecked;
+};
+
+export const Checkbox = <TChecked, TUnchecked>({
+  label,
+  onChange,
+  defaultChecked = false,
+  unchecked,
+  checked,
+}: CheckboxProps<TChecked, TUnchecked>) => {
+  const [toggled, setToggled] = useState<boolean>(defaultChecked);
+
+  useEffect(() => {
+    if (toggled) {
+      onChange(checked);
+    } else {
+      onChange(unchecked);
+    }
+  }, [toggled]);
+
+  const toggleCheckbox = () => setToggled(!toggled);
+
+  return (
+    <div className="squiz-fte-checkbox">
+      <button
+        type="button"
+        role="checkbox"
+        aria-label={label}
+        aria-checked={toggled}
+        className="checkbox"
+        onClick={toggleCheckbox}
+      >
+        {toggled && <CheckRoundedIcon />}
+      </button>
+      {/* Checkbox label as a button, acts as a secondary way to toggle */}
+      <button type="button" className="label" onClick={toggleCheckbox}>
+        {label}
+      </button>
+    </div>
+  );
+};

package/src/ui/Fields/Checkbox/_checkbox.scss

@@ -0,0 +1,26 @@
+.squiz-fte-checkbox {
+  @apply text-gray-800;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  margin-top: 0.75rem;
+  gap: 0.75rem;
+
+  .checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: #fff;
+
+    border: 2px solid #e0e0e0;
+    border-radius: 4px;
+
+    svg {
+      width: 100%;
+    }
+  }
+}

package/src/ui/Modal/FormModal.spec.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import React from 'react';
 import FormModal from './FormModal';
 
@@ -8,7 +9,7 @@ describe('FormModal', () => {
     const handleSubmit = jest.fn();
 
     render(
-      <FormModal title="Modal title" onCancel={jest.fn()}>
+      <FormModal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={jest.fn()}>
         <form onSubmit={handleSubmit}></form>
       </FormModal>,
     );

package/src/ui/Modal/Modal.spec.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import React from 'react';
 import Modal from './Modal';
 import { Select } from '../Fields/Select/Select';
@@ -11,7 +12,7 @@ describe('Modal', () => {
 
   const ModalComponent = () => {
     return (
-      <Modal title="Modal title" onCancel={mockOnCancel}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel}>
         <div>I am a child in the modal</div>
       </Modal>
     );
@@ -26,6 +27,13 @@ describe('Modal', () => {
     expect(modalHeading).toBeInTheDocument();
   });
 
+  it('Renders the modal image', () => {
+    render(<ModalComponent />);
+    // Check that the modal image displays
+    const modalImage = screen.getByTestId('InsertLinkRoundedIcon');
+    expect(modalImage).toBeInTheDocument();
+  });
+
   it('Renders the child', () => {
     render(<ModalComponent />);
     // Check that the modal heading displays
@@ -52,7 +60,7 @@ describe('Modal', () => {
 
   it('Renders the submit button if there is a submit function supplied', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>I am a child in the modal</div>
       </Modal>,
     );
@@ -63,7 +71,7 @@ describe('Modal', () => {
 
   it('Checks that the submit function fires if you click on the submit button', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>I am a child in the modal</div>
       </Modal>,
     );
@@ -77,7 +85,7 @@ describe('Modal', () => {
 
   it('Calls the onSubmit handler when the enter key is pressed', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>Modal content</div>
       </Modal>,
     );
@@ -89,7 +97,7 @@ describe('Modal', () => {
 
   it('Calls the onCancel handler when the escape key is pressed', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <div>Modal content</div>
       </Modal>,
     );
@@ -101,7 +109,7 @@ describe('Modal', () => {
 
   it('Auto-focuses on the first non-hidden input on mount', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <>
           <input id="hidden-input" type="hidden" />
           <label htmlFor="my-input">My input</label>
@@ -115,7 +123,7 @@ describe('Modal', () => {
 
   it('Auto-focuses on the first select field on mount', () => {
     render(
-      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+      <Modal title="Modal title" icon={<InsertLinkRoundedIcon />} onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
         <>
           <Select label="Dropdown" name="select" options={{}} />
           <Input label="Input" name="input" />

package/src/ui/Modal/Modal.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 
 export type ModalProps = {
   title: string;
+  icon: ReactElement;
   children: ReactElement;
   onCancel: () => void;
   onSubmit?: () => void;
@@ -13,7 +14,7 @@ export type ModalProps = {
 };
 
 const Modal = (
-  { children, title, onCancel, onSubmit, className }: ModalProps,
+  { children, title, icon, onCancel, onSubmit, className }: ModalProps,
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement => {
   const content = useRef<HTMLDivElement>(null);
@@ -55,7 +56,8 @@ const Modal = (
         <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
           <div className="w-modal-sm my-6 mx-auto">
             <div className="squiz-fte-modal">
-              <div className="squiz-fte-modal-header p-6 pb-2">
+              <div className="squiz-fte-modal-header p-6 pb-4">
+                <div className="squiz-fte-modal-header-icon mr-1.5 mt-[-1px]">{icon}</div>
                 <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
                 <button
                   type="button"