diff --git a/package-lock.json b/package-lock.json index bfc690a1c1..ae920540e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "accessible-autocomplete": "^3.0.1", "clipboard": "^2.0.11", - "govuk-frontend": "^5.7.1", + "govuk-frontend": "github:alphagov/govuk-frontend#9afb2596d", "iframe-resizer": "^4.4.5", "lunr": "^2.3.9" }, @@ -9392,9 +9392,9 @@ } }, "node_modules/govuk-frontend": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.7.1.tgz", - "integrity": "sha512-jF1cq5rn57kxZmJRprUZhTQ31zaBBK4b5AyeJaPX3Yhg22lk90Mx/dQLvOk/ycV3wM7e0y+s4IPvb2fFaPlCGg==", + "version": "5.7.1-export-config-preview", + "resolved": "git+ssh://git@github.com/alphagov/govuk-frontend.git#9afb2596d491c51605334c949d004fba46c18ebc", + "license": "MIT", "engines": { "node": ">= 4.2.0" } diff --git a/package.json b/package.json index 5d536b3680..1f84b40cd3 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "dependencies": { "accessible-autocomplete": "^3.0.1", "clipboard": "^2.0.11", - "govuk-frontend": "^5.7.1", + "govuk-frontend": "github:alphagov/govuk-frontend#9afb2596d", "iframe-resizer": "^4.4.5", "lunr": "^2.3.9" }, diff --git a/src/javascripts/components/cookie-banner.mjs b/src/javascripts/components/cookie-banner.mjs index 0d8887a9ef..eeb8f62b15 100644 --- a/src/javascripts/components/cookie-banner.mjs +++ b/src/javascripts/components/cookie-banner.mjs @@ -1,4 +1,4 @@ -import { Component } from 'govuk-frontend' +import { ConfigurableComponent } from 'govuk-frontend' import * as CookieFunctions from './cookie-functions.mjs' @@ -12,12 +12,12 @@ const cookieConfirmationRejectSelector = '.js-cookie-banner-confirmation-reject' /** * Website cookie banner */ -class CookieBanner extends Component { +class CookieBanner extends ConfigurableComponent { /** * Check support of CookieBanner */ static checkSupport() { - Component.checkSupport() + super.checkSupport() if (CookieBanner.onCookiesPage()) { throw Error('Cancelled initialisation as on cookie page') @@ -34,14 +34,13 @@ class CookieBanner extends Component { } static moduleName = 'govuk-cookie-banner' + /** * @param {Element} $module - HTML element + * @param {CookieBannerConfig} config - cookie banner config */ - constructor($module) { - super($module) - - this.cookieCategory = - (this.$root.dataset && this.$root.dataset.cookieCategory) || 'analytics' + constructor($module, config) { + super($module, config) const $acceptButton = $module.querySelector(cookieBannerAcceptSelector) const $rejectButton = $module.querySelector(cookieBannerRejectSelector) @@ -109,7 +108,7 @@ class CookieBanner extends Component { */ acceptCookies() { // Do actual cookie consent bit - CookieFunctions.setConsentCookie({ [this.cookieCategory]: true }) + CookieFunctions.setConsentCookie({ [this.config.cookieCategory]: true }) // Hide banner and show confirmation message this.$cookieMessage.setAttribute('hidden', 'true') @@ -121,7 +120,7 @@ class CookieBanner extends Component { */ rejectCookies() { // Do actual cookie consent bit - CookieFunctions.setConsentCookie({ [this.cookieCategory]: false }) + CookieFunctions.setConsentCookie({ [this.config.cookieCategory]: false }) // Hide banner and show confirmation message this.$cookieMessage.setAttribute('hidden', 'true') @@ -147,6 +146,23 @@ class CookieBanner extends Component { confirmationMessage.focus() } + + static defaults = { + cookieCategory: 'analytics' + } + + static schema = { + properties: { + cookieCategory: { type: 'string' } + } + } } +/** + * Cookie banner config + * + * @typedef {object} CookieBannerConfig + * @property {string} [cookieCategory] - category of cookie that the user is accepting/declining + */ + export default CookieBanner