From 91ccbf7c84bca091f3ff1ddf4c5d99fe9d9849a6 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 7 Feb 2025 07:53:00 +0000
Subject: [PATCH] feat: migrate to exported modules

---
 docs/assets/javascript/application.mjs        |  2 +-
 src/moj/all.js                                | 89 +++++++++++++----
 src/moj/all.spec.js                           | 14 +--
 src/moj/components/add-another/add-another.js | 22 +++--
 .../add-another/add-another.spec.js           |  4 +-
 src/moj/components/button-menu/button-menu.js | 32 ++++---
 .../button-menu/button-menu.spec.js           | 18 ++--
 src/moj/components/date-picker/date-picker.js | 96 +++++++++----------
 .../date-picker/date-picker.spec.js           | 64 ++++++-------
 .../filter-toggle-button.js                   | 28 +++---
 .../filter-toggle-button.spec.js              | 28 +++---
 .../form-validator/form-validator.js          | 42 ++++----
 .../multi-file-upload/multi-file-upload.js    | 52 +++++-----
 .../multi-file-upload.spec.js                 |  5 +-
 .../components/multi-select/multi-select.js   | 14 +--
 .../multi-select/multi-select.spec.js         |  4 +-
 .../password-reveal/password-reveal.js        |  8 +-
 .../password-reveal/password-reveal.spec.js   |  4 +-
 .../rich-text-editor/rich-text-editor.js      | 26 ++---
 .../components/search-toggle/search-toggle.js | 12 ++-
 .../search-toggle/search-toggle.spec.js       |  4 +-
 .../sortable-table/sortable-table.js          | 38 +++-----
 .../sortable-table/sortable-table.spec.js     | 22 ++---
 src/moj/helpers.js                            | 21 ++--
 src/moj/version.js                            |  4 +-
 25 files changed, 365 insertions(+), 288 deletions(-)

diff --git a/docs/assets/javascript/application.mjs b/docs/assets/javascript/application.mjs
index e1694764..9e1dbda3 100644
--- a/docs/assets/javascript/application.mjs
+++ b/docs/assets/javascript/application.mjs
@@ -2,7 +2,7 @@
 
 import * as GOVUKFrontend from 'govuk-frontend'
 
-import MOJFrontend from '../../../package/moj/all.js'
+import * as MOJFrontend from '../../../src/moj/all.js'
 
 import CollapsibleNav from './collapsible-nav.mjs'
 import Cookies from './cookies.mjs'
diff --git a/src/moj/all.js b/src/moj/all.js
index fd95bd2b..24d64429 100644
--- a/src/moj/all.js
+++ b/src/moj/all.js
@@ -1,6 +1,29 @@
 /* eslint-disable no-new */
 
-MOJFrontend.initAll = function (options) {
+const { AddAnother } = require('./components/add-another/add-another.js')
+const { ButtonMenu } = require('./components/button-menu/button-menu.js')
+const { DatePicker } = require('./components/date-picker/date-picker.js')
+const {
+  FilterToggleButton
+} = require('./components/filter-toggle-button/filter-toggle-button.js')
+const {
+  MultiFileUpload
+} = require('./components/multi-file-upload/multi-file-upload.js')
+const { MultiSelect } = require('./components/multi-select/multi-select.js')
+const {
+  PasswordReveal
+} = require('./components/password-reveal/password-reveal.js')
+const {
+  RichTextEditor
+} = require('./components/rich-text-editor/rich-text-editor.js')
+const { SearchToggle } = require('./components/search-toggle/search-toggle.js')
+const {
+  SortableTable
+} = require('./components/sortable-table/sortable-table.js')
+const { nodeListForEach } = require('./helpers.js')
+const { version } = require('./version.js')
+
+function initAll(options) {
   // Set the options to an empty object by default if no options are passed.
   options = typeof options !== 'undefined' ? options : {}
 
@@ -9,15 +32,17 @@ MOJFrontend.initAll = function (options) {
   const scope = typeof options.scope !== 'undefined' ? options.scope : document
 
   const $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]')
-  MOJFrontend.nodeListForEach($addAnothers, function ($addAnother) {
-    new MOJFrontend.AddAnother($addAnother)
+
+  nodeListForEach($addAnothers, function ($addAnother) {
+    new AddAnother($addAnother)
   })
 
   const $multiSelects = scope.querySelectorAll(
     '[data-module="moj-multi-select"]'
   )
-  MOJFrontend.nodeListForEach($multiSelects, function ($multiSelect) {
-    new MOJFrontend.MultiSelect({
+
+  nodeListForEach($multiSelects, function ($multiSelect) {
+    new MultiSelect({
       container: $multiSelect.querySelector(
         $multiSelect.getAttribute('data-multi-select-checkbox')
       ),
@@ -31,14 +56,16 @@ MOJFrontend.initAll = function (options) {
   const $passwordReveals = scope.querySelectorAll(
     '[data-module="moj-password-reveal"]'
   )
-  MOJFrontend.nodeListForEach($passwordReveals, function ($passwordReveal) {
-    new MOJFrontend.PasswordReveal($passwordReveal)
+
+  nodeListForEach($passwordReveals, function ($passwordReveal) {
+    new PasswordReveal($passwordReveal)
   })
 
   const $richTextEditors = scope.querySelectorAll(
     '[data-module="moj-rich-text-editor"]'
   )
-  MOJFrontend.nodeListForEach($richTextEditors, function ($richTextEditor) {
+
+  nodeListForEach($richTextEditors, function ($richTextEditor) {
     const options = {
       textarea: $($richTextEditor)
     }
@@ -46,20 +73,26 @@ MOJFrontend.initAll = function (options) {
     const toolbarAttr = $richTextEditor.getAttribute(
       'data-moj-rich-text-editor-toolbar'
     )
+
     if (toolbarAttr) {
       const toolbar = toolbarAttr.split(',')
+
       options.toolbar = {}
-      for (const item in toolbar) options.toolbar[toolbar[item]] = true
+
+      for (const item in toolbar) {
+        options.toolbar[toolbar[item]] = true
+      }
     }
 
-    new MOJFrontend.RichTextEditor(options)
+    new RichTextEditor(options)
   })
 
   const $searchToggles = scope.querySelectorAll(
     '[data-module="moj-search-toggle"]'
   )
-  MOJFrontend.nodeListForEach($searchToggles, function ($searchToggle) {
-    new MOJFrontend.SearchToggle({
+
+  nodeListForEach($searchToggles, function ($searchToggle) {
+    new SearchToggle({
       toggleButton: {
         container: $($searchToggle.querySelector('.moj-search-toggle__toggle')),
         text: $searchToggle.getAttribute('data-moj-search-toggle-text')
@@ -73,19 +106,39 @@ MOJFrontend.initAll = function (options) {
   const $sortableTables = scope.querySelectorAll(
     '[data-module="moj-sortable-table"]'
   )
-  MOJFrontend.nodeListForEach($sortableTables, function ($table) {
-    new MOJFrontend.SortableTable({
+
+  nodeListForEach($sortableTables, function ($table) {
+    new SortableTable({
       table: $table
     })
   })
 
   const $datepickers = scope.querySelectorAll('[data-module="moj-date-picker"]')
-  MOJFrontend.nodeListForEach($datepickers, function ($datepicker) {
-    new MOJFrontend.DatePicker($datepicker, {}).init()
+
+  nodeListForEach($datepickers, function ($datepicker) {
+    new DatePicker($datepicker, {}).init()
   })
 
   const $buttonMenus = scope.querySelectorAll('[data-module="moj-button-menu"]')
-  MOJFrontend.nodeListForEach($buttonMenus, function ($buttonmenu) {
-    new MOJFrontend.ButtonMenu($buttonmenu, {}).init()
+
+  nodeListForEach($buttonMenus, function ($buttonmenu) {
+    new ButtonMenu($buttonmenu, {}).init()
   })
 }
+
+module.exports = {
+  initAll,
+  version,
+
+  // Components
+  AddAnother,
+  ButtonMenu,
+  DatePicker,
+  FilterToggleButton,
+  MultiFileUpload,
+  MultiSelect,
+  PasswordReveal,
+  RichTextEditor,
+  SearchToggle,
+  SortableTable
+}
diff --git a/src/moj/all.spec.js b/src/moj/all.spec.js
index b0790010..bc049e81 100644
--- a/src/moj/all.spec.js
+++ b/src/moj/all.spec.js
@@ -2,22 +2,24 @@
 
 const { getByTestId } = require('@testing-library/dom')
 
-require('./helpers')
-require('./all.js')
+const { initAll } = require('./all.js')
+const {
+  PasswordReveal
+} = require('./components/password-reveal/password-reveal.js')
+
+jest.mock('./components/password-reveal/password-reveal.js')
 
 describe('initAll', () => {
   test('initialises container', () => {
-    MOJFrontend.PasswordReveal = jest.fn()
-
     const container = document.createElement('div')
 
     container.innerHTML = `
       <input data-module="moj-password-reveal" data-testid="password-reveal" type="password" />
     `
 
-    MOJFrontend.initAll({ scope: container })
+    initAll({ scope: container })
 
-    expect(MOJFrontend.PasswordReveal).toHaveBeenCalledWith(
+    expect(PasswordReveal).toHaveBeenCalledWith(
       getByTestId(container, 'password-reveal')
     )
   })
diff --git a/src/moj/components/add-another/add-another.js b/src/moj/components/add-another/add-another.js
index 7bae56ce..5ac2ee9a 100755
--- a/src/moj/components/add-another/add-another.js
+++ b/src/moj/components/add-another/add-another.js
@@ -1,4 +1,4 @@
-MOJFrontend.AddAnother = function (container) {
+function AddAnother(container) {
   this.container = $(container)
 
   if (this.container.data('moj-add-another-initialised')) {
@@ -22,7 +22,7 @@ MOJFrontend.AddAnother = function (container) {
     .prop('type', 'button')
 }
 
-MOJFrontend.AddAnother.prototype.onAddButtonClick = function (e) {
+AddAnother.prototype.onAddButtonClick = function (e) {
   const item = this.getNewItem()
   this.updateAttributes(this.getItems().length, item)
   this.resetItem(item)
@@ -34,15 +34,15 @@ MOJFrontend.AddAnother.prototype.onAddButtonClick = function (e) {
   item.find('input, textarea, select').first().focus()
 }
 
-MOJFrontend.AddAnother.prototype.hasRemoveButton = function (item) {
+AddAnother.prototype.hasRemoveButton = function (item) {
   return item.find('.moj-add-another__remove-button').length
 }
 
-MOJFrontend.AddAnother.prototype.getItems = function () {
+AddAnother.prototype.getItems = function () {
   return this.container.find('.moj-add-another__item')
 }
 
-MOJFrontend.AddAnother.prototype.getNewItem = function () {
+AddAnother.prototype.getNewItem = function () {
   const item = this.getItems().first().clone()
   if (!this.hasRemoveButton(item)) {
     this.createRemoveButton(item)
@@ -50,7 +50,7 @@ MOJFrontend.AddAnother.prototype.getNewItem = function () {
   return item
 }
 
-MOJFrontend.AddAnother.prototype.updateAttributes = function (index, item) {
+AddAnother.prototype.updateAttributes = function (index, item) {
   item.find('[data-name]').each(function (i, el) {
     const originalId = el.id
 
@@ -69,13 +69,13 @@ MOJFrontend.AddAnother.prototype.updateAttributes = function (index, item) {
   })
 }
 
-MOJFrontend.AddAnother.prototype.createRemoveButton = function (item) {
+AddAnother.prototype.createRemoveButton = function (item) {
   item.append(
     '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
   )
 }
 
-MOJFrontend.AddAnother.prototype.resetItem = function (item) {
+AddAnother.prototype.resetItem = function (item) {
   item.find('[data-name], [data-id]').each(function (index, el) {
     if (el.type === 'checkbox' || el.type === 'radio') {
       el.checked = false
@@ -85,7 +85,7 @@ MOJFrontend.AddAnother.prototype.resetItem = function (item) {
   })
 }
 
-MOJFrontend.AddAnother.prototype.onRemoveButtonClick = function (e) {
+AddAnother.prototype.onRemoveButtonClick = function (e) {
   $(e.currentTarget).parents('.moj-add-another__item').remove()
   const items = this.getItems()
   if (items.length === 1) {
@@ -99,6 +99,8 @@ MOJFrontend.AddAnother.prototype.onRemoveButtonClick = function (e) {
   this.focusHeading()
 }
 
-MOJFrontend.AddAnother.prototype.focusHeading = function () {
+AddAnother.prototype.focusHeading = function () {
   this.container.find('.moj-add-another__heading').get(0).focus()
 }
+
+module.exports = { AddAnother }
diff --git a/src/moj/components/add-another/add-another.spec.js b/src/moj/components/add-another/add-another.spec.js
index 609c1e59..cf0f63df 100644
--- a/src/moj/components/add-another/add-another.spec.js
+++ b/src/moj/components/add-another/add-another.spec.js
@@ -7,7 +7,7 @@ const {
 } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 
-require('./add-another.js')
+const { AddAnother } = require('./add-another.js')
 
 const user = userEvent.setup()
 
@@ -41,7 +41,7 @@ describe('Add Another component', () => {
 
   beforeEach(() => {
     component = createComponent()
-    new MOJFrontend.AddAnother(component)
+    new AddAnother(component)
     addButton = getByRole(component, 'button', { name: 'Add another person' })
   })
 
diff --git a/src/moj/components/button-menu/button-menu.js b/src/moj/components/button-menu/button-menu.js
index bc71fa19..7101d1c1 100644
--- a/src/moj/components/button-menu/button-menu.js
+++ b/src/moj/components/button-menu/button-menu.js
@@ -10,7 +10,7 @@
  * @param {ButtonMenuConfig} config
  * @class
  */
-MOJFrontend.ButtonMenu = function ($module, config = {}) {
+function ButtonMenu($module, config = {}) {
   if (!$module) {
     return this
   }
@@ -38,7 +38,7 @@ MOJFrontend.ButtonMenu = function ($module, config = {}) {
   this.$module = $module
 }
 
-MOJFrontend.ButtonMenu.prototype.init = function () {
+ButtonMenu.prototype.init = function () {
   // If only one button is provided, don't initiate a menu and toggle button
   // if classes have been provided for the toggleButton, apply them to the single item
   if (this.$module.children.length === 1) {
@@ -59,7 +59,7 @@ MOJFrontend.ButtonMenu.prototype.init = function () {
   }
 }
 
-MOJFrontend.ButtonMenu.prototype.initMenu = function () {
+ButtonMenu.prototype.initMenu = function () {
   this.$menu = this.createMenu()
   this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate())
   this.setupMenuItems()
@@ -82,7 +82,7 @@ MOJFrontend.ButtonMenu.prototype.initMenu = function () {
   })
 }
 
-MOJFrontend.ButtonMenu.prototype.createMenu = function () {
+ButtonMenu.prototype.createMenu = function () {
   const $menu = document.createElement('ul')
   $menu.setAttribute('role', 'list')
   $menu.hidden = true
@@ -99,7 +99,7 @@ MOJFrontend.ButtonMenu.prototype.createMenu = function () {
   return $menu
 }
 
-MOJFrontend.ButtonMenu.prototype.setupMenuItems = function () {
+ButtonMenu.prototype.setupMenuItems = function () {
   Array.from(this.$menu.children).forEach((item) => {
     // wrap item in li tag
     const listItem = document.createElement('li')
@@ -127,7 +127,7 @@ MOJFrontend.ButtonMenu.prototype.setupMenuItems = function () {
   })
 }
 
-MOJFrontend.ButtonMenu.prototype.toggleTemplate = function () {
+ButtonMenu.prototype.toggleTemplate = function () {
   return `
     <button type="button" class="govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ''}" aria-haspopup="true" aria-expanded="false">
       <span>
@@ -142,11 +142,11 @@ MOJFrontend.ButtonMenu.prototype.toggleTemplate = function () {
 /**
  * @returns {boolean}
  */
-MOJFrontend.ButtonMenu.prototype.isOpen = function () {
+ButtonMenu.prototype.isOpen = function () {
   return this.$menuToggle.getAttribute('aria-expanded') === 'true'
 }
 
-MOJFrontend.ButtonMenu.prototype.toggleMenu = function (event) {
+ButtonMenu.prototype.toggleMenu = function (event) {
   event.preventDefault()
 
   // If menu is triggered with mouse don't move focus to first item
@@ -165,7 +165,7 @@ MOJFrontend.ButtonMenu.prototype.toggleMenu = function (event) {
  *
  * @param {number} focusIndex - The index of the item to focus
  */
-MOJFrontend.ButtonMenu.prototype.openMenu = function (focusIndex = 0) {
+ButtonMenu.prototype.openMenu = function (focusIndex = 0) {
   this.$menu.hidden = false
   this.$menuToggle.setAttribute('aria-expanded', 'true')
   if (focusIndex !== -1) {
@@ -178,7 +178,7 @@ MOJFrontend.ButtonMenu.prototype.openMenu = function (focusIndex = 0) {
  *
  * @param {boolean} moveFocus - whether to return focus to the toggle button
  */
-MOJFrontend.ButtonMenu.prototype.closeMenu = function (moveFocus = true) {
+ButtonMenu.prototype.closeMenu = function (moveFocus = true) {
   this.$menu.hidden = true
   this.$menuToggle.setAttribute('aria-expanded', 'false')
   if (moveFocus) {
@@ -191,7 +191,7 @@ MOJFrontend.ButtonMenu.prototype.closeMenu = function (moveFocus = true) {
  *
  * @param {number} index - the index of the item to focus
  */
-MOJFrontend.ButtonMenu.prototype.focusItem = function (index) {
+ButtonMenu.prototype.focusItem = function (index) {
   if (index >= this.items.length) index = 0
   if (index < 0) index = this.items.length - 1
 
@@ -201,14 +201,14 @@ MOJFrontend.ButtonMenu.prototype.focusItem = function (index) {
   }
 }
 
-MOJFrontend.ButtonMenu.prototype.currentFocusIndex = function () {
+ButtonMenu.prototype.currentFocusIndex = function () {
   const activeElement = document.activeElement
   const menuItems = Array.from(this.items)
 
   return menuItems.indexOf(activeElement)
 }
 
-MOJFrontend.ButtonMenu.prototype.handleKeyDown = function (event) {
+ButtonMenu.prototype.handleKeyDown = function (event) {
   if (event.target === this.$menuToggle) {
     switch (event.key) {
       case 'ArrowDown':
@@ -265,7 +265,7 @@ MOJFrontend.ButtonMenu.prototype.handleKeyDown = function (event) {
  * @param {DOMStringMap} dataset - HTML element dataset
  * @returns {object} Normalised dataset
  */
-MOJFrontend.ButtonMenu.prototype.parseDataset = function (schema, dataset) {
+ButtonMenu.prototype.parseDataset = function (schema, dataset) {
   const parsed = {}
 
   for (const [field, ,] of Object.entries(schema.properties)) {
@@ -288,7 +288,7 @@ MOJFrontend.ButtonMenu.prototype.parseDataset = function (schema, dataset) {
  * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
  * @returns {{ [key: string]: unknown }} A merged config object
  */
-MOJFrontend.ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
+ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
   const formattedConfigObject = {}
 
   // Loop through each of the passed objects
@@ -312,6 +312,8 @@ MOJFrontend.ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
   return formattedConfigObject
 }
 
+module.exports = { ButtonMenu }
+
 /**
  * Schema for component config
  *
diff --git a/src/moj/components/button-menu/button-menu.spec.js b/src/moj/components/button-menu/button-menu.spec.js
index 7ad109b4..4004affc 100644
--- a/src/moj/components/button-menu/button-menu.spec.js
+++ b/src/moj/components/button-menu/button-menu.spec.js
@@ -2,7 +2,7 @@ const { queryByRole, screen } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 const { configureAxe } = require('jest-axe')
 
-require('./button-menu.js')
+const { ButtonMenu } = require('./button-menu.js')
 
 const user = userEvent.setup()
 const axe = configureAxe({
@@ -50,7 +50,7 @@ describe('Button menu with defaults', () => {
 
   beforeEach(() => {
     component = createComponent()
-    new MOJFrontend.ButtonMenu(component).init()
+    new ButtonMenu(component).init()
 
     toggleButton = queryByRole(component, 'button', { hidden: false })
     menu = screen.queryByRole('list', { hidden: true })
@@ -244,14 +244,14 @@ describe('Button menu javascript API', () => {
 
   test('setting toggle button text', () => {
     const label = 'click me'
-    new MOJFrontend.ButtonMenu(component, { buttonText: label }).init()
+    new ButtonMenu(component, { buttonText: label }).init()
     const toggleButton = queryByRole(component, 'button', { name: label })
 
     expect(toggleButton).toBeInTheDocument()
   })
 
   test('setting menu alignment', () => {
-    new MOJFrontend.ButtonMenu(component, { alignMenu: 'right' }).init()
+    new ButtonMenu(component, { alignMenu: 'right' }).init()
     const menu = screen.queryByRole('list', { hidden: true })
 
     expect(menu).toHaveClass('moj-button-menu__wrapper--right')
@@ -261,7 +261,7 @@ describe('Button menu javascript API', () => {
     const defaultClassNames = 'govuk-button moj-button-menu__toggle-button'
     const classNames = 'classOne classTwo'
 
-    new MOJFrontend.ButtonMenu(component, { buttonClasses: classNames }).init()
+    new ButtonMenu(component, { buttonClasses: classNames }).init()
     const toggleButton = queryByRole(component, 'button', { hidden: false })
 
     expect(toggleButton).toHaveClass(defaultClassNames)
@@ -282,7 +282,7 @@ describe('Button menu data-attributes API', () => {
     const label = 'click me'
 
     component = createComponent({ buttonText: label })
-    new MOJFrontend.ButtonMenu(component).init()
+    new ButtonMenu(component).init()
     const toggleButton = queryByRole(component, 'button', { name: label })
 
     expect(toggleButton).toBeInTheDocument()
@@ -290,7 +290,7 @@ describe('Button menu data-attributes API', () => {
 
   test('setting menu alignment', () => {
     component = createComponent({ alignMenu: 'right' })
-    new MOJFrontend.ButtonMenu(component).init()
+    new ButtonMenu(component).init()
     const menu = screen.queryByRole('list', { hidden: true })
 
     expect(menu).toHaveClass('moj-button-menu__wrapper--right')
@@ -301,7 +301,7 @@ describe('Button menu data-attributes API', () => {
     const classNames = 'classOne classTwo'
 
     component = createComponent({ buttonClasses: classNames })
-    new MOJFrontend.ButtonMenu(component).init()
+    new ButtonMenu(component).init()
     const toggleButton = queryByRole(component, 'button', { hidden: false })
 
     expect(toggleButton).toHaveClass(defaultClassNames)
@@ -322,7 +322,7 @@ describe('menu button with a single item', () => {
       </div>`
 
     component = createComponent({}, html)
-    new MOJFrontend.ButtonMenu(component).init()
+    new ButtonMenu(component).init()
 
     toggleButton = queryByRole(component, 'button', { name: 'Actions' })
     menu = screen.queryByRole('list', { hidden: true })
diff --git a/src/moj/components/date-picker/date-picker.js b/src/moj/components/date-picker/date-picker.js
index 90f591df..cc159d01 100644
--- a/src/moj/components/date-picker/date-picker.js
+++ b/src/moj/components/date-picker/date-picker.js
@@ -1,7 +1,7 @@
 /**
- * Datepicker config
+ * Daste picker config
  *
- * @typedef {object} DatepickerConfig
+ * @typedef {object} DatePickerConfig
  * @property {string} [excludedDates] - Dates that cannot be selected
  * @property {string} [excludedDays] - Days that cannot be selected
  * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
@@ -12,10 +12,10 @@
 
 /**
  * @param {HTMLElement} $module - HTML element
- * @param {DatepickerConfig} config - config object
+ * @param {DatePickerConfig} config - config object
  * @class
  */
-function Datepicker($module, config = {}) {
+function DatePicker($module, config = {}) {
   if (!$module) {
     return this
   }
@@ -83,7 +83,7 @@ function Datepicker($module, config = {}) {
   this.$input = $module.querySelector('.moj-js-datepicker-input')
 }
 
-Datepicker.prototype.init = function () {
+DatePicker.prototype.init = function () {
   // Check that required elements are present
   if (!this.$input) {
     return
@@ -97,7 +97,7 @@ Datepicker.prototype.init = function () {
   this.$module.setAttribute('data-initialized', 'true')
 }
 
-Datepicker.prototype.initControls = function () {
+DatePicker.prototype.initControls = function () {
   this.id = `datepicker-${this.$input.id}`
 
   this.$dialog = this.createDialog()
@@ -191,7 +191,7 @@ Datepicker.prototype.initControls = function () {
   this.updateCalendar()
 }
 
-Datepicker.prototype.createDialog = function () {
+DatePicker.prototype.createDialog = function () {
   const titleId = `datepicker-title-${this.$input.id}`
   const $dialog = document.createElement('div')
 
@@ -206,7 +206,7 @@ Datepicker.prototype.createDialog = function () {
   return $dialog
 }
 
-Datepicker.prototype.createCalendar = function () {
+DatePicker.prototype.createCalendar = function () {
   const $tbody = this.$dialog.querySelector('tbody')
   let dayCount = 0
   for (let i = 0; i < 6; i++) {
@@ -229,7 +229,7 @@ Datepicker.prototype.createCalendar = function () {
   }
 }
 
-Datepicker.prototype.toggleTemplate = function () {
+DatePicker.prototype.toggleTemplate = function () {
   return `<button class="moj-datepicker__toggle moj-js-datepicker-toggle" type="button" aria-haspopup="dialog" aria-controls="${this.id}" aria-expanded="false">
             <span class="govuk-visually-hidden">Choose date</span>
             <svg width="32" height="24" focusable="false" class="moj-datepicker-icon" aria-hidden="true" role="img" viewBox="0 0 22 22">
@@ -251,7 +251,7 @@ Datepicker.prototype.toggleTemplate = function () {
  * @param {string} [titleId] - Id attribute for dialog title
  * @returns {string}
  */
-Datepicker.prototype.dialogTemplate = function (titleId) {
+DatePicker.prototype.dialogTemplate = function (titleId) {
   return `<div class="moj-datepicker__dialog-header">
             <div class="moj-datepicker__dialog-navbuttons">
               <button class="moj-datepicker__button moj-js-datepicker-prev-year">
@@ -304,7 +304,7 @@ Datepicker.prototype.dialogTemplate = function (titleId) {
           </div>`
 }
 
-Datepicker.prototype.createCalendarHeaders = function () {
+DatePicker.prototype.createCalendarHeaders = function () {
   this.dayLabels.forEach((day) => {
     const html = `<th scope="col"><span aria-hidden="true">${day.substring(0, 3)}</span><span class="govuk-visually-hidden">${day}</span></th>`
     const $headerRow = this.$dialog.querySelector('thead > tr')
@@ -319,7 +319,7 @@ Datepicker.prototype.createCalendarHeaders = function () {
  * @param {number} length - The length in characters of the output
  * @returns {string}
  */
-Datepicker.prototype.leadingZeros = function (value, length = 2) {
+DatePicker.prototype.leadingZeros = function (value, length = 2) {
   let ret = value.toString()
 
   while (ret.length < length) {
@@ -329,7 +329,7 @@ Datepicker.prototype.leadingZeros = function (value, length = 2) {
   return ret
 }
 
-Datepicker.prototype.setOptions = function () {
+DatePicker.prototype.setOptions = function () {
   this.setMinAndMaxDatesOnCalendar()
   this.setExcludedDates()
   this.setExcludedDays()
@@ -337,7 +337,7 @@ Datepicker.prototype.setOptions = function () {
   this.setWeekStartDay()
 }
 
-Datepicker.prototype.setMinAndMaxDatesOnCalendar = function () {
+DatePicker.prototype.setMinAndMaxDatesOnCalendar = function () {
   if (this.config.minDate) {
     this.minDate = this.formattedDateFromString(this.config.minDate, null)
     if (this.minDate && this.currentDate < this.minDate) {
@@ -353,7 +353,7 @@ Datepicker.prototype.setMinAndMaxDatesOnCalendar = function () {
   }
 }
 
-Datepicker.prototype.setExcludedDates = function () {
+DatePicker.prototype.setExcludedDates = function () {
   if (this.config.excludedDates) {
     this.excludedDates = this.config.excludedDates
       .replace(/\s+/, ' ')
@@ -373,7 +373,7 @@ Datepicker.prototype.setExcludedDates = function () {
  * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
  * @returns {Date[]}
  */
-Datepicker.prototype.parseDateRangeString = function (datestring) {
+DatePicker.prototype.parseDateRangeString = function (datestring) {
   const dates = []
   const [startDate, endDate] = datestring
     .split('-')
@@ -391,7 +391,7 @@ Datepicker.prototype.parseDateRangeString = function (datestring) {
   return dates
 }
 
-Datepicker.prototype.setExcludedDays = function () {
+DatePicker.prototype.setExcludedDays = function () {
   if (this.config.excludedDays) {
     // lowercase and arrange dayLabels to put indexOf sunday == 0 for comparison
     // with getDay() function
@@ -409,7 +409,7 @@ Datepicker.prototype.setExcludedDays = function () {
   }
 }
 
-Datepicker.prototype.setLeadingZeros = function () {
+DatePicker.prototype.setLeadingZeros = function () {
   if (typeof this.config.leadingZeros !== 'boolean') {
     if (this.config.leadingZeros.toLowerCase() === 'true') {
       this.config.leadingZeros = true
@@ -421,7 +421,7 @@ Datepicker.prototype.setLeadingZeros = function () {
   }
 }
 
-Datepicker.prototype.setWeekStartDay = function () {
+DatePicker.prototype.setWeekStartDay = function () {
   const weekStartDayParam = this.config.weekStartDay
   if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
     this.config.weekStartDay = 'sunday'
@@ -438,7 +438,7 @@ Datepicker.prototype.setWeekStartDay = function () {
  * @param {Date} date - the date to check
  * @returns {boolean}
  */
-Datepicker.prototype.isExcludedDate = function (date) {
+DatePicker.prototype.isExcludedDate = function (date) {
   // This comparison does not work correctly - it will exclude the mindate itself
   // see: https://github.com/ministryofjustice/moj-frontend/issues/923
   if (this.minDate && this.minDate > date) {
@@ -470,7 +470,7 @@ Datepicker.prototype.isExcludedDate = function (date) {
  * @param {Date} fallback - date object to return if formatting fails
  * @returns {Date}
  */
-Datepicker.prototype.formattedDateFromString = function (
+DatePicker.prototype.formattedDateFromString = function (
   dateString,
   fallback = new Date()
 ) {
@@ -498,7 +498,7 @@ Datepicker.prototype.formattedDateFromString = function (
  * @param {Date} date - date to format to a string
  * @returns {string}
  */
-Datepicker.prototype.formattedDateFromDate = function (date) {
+DatePicker.prototype.formattedDateFromDate = function (date) {
   if (this.config.leadingZeros) {
     return `${this.leadingZeros(date.getDate())}/${this.leadingZeros(date.getMonth() + 1)}/${date.getFullYear()}`
   }
@@ -512,11 +512,11 @@ Datepicker.prototype.formattedDateFromDate = function (date) {
  * @param {Date} date - date to format
  * @returns {string}
  */
-Datepicker.prototype.formattedDateHuman = function (date) {
+DatePicker.prototype.formattedDateHuman = function (date) {
   return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`
 }
 
-Datepicker.prototype.backgroundClick = function (event) {
+DatePicker.prototype.backgroundClick = function (event) {
   if (
     this.isOpen() &&
     !this.$dialog.contains(event.target) &&
@@ -528,14 +528,14 @@ Datepicker.prototype.backgroundClick = function (event) {
   }
 }
 
-Datepicker.prototype.firstButtonKeydown = function (event) {
+DatePicker.prototype.firstButtonKeydown = function (event) {
   if (event.key === 'Tab' && event.shiftKey) {
     this.$lastButtonInDialog.focus()
     event.preventDefault()
   }
 }
 
-Datepicker.prototype.lastButtonKeydown = function (event) {
+DatePicker.prototype.lastButtonKeydown = function (event) {
   if (event.key === 'Tab' && !event.shiftKey) {
     this.$firstButtonInDialog.focus()
     event.preventDefault()
@@ -543,7 +543,7 @@ Datepicker.prototype.lastButtonKeydown = function (event) {
 }
 
 // render calendar
-Datepicker.prototype.updateCalendar = function () {
+DatePicker.prototype.updateCalendar = function () {
   this.$dialogTitle.innerHTML = `${this.monthLabels[this.currentDate.getMonth()]} ${this.currentDate.getFullYear()}`
 
   const day = this.currentDate
@@ -571,7 +571,7 @@ Datepicker.prototype.updateCalendar = function () {
   }
 }
 
-Datepicker.prototype.setCurrentDate = function (focus = true) {
+DatePicker.prototype.setCurrentDate = function (focus = true) {
   const { currentDate } = this
   this.calendarDays.forEach((calendarDay) => {
     calendarDay.button.classList.add('moj-datepicker__button')
@@ -628,7 +628,7 @@ Datepicker.prototype.setCurrentDate = function (focus = true) {
   }
 }
 
-Datepicker.prototype.selectDate = function (date) {
+DatePicker.prototype.selectDate = function (date) {
   if (this.isExcludedDate(date)) {
     return
   }
@@ -643,11 +643,11 @@ Datepicker.prototype.selectDate = function (date) {
   this.closeDialog()
 }
 
-Datepicker.prototype.isOpen = function () {
+DatePicker.prototype.isOpen = function () {
   return this.$dialog.classList.contains('moj-datepicker__dialog--open')
 }
 
-Datepicker.prototype.toggleDialog = function (event) {
+DatePicker.prototype.toggleDialog = function (event) {
   event.preventDefault()
   if (this.isOpen()) {
     this.closeDialog()
@@ -657,7 +657,7 @@ Datepicker.prototype.toggleDialog = function (event) {
   }
 }
 
-Datepicker.prototype.openDialog = function () {
+DatePicker.prototype.openDialog = function () {
   this.$dialog.hidden = false
   this.$dialog.classList.add('moj-datepicker__dialog--open')
   this.$calendarButton.setAttribute('aria-expanded', 'true')
@@ -678,14 +678,14 @@ Datepicker.prototype.openDialog = function () {
   this.setCurrentDate()
 }
 
-Datepicker.prototype.closeDialog = function () {
+DatePicker.prototype.closeDialog = function () {
   this.$dialog.hidden = true
   this.$dialog.classList.remove('moj-datepicker__dialog--open')
   this.$calendarButton.setAttribute('aria-expanded', 'false')
   this.$calendarButton.focus()
 }
 
-Datepicker.prototype.goToDate = function (date, focus) {
+DatePicker.prototype.goToDate = function (date, focus) {
   const current = this.currentDate
   this.currentDate = date
 
@@ -700,32 +700,32 @@ Datepicker.prototype.goToDate = function (date, focus) {
 }
 
 // day navigation
-Datepicker.prototype.focusNextDay = function () {
+DatePicker.prototype.focusNextDay = function () {
   const date = new Date(this.currentDate)
   date.setDate(date.getDate() + 1)
   this.goToDate(date)
 }
 
-Datepicker.prototype.focusPreviousDay = function () {
+DatePicker.prototype.focusPreviousDay = function () {
   const date = new Date(this.currentDate)
   date.setDate(date.getDate() - 1)
   this.goToDate(date)
 }
 
 // week navigation
-Datepicker.prototype.focusNextWeek = function () {
+DatePicker.prototype.focusNextWeek = function () {
   const date = new Date(this.currentDate)
   date.setDate(date.getDate() + 7)
   this.goToDate(date)
 }
 
-Datepicker.prototype.focusPreviousWeek = function () {
+DatePicker.prototype.focusPreviousWeek = function () {
   const date = new Date(this.currentDate)
   date.setDate(date.getDate() - 7)
   this.goToDate(date)
 }
 
-Datepicker.prototype.focusFirstDayOfWeek = function () {
+DatePicker.prototype.focusFirstDayOfWeek = function () {
   const date = new Date(this.currentDate)
   const firstDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 0 : 1
   const dayOfWeek = date.getDay()
@@ -740,7 +740,7 @@ Datepicker.prototype.focusFirstDayOfWeek = function () {
   this.goToDate(date)
 }
 
-Datepicker.prototype.focusLastDayOfWeek = function () {
+DatePicker.prototype.focusLastDayOfWeek = function () {
   const date = new Date(this.currentDate)
   const lastDayOfWeekIndex = this.config.weekStartDay === 'sunday' ? 6 : 0
   const dayOfWeek = date.getDay()
@@ -756,14 +756,14 @@ Datepicker.prototype.focusLastDayOfWeek = function () {
 }
 
 // month navigation
-Datepicker.prototype.focusNextMonth = function (event, focus = true) {
+DatePicker.prototype.focusNextMonth = function (event, focus = true) {
   event.preventDefault()
   const date = new Date(this.currentDate)
   date.setMonth(date.getMonth() + 1, 1)
   this.goToDate(date, focus)
 }
 
-Datepicker.prototype.focusPreviousMonth = function (event, focus = true) {
+DatePicker.prototype.focusPreviousMonth = function (event, focus = true) {
   event.preventDefault()
   const date = new Date(this.currentDate)
   date.setMonth(date.getMonth() - 1, 1)
@@ -771,14 +771,14 @@ Datepicker.prototype.focusPreviousMonth = function (event, focus = true) {
 }
 
 // year navigation
-Datepicker.prototype.focusNextYear = function (event, focus = true) {
+DatePicker.prototype.focusNextYear = function (event, focus = true) {
   event.preventDefault()
   const date = new Date(this.currentDate)
   date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1)
   this.goToDate(date, focus)
 }
 
-Datepicker.prototype.focusPreviousYear = function (event, focus = true) {
+DatePicker.prototype.focusPreviousYear = function (event, focus = true) {
   event.preventDefault()
   const date = new Date(this.currentDate)
   date.setFullYear(date.getFullYear() - 1, date.getMonth(), 1)
@@ -792,7 +792,7 @@ Datepicker.prototype.focusPreviousYear = function (event, focus = true) {
  * @param {DOMStringMap} dataset - HTML element dataset
  * @returns {object} Normalised dataset
  */
-Datepicker.prototype.parseDataset = function (schema, dataset) {
+DatePicker.prototype.parseDataset = function (schema, dataset) {
   const parsed = {}
 
   for (const [field, ,] of Object.entries(schema.properties)) {
@@ -813,7 +813,7 @@ Datepicker.prototype.parseDataset = function (schema, dataset) {
  * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
  * @returns {{ [key: string]: unknown }} A merged config object
  */
-Datepicker.prototype.mergeConfigs = function (...configObjects) {
+DatePicker.prototype.mergeConfigs = function (...configObjects) {
   const formattedConfigObject = {}
 
   // Loop through each of the passed objects
@@ -843,7 +843,7 @@ Datepicker.prototype.mergeConfigs = function (...configObjects) {
  * @param {number} index
  * @param {number} row
  * @param {number} column
- * @param {Datepicker} picker
+ * @param {DatePicker} picker
  * @class
  */
 function DSCalendarDay(button, index, row, column, picker) {
@@ -944,7 +944,7 @@ DSCalendarDay.prototype.keyPress = function (event) {
   }
 }
 
-MOJFrontend.DatePicker = Datepicker
+module.exports = { DatePicker }
 
 /**
  * Schema for component config
diff --git a/src/moj/components/date-picker/date-picker.spec.js b/src/moj/components/date-picker/date-picker.spec.js
index 54e31ca8..0d55c91d 100644
--- a/src/moj/components/date-picker/date-picker.spec.js
+++ b/src/moj/components/date-picker/date-picker.spec.js
@@ -10,7 +10,7 @@ const { userEvent } = require('@testing-library/user-event')
 const dayjs = require('dayjs')
 const { configureAxe } = require('jest-axe')
 
-require('./date-picker.js')
+const { DatePicker } = require('./date-picker.js')
 
 const user = userEvent.setup()
 const axe = configureAxe({
@@ -112,7 +112,7 @@ describe('Date picker with defaults', () => {
 
   beforeEach(() => {
     component = createComponent()
-    new MOJFrontend.DatePicker(component, {}).init()
+    new DatePicker(component, {}).init()
 
     calendarButton = queryByText(component, 'Choose date')?.closest('button')
     dialog = queryByRole(component, 'dialog', { hidden: true })
@@ -579,7 +579,7 @@ describe('button menu JS API', () => {
 
   describe('config', () => {
     test('default config values', () => {
-      const datePicker = new MOJFrontend.DatePicker(component, {})
+      const datePicker = new DatePicker(component, {})
       datePicker.init()
 
       expect(datePicker.config).toStrictEqual({
@@ -590,7 +590,7 @@ describe('button menu JS API', () => {
 
     test('leadingZeros', () => {
       const config = { leadingZeros: true }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.config.leadingZeros).toBe(true)
@@ -598,7 +598,7 @@ describe('button menu JS API', () => {
 
     test('weekStartDay can be set to sunday', () => {
       const config = { weekStartDay: 'Sunday' }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.config.weekStartDay).toBe('sunday')
@@ -607,7 +607,7 @@ describe('button menu JS API', () => {
 
     test("weekStartDay can't be set to other days", () => {
       const config = { weekStartDay: 'friday' }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.config.weekStartDay).toBe('monday')
@@ -616,7 +616,7 @@ describe('button menu JS API', () => {
     test('minDate', () => {
       const minDate = dayjs().subtract('1', 'week').startOf('day')
       const config = { minDate: minDate.format('D/M/YYYY') }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.minDate).toStrictEqual(minDate.toDate())
@@ -625,7 +625,7 @@ describe('button menu JS API', () => {
     test('future minDate sets currentDate to minDate', () => {
       const minDate = dayjs().add('1', 'week').startOf('day')
       const config = { minDate: minDate.format('D/M/YYYY') }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.minDate).toStrictEqual(minDate.toDate())
@@ -635,7 +635,7 @@ describe('button menu JS API', () => {
     test('maxDate', () => {
       const maxDate = dayjs().add('1', 'week').startOf('day')
       const config = { maxDate: maxDate.format('D/M/YYYY') }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.maxDate).toStrictEqual(maxDate.toDate())
@@ -644,7 +644,7 @@ describe('button menu JS API', () => {
     test('past maxDate sets currentDate to maxDate', () => {
       const maxDate = dayjs().subtract('1', 'week').startOf('day')
       const config = { maxDate: maxDate.format('D/M/YYYY') }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.maxDate).toStrictEqual(maxDate.toDate())
@@ -653,7 +653,7 @@ describe('button menu JS API', () => {
 
     test('excludedDays', () => {
       const config = { excludedDays: 'sunday thursday' }
-      const datePicker = new MOJFrontend.DatePicker(component, config)
+      const datePicker = new DatePicker(component, config)
       datePicker.init()
 
       expect(datePicker.excludedDays).toEqual([0, 4])
@@ -665,7 +665,7 @@ describe('button menu JS API', () => {
           .date(getDateInCurrentMonth())
           .startOf('day')
         const config = { excludedDates: dateToExclude.format('D/M/YYYY') }
-        const datePicker = new MOJFrontend.DatePicker(component, config)
+        const datePicker = new DatePicker(component, config)
         datePicker.init()
 
         expect(datePicker.excludedDates).toStrictEqual([dateToExclude.toDate()])
@@ -681,7 +681,7 @@ describe('button menu JS API', () => {
         const config = {
           excludedDates: `${firstDateToExclude.format('D/M/YYYY')} ${secondDateToExclude.format('D/M/YYYY')}`
         }
-        const datePicker = new MOJFrontend.DatePicker(component, config)
+        const datePicker = new DatePicker(component, config)
         datePicker.init()
 
         expect(datePicker.excludedDates).toHaveLength(2)
@@ -708,7 +708,7 @@ describe('button menu JS API', () => {
           excludedDates: `${datesToExclude[0].format('D/M/YYYY')}-${datesToExclude[datesToExclude.length - 1].format('D/M/YYYY')}`
         }
 
-        const datePicker = new MOJFrontend.DatePicker(component, config)
+        const datePicker = new DatePicker(component, config)
         datePicker.init()
 
         // expect(datePicker.excludedDates.length).toEqual(3);
@@ -736,7 +736,7 @@ describe('button menu JS API', () => {
         const config = {
           excludedDates: `${datesToExclude[0].format('D/M/YYYY')}-${datesToExclude[2].format('D/M/YYYY')} ${datesToExclude[3].format('D/M/YYYY')} ${datesToExclude[4].format('D/M/YYYY')}`
         }
-        const datePicker = new MOJFrontend.DatePicker(component, config)
+        const datePicker = new DatePicker(component, config)
         datePicker.init()
 
         expect(datePicker.excludedDates).toStrictEqual(
@@ -754,7 +754,7 @@ describe('button menu JS API', () => {
       input = screen.getByLabelText('Date')
 
       const config = { leadingZeros: false }
-      new MOJFrontend.DatePicker(component, config).init()
+      new DatePicker(component, config).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
       const dateToSelect = dayjs().date(9)
       const dateButton = screen.getByTestId(dateToSelect.format('D/M/YYYY'))
@@ -769,7 +769,7 @@ describe('button menu JS API', () => {
       input = screen.getByLabelText('Date')
 
       const config = { leadingZeros: true }
-      new MOJFrontend.DatePicker(component, config).init()
+      new DatePicker(component, config).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
       const dateToSelect = dayjs().date(9)
       const dateButton = screen.getByTestId(dateToSelect.format('DD/MM/YYYY'))
@@ -786,7 +786,7 @@ describe('button menu JS API', () => {
       const minDate = dayjs().date(minDay)
       const config = { minDate: minDate.format('DD/MM/YYYY') }
 
-      new MOJFrontend.DatePicker(component, config).init()
+      new DatePicker(component, config).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
       await user.click(calendarButton)
@@ -814,7 +814,7 @@ describe('button menu JS API', () => {
       const maxDate = dayjs().date(maxDay)
       const config = { maxDate: maxDate.format('DD/MM/YYYY') }
 
-      new MOJFrontend.DatePicker(component, config).init()
+      new DatePicker(component, config).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
       await user.click(calendarButton)
@@ -846,7 +846,7 @@ describe('button menu JS API', () => {
 
         const lastDayinMonth = dayjs().endOf('month').date()
 
-        new MOJFrontend.DatePicker(component, config).init()
+        new DatePicker(component, config).init()
         calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
         await user.click(calendarButton)
@@ -887,7 +887,7 @@ describe('button menu JS API', () => {
           excludedDates: `${datesToExclude[0].format('D/M/YYYY')}-${datesToExclude[datesToExclude.length - 1].format('D/M/YYYY')}`
         }
 
-        new MOJFrontend.DatePicker(component, config).init()
+        new DatePicker(component, config).init()
         calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
         await user.click(calendarButton)
@@ -920,7 +920,7 @@ describe('button menu JS API', () => {
           excludedDays.push(i)
         }
       }
-      new MOJFrontend.DatePicker(component, config).init()
+      new DatePicker(component, config).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
       await user.click(calendarButton)
@@ -944,7 +944,7 @@ describe('button menu JS API', () => {
     })
 
     test('default weekStartDay', async () => {
-      new MOJFrontend.DatePicker(component, {}).init()
+      new DatePicker(component, {}).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
       await user.click(calendarButton)
       const headers = getAllByRole(component, 'columnheader')
@@ -953,7 +953,7 @@ describe('button menu JS API', () => {
     })
 
     test('weekStartDay Sunday', async () => {
-      new MOJFrontend.DatePicker(component, { weekStartDay: 'sunday' }).init()
+      new DatePicker(component, { weekStartDay: 'sunday' }).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
       await user.click(calendarButton)
       const headers = getAllByRole(component, 'columnheader')
@@ -976,7 +976,7 @@ describe('Datepicker data-attributes API', () => {
 
   test('with leadingZeros false', async () => {
     component = createComponent({ leadingZeros: 'false' })
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
 
     input = screen.getByLabelText('Date')
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
@@ -991,7 +991,7 @@ describe('Datepicker data-attributes API', () => {
 
   test('with leadingZeros true', async () => {
     const component = createComponent({ leadingZeros: 'true' })
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
 
     input = screen.getByLabelText('Date')
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
@@ -1011,7 +1011,7 @@ describe('Datepicker data-attributes API', () => {
     const component = createComponent({
       minDate: minDate.format('DD/MM/YYYY')
     })
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
     await user.click(calendarButton)
@@ -1040,7 +1040,7 @@ describe('Datepicker data-attributes API', () => {
     const component = createComponent({
       maxDate: maxDate.format('DD/MM/YYYY')
     })
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
     await user.click(calendarButton)
@@ -1070,7 +1070,7 @@ describe('Datepicker data-attributes API', () => {
       const component = createComponent({
         excludedDates: dateToExclude.format('D/M/YYYY')
       })
-      new MOJFrontend.DatePicker(component).init()
+      new DatePicker(component).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
       await user.click(calendarButton)
@@ -1110,7 +1110,7 @@ describe('Datepicker data-attributes API', () => {
       component = createComponent({
         excludedDates: `${datesToExclude[0].format('D/M/YYYY')}-${datesToExclude[datesToExclude.length - 1].format('D/M/YYYY')}`
       })
-      new MOJFrontend.DatePicker(component).init()
+      new DatePicker(component).init()
       calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
       await user.click(calendarButton)
@@ -1143,7 +1143,7 @@ describe('Datepicker data-attributes API', () => {
         excludedDays.push(i)
       }
     }
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
 
     await user.click(calendarButton)
@@ -1168,7 +1168,7 @@ describe('Datepicker data-attributes API', () => {
 
   test('weekStartDay', async () => {
     component = createComponent({ weekStartDay: 'sunday' })
-    new MOJFrontend.DatePicker(component).init()
+    new DatePicker(component).init()
     calendarButton = screen.getByRole('button', { name: 'Choose date' })
     await user.click(calendarButton)
     const headers = getAllByRole(component, 'columnheader')
diff --git a/src/moj/components/filter-toggle-button/filter-toggle-button.js b/src/moj/components/filter-toggle-button/filter-toggle-button.js
index bb7d3cad..b6f0cbcb 100644
--- a/src/moj/components/filter-toggle-button/filter-toggle-button.js
+++ b/src/moj/components/filter-toggle-button/filter-toggle-button.js
@@ -1,4 +1,4 @@
-MOJFrontend.FilterToggleButton = function (options) {
+function FilterToggleButton(options) {
   this.options = options
   this.container = $(this.options.toggleButton.container)
   this.filterContainer = $(this.options.filter.container)
@@ -11,13 +11,13 @@ MOJFrontend.FilterToggleButton = function (options) {
   }
 }
 
-MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function () {
+FilterToggleButton.prototype.setupResponsiveChecks = function () {
   this.mq = window.matchMedia(this.options.bigModeMediaQuery)
   this.mq.addListener($.proxy(this, 'checkMode'))
   this.checkMode(this.mq)
 }
 
-MOJFrontend.FilterToggleButton.prototype.createToggleButton = function () {
+FilterToggleButton.prototype.createToggleButton = function () {
   this.menuButton = $(
     `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
   )
@@ -25,7 +25,7 @@ MOJFrontend.FilterToggleButton.prototype.createToggleButton = function () {
   this.container.append(this.menuButton)
 }
 
-MOJFrontend.FilterToggleButton.prototype.checkMode = function (mq) {
+FilterToggleButton.prototype.checkMode = function (mq) {
   if (mq.matches) {
     this.enableBigMode()
   } else {
@@ -33,17 +33,17 @@ MOJFrontend.FilterToggleButton.prototype.checkMode = function (mq) {
   }
 }
 
-MOJFrontend.FilterToggleButton.prototype.enableBigMode = function () {
+FilterToggleButton.prototype.enableBigMode = function () {
   this.showMenu()
   this.removeCloseButton()
 }
 
-MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function () {
+FilterToggleButton.prototype.enableSmallMode = function () {
   this.hideMenu()
   this.addCloseButton()
 }
 
-MOJFrontend.FilterToggleButton.prototype.addCloseButton = function () {
+FilterToggleButton.prototype.addCloseButton = function () {
   if (this.options.closeButton) {
     this.closeButton = $(
       `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
@@ -53,35 +53,35 @@ MOJFrontend.FilterToggleButton.prototype.addCloseButton = function () {
   }
 }
 
-MOJFrontend.FilterToggleButton.prototype.onCloseClick = function () {
+FilterToggleButton.prototype.onCloseClick = function () {
   this.hideMenu()
   this.menuButton.focus()
 }
 
-MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function () {
+FilterToggleButton.prototype.removeCloseButton = function () {
   if (this.closeButton) {
     this.closeButton.remove()
     this.closeButton = null
   }
 }
 
-MOJFrontend.FilterToggleButton.prototype.hideMenu = function () {
+FilterToggleButton.prototype.hideMenu = function () {
   this.menuButton.attr('aria-expanded', 'false')
   this.filterContainer.addClass('moj-js-hidden')
   this.menuButton.text(this.options.toggleButton.showText)
 }
 
-MOJFrontend.FilterToggleButton.prototype.showMenu = function () {
+FilterToggleButton.prototype.showMenu = function () {
   this.menuButton.attr('aria-expanded', 'true')
   this.filterContainer.removeClass('moj-js-hidden')
   this.menuButton.text(this.options.toggleButton.hideText)
 }
 
-MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function () {
+FilterToggleButton.prototype.onMenuButtonClick = function () {
   this.toggle()
 }
 
-MOJFrontend.FilterToggleButton.prototype.toggle = function () {
+FilterToggleButton.prototype.toggle = function () {
   if (this.menuButton.attr('aria-expanded') === 'false') {
     this.showMenu()
     this.filterContainer.get(0).focus()
@@ -89,3 +89,5 @@ MOJFrontend.FilterToggleButton.prototype.toggle = function () {
     this.hideMenu()
   }
 }
+
+module.exports = { FilterToggleButton }
diff --git a/src/moj/components/filter-toggle-button/filter-toggle-button.spec.js b/src/moj/components/filter-toggle-button/filter-toggle-button.spec.js
index 4ca577eb..4855e61a 100644
--- a/src/moj/components/filter-toggle-button/filter-toggle-button.spec.js
+++ b/src/moj/components/filter-toggle-button/filter-toggle-button.spec.js
@@ -6,7 +6,7 @@ const { configureAxe } = require('jest-axe')
 const merge = require('lodash/merge')
 const { setMedia } = require('mock-match-media')
 
-require('./filter-toggle-button.js')
+const { FilterToggleButton } = require('./filter-toggle-button.js')
 
 const user = userEvent.setup()
 const axe = configureAxe({
@@ -91,7 +91,7 @@ describe('Filter toggle in big mode', () => {
   })
 
   test('creates toggle button', () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig)
+    new FilterToggleButton(defaultConfig)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton).toBeInTheDocument()
@@ -104,7 +104,7 @@ describe('Filter toggle in big mode', () => {
   })
 
   test('toggle button reveals filters', async () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig)
+    new FilterToggleButton(defaultConfig)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(filterContainer).toHaveAttribute('tabindex', '-1')
@@ -128,7 +128,7 @@ describe('Filter toggle in big mode', () => {
 
   test('start visible', () => {
     const config = merge(defaultConfig, { startHidden: false })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton.innerHTML).toBe('Hide filter')
@@ -139,7 +139,7 @@ describe('Filter toggle in big mode', () => {
     const config = merge(defaultConfig, {
       toggleButton: { showText: 'Custom label', hideText: 'Hide me' }
     })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton.innerHTML).toBe('Custom label')
@@ -151,7 +151,7 @@ describe('Filter toggle in big mode', () => {
     const config = merge(defaultConfig, {
       toggleButton: { classes: 'classname-1 classname-2' }
     })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton).toHaveClass('classname-1 classname-2')
@@ -159,7 +159,7 @@ describe('Filter toggle in big mode', () => {
 
   describe('accessibility', () => {
     test('component has no wcag violations', async () => {
-      new MOJFrontend.FilterToggleButton(defaultConfig)
+      new FilterToggleButton(defaultConfig)
       const toggleButton = queryByRole(buttonContainer, 'button')
       expect(await axe(document.body)).toHaveNoViolations()
       await user.click(toggleButton)
@@ -193,7 +193,7 @@ describe('Filter toggle in small mode', () => {
   })
 
   test('creates toggle button', () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig)
+    new FilterToggleButton(defaultConfig)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton).toBeInTheDocument()
@@ -206,7 +206,7 @@ describe('Filter toggle in small mode', () => {
   })
 
   test('toggle button reveals filters', async () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig)
+    new FilterToggleButton(defaultConfig)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(filterContainer).toHaveAttribute('tabindex', '-1')
@@ -230,7 +230,7 @@ describe('Filter toggle in small mode', () => {
 
   test('start visible is ignored', () => {
     const config = merge(defaultConfig, { startHidden: false })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton.innerHTML).toBe('Show filter')
@@ -239,7 +239,7 @@ describe('Filter toggle in small mode', () => {
 
   test('adds a close button', async () => {
     const config = merge(defaultConfig, { startHidden: false })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     await user.click(toggleButton)
@@ -256,7 +256,7 @@ describe('Filter toggle in small mode', () => {
     })
 
     const config = merge(defaultConfig, { startHidden: false })
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton.innerHTML).toBe('Hide filter')
@@ -276,7 +276,7 @@ describe('Filter toggle in small mode', () => {
     })
 
     const config = merge(defaultConfig)
-    new MOJFrontend.FilterToggleButton(config)
+    new FilterToggleButton(config)
     const toggleButton = queryByRole(buttonContainer, 'button')
 
     expect(toggleButton.innerHTML).toBe('Show filter')
@@ -292,7 +292,7 @@ describe('Filter toggle in small mode', () => {
 
   describe('accessibility', () => {
     test('component has no wcag violations', async () => {
-      new MOJFrontend.FilterToggleButton(defaultConfig)
+      new FilterToggleButton(defaultConfig)
       const toggleButton = queryByRole(buttonContainer, 'button')
       expect(await axe(document.body)).toHaveNoViolations()
       await user.click(toggleButton)
diff --git a/src/moj/components/form-validator/form-validator.js b/src/moj/components/form-validator/form-validator.js
index 6bad6bad..9c9c4960 100755
--- a/src/moj/components/form-validator/form-validator.js
+++ b/src/moj/components/form-validator/form-validator.js
@@ -1,4 +1,6 @@
-MOJFrontend.FormValidator = function (form, options) {
+const { addAttributeValue, removeAttributeValue } = require('../../helpers.js')
+
+function FormValidator(form, options) {
   this.form = form
   this.errors = []
   this.validators = []
@@ -8,7 +10,7 @@ MOJFrontend.FormValidator = function (form, options) {
   this.originalTitle = document.title
 }
 
-MOJFrontend.FormValidator.entityMap = {
+FormValidator.entityMap = {
   '&': '&amp;',
   '<': '&lt;',
   '>': '&gt;',
@@ -19,28 +21,28 @@ MOJFrontend.FormValidator.entityMap = {
   '=': '&#x3D;'
 }
 
-MOJFrontend.FormValidator.prototype.escapeHtml = function (string) {
+FormValidator.prototype.escapeHtml = function (string) {
   return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
-    return MOJFrontend.FormValidator.entityMap[s]
+    return FormValidator.entityMap[s]
   })
 }
 
-MOJFrontend.FormValidator.prototype.resetTitle = function () {
+FormValidator.prototype.resetTitle = function () {
   document.title = this.originalTitle
 }
 
-MOJFrontend.FormValidator.prototype.updateTitle = function () {
+FormValidator.prototype.updateTitle = function () {
   document.title = `${this.errors.length} errors - ${document.title}`
 }
 
-MOJFrontend.FormValidator.prototype.showSummary = function () {
+FormValidator.prototype.showSummary = function () {
   this.summary.html(this.getSummaryHtml())
   this.summary.removeClass('moj-hidden')
   this.summary.attr('aria-labelledby', 'errorSummary-heading')
   this.summary.focus()
 }
 
-MOJFrontend.FormValidator.prototype.getSummaryHtml = function () {
+FormValidator.prototype.getSummaryHtml = function () {
   let html =
     '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>'
   html += '<div class="govuk-error-summary__body">'
@@ -58,12 +60,12 @@ MOJFrontend.FormValidator.prototype.getSummaryHtml = function () {
   return html
 }
 
-MOJFrontend.FormValidator.prototype.hideSummary = function () {
+FormValidator.prototype.hideSummary = function () {
   this.summary.addClass('moj-hidden')
   this.summary.removeAttr('aria-labelledby')
 }
 
-MOJFrontend.FormValidator.prototype.onSubmit = function (e) {
+FormValidator.prototype.onSubmit = function (e) {
   this.removeInlineErrors()
   this.hideSummary()
   this.resetTitle()
@@ -75,13 +77,13 @@ MOJFrontend.FormValidator.prototype.onSubmit = function (e) {
   }
 }
 
-MOJFrontend.FormValidator.prototype.showInlineErrors = function () {
+FormValidator.prototype.showInlineErrors = function () {
   for (let i = 0, j = this.errors.length; i < j; i++) {
     this.showInlineError(this.errors[i])
   }
 }
 
-MOJFrontend.FormValidator.prototype.showInlineError = function (error) {
+FormValidator.prototype.showInlineError = function (error) {
   const errorSpanId = `${error.fieldName}-error`
   const errorSpan = `<span class="govuk-error-message" id="${
     errorSpanId
@@ -95,35 +97,35 @@ MOJFrontend.FormValidator.prototype.showInlineError = function (error) {
   if (legend.length) {
     legend.after(errorSpan)
     fieldContainer.attr('aria-invalid', 'true')
-    MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId)
+    addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId)
   } else {
     label.after(errorSpan)
     control.attr('aria-invalid', 'true')
-    MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId)
+    addAttributeValue(control[0], 'aria-describedby', errorSpanId)
   }
 }
 
-MOJFrontend.FormValidator.prototype.removeInlineErrors = function () {
+FormValidator.prototype.removeInlineErrors = function () {
   for (let i = 0; i < this.errors.length; i++) {
     this.removeInlineError(this.errors[i])
   }
 }
 
-MOJFrontend.FormValidator.prototype.removeInlineError = function (error) {
+FormValidator.prototype.removeInlineError = function (error) {
   const control = $(`#${error.fieldName}`)
   const fieldContainer = control.parents('.govuk-form-group')
   fieldContainer.find('.govuk-error-message').remove()
   fieldContainer.removeClass('govuk-form-group--error')
   fieldContainer.find('[aria-invalid]').attr('aria-invalid', 'false')
   const errorSpanId = `${error.fieldName}-error`
-  MOJFrontend.removeAttributeValue(
+  removeAttributeValue(
     fieldContainer.find('[aria-describedby]')[0],
     'aria-describedby',
     errorSpanId
   )
 }
 
-MOJFrontend.FormValidator.prototype.addValidator = function (fieldName, rules) {
+FormValidator.prototype.addValidator = function (fieldName, rules) {
   this.validators.push({
     fieldName,
     rules,
@@ -131,7 +133,7 @@ MOJFrontend.FormValidator.prototype.addValidator = function (fieldName, rules) {
   })
 }
 
-MOJFrontend.FormValidator.prototype.validate = function () {
+FormValidator.prototype.validate = function () {
   this.errors = []
   let validator = null
   let validatorReturnValue = true
@@ -162,3 +164,5 @@ MOJFrontend.FormValidator.prototype.validate = function () {
   }
   return this.errors.length === 0
 }
+
+module.exports = { FormValidator }
diff --git a/src/moj/components/multi-file-upload/multi-file-upload.js b/src/moj/components/multi-file-upload/multi-file-upload.js
index 4cd9118e..7d205411 100644
--- a/src/moj/components/multi-file-upload/multi-file-upload.js
+++ b/src/moj/components/multi-file-upload/multi-file-upload.js
@@ -1,11 +1,11 @@
-MOJFrontend.MultiFileUpload = function (params) {
-  if (
-    !(
-      MOJFrontend.dragAndDropSupported() &&
-      MOJFrontend.formDataSupported() &&
-      MOJFrontend.fileApiSupported()
-    )
-  ) {
+const {
+  dragAndDropSupported,
+  fileApiSupported,
+  formDataSupported
+} = require('../../helpers.js')
+
+function MultiFileUpload(params) {
+  if (!(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
     return
   }
 
@@ -38,7 +38,7 @@ MOJFrontend.MultiFileUpload = function (params) {
   )
 }
 
-MOJFrontend.MultiFileUpload.prototype.setupDropzone = function () {
+MultiFileUpload.prototype.setupDropzone = function () {
   this.fileInput.wrap('<div class="moj-multi-file-upload__dropzone" />')
   this.dropzone = this.container.find('.moj-multi-file-upload__dropzone')
   this.dropzone.on('dragover', $.proxy(this, 'onDragOver'))
@@ -46,7 +46,7 @@ MOJFrontend.MultiFileUpload.prototype.setupDropzone = function () {
   this.dropzone.on('drop', $.proxy(this, 'onDrop'))
 }
 
-MOJFrontend.MultiFileUpload.prototype.setupLabel = function () {
+MultiFileUpload.prototype.setupLabel = function () {
   this.label = $(
     `<label for="${this.fileInput[0].id}" class="govuk-button govuk-button--secondary">${this.params.dropzoneButtonText}</label>`
   )
@@ -56,30 +56,30 @@ MOJFrontend.MultiFileUpload.prototype.setupLabel = function () {
   this.dropzone.append(this.label)
 }
 
-MOJFrontend.MultiFileUpload.prototype.setupFileInput = function () {
+MultiFileUpload.prototype.setupFileInput = function () {
   this.fileInput = this.container.find('.moj-multi-file-upload__input')
   this.fileInput.on('change', $.proxy(this, 'onFileChange'))
   this.fileInput.on('focus', $.proxy(this, 'onFileFocus'))
   this.fileInput.on('blur', $.proxy(this, 'onFileBlur'))
 }
 
-MOJFrontend.MultiFileUpload.prototype.setupStatusBox = function () {
+MultiFileUpload.prototype.setupStatusBox = function () {
   this.status = $(
     '<div aria-live="polite" role="status" class="govuk-visually-hidden" />'
   )
   this.dropzone.append(this.status)
 }
 
-MOJFrontend.MultiFileUpload.prototype.onDragOver = function (e) {
+MultiFileUpload.prototype.onDragOver = function (e) {
   e.preventDefault()
   this.dropzone.addClass('moj-multi-file-upload--dragover')
 }
 
-MOJFrontend.MultiFileUpload.prototype.onDragLeave = function () {
+MultiFileUpload.prototype.onDragLeave = function () {
   this.dropzone.removeClass('moj-multi-file-upload--dragover')
 }
 
-MOJFrontend.MultiFileUpload.prototype.onDrop = function (e) {
+MultiFileUpload.prototype.onDrop = function (e) {
   e.preventDefault()
   this.dropzone.removeClass('moj-multi-file-upload--dragover')
   this.feedbackContainer.removeClass('moj-hidden')
@@ -87,13 +87,13 @@ MOJFrontend.MultiFileUpload.prototype.onDrop = function (e) {
   this.uploadFiles(e.originalEvent.dataTransfer.files)
 }
 
-MOJFrontend.MultiFileUpload.prototype.uploadFiles = function (files) {
+MultiFileUpload.prototype.uploadFiles = function (files) {
   for (let i = 0; i < files.length; i++) {
     this.uploadFile(files[i])
   }
 }
 
-MOJFrontend.MultiFileUpload.prototype.onFileChange = function (e) {
+MultiFileUpload.prototype.onFileChange = function (e) {
   this.feedbackContainer.removeClass('moj-hidden')
   this.status.html(this.params.uploadStatusText)
   this.uploadFiles(e.currentTarget.files)
@@ -102,23 +102,23 @@ MOJFrontend.MultiFileUpload.prototype.onFileChange = function (e) {
   this.fileInput.get(0).focus()
 }
 
-MOJFrontend.MultiFileUpload.prototype.onFileFocus = function (e) {
+MultiFileUpload.prototype.onFileFocus = function (e) {
   this.label.addClass('moj-multi-file-upload--focused')
 }
 
-MOJFrontend.MultiFileUpload.prototype.onFileBlur = function (e) {
+MultiFileUpload.prototype.onFileBlur = function (e) {
   this.label.removeClass('moj-multi-file-upload--focused')
 }
 
-MOJFrontend.MultiFileUpload.prototype.getSuccessHtml = function (success) {
+MultiFileUpload.prototype.getSuccessHtml = function (success) {
   return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`
 }
 
-MOJFrontend.MultiFileUpload.prototype.getErrorHtml = function (error) {
+MultiFileUpload.prototype.getErrorHtml = function (error) {
   return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`
 }
 
-MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function (file) {
+MultiFileUpload.prototype.getFileRowHtml = function (file) {
   const html = `
     <div class="govuk-summary-list__row moj-multi-file-upload__row">;
       <div class="govuk-summary-list__value moj-multi-file-upload__message">;
@@ -130,13 +130,13 @@ MOJFrontend.MultiFileUpload.prototype.getFileRowHtml = function (file) {
   return html
 }
 
-MOJFrontend.MultiFileUpload.prototype.getDeleteButtonHtml = function (file) {
+MultiFileUpload.prototype.getDeleteButtonHtml = function (file) {
   return `<button class="moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0" type="button" name="delete" value="${file.filename}">
       Delete <span class="govuk-visually-hidden">${file.originalname}</span>
     </button>`
 }
 
-MOJFrontend.MultiFileUpload.prototype.uploadFile = function (file) {
+MultiFileUpload.prototype.uploadFile = function (file) {
   this.params.uploadFileEntryHook(this, file)
   const item = $(this.getFileRowHtml(file))
   const formData = new FormData()
@@ -195,7 +195,7 @@ MOJFrontend.MultiFileUpload.prototype.uploadFile = function (file) {
   })
 }
 
-MOJFrontend.MultiFileUpload.prototype.onFileDeleteClick = function (e) {
+MultiFileUpload.prototype.onFileDeleteClick = function (e) {
   e.preventDefault() // if user refreshes page and then deletes
   const button = $(e.currentTarget)
   const data = {}
@@ -221,3 +221,5 @@ MOJFrontend.MultiFileUpload.prototype.onFileDeleteClick = function (e) {
     }, this)
   })
 }
+
+module.exports = { MultiFileUpload }
diff --git a/src/moj/components/multi-file-upload/multi-file-upload.spec.js b/src/moj/components/multi-file-upload/multi-file-upload.spec.js
index eb3d766a..a62e3a59 100644
--- a/src/moj/components/multi-file-upload/multi-file-upload.spec.js
+++ b/src/moj/components/multi-file-upload/multi-file-upload.spec.js
@@ -9,8 +9,7 @@ const { userEvent } = require('@testing-library/user-event')
 const { configureAxe } = require('jest-axe')
 const sinon = require('sinon')
 
-require('../../helpers.js')
-require('./multi-file-upload.js')
+const { MultiFileUpload } = require('./multi-file-upload.js')
 
 const user = userEvent.setup()
 const axe = configureAxe({
@@ -77,7 +76,7 @@ describe('Multi-file upload', () => {
       deleteUrl: '/delete'
     }))
 
-    new MOJFrontend.MultiFileUpload(options)
+    new MultiFileUpload(options)
   })
 
   afterEach(() => {
diff --git a/src/moj/components/multi-select/multi-select.js b/src/moj/components/multi-select/multi-select.js
index a94254ce..cb0b0c20 100644
--- a/src/moj/components/multi-select/multi-select.js
+++ b/src/moj/components/multi-select/multi-select.js
@@ -1,4 +1,4 @@
-MOJFrontend.MultiSelect = function (options) {
+function MultiSelect(options) {
   this.container = $(options.container)
 
   if (this.container.data('moj-multi-select-initialised')) {
@@ -22,7 +22,7 @@ MOJFrontend.MultiSelect = function (options) {
   this.checked = options.checked || false
 }
 
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
+MultiSelect.prototype.getToggleHtml = function (allId) {
   let html = ''
   html +=
     '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">'
@@ -34,7 +34,7 @@ MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
   return html
 }
 
-MOJFrontend.MultiSelect.prototype.onButtonClick = function (e) {
+MultiSelect.prototype.onButtonClick = function (e) {
   if (this.checked) {
     this.uncheckAll()
     this.toggleButton[0].checked = false
@@ -44,7 +44,7 @@ MOJFrontend.MultiSelect.prototype.onButtonClick = function (e) {
   }
 }
 
-MOJFrontend.MultiSelect.prototype.checkAll = function () {
+MultiSelect.prototype.checkAll = function () {
   this.checkboxes.each(
     $.proxy(function (index, el) {
       el.checked = true
@@ -53,7 +53,7 @@ MOJFrontend.MultiSelect.prototype.checkAll = function () {
   this.checked = true
 }
 
-MOJFrontend.MultiSelect.prototype.uncheckAll = function () {
+MultiSelect.prototype.uncheckAll = function () {
   this.checkboxes.each(
     $.proxy(function (index, el) {
       el.checked = false
@@ -62,7 +62,7 @@ MOJFrontend.MultiSelect.prototype.uncheckAll = function () {
   this.checked = false
 }
 
-MOJFrontend.MultiSelect.prototype.onCheckboxClick = function (e) {
+MultiSelect.prototype.onCheckboxClick = function (e) {
   if (!e.target.checked) {
     this.toggleButton[0].checked = false
     this.checked = false
@@ -73,3 +73,5 @@ MOJFrontend.MultiSelect.prototype.onCheckboxClick = function (e) {
     }
   }
 }
+
+module.exports = { MultiSelect }
diff --git a/src/moj/components/multi-select/multi-select.spec.js b/src/moj/components/multi-select/multi-select.spec.js
index 029881d1..42461c33 100644
--- a/src/moj/components/multi-select/multi-select.spec.js
+++ b/src/moj/components/multi-select/multi-select.spec.js
@@ -3,7 +3,7 @@
 const { queryByRole, queryAllByRole } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 
-require('./multi-select.js')
+const { MultiSelect } = require('./multi-select.js')
 
 const user = userEvent.setup()
 
@@ -58,7 +58,7 @@ describe('multi select', () => {
     container = component.querySelector('#multi-select-select-all')
     checkboxes = component.querySelectorAll('tbody input[type=checkbox]')
 
-    new MOJFrontend.MultiSelect({
+    new MultiSelect({
       container,
       checkboxes
     })
diff --git a/src/moj/components/password-reveal/password-reveal.js b/src/moj/components/password-reveal/password-reveal.js
index 2cb5af70..d5d3f3d5 100644
--- a/src/moj/components/password-reveal/password-reveal.js
+++ b/src/moj/components/password-reveal/password-reveal.js
@@ -1,4 +1,4 @@
-MOJFrontend.PasswordReveal = function (element) {
+function PasswordReveal(element) {
   this.el = element
   const $el = $(this.el)
 
@@ -14,7 +14,7 @@ MOJFrontend.PasswordReveal = function (element) {
   this.createButton()
 }
 
-MOJFrontend.PasswordReveal.prototype.createButton = function () {
+PasswordReveal.prototype.createButton = function () {
   this.button = $(
     '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
   )
@@ -22,7 +22,7 @@ MOJFrontend.PasswordReveal.prototype.createButton = function () {
   this.button.on('click', $.proxy(this, 'onButtonClick'))
 }
 
-MOJFrontend.PasswordReveal.prototype.onButtonClick = function () {
+PasswordReveal.prototype.onButtonClick = function () {
   if (this.el.type === 'password') {
     this.el.type = 'text'
     this.button.html('Hide <span class="govuk-visually-hidden">password</span>')
@@ -31,3 +31,5 @@ MOJFrontend.PasswordReveal.prototype.onButtonClick = function () {
     this.button.html('Show <span class="govuk-visually-hidden">password</span>')
   }
 }
+
+module.exports = { PasswordReveal }
diff --git a/src/moj/components/password-reveal/password-reveal.spec.js b/src/moj/components/password-reveal/password-reveal.spec.js
index 7f8d893c..8be0ed59 100644
--- a/src/moj/components/password-reveal/password-reveal.spec.js
+++ b/src/moj/components/password-reveal/password-reveal.spec.js
@@ -4,7 +4,7 @@ const { getByDisplayValue, getByText } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 const { configureAxe } = require('jest-axe')
 
-require('./password-reveal.js')
+const { PasswordReveal } = require('./password-reveal.js')
 
 const user = userEvent.setup()
 const axe = configureAxe({
@@ -22,7 +22,7 @@ describe('Password reveal', () => {
     input.type = 'password'
     input.value = 'password'
 
-    new MOJFrontend.PasswordReveal(input)
+    new PasswordReveal(input)
 
     container = input.parentNode
   })
diff --git a/src/moj/components/rich-text-editor/rich-text-editor.js b/src/moj/components/rich-text-editor/rich-text-editor.js
index 4d6a9d86..ff5dd9c7 100755
--- a/src/moj/components/rich-text-editor/rich-text-editor.js
+++ b/src/moj/components/rich-text-editor/rich-text-editor.js
@@ -1,4 +1,4 @@
-MOJFrontend.RichTextEditor = function (options) {
+function RichTextEditor(options) {
   if (!('contentEditable' in document.documentElement)) {
     return
   }
@@ -41,7 +41,7 @@ MOJFrontend.RichTextEditor = function (options) {
   this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'))
 }
 
-MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function (e) {
+RichTextEditor.prototype.onToolbarKeydown = function (e) {
   let focusableButton
   switch (e.keyCode) {
     case this.keys.right:
@@ -69,7 +69,7 @@ MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function (e) {
   }
 }
 
-MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function () {
+RichTextEditor.prototype.getToolbarHtml = function () {
   let html = ''
 
   html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">'
@@ -103,18 +103,18 @@ MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function () {
   return html
 }
 
-MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function (val) {
+RichTextEditor.prototype.getEnhancedHtml = function (val) {
   return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`
 }
 
-MOJFrontend.RichTextEditor.prototype.hideDefault = function () {
+RichTextEditor.prototype.hideDefault = function () {
   this.textarea = this.container.find('textarea')
   this.textarea.addClass('govuk-visually-hidden')
   this.textarea.attr('aria-hidden', true)
   this.textarea.attr('tabindex', '-1')
 }
 
-MOJFrontend.RichTextEditor.prototype.createToolbar = function () {
+RichTextEditor.prototype.createToolbar = function () {
   this.toolbar = document.createElement('div')
   this.toolbar.className = 'moj-rich-text-editor'
   this.toolbar.innerHTML = this.getEnhancedHtml()
@@ -125,31 +125,33 @@ MOJFrontend.RichTextEditor.prototype.createToolbar = function () {
     .html(this.textarea.val())
 }
 
-MOJFrontend.RichTextEditor.prototype.configureToolbar = function () {
+RichTextEditor.prototype.configureToolbar = function () {
   this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button')
   this.buttons.prop('tabindex', '-1')
   const firstTab = this.buttons.first()
   firstTab.prop('tabindex', '0')
 }
 
-MOJFrontend.RichTextEditor.prototype.onButtonClick = function (e) {
+RichTextEditor.prototype.onButtonClick = function (e) {
   document.execCommand($(e.currentTarget).data('command'), false, null)
 }
 
-MOJFrontend.RichTextEditor.prototype.getContent = function () {
+RichTextEditor.prototype.getContent = function () {
   return this.container.find('.moj-rich-text-editor__content').html()
 }
 
-MOJFrontend.RichTextEditor.prototype.onEditorInput = function (e) {
+RichTextEditor.prototype.onEditorInput = function (e) {
   this.updateTextarea()
 }
 
-MOJFrontend.RichTextEditor.prototype.updateTextarea = function () {
+RichTextEditor.prototype.updateTextarea = function () {
   document.execCommand('defaultParagraphSeparator', false, 'p')
   this.textarea.val(this.getContent())
 }
 
-MOJFrontend.RichTextEditor.prototype.onLabelClick = function (e) {
+RichTextEditor.prototype.onLabelClick = function (e) {
   e.preventDefault()
   this.container.find('.moj-rich-text-editor__content').focus()
 }
+
+module.exports = { RichTextEditor }
diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js
index 390ebf26..6ffe3242 100644
--- a/src/moj/components/search-toggle/search-toggle.js
+++ b/src/moj/components/search-toggle/search-toggle.js
@@ -1,4 +1,4 @@
-MOJFrontend.SearchToggle = function (options) {
+function SearchToggle(options) {
   this.options = options
   this.container = $(this.options.search.container)
   this.toggleButtonContainer = $(this.options.toggleButton.container)
@@ -23,18 +23,18 @@ MOJFrontend.SearchToggle = function (options) {
   $(document).on('focusin', this.onDocumentClick.bind(this))
 }
 
-MOJFrontend.SearchToggle.prototype.showMenu = function () {
+SearchToggle.prototype.showMenu = function () {
   this.toggleButton.attr('aria-expanded', 'true')
   this.container.removeClass('moj-js-hidden')
   this.container.find('input').first().get(0).focus()
 }
 
-MOJFrontend.SearchToggle.prototype.hideMenu = function () {
+SearchToggle.prototype.hideMenu = function () {
   this.container.addClass('moj-js-hidden')
   this.toggleButton.attr('aria-expanded', 'false')
 }
 
-MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
+SearchToggle.prototype.onToggleButtonClick = function () {
   if (this.toggleButton.attr('aria-expanded') === 'false') {
     this.showMenu()
   } else {
@@ -42,7 +42,7 @@ MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
   }
 }
 
-MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
+SearchToggle.prototype.onDocumentClick = function (e) {
   if (
     !$.contains(this.toggleButtonContainer[0], e.target) &&
     !$.contains(this.container[0], e.target)
@@ -50,3 +50,5 @@ MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
     this.hideMenu()
   }
 }
+
+module.exports = { SearchToggle }
diff --git a/src/moj/components/search-toggle/search-toggle.spec.js b/src/moj/components/search-toggle/search-toggle.spec.js
index 019a6e93..37199485 100644
--- a/src/moj/components/search-toggle/search-toggle.spec.js
+++ b/src/moj/components/search-toggle/search-toggle.spec.js
@@ -4,7 +4,7 @@ const { queryByRole } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 const $ = require('jquery')
 
-require('./search-toggle.js')
+const { SearchToggle } = require('./search-toggle.js')
 
 const user = userEvent.setup()
 
@@ -54,7 +54,7 @@ describe('search toggle', () => {
     searchContainer = component.querySelector('.moj-search')
     buttonContainer = component.querySelector('.moj-search-toggle__toggle')
 
-    new MOJFrontend.SearchToggle({
+    new SearchToggle({
       toggleButton: {
         container: $(buttonContainer),
         text: component.getAttribute('data-moj-search-toggle-text')
diff --git a/src/moj/components/sortable-table/sortable-table.js b/src/moj/components/sortable-table/sortable-table.js
index a473841c..9f7a3192 100755
--- a/src/moj/components/sortable-table/sortable-table.js
+++ b/src/moj/components/sortable-table/sortable-table.js
@@ -1,4 +1,4 @@
-MOJFrontend.SortableTable = function (params) {
+function SortableTable(params) {
   this.table = $(params.table)
 
   if (this.table.data('moj-search-toggle-initialised')) {
@@ -15,14 +15,14 @@ MOJFrontend.SortableTable = function (params) {
   this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'))
 }
 
-MOJFrontend.SortableTable.prototype.setupOptions = function (params) {
+SortableTable.prototype.setupOptions = function (params) {
   params = params || {}
   this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)'
   this.ascendingText = params.ascendingText || 'ascending'
   this.descendingText = params.descendingText || 'descending'
 }
 
-MOJFrontend.SortableTable.prototype.createHeadingButtons = function () {
+SortableTable.prototype.createHeadingButtons = function () {
   const headings = this.table.find('thead th')
   let heading
   for (let i = 0; i < headings.length; i++) {
@@ -33,24 +33,21 @@ MOJFrontend.SortableTable.prototype.createHeadingButtons = function () {
   }
 }
 
-MOJFrontend.SortableTable.prototype.createHeadingButton = function (
-  heading,
-  i
-) {
+SortableTable.prototype.createHeadingButton = function (heading, i) {
   const text = heading.text()
   const button = $(`<button type="button" data-index="${i}">${text}</button>`)
   heading.text('')
   heading.append(button)
 }
 
-MOJFrontend.SortableTable.prototype.createStatusBox = function () {
+SortableTable.prototype.createStatusBox = function () {
   this.status = $(
     '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
   )
   this.table.parent().append(this.status)
 }
 
-MOJFrontend.SortableTable.prototype.initialiseSortedColumn = function () {
+SortableTable.prototype.initialiseSortedColumn = function () {
   const rows = this.getTableRowsArray()
 
   this.table
@@ -65,7 +62,7 @@ MOJFrontend.SortableTable.prototype.initialiseSortedColumn = function () {
     })
 }
 
-MOJFrontend.SortableTable.prototype.onSortButtonClick = function (e) {
+SortableTable.prototype.onSortButtonClick = function (e) {
   const columnNumber = e.currentTarget.getAttribute('data-index')
   const sortDirection = $(e.currentTarget).parent().attr('aria-sort')
   let newSortDirection
@@ -81,10 +78,7 @@ MOJFrontend.SortableTable.prototype.onSortButtonClick = function (e) {
   this.updateButtonState($(e.currentTarget), newSortDirection)
 }
 
-MOJFrontend.SortableTable.prototype.updateButtonState = function (
-  button,
-  direction
-) {
+SortableTable.prototype.updateButtonState = function (button, direction) {
   button.parent().attr('aria-sort', direction)
   let message = this.statusMessage
   message = message.replace(/%heading%/, button.text())
@@ -92,17 +86,17 @@ MOJFrontend.SortableTable.prototype.updateButtonState = function (
   this.status.text(message)
 }
 
-MOJFrontend.SortableTable.prototype.removeButtonStates = function () {
+SortableTable.prototype.removeButtonStates = function () {
   this.table.find('thead th').attr('aria-sort', 'none')
 }
 
-MOJFrontend.SortableTable.prototype.addRows = function (rows) {
+SortableTable.prototype.addRows = function (rows) {
   for (let i = 0; i < rows.length; i++) {
     this.body.append(rows[i])
   }
 }
 
-MOJFrontend.SortableTable.prototype.getTableRowsArray = function () {
+SortableTable.prototype.getTableRowsArray = function () {
   const rows = []
   const trs = this.body.find('tr')
   for (let i = 0; i < trs.length; i++) {
@@ -111,11 +105,7 @@ MOJFrontend.SortableTable.prototype.getTableRowsArray = function () {
   return rows
 }
 
-MOJFrontend.SortableTable.prototype.sort = function (
-  rows,
-  columnNumber,
-  sortDirection
-) {
+SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
   const newRows = rows.sort(
     function (rowA, rowB) {
       const tdA = $(rowA).find('td,th').eq(columnNumber)
@@ -138,9 +128,11 @@ MOJFrontend.SortableTable.prototype.sort = function (
   return newRows
 }
 
-MOJFrontend.SortableTable.prototype.getCellValue = function (cell) {
+SortableTable.prototype.getCellValue = function (cell) {
   const val = cell.attr('data-sort-value') || cell.html()
 
   const valAsNumber = Number(val)
   return isNaN(valAsNumber) ? val : valAsNumber
 }
+
+module.exports = { SortableTable }
diff --git a/src/moj/components/sortable-table/sortable-table.spec.js b/src/moj/components/sortable-table/sortable-table.spec.js
index d77ec589..0de69789 100644
--- a/src/moj/components/sortable-table/sortable-table.spec.js
+++ b/src/moj/components/sortable-table/sortable-table.spec.js
@@ -3,7 +3,7 @@
 const { queryByRole } = require('@testing-library/dom')
 const { userEvent } = require('@testing-library/user-event')
 
-require('./sortable-table.js')
+const { SortableTable } = require('./sortable-table.js')
 
 const user = userEvent.setup()
 
@@ -64,7 +64,7 @@ describe('sortable table', () => {
 
   beforeEach(() => {
     ;({ component } = createComponent())
-    new MOJFrontend.SortableTable({
+    new SortableTable({
       table: component
     })
   })
@@ -248,7 +248,7 @@ describe('sortable table options', () => {
   })
 
   test('uses default status message when no options provided', async () => {
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const elevationHeaderButton = queryByRole(component, 'button', {
       name: 'Elevation'
@@ -261,7 +261,7 @@ describe('sortable table options', () => {
 
   test('uses custom status message when provided', async () => {
     options.statusMessage = 'Sorted column: %heading% (order: %direction%)'
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const elevationHeaderButton = queryByRole(component, 'button', {
       name: 'Elevation'
@@ -276,7 +276,7 @@ describe('sortable table options', () => {
 
   test('uses custom ascending text when provided', async () => {
     options.ascendingText = 'A to Z'
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
     const statusBox = queryByRole(component.parentElement, 'status')
@@ -289,7 +289,7 @@ describe('sortable table options', () => {
 
   test('uses custom descending text when provided', async () => {
     options.descendingText = 'Z to A'
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
     const statusBox = queryByRole(component.parentElement, 'status')
@@ -306,7 +306,7 @@ describe('sortable table options', () => {
       ascendingText: 'lowest to highest',
       descendingText: 'highest to lowest'
     }
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const elevationHeaderButton = queryByRole(component, 'button', {
       name: 'Elevation'
@@ -326,8 +326,8 @@ describe('sortable table options', () => {
 
   test('allows reinitialization of component without duplicating functionality', () => {
     const { component, options } = createComponent()
-    new MOJFrontend.SortableTable(options)
-    new MOJFrontend.SortableTable(options) // Initialize again
+    new SortableTable(options)
+    new SortableTable(options) // Initialize again
 
     // Check that we don't have duplicate buttons in headers
     const headers = component.querySelectorAll('th[aria-sort]')
@@ -339,14 +339,14 @@ describe('sortable table options', () => {
 
   test('maintains original sort when reinitialized', async () => {
     const { component, options } = createComponent()
-    new MOJFrontend.SortableTable(options)
+    new SortableTable(options)
 
     const elevationHeaderButton = queryByRole(component, 'button', {
       name: 'Elevation'
     })
     await user.click(elevationHeaderButton)
 
-    new MOJFrontend.SortableTable(options) // Reinitialize
+    new SortableTable(options) // Reinitialize
 
     const cells = component.querySelectorAll('tbody tr td:nth-child(2)')
     const values = Array.from(cells).map((cell) =>
diff --git a/src/moj/helpers.js b/src/moj/helpers.js
index 423cfec6..d1994ec3 100755
--- a/src/moj/helpers.js
+++ b/src/moj/helpers.js
@@ -1,4 +1,4 @@
-MOJFrontend.removeAttributeValue = function (el, attr, value) {
+function removeAttributeValue(el, attr, value) {
   let re, m
   if (el.getAttribute(attr)) {
     if (el.getAttribute(attr) === value) {
@@ -16,7 +16,7 @@ MOJFrontend.removeAttributeValue = function (el, attr, value) {
   }
 }
 
-MOJFrontend.addAttributeValue = function (el, attr, value) {
+function addAttributeValue(el, attr, value) {
   let re
   if (!el.getAttribute(attr)) {
     el.setAttribute(attr, value)
@@ -28,22 +28,22 @@ MOJFrontend.addAttributeValue = function (el, attr, value) {
   }
 }
 
-MOJFrontend.dragAndDropSupported = function () {
+function dragAndDropSupported() {
   const div = document.createElement('div')
   return typeof div.ondrop !== 'undefined'
 }
 
-MOJFrontend.formDataSupported = function () {
+function formDataSupported() {
   return typeof FormData === 'function'
 }
 
-MOJFrontend.fileApiSupported = function () {
+function fileApiSupported() {
   const input = document.createElement('input')
   input.type = 'file'
   return typeof input.files !== 'undefined'
 }
 
-MOJFrontend.nodeListForEach = function (nodes, callback) {
+function nodeListForEach(nodes, callback) {
   if (window.NodeList.prototype.forEach) {
     return nodes.forEach(callback)
   }
@@ -51,3 +51,12 @@ MOJFrontend.nodeListForEach = function (nodes, callback) {
     callback.call(window, nodes[i], i, nodes)
   }
 }
+
+module.exports = {
+  removeAttributeValue,
+  addAttributeValue,
+  dragAndDropSupported,
+  formDataSupported,
+  fileApiSupported,
+  nodeListForEach
+}
diff --git a/src/moj/version.js b/src/moj/version.js
index 12cb8f7e..36aaece2 100644
--- a/src/moj/version.js
+++ b/src/moj/version.js
@@ -1 +1,3 @@
-MOJFrontend.version = '0.0.0-development'
+const version = '0.0.0-development'
+
+module.exports = { version }