feat: extend from GOV.UK Frontend components

docs/assets/javascript/application.mjs

@@ -16,7 +16,7 @@ MOJFrontend.initAll()
 
 $(function () {
   $('[data-module="app-tabs"]').each(function (e, el) {
-    new Tabs($(el))
+    new Tabs(el)
   })
 
   $('[data-module="app-copy"]').each(function (e, el) {

docs/assets/javascript/cookies.mjs

@@ -1,15 +1,13 @@
-class Cookies {
-  constructor($module) {
-    if (!$module) {
-      return
-    }
+import { Component } from 'govuk-frontend'
 
-    this.$module = $module
+class Cookies extends Component {
+  constructor($root) {
+    super($root)
 
-    const $accept = this.$module.querySelector('[name="accept"]')
+    const $accept = this.$root.querySelector('[name="accept"]')
     $accept.addEventListener('click', this.accept.bind(this))
 
-    const $reject = this.$module.querySelector('[name="reject"]')
+    const $reject = this.$root.querySelector('[name="reject"]')
     $reject.addEventListener('click', this.reject.bind(this))
 
     const configEncoded = localStorage.getItem('mojpl-cookies')
@@ -18,7 +16,7 @@ class Cookies {
       this.load(config)
     } else {
       // If there is no config, show the cookie banner
-      this.$module.hidden = false
+      this.$root.hidden = false
     }
   }
 
@@ -35,8 +33,8 @@ class Cookies {
   }
 
   hideMessage() {
-    if (!this.$module.hasAttribute('data-persistent')) {
-      this.$module.hidden = true
+    if (!this.$root.hasAttribute('data-persistent')) {
+      this.$root.hidden = true
     }
   }
 
@@ -53,6 +51,11 @@ class Cookies {
 
     window.location.reload()
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'app-cookies'
 }
 
 function gtag() {

docs/assets/javascript/copy.mjs

@@ -1,19 +1,16 @@
 import ClipboardJS from 'clipboard'
+import { Component } from 'govuk-frontend'
 
-class Copy {
-  constructor($module) {
-    if (!$module) {
-      return
-    }
-
-    this.$module = $module
+class Copy extends Component {
+  constructor($root) {
+    super($root)
 
     const $button = document.createElement('button')
     $button.className = 'app-copy-button js-copy-button'
     $button.setAttribute('aria-live', 'assertive')
     $button.textContent = 'Copy code'
 
-    this.$module.insertBefore($button, this.$module.firstChild)
+    this.$root.insertBefore($button, this.$root.firstChild)
     this.copyAction()
   }
 
@@ -37,6 +34,11 @@ class Copy {
       }
     }
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'app-copy'
 }
 
 export default Copy

docs/assets/javascript/tabs.mjs

@@ -1,13 +1,21 @@
-class Tabs {
-  constructor(container) {
-    this.container = container
+import { Component } from 'govuk-frontend'
+
+class Tabs extends Component {
+  /** @type {JQuery<HTMLElement>} */
+  $module
+
+  constructor($root) {
+    super($root)
+
+    this.$module = $(this.$root)
     this.keys = { left: 37, right: 39, up: 38, down: 40 }
     this.cssHide = 'app-tabs__panel--hidden'
-    this.tabs = container.find('.app-tabs__tab')
-    this.panels = container.find('.app-tabs__panel')
-    this.container.on('click', '[role=tab]', $.proxy(this, 'onTabClick'))
-    this.container.on('keydown', '[role=tab]', $.proxy(this, 'onTabKeydown'))
-    this.container.on(
+    this.tabs = this.$module.find('.app-tabs__tab')
+    this.panels = this.$module.find('.app-tabs__panel')
+
+    this.$module.on('click', '[role=tab]', $.proxy(this, 'onTabClick'))
+    this.$module.on('keydown', '[role=tab]', $.proxy(this, 'onTabKeydown'))
+    this.$module.on(
       'click',
       '.app-tabs__close',
       $.proxy(this, 'onCloseButtonClick')
@@ -16,7 +24,7 @@ class Tabs {
   }
 
   hasTab(hash) {
-    return this.container.find(hash).length
+    return this.$module.find(hash).length
   }
 
   hideTab(tab) {
@@ -34,8 +42,8 @@ class Tabs {
   }
 
   setupHtml() {
-    this.container.find('.app-tabs__list').attr('role', 'tablist')
-    this.container.find('.app-tabs__list-item').attr('role', 'presentation')
+    this.$module.find('.app-tabs__list').attr('role', 'tablist')
+    this.$module.find('.app-tabs__list-item').attr('role', 'presentation')
     this.tabs.attr('role', 'tab')
     this.panels.attr('role', 'tabpanel')
     this.tabs.each(
@@ -128,7 +136,7 @@ class Tabs {
   }
 
   getCurrentTab() {
-    return this.container.find('[role=tab][aria-selected=true]')
+    return this.$module.find('[role=tab][aria-selected=true]')
   }
 
   // this is because IE doesn't always return the actual value but a relative full path
@@ -144,6 +152,11 @@ class Tabs {
     this.hideTab(currentTab)
     this.tabs.first().focus()
   }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'app-tabs'
 }
 
 export default Tabs

src/moj/all.mjs

@@ -141,17 +141,3 @@ export {
   SearchToggle,
   SortableTable
 }
-
-/**
- * Schema for component config
- *
- * @typedef {object} Schema
- * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
- */
-
-/**
- * Schema property for component config
- *
- * @typedef {object} SchemaProperty
- * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
- */