diff --git a/client/.eslintrc.js b/client/.eslintrc.js index 9bfed8e1..421b7217 100644 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -4,16 +4,16 @@ module.exports = { es2021: false, node: true, }, - extends: 'eslint:recommended', + extends: "eslint:recommended", overrides: [], parserOptions: { ecmaVersion: 2020, - sourceType: 'module', - project: 'tsconfig.json', + sourceType: "module", + project: "tsconfig.json", }, rules: { - semi: ['error', 'never'], - 'no-extra-semi': ['off'], + semi: ["error", "never"], + "no-extra-semi": ["off"], }, - ignorePatterns: ['src/*.test.js'], -} + ignorePatterns: ["src/*.test.js"], +}; diff --git a/client/examples/commonJS-usage/index.js b/client/examples/commonJS-usage/index.js index b65f2970..0807333a 100644 --- a/client/examples/commonJS-usage/index.js +++ b/client/examples/commonJS-usage/index.js @@ -16,43 +16,43 @@ * endpoint from which the consent status can be fetched or to which it can be sent. */ -const { GovSingleConsent } = require('govuk-single-consent') +const { GovSingleConsent } = require("govuk-single-consent"); -const SINGLE_CONSENT_API_URL = 'dummy-url.gov.uk' +const SINGLE_CONSENT_API_URL = "dummy-url.gov.uk"; const onConsentsUpdated = (consents, consentsPreferencesSet, error) => { // Do something with the consents // e.g if (consentsPreferencesSet) { - hideCookieBanner() + hideCookieBanner(); } if (error) { - sendErrorLog(error) + sendErrorLog(error); } -} +}; const singleConsent = new GovSingleConsent( onConsentsUpdated, - SINGLE_CONSENT_API_URL -) + SINGLE_CONSENT_API_URL, +); /** * Some Cookie Banner Event Handlers */ const onRejectAllButtonClick = () => { - singleConsent.setConsents(GovSingleConsent.REJECT_ALL) -} + singleConsent.setConsents(GovSingleConsent.REJECT_ALL); +}; const onAcceptAllButtonClick = () => { - singleConsent.setConsents(GovSingleConsent.ACCEPT_ALL) -} + singleConsent.setConsents(GovSingleConsent.ACCEPT_ALL); +}; const onAcceptCustomConsentsButtonClick = (customConsents) => { - singleConsent.setConsents(customConsents) -} + singleConsent.setConsents(customConsents); +}; /** * Some Logic That Depends On Consents @@ -60,7 +60,7 @@ const onAcceptCustomConsentsButtonClick = (customConsents) => { const sendToAnalytics = (event) => { if (!GovSingleConsent.hasConsentedToUsage()) { - return + return; } // Send event to analytics here -} +}; diff --git a/client/examples/cookie-banner.js b/client/examples/cookie-banner.js index 578df349..9b454151 100644 --- a/client/examples/cookie-banner.js +++ b/client/examples/cookie-banner.js @@ -1,110 +1,110 @@ /* global GovSingleConsent */ -;(function () { +(function () { function CookieBanner($component) { - this.$component = $component + this.$component = $component; } CookieBanner.prototype.init = function () { - this.$component.hidden = true + this.$component.hidden = true; this.$component.message = this.$component.querySelector( - '.js-cookie-banner-message' - ) + ".js-cookie-banner-message", + ); this.$component.confirmAccept = this.$component.querySelector( - '.js-cookie-banner-confirmation-accept' - ) + ".js-cookie-banner-confirmation-accept", + ); this.$component.confirmReject = this.$component.querySelector( - '.js-cookie-banner-confirmation-reject' - ) + ".js-cookie-banner-confirmation-reject", + ); - this.$component.setCookieConsent = this.acceptCookies.bind(this) + this.$component.setCookieConsent = this.acceptCookies.bind(this); this.$component.showAcceptConfirmation = - this.showAcceptConfirmation.bind(this) + this.showAcceptConfirmation.bind(this); this.$component - .querySelector('[data-accept-cookies]') - .addEventListener('click', this.$component.setCookieConsent) - this.$component.rejectCookieConsent = this.rejectCookies.bind(this) + .querySelector("[data-accept-cookies]") + .addEventListener("click", this.$component.setCookieConsent); + this.$component.rejectCookieConsent = this.rejectCookies.bind(this); this.$component.showRejectConfirmation = - this.showRejectConfirmation.bind(this) + this.showRejectConfirmation.bind(this); this.$component - .querySelector('[data-reject-cookies]') - .addEventListener('click', this.$component.rejectCookieConsent) + .querySelector("[data-reject-cookies]") + .addEventListener("click", this.$component.rejectCookieConsent); var hideBannerBtnNodes = this.$component.querySelectorAll( - '[data-hide-cookie-message]' - ) + "[data-hide-cookie-message]", + ); for (var i = 0, length = hideBannerBtnNodes.length; i < length; i++) { hideBannerBtnNodes[i].addEventListener( - 'click', - this.hideBanner.bind(this) - ) + "click", + this.hideBanner.bind(this), + ); } function onConsentsUpdated(consents, consentsPreferencesSet, error) { if (consentsPreferencesSet) { - this.hideBanner() + this.hideBanner(); } else { - this.showBanner() + this.showBanner(); } if (error) { - console.error(error) + console.error(error); } } this.singleConsent = new GovSingleConsent( onConsentsUpdated.bind(this), - window.GovSingleConsentApiURL - ) - } + window.GovSingleConsentApiURL, + ); + }; CookieBanner.prototype.showBanner = function () { var acceptedAdditionalCookies = GovSingleConsent.hasConsentedToUsage() || GovSingleConsent.hasConsentedToCampaigns() || - GovSingleConsent.hasConsentedToSettings() + GovSingleConsent.hasConsentedToSettings(); - this.$component.hidden = false + this.$component.hidden = false; this.$component.confirmAccept.hidden = - !GovSingleConsent.isConsentPreferencesSet() || !acceptedAdditionalCookies + !GovSingleConsent.isConsentPreferencesSet() || !acceptedAdditionalCookies; this.$component.confirmReject.hidden = - !GovSingleConsent.isConsentPreferencesSet() || acceptedAdditionalCookies - } + !GovSingleConsent.isConsentPreferencesSet() || acceptedAdditionalCookies; + }; CookieBanner.prototype.hideBanner = function () { - this.$component.hidden = true - } + this.$component.hidden = true; + }; CookieBanner.prototype.acceptCookies = function () { - this.$component.showAcceptConfirmation() - this.singleConsent.setConsents(GovSingleConsent.ACCEPT_ALL) - } + this.$component.showAcceptConfirmation(); + this.singleConsent.setConsents(GovSingleConsent.ACCEPT_ALL); + }; CookieBanner.prototype.showAcceptConfirmation = function () { - this.$component.message.hidden = true - this.$component.confirmAccept.hidden = false - this.$component.confirmAccept.focus() - } + this.$component.message.hidden = true; + this.$component.confirmAccept.hidden = false; + this.$component.confirmAccept.focus(); + }; CookieBanner.prototype.rejectCookies = function () { - this.$component.showRejectConfirmation() - this.singleConsent.setConsents(GovSingleConsent.REJECT_ALL) - } + this.$component.showRejectConfirmation(); + this.singleConsent.setConsents(GovSingleConsent.REJECT_ALL); + }; CookieBanner.prototype.showRejectConfirmation = function () { - this.$component.message.hidden = true - this.$component.confirmReject.hidden = false - this.$component.confirmReject.focus() - } + this.$component.message.hidden = true; + this.$component.confirmReject.hidden = false; + this.$component.confirmReject.focus(); + }; - window.CookieBanner = CookieBanner + window.CookieBanner = CookieBanner; - document.addEventListener('DOMContentLoaded', function () { + document.addEventListener("DOMContentLoaded", function () { var nodes = document.querySelectorAll( - '[data-module~="govuk-cookie-banner"]' - ) + '[data-module~="govuk-cookie-banner"]', + ); for (var i = 0, length = nodes.length; i < length; i++) { - new CookieBanner(nodes[i]).init() + new CookieBanner(nodes[i]).init(); } - }) -})() + }); +})(); diff --git a/client/examples/cookies-page.js b/client/examples/cookies-page.js index d92e3d05..1653bc67 100644 --- a/client/examples/cookies-page.js +++ b/client/examples/cookies-page.js @@ -1,116 +1,118 @@ /* global GovSingleConsent */ -;(function () { +(function () { function CookieSettings($module) { - this.$module = $module + this.$module = $module; } CookieSettings.prototype.init = function () { - this.$module.submitSettingsForm = this.submitSettingsForm.bind(this) - this.$module.getFormValues = this.getFormValues.bind(this) - this.$module.setFormValues = this.setFormValues.bind(this) + this.$module.submitSettingsForm = this.submitSettingsForm.bind(this); + this.$module.getFormValues = this.getFormValues.bind(this); + this.$module.setFormValues = this.setFormValues.bind(this); document - .querySelector('form[data-module=cookie-settings]') - .addEventListener('submit', this.$module.submitSettingsForm) + .querySelector("form[data-module=cookie-settings]") + .addEventListener("submit", this.$module.submitSettingsForm); this.setFormValues( - GovSingleConsent.getConsents() || GovSingleConsent.REJECT_ALL - ) + GovSingleConsent.getConsents() || GovSingleConsent.REJECT_ALL, + ); function onConsentsUpdated(consents, consentsPreferencesSet, error) { if (consentsPreferencesSet && consents) { - this.setFormValues(consents) + this.setFormValues(consents); } if (error) { - console.error(error) + console.error(error); } } this.singleConsent = new GovSingleConsent( onConsentsUpdated.bind(this), - window.GovSingleConsentApiURL - ) - } + window.GovSingleConsentApiURL, + ); + }; CookieSettings.prototype.setFormValues = function (cookiesPolicy) { - cookiesPolicy = cookiesPolicy || this.cookiesPolicy + cookiesPolicy = cookiesPolicy || this.cookiesPolicy; for (var category in cookiesPolicy) { - if (category === 'essential') { + if (category === "essential") { // this cannot be set by the user - continue + continue; } var input = this.$module.querySelector( - 'input' - .concat('[name=cookies-', category, ']') - .concat('[value=', cookiesPolicy[category] ? 'on' : 'off', ']') - ) + "input" + .concat("[name=cookies-", category, "]") + .concat("[value=", cookiesPolicy[category] ? "on" : "off", "]"), + ); if (input) { - input.checked = true + input.checked = true; } } - } + }; CookieSettings.prototype.getFormValues = function (form) { - form = form || this.$module - var formInputs = form.getElementsByTagName('input') - var values = {} + form = form || this.$module; + var formInputs = form.getElementsByTagName("input"); + var values = {}; for (var i = 0; i < formInputs.length; i++) { - var input = formInputs[i] + var input = formInputs[i]; if (input.checked) { - var name = input.name.replace('cookies-', '') - var value = input.value === 'on' + var name = input.name.replace("cookies-", ""); + var value = input.value === "on"; - values[name] = value + values[name] = value; } } - values.essential = true + values.essential = true; - return values - } + return values; + }; CookieSettings.prototype.submitSettingsForm = function (event) { - event.preventDefault() + event.preventDefault(); - this.cookiesPolicy = this.getFormValues(event.target) + this.cookiesPolicy = this.getFormValues(event.target); - this.singleConsent.setConsents(this.cookiesPolicy) + this.singleConsent.setConsents(this.cookiesPolicy); - this.showConfirmationMessage() - } + this.showConfirmationMessage(); + }; CookieSettings.prototype.showConfirmationMessage = function () { var confirmationMessage = document.querySelector( - 'div[data-cookie-confirmation]' - ) + "div[data-cookie-confirmation]", + ); // hide the message if already visible so assistive tech is triggered when it appears - confirmationMessage.style.display = 'none' - var previousPageLink = document.querySelector('.cookie-settings__prev-page') - var referrer = CookieSettings.prototype.getReferrerLink() + confirmationMessage.style.display = "none"; + var previousPageLink = document.querySelector( + ".cookie-settings__prev-page", + ); + var referrer = CookieSettings.prototype.getReferrerLink(); - document.body.scrollTop = document.documentElement.scrollTop = 0 + document.body.scrollTop = document.documentElement.scrollTop = 0; if (referrer && referrer !== document.location.pathname) { - previousPageLink.href = referrer - previousPageLink.style.display = 'inline' + previousPageLink.href = referrer; + previousPageLink.style.display = "inline"; } else { - previousPageLink.style.display = 'none' + previousPageLink.style.display = "none"; } - confirmationMessage.style.display = 'block' - } + confirmationMessage.style.display = "block"; + }; CookieSettings.prototype.getReferrerLink = function () { - return document.referrer ? new URL(document.referrer).pathname : false - } + return document.referrer ? new URL(document.referrer).pathname : false; + }; - document.addEventListener('DOMContentLoaded', function () { - var nodes = document.querySelectorAll('[data-module~="cookie-settings"]') + document.addEventListener("DOMContentLoaded", function () { + var nodes = document.querySelectorAll('[data-module~="cookie-settings"]'); for (var index = 0; nodes.length > index; index++) { - new CookieSettings(nodes[index]).init() + new CookieSettings(nodes[index]).init(); } - }) -})() + }); +})(); diff --git a/client/jest.config.cjs b/client/jest.config.cjs index ece29658..1b986af1 100644 --- a/client/jest.config.cjs +++ b/client/jest.config.cjs @@ -5,11 +5,11 @@ /** @type {import('jest').Config} */ var config = { - preset: 'ts-jest', + preset: "ts-jest", // testEnvironment: 'node', - coverageProvider: 'v8', + coverageProvider: "v8", // The test environment that will be used for testing - testEnvironment: 'jest-environment-jsdom-global', -} + testEnvironment: "jest-environment-jsdom-global", +}; -module.exports = config +module.exports = config; diff --git a/client/rollup.config.mjs b/client/rollup.config.mjs index d587c7c8..e57c5e59 100644 --- a/client/rollup.config.mjs +++ b/client/rollup.config.mjs @@ -1,17 +1,17 @@ -import typescript from '@rollup/plugin-typescript' -import terser from '@rollup/plugin-terser' +import typescript from "@rollup/plugin-typescript"; +import terser from "@rollup/plugin-terser"; const baseConfig = { - input: 'src/index.ts', -} + input: "src/index.ts", +}; const bundleConfig = [ // ES Module format { ...baseConfig, output: { - file: 'dist/singleconsent.esm.js', - format: 'esm', + file: "dist/singleconsent.esm.js", + format: "esm", }, plugins: [typescript()], }, @@ -19,8 +19,8 @@ const bundleConfig = [ { ...baseConfig, output: { - file: 'dist/singleconsent.cjs.js', - format: 'cjs', + file: "dist/singleconsent.cjs.js", + format: "cjs", }, plugins: [typescript()], }, @@ -28,20 +28,20 @@ const bundleConfig = [ { ...baseConfig, output: { - file: 'dist/singleconsent.iife.js', - format: 'iife', + file: "dist/singleconsent.iife.js", + format: "iife", }, - plugins: [typescript({ tsconfig: './tsconfig.es5.json' })], + plugins: [typescript({ tsconfig: "./tsconfig.es5.json" })], }, // Minified IIFE ES5 format (for direct usage in browser via a