Cookies Banner Component (#475)

* Should render cookie banner at every location

* Implemented visual component of cookie banner

* Should follow satisfy accessibility

frontend/package.json

@@ -27,12 +27,14 @@
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^14.4.3",
  "@types/jest": "^28.1.8",
+ "@types/js-cookie": "^3.0.5",
  "@types/react-transition-group": "^4.4.5",
  "autoprefixer": "^10.4.14",
  "css-loader": "^6.7.3",
  "html-webpack-plugin": "^5.5.0",
  "jest": "^28.1.3",
  "jest-environment-jsdom": "^28.1.3",
+ "js-cookie": "^3.0.5",
  "jsdom": "^20.0.3",
  "postcss": "^8.4.27",
  "postcss-import": "^15.1.0",

frontend/src/App.tsx

@@ -4,11 +4,13 @@ import { RouterProvider } from "react-router-dom";
 
 // Internal imports
 import router from "router/Router";
+import CookieBanner from "tw-components/CookieBanner"
 
 export default function App() {
  return (
  <>
  <RouterProvider router={router} />
+ <CookieBanner/>
  </>
  );
 }

frontend/src/tw-components/CookieBanner.tsx

@@ -0,0 +1,62 @@
+// External Imports
+import React, { useState } from "react";
+import Cookies from 'js-cookie';
+
+// Internal Imports
+import { IconButton } from "components/components";
+import { iconX } from "assets/images/images";
+
+interface CookieBannerProps extends React.PropsWithChildren {}
+
+function CookieBanner(props: CookieBannerProps) {
+ const [hidden, setIsHidden] = useState(Cookies.get('cookieConsent') !== undefined);
+
+ const handleAcceptCookies = () => {
+ Cookies.set('cookieConsent', 'true', { expires: 365})
+ setIsHidden(true)
+ }
+
+ const handleDeclineCookies = () => {
+ Cookies.set('cookieConsent', 'false', { expires: 365})
+ setIsHidden(true)
+ }
+
+ return (
+ <div
+ role='dialog'
+ aria-label="cookies banner"
+ className={`${
+ hidden ? "hidden" : ""
+ } fixed flex flex-col bottom-12 left-1/2 transform -translate-x-1/2 bg-white w-3/4 p-4 z-50W rounded-lg shadow-2xl shadow-inner`}
+ >
+ <div className="min-h-48 max-h-64 justify-between space-y-5 p-6">
+ <div className="flex flex-row justify-between items-center">
+ <p className="text-xl font-bold">This site use cookies!</p>
+ <IconButton
+ iconUrl={iconX}
+ label="close"
+ onClick={(e) => { setIsHidden(true)}}
+ ></IconButton>{" "}
+ </div>
+ <p className="max-w-[80%]">
+ We use cookies to improve your experience. By clicking "Accept
+ Cookies", you are agreeing to the collection of data as described in
+ our <a href='/' className="text-blue-dark underline cursor-pointer hover:text-blue-dark-hover focus:bg-blue-dark-focused">Cookie Policy</a>
+ </p>
+ <div className="flex flex-row items-center space-x-12">
+ <button className="rounded px-10 py-1 bg-blue-dark text-white hover:bg-blue-dark-hover hover:shadow-lg focus:bg-blue-dark-focused" onClick={handleAcceptCookies}>
+ Accept
+ </button>
+ <button
+ onClick={handleDeclineCookies}
+ className="text-blue-dark cursor-pointer hover:text-blue-dark-hover focus:bg-blue-dark-focused hover:drop-shadow-lg"
+ >
+ No Thanks
+ </button>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default CookieBanner;

frontend/src/tw-components/index.tsx

@@ -1,3 +1,4 @@
 export { default as AuthNav } from "./AuthNav";
 export { default as HeaderNav } from "./HeaderNav";
-export { default as TextField } from "./TextField";
+export { default as CookieBanner } from "./CookieBanner";
+export { default as TextField } from "./TextField";