Make changes to components due to root changes

- Remove `root` from each component (now defined and assigned in GOVUKFrontendComponent) - Change references to `root` to be `this.root` - Add `augments` when component requires typing of the `root` to be set
alphagov · Oct 8, 2024 · 42c5276 · 42c5276
1 parent 7cb7b62
commit 42c5276
Show file tree

Hide file tree

Showing 13 changed files with 22 additions and 185 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -19,9 +19,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class Accordion extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {AccordionConfig}
@@ -116,20 +113,10 @@ export class Accordion extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Accordion,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       Accordion.defaults,
       config,
-      normaliseDataset(Accordion, $root.dataset)
+      normaliseDataset(Accordion, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n)

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -1,6 +1,5 @@
 import { mergeConfigs } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
@@ -11,9 +10,6 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
  * @preserve
  */
 export class Button extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ButtonConfig}
@@ -33,20 +29,10 @@ export class Button extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Button,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       Button.defaults,
       config,
-      normaliseDataset(Button, $root.dataset)
+      normaliseDataset(Button, this.$root.dataset)
     )
 
     this.$root.addEventListener('keydown', (event) => this.handleKeyDown(event))

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs
@@ -22,9 +22,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class CharacterCount extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $textarea
 
@@ -68,15 +65,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: CharacterCount,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $textarea = $root.querySelector('.govuk-js-character-count')
+    const $textarea = this.$root.querySelector('.govuk-js-character-count')
     if (
       !(
         $textarea instanceof HTMLTextAreaElement ||
@@ -92,7 +81,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
     }
 
     // Read config set using dataset ('data-' values)
-    const datasetConfig = normaliseDataset(CharacterCount, $root.dataset)
+    const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset)
 
     // To ensure data-attributes take complete precedence, even if they change
     // the type of count, we need to reset the `maxlength` and `maxwords` from
@@ -124,13 +113,12 @@ export class CharacterCount extends GOVUKFrontendComponent {
 
     this.i18n = new I18n(this.config.i18n, {
       // Read the fallback if necessary rather than have it set in the defaults
-      locale: closestAttributeValue($root, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     })
 
     // Determine the limit attribute (characters or words)
     this.maxLength = this.config.maxwords ?? this.config.maxlength ?? Infinity
 
-    this.$root = $root
     this.$textarea = $textarea
 
     const textareaDescriptionId = `${this.$textarea.id}-info`

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -7,9 +7,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Checkboxes extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $inputs
 
@@ -30,23 +27,14 @@ export class Checkboxes extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Checkboxes,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $inputs = $root.querySelectorAll('input[type="checkbox"]')
+    const $inputs = this.$root.querySelectorAll('input[type="checkbox"]')
     if (!$inputs.length) {
       throw new ElementError({
         component: Checkboxes,
         identifier: 'Form inputs (`<input type="checkbox">`)'
       })
     }
 
-    this.$root = $root
     this.$inputs = $inputs
 
     this.$inputs.forEach(($input) => {

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs
@@ -4,7 +4,6 @@ import {
   setFocus
 } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -16,9 +15,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class ErrorSummary extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ErrorSummaryConfig}
@@ -32,20 +28,10 @@ export class ErrorSummary extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: ErrorSummary,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       ErrorSummary.defaults,
       config,
-      normaliseDataset(ErrorSummary, $root.dataset)
+      normaliseDataset(ErrorSummary, this.$root.dataset)
     )
 
     /**

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
@@ -10,9 +10,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class ExitThisPage extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {ExitThisPageConfig}
@@ -81,15 +78,7 @@ export class ExitThisPage extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: ExitThisPage,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $button = $root.querySelector('.govuk-exit-this-page__button')
+    const $button = this.$root.querySelector('.govuk-exit-this-page__button')
     if (!($button instanceof HTMLAnchorElement)) {
       throw new ElementError({
         component: ExitThisPage,
@@ -102,11 +91,10 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     this.config = mergeConfigs(
       ExitThisPage.defaults,
       config,
-      normaliseDataset(ExitThisPage, $root.dataset)
+      normaliseDataset(ExitThisPage, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n)
-    this.$root = $root
     this.$button = $button
 
     const $skiplinkButton = document.querySelector(

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -8,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Header extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $menuButton
 
@@ -45,16 +42,7 @@ export class Header extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!$root) {
-      throw new ElementError({
-        component: Header,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-    const $menuButton = $root.querySelector('.govuk-js-header-toggle')
+    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle')
 
     // Headers don't necessarily have a navigation. When they don't, the menu
     // toggle won't be rendered by our macro (or may be omitted when writing

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
@@ -1,6 +1,5 @@
 import { mergeConfigs, setFocus } from '../../common/index.mjs'
 import { normaliseDataset } from '../../common/normalise-dataset.mjs'
-import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 /**
@@ -9,9 +8,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class NotificationBanner extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {NotificationBannerConfig}
@@ -25,20 +21,10 @@ export class NotificationBanner extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: NotificationBanner,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    this.$root = $root
-
     this.config = mergeConfigs(
       NotificationBanner.defaults,
       config,
-      normaliseDataset(NotificationBanner, $root.dataset)
+      normaliseDataset(NotificationBanner, this.$root.dataset)
     )
 
     /**

diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs b/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs
@@ -11,9 +11,6 @@ import { I18n } from '../../i18n.mjs'
  * @preserve
  */
 export class PasswordInput extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /**
    * @private
    * @type {PasswordInputConfig}
@@ -43,17 +40,9 @@ export class PasswordInput extends GOVUKFrontendComponent {
    * @param {PasswordInputConfig} [config] - Password input config
    */
   constructor($root, config = {}) {
-    super()
-
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: PasswordInput,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
+    super($root)
 
-    const $input = $root.querySelector('.govuk-js-password-input-input')
+    const $input = this.$root.querySelector('.govuk-js-password-input-input')
     if (!($input instanceof HTMLInputElement)) {
       throw new ElementError({
         component: PasswordInput,
@@ -69,7 +58,7 @@ export class PasswordInput extends GOVUKFrontendComponent {
       )
     }
 
-    const $showHideButton = $root.querySelector(
+    const $showHideButton = this.$root.querySelector(
       '.govuk-js-password-input-toggle'
     )
     if (!($showHideButton instanceof HTMLButtonElement)) {
@@ -87,19 +76,18 @@ export class PasswordInput extends GOVUKFrontendComponent {
       )
     }
 
-    this.$root = $root
     this.$input = $input
     this.$showHideButton = $showHideButton
 
     this.config = mergeConfigs(
       PasswordInput.defaults,
       config,
-      normaliseDataset(PasswordInput, $root.dataset)
+      normaliseDataset(PasswordInput, this.$root.dataset)
     )
 
     this.i18n = new I18n(this.config.i18n, {
       // Read the fallback if necessary rather than have it set in the defaults
-      locale: closestAttributeValue($root, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     })
 
     // Show the toggle button element

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -7,9 +7,6 @@ import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
  * @preserve
  */
 export class Radios extends GOVUKFrontendComponent {
-  /** @private */
-  $root
-
   /** @private */
   $inputs
 
@@ -30,23 +27,14 @@ export class Radios extends GOVUKFrontendComponent {
   constructor($root) {
     super($root)
 
-    if (!($root instanceof HTMLElement)) {
-      throw new ElementError({
-        component: Radios,
-        element: $root,
-        identifier: 'Root element (`$root`)'
-      })
-    }
-
-    const $inputs = $root.querySelectorAll('input[type="radio"]')
+    const $inputs = this.$root.querySelectorAll('input[type="radio"]')
     if (!$inputs.length) {
       throw new ElementError({
         component: Radios,
         identifier: 'Form inputs (`<input type="radio">`)'
       })
     }
 
-    this.$root = $root
     this.$inputs = $inputs
 
     this.$inputs.forEach(($input) => {