Replace modal component in `prompts` with shared `ConfirmModal`

src/shared/prompts.js

 import { render } from 'preact';
 
-import ConfirmDialog from './components/ConfirmDialog';
+import { ConfirmModal } from '@hypothesis/frontend-shared';
 
 /**
  * Show the user a prompt asking them to confirm an action.
@@ -11,7 +11,7 @@ import ConfirmDialog from './components/ConfirmDialog';
  *    for the native `window.confirm` dialog)
  *  - The visual style of the dialog matches the Hypothesis design system
  *
- * @param {object} options - Options for the `ConfirmDialog`
+ * @param {object} options - Options for the `ConfirmModal`
  *   @prop {string} [title]
  *   @prop {string} message
  *   @prop {string} [confirmAction]
@@ -52,7 +52,7 @@ export async function confirm({
     };
 
     render(
-      <ConfirmDialog
+      <ConfirmModal
         title={title}
         message={message}
         confirmAction={confirmAction}

src/shared/test/prompts-test.js

-import { confirm, $imports } from '../prompts';
-
-function FakeConfirmDialog({
-  confirmAction,
-  message,
-  onCancel,
-  onConfirm,
-  title,
-}) {
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{message}</p>
-      <button data-testid="confirm" onClick={onConfirm}>
-        {confirmAction}
-      </button>
-      <button data-testid="cancel" onClick={onCancel}>
-        Cancel
-      </button>
-    </div>
-  );
-}
+import { confirm } from '../prompts';
 
 describe('shared/prompts', () => {
   describe('confirm', () => {
     beforeEach(() => {
+      // This will cause the custom ConfirmModal to be used instead of
+      // window.confirm
       sinon.stub(window, 'confirm').returns(false);
-
-      $imports.$mock({
-        './components/ConfirmDialog': FakeConfirmDialog,
-      });
     });
 
     afterEach(() => {
       window.confirm.restore();
     });
 
-    function getCustomDialog() {
-      return document.querySelector('[data-testid="confirm-container"]');
+    function clickClose() {
+      const closeButton = getCustomDialog().querySelector(
+        '[aria-label="Close"]'
+      );
+      closeButton.click();
+    }
+
+    function clickCancel() {
+      const cancelButton = getCustomDialog().querySelector(
+        '[data-testid="cancel-button"]'
+      );
+      cancelButton.click();
     }
 
     function clickConfirm() {
       const confirmButton = getCustomDialog().querySelector(
-        '[data-testid="confirm"]'
+        '[data-testid="confirm-button"]'
       );
       confirmButton.click();
     }
 
-    function clickCancel() {
-      const cancelButton = getCustomDialog().querySelector(
-        '[data-testid="cancel"]'
-      );
-      cancelButton.click();
+    function getCustomDialog() {
+      return document.querySelector('[data-testid="confirm-container"]');
     }
 
     it('uses `window.confirm` if available', async () => {
@@ -68,17 +52,11 @@ describe('shared/prompts', () => {
       const dialog = getCustomDialog();
 
       assert.ok(dialog);
-      assert.equal(dialog.querySelector('h1').textContent, 'Confirm action?');
-      assert.equal(dialog.querySelector('p').textContent, 'Do the thing?');
-      assert.equal(
-        dialog.querySelector('[data-testid=confirm]').textContent,
-        'Yeah!'
-      );
 
-      clickConfirm();
-      await result;
+      clickClose();
 
       assert.notOk(getCustomDialog());
+      assert.isFalse(await result);
     });
 
     it('returns true if "Confirm" button is clicked', async () => {