@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts

@@ -0,0 +1,137 @@
+import { ExtensionTag, NodeExtensionSpec, ApplySchemaAttributes } from '@remirror/core';
+import { NodeName } from '../Extensions';
+import CollapseBox from '../../ui/CollapseBox/CollapseBox';
+import { UnsupportedNodeExtension } from './UnsupportedNodeExtension';
+import { renderWithEditor } from '../../../tests';
+
+describe('UnsupportedNodeExtension', () => {
+  it('should have the correct extension name', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.name).toBe(NodeName.Unsupported);
+  });
+
+  it('should use the CollapseBox component as the ReactComponent', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.ReactComponent).toBe(CollapseBox);
+  });
+
+  it('should create the correct tags', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.createTags()).toEqual([ExtensionTag.InlineNode]);
+  });
+
+  it('should create the correct node spec', () => {
+    const extension = new UnsupportedNodeExtension();
+    const extra: ApplySchemaAttributes = {
+      defaults: () => ({}),
+      parse: () => ({}),
+      dom: () => ({}),
+    };
+
+    const override: NodeExtensionSpec = {
+      selectable: true,
+    };
+
+    const nodeSpec = extension.createNodeSpec(extra, override);
+
+    expect(nodeSpec.selectable).toBe(true);
+    expect(nodeSpec.draggable).toBe(false);
+    expect(nodeSpec.atom).toBe(true);
+    expect(nodeSpec.inline).toBe(true);
+    expect(nodeSpec.attrs).toEqual({ originalNode: {}, errorMessage: {} });
+    expect(nodeSpec.parseDOM).toEqual([
+      {
+        tag: '[data-unsupported-node]',
+        getAttrs: expect.any(Function),
+      },
+    ]);
+
+    expect(nodeSpec.toDOM).toEqual(expect.any(Function));
+  });
+
+  it('should generate the correct toDOM representation', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<div data-unsupported-node="{&quot;originalNode&quot;:{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;p&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;p&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;some text before&quot;},{&quot;type&quot;:&quot;sup&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Hello&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot; and after&quot;},{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;strike&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Some text.&quot;}]}]}]},&quot;errorMessage&quot;:&quot;Unsupported node type provided: sup&quot;}" />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: {
+        nodeIndent: null,
+        nodeTextAlignment: null,
+        nodeLineHeight: null,
+        style: '',
+      },
+      content: [
+        {
+          type: 'unsupportedNode',
+          attrs: {
+            originalNode: {
+              type: 'tag',
+              tag: 'p',
+              children: [
+                {
+                  type: 'tag',
+                  tag: 'p',
+                  children: [
+                    {
+                      type: 'text',
+                      value: 'some text before',
+                    },
+                    {
+                      type: 'sup',
+                      children: [
+                        {
+                          type: 'text',
+                          value: 'Hello',
+                        },
+                      ],
+                    },
+                    {
+                      type: 'text',
+                      value: ' and after',
+                    },
+                    {
+                      type: 'tag',
+                      tag: 'strike',
+                      children: [
+                        {
+                          type: 'text',
+                          value: 'Some text.',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            errorMessage: 'Unsupported node type provided: sup',
+          },
+        },
+      ],
+    });
+  });
+
+  it('should omit extra attributes from node.attrs in toDOM representation', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'unsupportedNode',
+            content: [
+              {
+                type: 'text',
+                text: 'This is some preformatted text',
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toBe(
+      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20zm0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
+    );
+  });
+});

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx

@@ -0,0 +1,80 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  extension,
+  isElementDomNode,
+  omitExtraAttributes,
+} from '@remirror/core';
+
+import { NodeName } from '../Extensions';
+import { ComponentType } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+import CollapseBox from '../../ui/CollapseBox/CollapseBox';
+
+@extension({})
+export class UnsupportedNodeExtension extends NodeExtension {
+  get name() {
+    return NodeName.Unsupported as const;
+  }
+
+  ReactComponent: ComponentType<NodeViewComponentProps> = CollapseBox;
+
+  createTags() {
+    return [ExtensionTag.InlineNode];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      selectable: false,
+      draggable: false,
+      atom: true,
+      inline: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        originalNode: {},
+        errorMessage: {},
+      },
+      parseDOM: [
+        {
+          tag: `[data-unsupported-node]`,
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+            const unsupportedNodes = node.getAttribute('data-unsupported-node');
+
+            try {
+              const decodedNodes = JSON.parse(unsupportedNodes as string);
+
+              return {
+                ...extra.parse(node),
+                originalNode: decodedNodes?.originalNode,
+                errorMessage: decodedNodes?.errorMessage,
+              };
+            } catch (error) {
+              console.error('Failed to parse Remirror nodes from data-unsupported-node', error);
+              return false;
+            }
+          },
+        },
+      ],
+      toDOM: (node: ProsemirrorNode) => {
+        const { originalNode, errorMessage, ...rest } = omitExtraAttributes(node.attrs, extra);
+
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          originalNode,
+          errorMessage,
+          'data-unsupported-node': JSON.stringify({ originalNode, errorMessage }),
+        };
+        return ['div', attrs];
+      },
+    };
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useExtensionNames';
+export * from './useExpandedSelection';

package/src/hooks/useExpandedSelection.ts

@@ -0,0 +1,44 @@
+import { Selection } from '@remirror/core';
+import { GetMarkRange, getMarkRanges, getTextSelection, Mark, MarkType } from 'remirror';
+import { useEditorState } from '@remirror/react';
+
+export type ExpandedSelection = {
+  selection: Selection;
+  marks: Mark[];
+};
+
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+export const useExpandedSelection = (markTypes: (MarkType | string)[]): ExpandedSelection => {
+  const { doc, selection } = useEditorState();
+  const ranges: GetMarkRange[] = [];
+
+  markTypes.forEach((markType) => {
+    ranges.push(...getMarkRanges(selection, markType));
+  });
+
+  if (ranges.length === 0) {
+    return { selection, marks: [] };
+  }
+
+  // work out the start position of the first link and end position of the last link in the selection.
+  const from = Math.min(selection.from, ...ranges.map((range) => range.from));
+  const to = Math.max(selection.to, ...ranges.map((range) => range.to));
+  const marks = ranges.map((range) => range.mark);
+
+  return { selection: getTextSelection({ from, to }, doc), marks };
+};

package/src/hooks/useExtensionNames.ts

@@ -0,0 +1,15 @@
+import { useRemirrorContext } from '@remirror/react';
+import { useMemo } from 'react';
+
+export const useExtensionNames = () => {
+  const { manager } = useRemirrorContext();
+  return useMemo(() => {
+    const extensionNames: Record<string, true> = {};
+
+    manager.extensions.forEach((extension) => {
+      extensionNames[extension.name] = true;
+    });
+
+    return extensionNames;
+  }, [manager]);
+};

package/src/hooks/useFocus.ts

@@ -0,0 +1,61 @@
+import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, createRef } from 'react';
+
+const useFocus = (
+  initialState: boolean,
+): {
+  handleFocus: (event: FocusEvent) => void;
+  handleBlur: FocusEventHandler<HTMLDivElement>;
+  isVisible: boolean;
+  wrapperRef: RefObject<HTMLDivElement>;
+} => {
+  const wrapperRef = createRef<HTMLDivElement>();
+  const [isVisible, setIsVisible] = useState(initialState);
+
+  const handleFocus = useCallback(
+    (event: FocusEvent) => {
+      // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+      // without triggering a focus, such as action menus.
+      if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
+        setIsVisible(true);
+      }
+    },
+    [wrapperRef],
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+      // The tree deviates when rendering portals (eg. for modals).
+      //
+      // Only hide the toolbar if:
+      // 1. We are blurring a node in the editor **DOM** tree.
+      // 2. We are focusing on something that is not in the editor DOM tree
+      //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+      //
+      // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+      // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+      // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+      // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+      //
+      // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+      // identifiable however without reaching into React internals.
+      //
+      // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+      // (and therefore still in our React tree resulting in the element still effectively being focused).
+      const isBlurringEditor = wrapperRef.current?.contains(event.target);
+      const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
+
+      // Detect if the blur event happens when the related/clicked target is the floating popover
+      const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
+
+      if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+        setIsVisible(false);
+      }
+    },
+    [wrapperRef],
+  );
+
+  return { handleFocus, handleBlur, isVisible, wrapperRef };
+};
+
+export default useFocus;

package/src/index.scss

@@ -0,0 +1,24 @@
+/* Tailwind base styles, but scoped to the editor */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* So we can use icons inside of FTE content */
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded';
+
+/* Global */
+@import './ui/typography';
+@import './ui/forms';
+
+/* Components */
+@import './Editor/editor';
+@import './EditorToolbar/toolbar';
+@import './EditorToolbar/floating-toolbar';
+
+@import './ui/Button/button';
+@import './ui/ToolbarDropdown/toolbar-dropdown';
+@import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
+@import './ui/Fields/Checkbox/checkbox';
+@import './ui/CollapseBox/collapseBox';
+
+@import './ui/Modal/modal';

package/src/index.ts

@@ -0,0 +1,9 @@
+import Editor from './Editor/Editor';
+import { EditorContext } from './Editor/EditorContext';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+import { ResolveNodeType, ResolveNodeToUrl } from './types';
+
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };
+export type { ResolveNodeType, ResolveNodeToUrl };

package/src/types.ts

@@ -0,0 +1,10 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Array<infer U>
+    ? Array<DeepPartial<U>>
+    : T[P] extends ReadonlyArray<infer U>
+    ? ReadonlyArray<DeepPartial<U>>
+    : DeepPartial<T[P]>;
+};
+
+export type ResolveNodeType = { [attr: string]: any };
+export type ResolveNodeToUrl = (node: ResolveNodeType) => Promise<string>;

package/src/ui/Button/Button.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Button from './Button';
+import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
+
+describe('Button', () => {
+  const mockOnClick = jest.fn();
+
+  const ButtonComponent = () => {
+    return (
+      <Button
+        handleOnClick={mockOnClick}
+        isDisabled
+        isActive
+        label="Am a button"
+        text="Hello"
+        icon={<AccessTimeRoundedIcon />}
+      />
+    );
+  };
+
+  it('Renders the label, text and icon', () => {
+    render(<ButtonComponent />);
+    const label = screen.getByLabelText('Am a button');
+    expect(label).toBeInTheDocument();
+    const text = screen.getByText('Hello');
+    expect(text).toBeInTheDocument();
+    const icon = screen.getByTestId('AccessTimeRoundedIcon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Renders the button in a disabled state if set to be disabled', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toBeDisabled();
+  });
+
+  it('Adds the active class is set to be active', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toHaveClass('squiz-fte-btn--is-active');
+  });
+});

package/src/ui/Button/Button.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+type ButtonProps = {
+  handleOnClick: () => void;
+  isDisabled?: boolean;
+  isActive: boolean;
+  label: string;
+  text?: string;
+  icon?: ReactElement;
+  className?: string;
+};
+
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={clsx(
+        'squiz-fte-btn',
+        isActive && 'squiz-fte-btn--is-active',
+        icon && ' squiz-fte-btn--is-icon',
+        className,
+      )}
+    >
+      {text && <span>{text}</span>}
+      {icon && icon}
+    </button>
+  );
+};
+
+export default Button;

package/src/ui/Button/_button.scss

@@ -0,0 +1,37 @@
+button.squiz-fte-btn {
+  @apply font-bold rounded ease-linear transition-all bg-white text-gray-600 duration-150;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  padding: 6px 12px;
+
+  &--is-icon {
+    padding: 6px;
+  }
+
+  ~ .squiz-fte-btn {
+    margin-left: 2px;
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    @apply opacity-50;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &--is-active,
+  &:active {
+    @apply text-blue-300 bg-blue-100;
+  }
+}

package/src/ui/CollapseBox/CollapseBox.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NodeViewComponentProps } from '@remirror/react';
+import CollapseBox, { CollapseBoxProps } from './CollapseBox';
+
+jest.mock('@remirror/react');
+
+describe('CollapseBox', () => {
+  const createProps = (): CollapseBoxProps => ({
+    node: jest.fn() as unknown as NodeViewComponentProps['node'],
+  });
+
+  const props = createProps();
+
+  it('should display the label correctly', () => {
+    const label =
+      'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+    const { getByText } = render(<CollapseBox {...props} />);
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it('should display the warning icon correctly', () => {
+    const { getByTestId } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('MotionPhotosOffOutlinedIcon')).toBeInTheDocument();
+  });
+
+  it('should display the collapse icons correctly', () => {
+    const { getByTestId, getByRole } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('UnfoldLessOutlinedIcon')).toBeInTheDocument();
+
+    fireEvent.click(getByRole('button'));
+
+    expect(getByTestId('UnfoldMoreOutlinedIcon')).toBeInTheDocument();
+  });
+
+  it('should hide the content when isVisible is false', () => {
+    const { getByTestId, getByRole } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('content')).not.toBeVisible();
+
+    fireEvent.click(getByRole('button'));
+
+    expect(getByTestId('content')).toBeVisible();
+  });
+});

package/src/ui/CollapseBox/CollapseBox.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+import MotionPhotosOffOutlinedIcon from '@mui/icons-material/MotionPhotosOffOutlined';
+import UnfoldLessOutlinedIcon from '@mui/icons-material/UnfoldLessOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
+
+export interface CollapseBoxProps {
+  node: NodeViewComponentProps['node'];
+}
+
+const CollapseBox: React.FC<CollapseBoxProps> = ({ node }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const label =
+    'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+
+  const errorMessage = node?.attrs?.errorMessage;
+  const errorNode = JSON.stringify(node?.attrs?.originalNode, null, 3);
+
+  return (
+    <div className="collapse-box" suppressContentEditableWarning={true} contentEditable={false}>
+      <button className="collapse-box__header" onClick={() => setIsVisible(!isVisible)} type={'button'}>
+        <MotionPhotosOffOutlinedIcon className="collapse-box__icon--warning" />
+        <div className="collapse-box__label">{label}</div>
+        {isVisible ? <UnfoldLessOutlinedIcon /> : <UnfoldMoreOutlinedIcon />}
+      </button>
+      <div className="collapse-box__content" hidden={isVisible} data-testid="content">
+        {errorMessage}
+        <br />
+        {errorNode}
+      </div>
+    </div>
+  );
+};
+
+export default CollapseBox;

package/src/ui/CollapseBox/_collapseBox.scss

@@ -0,0 +1,23 @@
+.collapse-box {
+  @apply text-gray-800 p-2 bg-gray-100 rounded-lg;
+
+  &__header {
+    @apply flex items-center w-full;
+  }
+
+  &__label {
+    @apply ml-2 mr-auto text-left;
+  }
+
+  &__icon {
+    @apply text-gray-600;
+
+    &--warning {
+      @apply text-red-300;
+    }
+  }
+
+  &__content {
+    @apply bg-white mt-2 p-2 rounded-lg;
+  }
+}

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();
+  });
+});