Merge pull request #2826 from alphagov/kg-i18n-js-constructor-options

Add support for localisation via JavaScript configuration to Accordion component

CHANGELOG.md

@@ -51,7 +51,12 @@ If you're not using the Nunjucks macro, you can customise these using data-* att
 - `data-i18n.show-all-sections`
 - `data-i18n.hide-all-sections`
 
-This was added in [pull request #2818: Add support for localisation via data-* attributes to Accordion component](https://github.com/alphagov/govuk-frontend/pull/2818).
+You can also change this text for all instances of the Accordion using a JavaScript configuration object. See [our guidance on localising GOV.UK Frontend](https://design-system.service.gov.uk/get-started/localisation/) for how to do this. 
+
+This was added in pull requests:
+
+- [#2818: Add support for localisation via data-* attributes to Accordion component](https://github.com/alphagov/govuk-frontend/pull/2818)
+- [#2826: Add support for localisation via JavaScript configuration to Accordion component](https://github.com/alphagov/govuk-frontend/pull/2826)
 
 ### Recommended changes
 

app/views/examples/translated/index.njk

@@ -870,3 +870,19 @@
     iconFallbackText: "Rhybudd"
   }) }}
 {% endblock %}
+
+{% block bodyEnd %}
+  <script src="/public/all.js"></script>
+  <script>
+    window.GOVUKFrontend.initAll({
+      accordion: {
+        i18n: {
+          showAllSections: "Dangos adrannau",
+          hideAllSections: "Cuddio adrannau",
+        },
+        "i18n.showSection": "Dangos<span class=\"govuk-visually-hidden\"> adran</span>",
+        "i18n.hideSection": "Cuddio<span class=\"govuk-visually-hidden\"> adran</span>",
+      }
+    })
+  </script>
+{% endblock %}

src/govuk/all.mjs

@@ -26,7 +26,7 @@ function initAll (options) {
 
   var $accordions = scope.querySelectorAll('[data-module="govuk-accordion"]')
   nodeListForEach($accordions, function ($accordion) {
-    new Accordion($accordion).init()
+    new Accordion($accordion, options.accordion).init()
   })
 
   var $details = scope.querySelectorAll('[data-module="govuk-details"]')

src/govuk/common.unit.test.mjs

@@ -53,6 +53,16 @@ describe('Common JS utilities', () => {
       })
     })
 
+    it('ignores empty objects when merging', () => {
+      const test1 = mergeConfigs({}, config1)
+      const test2 = mergeConfigs(config1, {}, config2)
+      const test3 = mergeConfigs(config3, {})
+
+      expect(test1).toEqual(mergeConfigs(config1))
+      expect(test2).toEqual(mergeConfigs(config1, config2))
+      expect(test3).toEqual(mergeConfigs(config3))
+    })
+
     it('prioritises the last parameter provided', () => {
       const config = mergeConfigs(config1, config2, config3, config1)
       expect(config).toEqual({

src/govuk/components/accordion/accordion.mjs

@@ -20,7 +20,7 @@ import I18n from '../../i18n.mjs'
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
 
-function Accordion ($module) {
+function Accordion ($module, config) {
   this.$module = $module
   this.$sections = $module.querySelectorAll('.govuk-accordion__section')
   this.$showAllButton = ''
@@ -34,7 +34,7 @@ function Accordion ($module) {
       showSection: 'Show<span class="govuk-visually-hidden"> this section</span>'
     }
   }
-  this.config = mergeConfigs(defaultConfig, $module.dataset)
+  this.config = mergeConfigs(defaultConfig, config || {}, $module.dataset)
   this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))
 
   this.controlsClass = 'govuk-accordion__controls'

src/govuk/components/accordion/accordion.test.js

@@ -272,6 +272,14 @@ describe('/components/accordion', () => {
           expect(allSectionsToggleText).toEqual(showAllSectionsDataAttribute)
         })
 
+        it('should localise "Show all sections" based on JavaScript configuration', async () => {
+          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+
+          const allSectionsToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__show-all-text').innerHTML)
+
+          expect(allSectionsToggleText).toBe('Dangos adrannau')
+        })
+
         it('should localise "Hide all sections" based on data attribute', async () => {
           await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
@@ -283,6 +291,15 @@ describe('/components/accordion', () => {
           expect(allSectionsToggleText).toEqual(hideAllSectionsDataAttribute)
         })
 
+        it('should localise "Hide all sections" based on JavaScript configuration', async () => {
+          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await page.click('.govuk-accordion .govuk-accordion__show-all')
+
+          const allSectionsToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__show-all-text').innerHTML)
+
+          expect(allSectionsToggleText).toBe('Cuddio adrannau')
+        })
+
         it('should localise "Show section" based on data attribute', async () => {
           await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
 
@@ -292,6 +309,14 @@ describe('/components/accordion', () => {
           expect(firstSectionToggleText).toEqual(showSectionDataAttribute)
         })
 
+        it('should localise "Show section" based on JavaScript configuration', async () => {
+          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+
+          const firstSectionToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle-text').innerHTML)
+
+          expect(firstSectionToggleText).toBe('Dangos<span class="govuk-visually-hidden"> adran</span>')
+        })
+
         it('should localise "Hide section" based on data attribute', async () => {
           await page.goto(baseUrl + '/components/accordion/with-translations/preview', { waitUntil: 'load' })
           await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
@@ -301,6 +326,15 @@ describe('/components/accordion', () => {
 
           expect(firstSectionToggleText).toEqual(hideSectionDataAttribute)
         })
+
+        it('should localise "Hide section" based on JavaScript configuration', async () => {
+          await page.goto(baseUrl + '/examples/translated', { waitUntil: 'load' })
+          await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(2) .govuk-accordion__section-header')
+
+          const firstSectionToggleText = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-toggle-text').innerHTML)
+
+          expect(firstSectionToggleText).toBe('Cuddio<span class="govuk-visually-hidden"> adran</span>')
+        })
       })
     })
   })