@squiz/resource-browser 1.32.1-alpha.12

package/src/Icons/MatrixResources/Folder.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Renders the Folder icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Folder component
+ * @returns {JSX.Element} - The Folder component
+ * @example
+ * <Folder />
+ * @example
+ * <Folder height={24} width={24} />
+ * @example
+ * <Folder className="custom-class" />
+ */
+export default function Folder({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m1 5c0-1.10457.89543-2 2-2h8.1177c.6752 0 1.3049.34077 1.6743.9061l2.208 3.37961-14 3.71429z"
+        fill="#efb324"
+      />
+      <path
+        d="m3 6.5c-.82843 0-1.5.67157-1.5 1.5v11.5c0 .5523.44771 1 1 1h18.5c.8284 0 1.5-.6716 1.5-1.5v-11c0-.82843-.6716-1.5-1.5-1.5h-7.5106-2.8369z"
+        fill="#fbefd2"
+        stroke="#f5d584"
+      />
+      {!isDecorative && <title>folder icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/GenericFile.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the GenericFile icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the GenericFile component
+ * @returns {JSX.Element} - The GenericFile component
+ * @example
+ * <GenericFile />
+ * @example
+ * <GenericFile height={24} width={24} />
+ * @example
+ * <GenericFile className="custom-class" />
+ */
+export default function GenericFile({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#fff"
+        stroke="#74b1e6"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#74b1e6" />
+      <path d="m14.5 7.5v-5l5 5z" fill="#cce2f6" />
+      <g stroke="#74b1e6">
+        <path d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z" />
+        <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" />
+      </g>
+      {!isDecorative && <title>generic file icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Image.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * Renders the Image icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Image component
+ * @returns {JSX.Element} - The Image component
+ * @example
+ * <Image />
+ * @example
+ * <Image height={24} width={24} />
+ * @example
+ * <Image className="custom-class" />
+ */
+export default function Image({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m21 17.5h.5v-.5-13c0-.82843-.6716-1.5-1.5-1.5h-16c-.82843 0-1.5.67157-1.5 1.5v13 .5h.5z"
+        fill="#cce2f6"
+        stroke="#74b1e6"
+      />
+      <circle cx="15.5" cy="8.5" fill="#fbefd2" r="3" stroke="#f0c14f" />
+      <path
+        d="m21.3749 16.0025.1251.1418v.189 3.6667c0 .8284-.6716 1.5-1.5 1.5h-8.5-1.1506l.7851-.8412 6.2481-6.6944c.6044-.6476 1.6353-.6331 2.2214.031z"
+        fill="#cee9d8"
+        stroke="#79c292"
+      />
+      <path
+        d="m2.62777 13.6262-.12777.1424v.1914 6.04c0 .8284.67157 1.5 1.5 1.5h13 1.0974l-.7201-.8281-9.25697-10.6455c-.59189-.68068-1.64634-.68877-2.2486-.0173z"
+        fill="#79c292"
+        stroke="#098934"
+      />
+      {!isDecorative && <title>image icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/MatrixResourceMap.ts

@@ -0,0 +1,19 @@
+import { Audio, Excel, Folder, GenericFile, Image, Page, Pdf, Powerpoint, Site, Video, Word } from '.';
+
+// Define our map of matrix types to icons
+const MatrixResourceMap = {
+  audio: Audio,
+  excel: Excel,
+  folder: Folder,
+  generic_file: GenericFile,
+  image: Image,
+  page_standard: Page,
+  pdf: Pdf,
+  powerpoint: Powerpoint,
+  site: Site,
+  video: Video,
+  word: Word,
+};
+
+// Export our map
+export default MatrixResourceMap;

package/src/Icons/MatrixResources/Page.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * Renders the Page icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Page component
+ * @returns {JSX.Element} - The Page component
+ * @example
+ * <Page />
+ * @example
+ * <Page height={24} width={24} />
+ * @example
+ * <Page className="custom-class" />
+ */
+export default function Page({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m4 1.5c-.82843 0-1.5.67157-1.5 1.5v18c0 .8284.67157 1.5 1.5 1.5h16c.8284 0 1.5-.6716 1.5-1.5v-18c0-.82843-.6716-1.5-1.5-1.5z"
+        fill="#cee9d8"
+        stroke="#79c292"
+      />
+      <g fill="#098934">
+        <rect height="1" rx=".5" width="6" x="6" y="8" />
+        <rect height="1" rx=".5" width="6" x="6" y="10" />
+        <rect height="1" rx=".5" width="12" x="6" y="12" />
+        <rect height="1" rx=".5" width="12" x="6" y="14" />
+        <rect height="1" rx=".5" width="12" x="6" y="16" />
+        <rect height="1" rx=".5" width="12" x="6" y="18" />
+      </g>
+      {!isDecorative && <title>page standard icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Pdf.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the Pdf icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Pdf component
+ * @returns {JSX.Element} - The Pdf component
+ * @example
+ * <Pdf />
+ * @example
+ * <Pdf height={24} width={24} />
+ * @example
+ * <Pdf className="custom-class" />
+ */
+export default function Pdf({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#f6d2d1"
+        stroke="#e88483"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#e88483" />
+      <rect fill="#d72321" height="9" rx="2" width="17" y="11" />
+      <rect fill="#d72321" height="7" rx="1" width="13" x="2" y="12" />
+      <g stroke="#fff" strokeLinecap="round">
+        <path d="m3.5 17.5v-2m0 0v-1.8c0-.1105.08954-.2.2-.2h1c.55228 0 1 .4477 1 1 0 .5523-.44772 1-1 1z" />
+        <path d="m7.5 17.3v-3.6c0-.1105.08954-.2.2-.2h.3c.82843 0 1.5.6716 1.5 1.5v1c0 .8284-.67157 1.5-1.5 1.5h-.3c-.11046 0-.2-.0895-.2-.2z" />
+        <path d="m11.5 17.5v-3.8c0-.1105.0895-.2.2-.2h1.8" />
+        <path d="m11.5 15.5h1" />
+      </g>
+      {!isDecorative && <title>pdf icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Powerpoint.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Renders the Powerpoint icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Powerpoint component
+ * @returns {JSX.Element} - The Powerpoint component
+ * @example
+ * <Powerpoint />
+ * @example
+ * <Powerpoint height={24} width={24} />
+ * @example
+ * <Powerpoint className="custom-class" />
+ */
+export default function Powerpoint({
+  isDecorative,
+  ...props
+}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#e7e7e7"
+        stroke="#bcbcbc"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#bcbcbc" />
+      <rect fill="#e96900" height="12" rx="2" width="12" y="8" />
+      <g stroke="#fff" strokeLinecap="round">
+        <path d="m3.5 11.5v5" />
+        <path d="m3.5 11.5h3.5c.33333 0 1.5 0 1.5 1.5s-1.16667 1.5-1.5 1.5h-3" />
+      </g>
+      {!isDecorative && <title>powerpoint icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Site.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * Renders the Site icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Site component
+ * @returns {JSX.Element} - The Site component
+ * @example
+ * <Site />
+ * @example
+ * <Site height={24} width={24} />
+ * @example
+ * <Site className="custom-class" />
+ */
+export default function Site({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="12" cy="12" fill="#cce2f5" r="10.5" stroke="#7db4e3" />
+      <path
+        d="m19.5 12c0 2.9434-.8684 5.5878-2.2475 7.4841-1.3795 1.8968-3.2427 3.0159-5.2525 3.0159-2.00976 0-3.87299-1.1191-5.25249-3.0159-1.37913-1.8963-2.24751-4.5407-2.24751-7.4841 0-2.94337.86838-5.58777 2.24751-7.48409 1.3795-1.8968 3.24273-3.01591 5.25249-3.01591 2.0098 0 3.873 1.11911 5.2525 3.01591 1.3791 1.89632 2.2475 4.54072 2.2475 7.48409z"
+        fill="#cce2f5"
+        stroke="#7db4e3"
+      />
+      <path
+        d="m14.5 12c0 3.0063-.3329 5.7099-.8611 7.6466-.265.9719-.5718 1.7223-.8914 2.218-.334.5181-.5981.6354-.7475.6354s-.4135-.1173-.7475-.6354c-.3196-.4957-.6264-1.2461-.8914-2.218-.52822-1.9367-.8611-4.6403-.8611-7.6466 0-3.00626.33288-5.70993.8611-7.64662.265-.97192.5718-1.72231.8914-2.21799.334-.51806.5981-.63539.7475-.63539s.4135.11733.7475.63539c.3196.49568.6264 1.24607.8914 2.21799.5282 1.93669.8611 4.64036.8611 7.64662z"
+        fill="#cce2f5"
+        stroke="#7db4e3"
+      />
+      <g fill="#7db4e3">
+        <path d="m2 14h20v1h-20z" />
+        <path d="m2 9h20v1h-20z" />
+        <path d="m5 4 2.5-1-.5 1h10l-.5-1 2.5 1 .5 1h-15z" />
+        <path d="m4 19h16l-.5 1-3 1 .5-1h-10l.5 1-3-1z" />
+      </g>
+      {!isDecorative && <title>site icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Video.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Renders the Video icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Video component
+ * @returns {JSX.Element} - The Video component
+ * @example
+ * <Video />
+ * @example
+ * <Video height={24} width={24} />
+ * @example
+ * <Video className="custom-class" />
+ */
+export default function Video({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect fill="#e0d9ef" height="15" rx="1.5" stroke="#ac98d5" width="21" x="1.5" y="4.5" />
+      <path
+        d="m9.5 15.2516v-6.50318c0-.38671.42019-.62704.7535-.43097l5.5277 3.25155c.3287.1934.3287.6686 0 .862l-5.5277 3.2516c-.33331.196-.7535-.0443-.7535-.431z"
+        fill="#ac98d5"
+        stroke="#6b47b4"
+        strokeLinecap="round"
+      />
+      {!isDecorative && <title>video icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/Word.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+/**
+ * Renders the Word icon
+ * @param {React.SVGProps<SVGSVGElement>} props - The props for the Word component
+ * @returns {JSX.Element} - The Word component
+ * @example
+ * <Word />
+ * @example
+ * <Word isDecorative={false} />
+ * @example
+ * <Word height={24} width={24} />
+ * @example
+ * <Word className="custom-class" />
+ */
+export default function Word({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m15.9393 3.23223-.3515.35154.3515-.35154c-.4688-.46884-1.1047-.73223-1.7677-.73223h-8.1716c-.82843 0-1.5.67157-1.5 1.5v16c0 .8284.67157 1.5 1.5 1.5h12c.8284 0 1.5-.6716 1.5-1.5v-12.17157c0-.66304-.2634-1.29893-.7322-1.76777z"
+        fill="#e7e7e7"
+        stroke="#bcbcbc"
+      />
+      <path d="m14.5 3v3.5c0 .55228.4477 1 1 1h3.5" stroke="#bcbcbc" />
+      <rect fill="#0774d2" height="12" rx="2" width="12" y="8" />
+      <path d="m2.5 11.5 1.5 5 2-5 2 5 1.5-5" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" />
+      {!isDecorative && <title>word icon</title>}
+    </svg>
+  );
+}

package/src/Icons/MatrixResources/index.tsx

@@ -0,0 +1,12 @@
+// Export all the icons from the MatrixResources folder
+export { default as Audio } from './Audio';
+export { default as Excel } from './Excel';
+export { default as Folder } from './Folder';
+export { default as GenericFile } from './GenericFile';
+export { default as Image } from './Image';
+export { default as Page } from './Page';
+export { default as Pdf } from './Pdf';
+export { default as Powerpoint } from './Powerpoint';
+export { default as Site } from './Site';
+export { default as Video } from './Video';
+export { default as Word } from './Word';

package/src/Modal/Modal.spec.tsx

@@ -0,0 +1,244 @@
+import React from 'react';
+import { screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ModalTrigger from './ModalTrigger';
+
+describe('Modal', () => {
+  it('Modal is closed by default', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testingid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+    expect(screen.queryByTestId('modal')).toBeFalsy();
+  });
+
+  it('Modal opens when triggered', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+  });
+
+  it('Clicking outside the modal closes it', async () => {
+    render(
+      <div data-testid="outside">
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.click(screen.getByTestId('outside'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('ESC closes modal', async () => {
+    render(
+      <div data-testid="outside">
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.type(screen.getByTestId('modal'), '{escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('Invoking onClose function closes modal', async () => {
+    render(
+      <div>
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.click(screen.getByTestId('closeButton'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeFalsy();
+    });
+  });
+
+  it('Focus is trapped within modal', async () => {
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div {...titleProps}>Testing</div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+    });
+
+    user.type(screen.getByTestId('modal'), '{tab}');
+    user.type(screen.getByTestId('modal'), '{tab}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('closeButton')).toHaveFocus();
+    });
+  });
+
+  it('Focus should start on the dialog', async () => {
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => (
+            <div data-testid="modal">
+              <div data-testid="title" {...titleProps}>
+                Testing
+              </div>
+              <button data-testid="closeButton" type="button" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          )}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+      expect(screen.queryByRole('dialog')).toHaveFocus();
+    });
+  });
+
+  it('Title props provides id for dialog link', async () => {
+    let titleId: string | undefined = '';
+    render(
+      <div>
+        <button />
+        <ModalTrigger label={'Open testing modal'} showLabel>
+          {(onClose, titleProps) => {
+            titleId = titleProps.id;
+
+            return (
+              <div data-testid="modal">
+                <div data-testid="title" {...titleProps}>
+                  Testing
+                </div>
+                <button data-testid="closeButton" type="button" onClick={onClose}>
+                  Close
+                </button>
+              </div>
+            );
+          }}
+        </ModalTrigger>
+        <button />
+        <div style={{ height: '150vh' }} />
+      </div>,
+    );
+
+    const user = userEvent.setup();
+    user.click(screen.getByText('Open testing modal'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal')).toBeTruthy();
+      expect(screen.queryByTestId('title')).toHaveAttribute('id'); // Title was provided an id by 'titleProps'
+      expect(screen.queryByRole('dialog')).toHaveAttribute('aria-labelledby', titleId); // 'titleProps' id is added to the dialog label
+    });
+  });
+});

package/src/Modal/Modal.tsx

@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+
+import { Overlay, useModalOverlay, useDialog } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function ModalContent({
+  children,
+  ...props
+}: {
+  children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div
+      {...dialogProps}
+      ref={ref}
+      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg"
+    >
+      {children(titleProps)}
+    </div>
+  );
+}
+
+export type ModalProps = {
+  isDismissable?: boolean;
+  state: OverlayTriggerState;
+  overlayProps: DOMAttributes<FocusableElement>;
+  children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement; // Returns the title props from the 'ModalContent'
+};
+
+function Modal({ isDismissable, state, overlayProps, children, ...props }: ModalProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { modalProps, underlayProps } = useModalOverlay({ isDismissable, ...props }, state, ref);
+
+  return (
+    <Overlay>
+      <div className="squiz-rb-scope">
+        <div
+          {...underlayProps}
+          className="h-full z-[9999] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25"
+        >
+          <div {...modalProps} ref={ref} className="h-full flex items-center justify-center">
+            <ModalContent {...overlayProps}>{(titleProps) => children(titleProps)}</ModalContent>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+export default Modal;

package/src/Modal/ModalContainer.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import ModalTrigger from './ModalTrigger';
+
+export default {
+  title: 'Modal',
+  component: ModalTrigger,
+} as Meta<typeof ModalTrigger>;
+
+const Template: StoryFn<typeof ModalTrigger> = ({ label }) => {
+  return (
+    <>
+      <ModalTrigger label={label} showLabel>
+        {(onClose, titleProps) => (
+          <div>
+            <div {...titleProps}>Testing</div>
+            <button type="button" onClick={onClose}>
+              Close
+            </button>
+          </div>
+        )}
+      </ModalTrigger>
+      <div style={{ height: '150vh' }} />
+    </>
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  label: 'Resource Browser Modal',
+};