Skip to content

Commit

Permalink
Cookie banner extends ConfigurableComponent
Browse files Browse the repository at this point in the history
Make the cookie banner extends `ConfigurableComponent` which is now exported
from the latest version of `govuk-frontend`. Remove redundant code and
update references to the config. Use the `defaults` functionality of
`ConfigurableComponent` and provide a `schema`.
  • Loading branch information
patrickpatrickpatrick committed Nov 15, 2024
1 parent 45857ce commit 62e2fd9
Showing 1 changed file with 26 additions and 10 deletions.
36 changes: 26 additions & 10 deletions src/javascripts/components/cookie-banner.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from 'govuk-frontend'
import { ConfigurableComponent } from 'govuk-frontend'

import * as CookieFunctions from './cookie-functions.mjs'

Expand All @@ -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')
Expand All @@ -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)
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand All @@ -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

0 comments on commit 62e2fd9

Please sign in to comment.