Merge pull request #4205 from alphagov/use-new-components

Update components to use `Component`
alphagov · Oct 11, 2024 · 25885b2 · 25885b2
2 parents bcccc94 + 04a7ba2
commit 25885b2
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 148 deletions.
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,9 @@
+/**  
+ * As govuk-frontend provides no types, TypeScript will type its exports as `any`,
+ * but be unable to acknowledge fields inherited from parent classes  
+ * leading to errors when trying to assign or use them.  
+ * 
+ * TypeScript's shorthand ambient modules seem to also make inherited fields typed as `any`.
+ * https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#shorthand-ambient-module-declarations
+ */
+declare module "govuk-frontend";
diff --git a/src/javascripts/application.mjs b/src/javascripts/application.mjs
@@ -48,7 +48,7 @@ createAll(Copy)
 new OptionsTable()
 
 // Initialise mobile navigation
-new Navigation(document)
+createAll(Navigation)
 
 // Initialise scrollable container handling
 createAll(ScrollContainer)
@@ -70,7 +70,11 @@ const lazyEmbedObserver = new IntersectionObserver(function (
 ) {
   entries.forEach(function (entry) {
     if (entry.isIntersecting) {
-      new EmbedCard(entry.target)
+      try {
+        new EmbedCard(entry.target)
+      } catch (error) {
+        console.log(error)
+      }
     }
   })
 })

diff --git a/src/javascripts/components/back-to-top.mjs b/src/javascripts/components/back-to-top.mjs
@@ -1,34 +1,28 @@
+import { Component } from 'govuk-frontend'
+
 /**
  * Website back to top link
  */
-class BackToTop {
+class BackToTop extends Component {
   static moduleName = 'app-back-to-top'
 
   /**
    * @param {Element} $module - HTML element
    */
   constructor($module) {
-    if (
-      !($module instanceof HTMLElement) ||
-      !document.body.classList.contains('govuk-frontend-supported')
-    ) {
-      return this
-    }
+    super($module)
 
-    this.$module = $module
+    const $footer = document.querySelector('.app-footer')
+    const $subNav = document.querySelector('.app-subnav')
 
     // Check if we can use Intersection Observers
     if (!('IntersectionObserver' in window)) {
       // If there's no support fallback to regular behaviour
       // Since JavaScript is enabled we can remove the default hidden state
-      this.$module.classList.remove('app-back-to-top--hidden')
+      this.$root.classList.remove('app-back-to-top--hidden')
       return this
     }
 
-    const $footer = document.querySelector('.app-footer')
-    const $subNav = document.querySelector('.app-subnav')
-
-    // Check if there is anything to observe
     if (!$footer || !$subNav) {
       return this
     }
@@ -53,17 +47,17 @@ class BackToTop {
 
       // If the subnav or the footer not visible then fix the back to top link to follow the user
       if (subNavIsIntersecting || footerIsIntersecting) {
-        this.$module.classList.remove('app-back-to-top--fixed')
+        this.$root.classList.remove('app-back-to-top--fixed')
       } else {
-        this.$module.classList.add('app-back-to-top--fixed')
+        this.$root.classList.add('app-back-to-top--fixed')
       }
 
       // If the subnav is visible but you can see it all at once, then a back to top link is likely not as useful.
       // We hide the link but make it focusable for screen readers users who might still find it useful.
       if (subNavIsIntersecting && subNavIntersectionRatio === 1) {
-        this.$module.classList.add('app-back-to-top--hidden')
+        this.$root.classList.add('app-back-to-top--hidden')
       } else {
-        this.$module.classList.remove('app-back-to-top--hidden')
+        this.$root.classList.remove('app-back-to-top--hidden')
       }
     })
 

diff --git a/src/javascripts/components/cookie-banner.mjs b/src/javascripts/components/cookie-banner.mjs
@@ -1,3 +1,5 @@
+import { Component } from 'govuk-frontend'
+
 import * as CookieFunctions from './cookie-functions.mjs'
 
 const cookieBannerAcceptSelector = '.js-cookie-banner-accept'
@@ -10,26 +12,36 @@ const cookieConfirmationRejectSelector = '.js-cookie-banner-confirmation-reject'
 /**
  * Website cookie banner
  */
-class CookieBanner {
+class CookieBanner extends Component {
+  /**
+   * Check support of CookieBanner
+   */
+  static checkSupport() {
+    Component.checkSupport()
+
+    if (CookieBanner.onCookiesPage()) {
+      throw Error('Cancelled initialisation as on cookie page')
+    }
+  }
+
+  /**
+   * Check if on the Cookies page
+   *
+   * @returns {boolean} Returns true if on the Cookies page
+   */
+  static onCookiesPage() {
+    return window.location.pathname === '/cookies/'
+  }
+
   static moduleName = 'govuk-cookie-banner'
   /**
    * @param {Element} $module - HTML element
    */
   constructor($module) {
-    if (
-      !($module instanceof HTMLElement) ||
-      !document.body.classList.contains('govuk-frontend-supported') ||
-      // Exit if we're on the cookies page to avoid circular journeys
-      this.onCookiesPage()
-    ) {
-      return this
-    }
+    super($module)
 
-    this.$cookieBanner = $module
     this.cookieCategory =
-      (this.$cookieBanner.dataset &&
-        this.$cookieBanner.dataset.cookieCategory) ||
-      'analytics'
+      (this.$root.dataset && this.$root.dataset.cookieCategory) || 'analytics'
 
     const $acceptButton = $module.querySelector(cookieBannerAcceptSelector)
     const $rejectButton = $module.querySelector(cookieBannerRejectSelector)
@@ -60,7 +72,7 @@ class CookieBanner {
     this.$cookieMessage = $cookieMessage
     this.$cookieConfirmationAccept = $cookieConfirmationAccept
     this.$cookieConfirmationReject = $cookieConfirmationReject
-    this.$cookieBannerHideButtons = $cookieBannerHideButtons
+    this.$rootHideButtons = $cookieBannerHideButtons
 
     // Show the cookie banner to users who have not consented or have an
     // outdated consent cookie
@@ -74,13 +86,13 @@ class CookieBanner {
       // set previously
       CookieFunctions.resetCookies()
 
-      this.$cookieBanner.removeAttribute('hidden')
+      this.$root.removeAttribute('hidden')
     }
 
     this.$acceptButton.addEventListener('click', () => this.acceptCookies())
     this.$rejectButton.addEventListener('click', () => this.rejectCookies())
 
-    this.$cookieBannerHideButtons.forEach(($cookieBannerHideButton) => {
+    this.$rootHideButtons.forEach(($cookieBannerHideButton) => {
       $cookieBannerHideButton.addEventListener('click', () => this.hideBanner())
     })
   }
@@ -89,7 +101,7 @@ class CookieBanner {
    * Hide banner
    */
   hideBanner() {
-    this.$cookieBanner.setAttribute('hidden', 'true')
+    this.$root.setAttribute('hidden', 'true')
   }
 
   /**
@@ -135,15 +147,6 @@ class CookieBanner {
 
     confirmationMessage.focus()
   }
-
-  /**
-   * Check if on the Cookies page
-   *
-   * @returns {boolean} Returns true if on the Cookies page
-   */
-  onCookiesPage() {
-    return window.location.pathname === '/cookies/'
-  }
 }
 
 export default CookieBanner
diff --git a/src/javascripts/components/cookies-page.mjs b/src/javascripts/components/cookies-page.mjs
@@ -1,24 +1,19 @@
+import { Component } from 'govuk-frontend'
+
 import { getConsentCookie, setConsentCookie } from './cookie-functions.mjs'
 
 /**
  * Website cookies page
  */
-class CookiesPage {
+class CookiesPage extends Component {
   static moduleName = 'app-cookies-page'
   /**
    * @param {Element} $module - HTML element
    */
   constructor($module) {
-    if (
-      !($module instanceof HTMLElement) ||
-      !document.body.classList.contains('govuk-frontend-supported')
-    ) {
-      return this
-    }
-
-    this.$page = $module
+    super($module)
 
-    const $cookieForm = this.$page.querySelector('.js-cookies-page-form')
+    const $cookieForm = this.$root.querySelector('.js-cookies-page-form')
     if (!($cookieForm instanceof HTMLFormElement)) {
       return this
     }
@@ -43,7 +38,7 @@ class CookiesPage {
     this.$cookieFormFieldsets = $cookieFormFieldsets
     this.$cookieFormButton = $cookieFormButton
 
-    const $successNotification = this.$page.querySelector(
+    const $successNotification = this.$root.querySelector(
       '.js-cookies-page-success'
     )
     if ($successNotification instanceof HTMLElement) {

diff --git a/src/javascripts/components/copy.mjs b/src/javascripts/components/copy.mjs
@@ -1,26 +1,30 @@
 import ClipboardJS from 'clipboard'
+import { Component } from 'govuk-frontend'
 
 /**
  * Copy button for code examples
  */
-class Copy {
+class Copy extends Component {
   static moduleName = 'app-copy'
 
   /**
-   * @param {Element} $module - HTML element
+   * Check if ClipboardJS is supported
    */
-  constructor($module) {
-    if (
-      !($module instanceof HTMLElement) ||
-      !document.body.classList.contains('govuk-frontend-supported') ||
-      !ClipboardJS.isSupported()
-    ) {
-      return this
+  static checkSupport() {
+    Component.checkSupport()
+
+    if (!ClipboardJS.isSupported()) {
+      throw Error('ClipboardJS not supported in this browser')
     }
+  }
 
-    this.$module = $module
+  /**
+   * @param {Element} $module - HTML element
+   */
+  constructor($module) {
+    super($module)
 
-    this.$pre = this.$module.querySelector('pre')
+    this.$pre = this.$root.querySelector('pre')
     // TODO: Throw once GOV.UK Frontend exports its errors
 
     /** @type {number | null} */
@@ -34,8 +38,8 @@ class Copy {
     this.$status.className = 'govuk-visually-hidden'
     this.$status.setAttribute('aria-live', 'assertive')
 
-    this.$module.prepend(this.$status)
-    this.$module.prepend(this.$button)
+    this.$root.prepend(this.$status)
+    this.$root.prepend(this.$button)
 
     const $clipboard = new ClipboardJS(this.$button, {
       target: () => this.$pre

diff --git a/src/javascripts/components/embed-card.mjs b/src/javascripts/components/embed-card.mjs
@@ -1,21 +1,31 @@
+import { Component } from 'govuk-frontend'
+
 import { getConsentCookie } from './cookie-functions.mjs'
 
 /**
  * Embed Card Youtube functionality
  */
-class EmbedCard {
+class EmbedCard extends Component {
   /**
-   * @param {Element} $module - HTML element
+   * Check EmbedCard support
    */
-  constructor($module) {
-    if (
-      !($module instanceof HTMLElement) ||
-      !document.body.classList.contains('govuk-frontend-supported')
-    ) {
-      return this
+  static checkSupport() {
+    Component.checkSupport()
+
+    const consentCookie = getConsentCookie()
+
+    if (!consentCookie || (consentCookie && !consentCookie.campaign)) {
+      throw Error('Campaign consent cookies not accepted')
     }
+  }
+
+  static moduleName = 'app-embed-card'
 
-    this.$module = $module
+  /**
+   * @param {Element} $module - HTML element
+   */
+  constructor($module) {
+    super($module)
 
     this.replacePlaceholder()
   }
@@ -26,17 +36,17 @@ class EmbedCard {
    * Replaces the placeholder with the iframe if cookies are set.
    */
   replacePlaceholder() {
-    if (this.$module.querySelector('iframe')) {
+    if (this.$root.querySelector('iframe')) {
       return
     }
 
     const consentCookie = getConsentCookie()
 
     if (consentCookie && consentCookie.campaign) {
-      const placeholder = this.$module.querySelector(
+      const placeholder = this.$root.querySelector(
         '.app-embed-card__placeholder'
       )
-      const placeholderText = this.$module.querySelector(
+      const placeholderText = this.$root.querySelector(
         '.app-embed-card__placeholder-text'
       )
 
@@ -51,7 +61,7 @@ class EmbedCard {
 
       placeholder.remove()
 
-      const iframeContainer = this.$module.querySelector(
+      const iframeContainer = this.$root.querySelector(
         '.app-embed-card__placeholder-iframe-container'
       )
       iframeContainer.appendChild(iframe)
@@ -65,6 +75,7 @@ class EmbedCard {
    *
    * @param {string} ytId - YouTube ID
    * @param {string} title - Title for iFrame (for screen readers)
+   * @returns {HTMLElement} - iframe element
    */
   createIframe(ytId, title) {
     const iframe = document.createElement('IFRAME')