Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for localisation via JavaScript configuration to Accordion component #2826

Merged
merged 5 commits into from
Sep 12, 2022
Merged

Add support for localisation via JavaScript configuration to Accordion component #2826

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a1f9b3
Add JS config option to accordion
querkmachine Sep 2, 2022
9c81644
Add ability to pass translation strings into accordion using JS
querkmachine Sep 2, 2022
9a8b65c
Add unit test for passing empty objects into mergeConfigs function
querkmachine Sep 6, 2022
61e0aa7
Add changelog entry
querkmachine Sep 7, 2022
9e4d2bf
Simplify hide all button label test
querkmachine Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions app/views/examples/translated/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion src/govuk/all.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]')
Expand Down
4 changes: 2 additions & 2 deletions src/govuk/components/accordion/accordion.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ''
Expand All @@ -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)
querkmachine marked this conversation as resolved.
Show resolved Hide resolved
this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))

this.controlsClass = 'govuk-accordion__controls'
Expand Down
37 changes: 37 additions & 0 deletions src/govuk/components/accordion/accordion.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -283,6 +291,18 @@ 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__section:nth-of-type(2) .govuk-accordion__section-header')
await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(3) .govuk-accordion__section-header')
await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(4) .govuk-accordion__section-header')
await page.click('.govuk-accordion .govuk-accordion__section:nth-of-type(5) .govuk-accordion__section-header')
querkmachine marked this conversation as resolved.
Show resolved Hide resolved

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' })

Expand All @@ -292,6 +312,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')
Expand All @@ -301,6 +329,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>')
})
})
})
})
Expand Down