Merge pull request #145 from comicrelief/144_create_cookie_message

Add cookie consent message

.travis.yml

@@ -8,15 +8,12 @@ notifications:
   email: false
 
 node_js:
-  - '6'
+  - '8'
 
 env:
   global:
     - SLS_DEBUG=true
 
-before_script:
-  - npm prune
-
 script:
   - yarn eslint
   - yarn test

package.json

@@ -15,6 +15,7 @@
     "radium": "0",
     "react": "15",
     "react-bootstrap-typeahead": "2.0.0-alpha.3",
+    "react-cookie-consent": "^1.5.0",
     "react-currency-formatter": "0",
     "react-dom": "15",
     "react-dropzone": "4",
@@ -31,18 +32,18 @@
   },
   "main": "build/index.js",
   "scripts": {
-    "build": "webpack --colors --display-error-details --config ./webpack.config.js",
+    "build": "./node_modules/.bin/webpack --colors --display-error-details --config ./webpack.config.js",
     "build-storybook": "build-storybook -s public",
     "commit": "git-cz",
     "eject": "react-scripts eject",
-    "eslint": "eslint src __tests__ --ext .js --ext .jsx --ignore-path .gitignore --cache",
+    "eslint": "./node_modules/.bin/eslint src __tests__ --ext .js --ext .jsx --ignore-path .gitignore --cache",
     "eslint-fix": "yarn eslint --fix",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
     "storybook": "start-storybook -p 9009 -s public",
-    "snyk-protect": "snyk protect",
-    "prepublish": "npm run snyk-protect; yarn build",
-    "test": "jest --coverage --bail",
-    "test-update": "jest -u"
+    "snyk-protect": "./node_modules/.bin/snyk protect",
+    "prepublish": "./node_modules/.bin/snyk protect; yarn build",
+    "test": "./node_modules/.bin/jest --coverage --bail",
+    "test-update": "./node_modules/.bin/jest -u"
   },
   "devDependencies": {
     "@storybook/addon-actions": "3",

src/components/CookieConsentMessage/CookieConsentMessage.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import CookieConsent from 'react-cookie-consent';
+
+
+class CookieConsentMessage extends Component {
+  render() {
+    const option = {
+      buttonClass: 'btn btn--white-ghost',
+      containerClass: 'cookie-consent cc_container',
+      linkClass: 'cc_more_info link link--grey inline',
+      buttonText: 'Accept',
+      cookieName: 'cookie-consent',
+      contentClass: 'cc_message',
+      position: 'top',
+    };
+
+    return (
+      <CookieConsent
+        disableStyles
+        location={option.position}
+        buttonText={option.buttonText}
+        cookieName={option.cookieName}
+        containerClasses={option.containerClass}
+        buttonClasses={option.buttonClass}
+        contentClasses={option.contentClass}
+      >
+        We use cookies. We’ve recently updated our privacy policy to give you more detail about how we use your personal information.{' '}
+        <a href="https://www.comicrelief.com/privacy-notice" className={option.linkClass} target="_blank" rel="noopener noreferrer">
+          Read our privacy policy here.
+        </a>
+      </CookieConsent>
+    );
+  }
+}
+
+export default CookieConsentMessage;
+

src/components/CookieConsentMessage/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "cookie-consent-message",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CookieConsentMessage.js",
+  "dependencies": {
+    "react": "^16.3.1",
+    "prop-types": "^15.6.1",
+    "react-cookie-consent": "^1.4.0"
+  }
+}

src/components/Menu/MenuLink/MenuLink.js

@@ -16,7 +16,7 @@ class MenuLink extends Component {
 
       <li className="menu-item">
         {(item.link.url.indexOf('http') !== -1) ?
-          <a href={item.link.url} target="_blank">{item.link.title}</a> :
+          <a href={item.link.url} rel="noopener noreferrer" target="_blank">{item.link.title}</a> :
           <a href={this.props.baseUrl + item.link.url}>{item.link.title}</a>}
       </li>
 

src/components/SchoolsLookUp/SchoolsLookUp.js

@@ -10,23 +10,6 @@ const SHOW_MANUAL_LOOKUP = 'SHOW_MANUAL_LOOKUP';
 const HIDE_LOOKUP = 'HIDE_LOOKUP';
 
 class SchoolsLookUp extends Component {
-  /**
-   * Render menu item children.
-   * @param option
-   * @return {XML}
-   */
-  static renderMenuItemChildren(option) {
-    return (
-      <div key={option.id}>
-        <span>{option.name}</span>
-        {option.post_code ?
-          <span>, {option.post_code}</span>:
-          null
-        }
-      </div>
-    );
-  }
-
   /**
    * SchoolsLookUp constructor.
    * @param {object} props
@@ -194,6 +177,23 @@ class SchoolsLookUp extends Component {
     this.setState({ isDefaultOptionHighlighted: false });
   }
 
+  /**
+   * Render menu item children.
+   * @param option
+   * @return {XML}
+   */
+  static renderMenuItemChildren(option) {
+    return (
+      <div key={option.id}>
+        <span>{option.name}</span>
+        {option.post_code ?
+          <span>, {option.post_code}</span>:
+          null
+        }
+      </div>
+    );
+  }
+
   /**
    * Render single input
    * @param {string} labelText

src/components/SocialLink/SocialLink.js

@@ -42,6 +42,7 @@ class SocialLink extends Component {
               <a
                 href={socialLink.url}
                 title={socialLink.network}
+                rel="noopener noreferrer"
                 target="_blank"
                 className={`icon__${socialLink.name}`}
               >

src/components/index.js

@@ -5,6 +5,7 @@ import SelectField from './SelectField/SelectField';
 import SchoolsLookUp from './SchoolsLookUp/SchoolsLookUp';
 import GrantsNearYou from './GrantsNearYou/GrantsNearYou';
 import GrantsInfographics from './GrantsInfographics/GrantsInfographics';
+import CookieConsentMessage from './CookieConsentMessage/CookieConsentMessage';
 
 export {
   Footer,
@@ -14,4 +15,5 @@ export {
   FileUp,
   GrantsNearYou,
   GrantsInfographics,
+  CookieConsentMessage,
 };

src/stories/index.js

@@ -14,6 +14,7 @@ import SchoolsLookUpContainer from '../components/SchoolsLookUp/SchoolsLookUpCon
 import FileUp from '../components/FileUp/FileUp';
 import GrantsNearYou from '../components/GrantsNearYou/GrantsNearYou';
 import GrantsInfographics from '../components/GrantsInfographics/GrantsInfographics';
+import CookieConsentMessage from '../components/CookieConsentMessage/CookieConsentMessage';
 
 storiesOf('Welcome', module).add('to Storybook', () => <h1>Welcome to CR Storybook</h1>);
 
@@ -319,3 +320,11 @@ storiesOf('Grants Infographics', module)
       return (<GrantsInfographics grantsAPI={GRANTS_API} />);
     }),
   );
+
+
+storiesOf('Cookie Consent Message', module)
+  .add('CookieConsentMessage',
+    withInfo('Cookie Consent')(() => {
+      return (<CookieConsentMessage />);
+    }),
+  );