Allow notification banner configuration to be passed at construction

Update the notification banner to merge the config from the config object passed at the point of construction with any data attributes, following the conventions established as part of #2808.

Co-authored-by: Romaric Pascal <[email protected]>

src/govuk/components/notification-banner/notification-banner.mjs

@@ -1,7 +1,17 @@
 import '../../vendor/polyfills/Event.mjs' // addEventListener
 
-function NotificationBanner ($module) {
+import { mergeConfigs, normaliseDataset } from '../../common.mjs'
+function NotificationBanner ($module, config) {
   this.$module = $module
+
+  var defaultConfig = {
+    disableAutoFocus: false
+  }
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
 }
 
 /**
@@ -30,7 +40,7 @@ NotificationBanner.prototype.init = function () {
 NotificationBanner.prototype.setFocus = function () {
   var $module = this.$module
 
-  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+  if (this.config.disableAutoFocus) {
     return
   }
 

src/govuk/components/notification-banner/notification-banner.test.js

@@ -1,4 +1,7 @@
 /* eslint-env jest */
+const { renderHtml, getExamples } = require('../../../../lib/jest-helpers')
+
+const examples = getExamples('notification-banner')
 
 const configPaths = require('../../../../config/paths.json')
 const PORT = configPaths.ports.test
@@ -33,18 +36,52 @@ describe('/components/notification-banner/with-type-as-success', () => {
 })
 
 describe('components/notification-banner/auto-focus-disabled,-with-type-as-success/', () => {
-  describe('when auto-focus is disabled', () => {
-    it('does not have a tabindex attribute', async () => {
+  describe('when auto-focus is disabled using data attributes', () => {
+    beforeAll(async () => {
       await page.goto(`${baseUrl}/components/notification-banner/auto-focus-disabled,-with-type-as-success/preview`, { waitUntil: 'load' })
+    })
 
+    it('does not have a tabindex attribute', async () => {
       const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
       expect(tabindex).toBeNull()
     })
 
     it('does not focus the notification banner', async () => {
-      await page.goto(`${baseUrl}/components/notification-banner/auto-focus-disabled,-with-type-as-success/preview`, { waitUntil: 'load' })
+      const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+      expect(activeElement).not.toBe('govuk-notification-banner')
+    })
+  })
 
+  describe('when auto-focus is disabled using JavaScript configuration', () => {
+    beforeAll(async () => {
+      await page.goto(`${baseUrl}/tests/boilerplate`, { waitUntil: 'load' })
+
+      // Render the notification banner Nunjucks template
+      const html = renderHtml('notification-banner', examples['with type as success'])
+
+      // Inject rendered HTML into the slot
+      await page.$eval('#slot', (slot, htmlForSlot) => {
+        slot.innerHTML = htmlForSlot
+      }, html)
+
+      // Run a script to init the JavaScript component
+      await page.evaluate(() => {
+        var $notificationBanner = document.querySelector('[data-module="govuk-notification-banner"]')
+        new window.GOVUKFrontend.NotificationBanner($notificationBanner, {
+          disableAutoFocus: true
+        }).init()
+      })
+    })
+
+    it('does not have a tabindex attribute', async () => {
+      const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+
+      expect(tabindex).toBeNull()
+    })
+
+    it('does not focus the notification banner', async () => {
       const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
 
       expect(activeElement).not.toBe('govuk-notification-banner')