Merge pull request #89 from nhsuk/phase-2-updates

Phase 2 updates
nhsuk · Nov 4, 2019 · 549d12c · 549d12c
2 parents 3908bc5 + 484303f
commit 549d12c
Show file tree

Hide file tree

Showing 9 changed files with 3,309 additions and 3,483 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cookie-consent",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "In-house solution for managing cookies on nhs.uk",
   "main": "src/cookieconsent.js",
   "directories": {

diff --git a/src/_cookie-banner.scss b/src/_cookie-banner.scss
@@ -2,24 +2,100 @@
   background: white;
   position: relative;
   box-shadow: 0 0 4px 0 $color_nhsuk-black;
-  padding: 24px 0 24px 0;
+  padding: 24px 0 19px;
   width: 100%;
   z-index: 1;
+}
+
+h4 {
+  @include nhsuk-typography-responsive(22);
+  display: block;
+  font-weight: $nhsuk-font-bold;
+  margin-top: 0;
+  @include nhsuk-responsive-margin(4, 'bottom');
+}
+
+p {
+  @include nhsuk-typography-responsive(19);
+  display: block;
+  margin-top: 0;
+  @include nhsuk-responsive-margin(4, 'bottom');
+  color: inherit;
+}
+
+$button-shadow-size: 4px;
+
+button {
+  @include nhsuk-font(19);
+  @include nhsuk-focusable;
+  @include nhsuk-responsive-margin(2, 'bottom', $adjustment: $button-shadow-size);
+
+  -webkit-appearance: none;
+  background-color: $nhsuk-button-colour;
+  border: $nhsuk-border-width-form-element solid transparent;
+  border-radius: 4px;
+  box-shadow: 0 $button-shadow-size 0 $nhsuk-button-shadow-colour;
+  box-sizing: border-box;
+  color: $nhsuk-button-text-colour;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 600;
+  margin-top: 0;
+  padding: 12px nhsuk-spacing(3);
+  position: relative;
+  text-align: center;
+  vertical-align: top;
+  width: auto;
+  font-family: inherit;
+
+  @include mq($until: tablet) {
+    padding: nhsuk-spacing(2) nhsuk-spacing(3);
+  }
 
-  ul {
-    list-style: none;
+  &:link,
+  &:visited,
+  &:active,
+  &:hover {
+    color: $nhsuk-button-text-colour;
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
     padding: 0;
-    margin: 8px 0 0 0;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $nhsuk-button-hover-colour;
+  }
 
-    li {
-      display: block;
-    }
+  &:active {
+    box-shadow: none;
+    top: $button-shadow-size;
   }
 
-  @include mq($from: desktop) {
-    ul li {
-      display: inline;
-      margin-right: 20px;
-    }
+  &::before {
+    background: transparent;
+    bottom: -($nhsuk-border-width-form-element + $button-shadow-size);
+    content: '';
+    display: block;
+    left: -$nhsuk-border-width-form-element;
+    position: absolute;
+    right: -$nhsuk-border-width-form-element;
+    top: -$nhsuk-border-width-form-element;
+  }
+}
+
+ul, li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+@include mq($from: desktop) {
+  li {
+    display: inline;
+    margin-right: 20px;
   }
 }
diff --git a/src/banner.html b/src/banner.html
@@ -1,23 +1,20 @@
 <div id="nhsuk-cookie-banner">
   <div class="nhsuk-cookie-banner" id="cookiebanner">
-    <div class="nhsuk-width-container">
-      <p>
-        We've put some small files called cookies on your device to make our website work.
-        We also need to use a cookie to remember you've seen this message.
-      </p>
-      <p>
-        We will not use any other cookies unless you choose to turn them on.
-      </p>
-      <ul>
-        <li id="nhsuk-cookie-banner__link_accept"><a href="#" tabindex="1">I'm OK with these cookies</a></li>
-        <li id="nhsuk-cookie-banner__link"><a href="${require('./settings.js').getPolicyUrl()}" tabindex="2">Choose which cookies we use</a></li>
-      </ul>
+    <div class="nhsuk-width-container"> 
+        <h4>Cookies on the NHS website</h4> 
+        <p>We've put some small files called cookies on your device to make our site work.</p>
+        <p>We'd also like to use analytics cookies. These send information about how our site is used to services called Adobe Analytics, Hotjar and Google Analytics. We use this information to improve our site.</p>
+        <p>Let us know if this is OK. We'll use a cookie to save your choice. You can <a id="nhsuk-cookie-banner__link" href="${require('./settings.js').getPolicyUrl()}" tabindex="1">read more about our cookies</a> before you choose.</p>
+        <ul> 
+            <li id="nhsuk-cookie-banner__link_accept_analytics"><button href="#" tabindex="2">I'm OK with analytics cookies</button></li>
+            <li id="nhsuk-cookie-banner__link_accept"><button href="#" tabindex="3">Do not use analytics cookies</button></li>
+        </ul>
     </div>
   </div>
 
   <div class="nhsuk-success-banner" id="nhsuk-cookie-confirmation-banner" style="display:none;">
     <div class="nhsuk-width-container">
-      <p id="nhsuk-success-banner__message">You can change your cookie settings at any time on our <a href="${require('./settings.js').getPolicyUrl()}">cookies page</a>.</p>
+      <p id="nhsuk-success-banner__message">You can change your cookie settings at any time using our <a href="${require('./settings.js').getPolicyUrl()}">cookies page</a>.</p>
     </div>
   </div>
 </div>
diff --git a/src/banner.js b/src/banner.js
@@ -1,33 +1,45 @@
 import bannerHtml from './banner.html';
 import bannerCss from './style.scss';
 
-export function hideCookieBanner() {
+function hideCookieBanner() {
   document.getElementById('cookiebanner').style.display = 'none';
 }
 
-export function showCookieConfirmation() {
+function showCookieConfirmation() {
   document.getElementById('nhsuk-cookie-confirmation-banner').style.display = 'block';
 }
 
-export function addFocusCookieConfirmation() {
+function addFocusCookieConfirmation() {
   const cookieConfirmationMessage = document.getElementById('nhsuk-success-banner__message');
   cookieConfirmationMessage.setAttribute('tabIndex', '-1');
   cookieConfirmationMessage.focus();
 }
 
-export function removeFocusCookieConfirmation() {
+function removeFocusCookieConfirmation() {
   const cookieConfirmationMessage = document.getElementById('nhsuk-success-banner__message');
   cookieConfirmationMessage.addEventListener('blur', () => {
     cookieConfirmationMessage.removeAttribute('tabIndex');
   });
 }
 
+/**
+ * Call common methods on link click as well as consent type callback
+ * @param {function} consentCallback callback to be called based on which link has been clicked.
+ */
+function handleLinkClick(consentCallback) {
+  hideCookieBanner();
+  consentCallback();
+  showCookieConfirmation();
+  addFocusCookieConfirmation();
+  removeFocusCookieConfirmation();
+}
+
 /**
  * Insert the cookie banner at the top of a page.
- * args:
- *   onAccept - callback that is called when consent is accepted.
+ * @param {function} onAccept callback that is called when necessary consent is accepted.
+ * @param {function} onAnalyticsAccept callback that is called analytics consent is accepted.
  */
-export function insertCookieBanner(onAccept) {
+export default function insertCookieBanner(onAccept, onAnalyticsAccept) {
   // add a css block to the inserted html
   const div = document.createElement('div');
   div.innerHTML = bannerHtml;
@@ -36,13 +48,11 @@ export function insertCookieBanner(onAccept) {
 
   document.getElementById('nhsuk-cookie-banner__link_accept').addEventListener('click', (e) => {
     e.preventDefault();
-    onAccept();
-    hideCookieBanner();
-    showCookieConfirmation();
-    addFocusCookieConfirmation();
-    removeFocusCookieConfirmation();
+    handleLinkClick(onAccept);
   });
-  document.getElementById('nhsuk-cookie-banner__link').addEventListener('click', () => {
-    hideCookieBanner();
+
+  document.getElementById('nhsuk-cookie-banner__link_accept_analytics').addEventListener('click', (e) => {
+    e.preventDefault();
+    handleLinkClick(onAnalyticsAccept);
   });
 }
diff --git a/src/cookieconsent.js b/src/cookieconsent.js
@@ -1,5 +1,5 @@
 import { getCookie as getRawCookie, createCookie as createRawCookie, deleteCookies } from './cookies';
-import { insertCookieBanner } from './banner';
+import insertCookieBanner from './banner';
 import { enableScriptsByCategories, enableIframesByCategories } from './enable';
 import { getNoBanner, getPolicyUrl, makeUrlAbsolute } from './settings';
 
@@ -128,14 +128,6 @@ function isValidVersion() {
   return currentVersion === null ? null : currentVersion >= COOKIE_VERSION;
 }
 
-// If consent is given, change the value of the cookie
-function acceptConsent() {
-  setConsent({
-    ...defaultConsent,
-    consented: true,
-  });
-}
-
 export function getConsentSetting(key) {
   const cookie = getConsent();
   // double ! to convert truthy/falsy values into true/false
@@ -150,6 +142,34 @@ export function setConsentSetting(key, value) {
   setConsent({ [key]: !!value });
 }
 
+function enableScriptsAndIframes() {
+  const allCategories = ['preferences', 'statistics', 'marketing'];
+  // Filter out categories that do not have user consent
+  const allowedCategories = allCategories.filter(category => getConsentSetting(category) === true);
+
+  enableScriptsByCategories(allowedCategories);
+  enableIframesByCategories(allowedCategories);
+}
+
+// If consent is given, change the value of the cookie
+function acceptConsent() {
+  setConsent({
+    ...defaultConsent,
+    consented: true,
+  });
+}
+
+// If analytics consent is given, change the value of the cookie
+function acceptAnalyticsConsent() {
+  setConsent({
+    necessary: true,
+    preferences: true,
+    statistics: true,
+    consented: true,
+  });
+  enableScriptsAndIframes();
+}
+
 /**
  * Should the banner be shown to a user?
  * Returns true or false
@@ -203,7 +223,7 @@ export function onload() {
       },
       COOKIE_TYPE.LONG);
     } else {
-      insertCookieBanner(acceptConsent);
+      insertCookieBanner(acceptConsent, acceptAnalyticsConsent);
     }
   }
 
@@ -217,10 +237,5 @@ export function onload() {
     setConsent(defaultConsent, COOKIE_TYPE.SESSION);
   }
 
-  const allCategories = ['preferences', 'statistics', 'marketing'];
-  // Filter out categories that do not have user consent
-  const allowedCategories = allCategories.filter(category => getConsentSetting(category) === true);
-
-  enableScriptsByCategories(allowedCategories);
-  enableIframesByCategories(allowedCategories);
+  enableScriptsAndIframes();
 }
diff --git a/src/cookieconsent.test.js b/src/cookieconsent.test.js
@@ -265,6 +265,7 @@ describe('shouldShowBanner', () => {
 
 describe('onload', () => {
   const acceptConsent = cookieconsent.__get__('acceptConsent');
+  const acceptAnalyticsConsent = cookieconsent.__get__('acceptAnalyticsConsent');
   const defaultConsent = cookieconsent.__get__('defaultConsent');
 
   beforeEach(() => {
@@ -274,11 +275,11 @@ describe('onload', () => {
     cookieconsent.__ResetDependency__('insertCookieBanner');
   });
 
-  test('shows the banner with an acceptConsent callback', () => {
+  test('shows the banner with an acceptConsent and acceptAnalyticsConsent callbacks', () => {
     const spy = jest.fn();
     cookieconsent.__Rewire__('insertCookieBanner', spy);
     onload();
-    expect(spy).toHaveBeenCalledWith(acceptConsent);
+    expect(spy).toHaveBeenCalledWith(acceptConsent, acceptAnalyticsConsent);
     cookieconsent.__ResetDependency__('insertCookieBanner');
   });
 

diff --git a/src/style.scss b/src/style.scss
@@ -16,8 +16,6 @@
 
   @import 'node_modules/nhsuk-frontend/packages/core/elements/links';
   @import 'node_modules/nhsuk-frontend/packages/core/objects/width-container';
-  @import 'node_modules/nhsuk-frontend/packages/core/styles/typography';
-  @import 'node_modules/nhsuk-frontend/packages/core/styles/lists';
 
   /**
    * The following statements are font styles which are applied to the body