Accept cookies banner with link to privacy page. #103.

package.json

@@ -30,6 +30,7 @@
     "gatsby-remark-images": "^5.1.0",
     "gatsby-source-filesystem": "^3.4.0",
     "gatsby-transformer-sharp": "^3.4.0",
+    "js-cookie": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/components/banner-cookies/banner-cookies.js

@@ -0,0 +1,64 @@
+/*
+ * JXTX Foundation
+ * https://www.jxtxfoundation.org
+ *
+ * JXTX cookies banner component.
+ */
+
+// Core dependencies
+import Link from "gatsby-link";
+import Cookies from "js-cookie";
+import React, { useEffect, useState } from "react";
+
+// App dependencies
+import Button from "../button/button";
+import { ButtonType } from "../button/button-type.model";
+
+// Styles
+import * as compStyles from "./banner-cookies.module.css";
+
+function BannerCookies() {
+  const [showBanner, setShowBanner] = useState(false);
+
+  /**
+   * Sets cookie and closes banner.
+   */
+  const closeBanner = () => {
+    /* Set cookie and hide banner. */
+    Cookies.set("cookiesAccepted", true, { expires: new Date(2300, 1, 1) });
+    setShowBanner(false);
+  };
+
+  /* useEffect - componentDidMount/componentWillUnmount. */
+  useEffect(() => {
+    /* Grab the cookie "cookiesAccepted". */
+    const cookie = Cookies.get("cookiesAccepted");
+
+    /* Show the banner if the cookie has not been accepted. */
+    if (cookie === undefined) {
+      setShowBanner(true);
+    }
+
+    /* Hide the banner if the cookie has been accepted. */
+    if (Cookies.get("cookiesAccepted") === true) {
+      setShowBanner(false);
+    }
+  }, []);
+
+  return showBanner ? (
+    <div className={compStyles.banner}>
+      <p className={compStyles.banner__text}>
+        This website uses cookies for security and analytics purposes. By using
+        this site, you agree to these uses.{" "}
+        <Link className={compStyles.banner__link} to={"/privacy"}>
+          Learn more here.
+        </Link>
+      </p>
+      <Button buttonAction={() => closeBanner()} buttonType={ButtonType.TEXT}>
+        Ok
+      </Button>
+    </div>
+  ) : null;
+}
+
+export default BannerCookies;

src/components/banner-cookies/banner-cookies.module.css

@@ -0,0 +1,51 @@
+/*
+ * JXTX Foundation
+ * https://www.jxtxfoundation.org
+ *
+ * Style definitions specific to JXTX banner cookies component.
+ */
+
+/* Banner. */
+.banner {
+  align-items: flex-start;
+  background-color: var(--accent-pink);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  margin: 0 auto;
+  max-width: var(--maximum);
+  padding: 40px;
+  position: sticky;
+  width: 100vw;
+  z-index: 10;
+}
+
+/* Banner text. */
+.banner__text {
+  margin: 0;
+  padding: 20px 0;
+}
+
+/* Banner link. */
+.banner__link {
+  color: inherit;
+  white-space: nowrap;
+}
+
+/**
+ * 1240px - Medium (laptop).
+ */
+@media screen and (min-width: 1240px) {
+  /* Banner. */
+  .banner {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  /* Banner text. */
+  .banner__text {
+    margin-right: var(--vu___60);
+  }
+}

src/components/layout/layout.js

@@ -10,6 +10,7 @@
 import React from "react";
 
 // App dependencies
+import CookiesBanner from "../banner-cookies/banner-cookies";
 import DocumentMetadata from "../document-metadata/document-metadata";
 import Footer from "../footer/footer";
 import Header from "../header/header";
@@ -29,6 +30,7 @@ function Layout(props) {
       <div className={compStyles.site}>
         <Header headerMinor={headerMinor} />
         {children}
+        <CookiesBanner />
         <Footer />
       </div>
     </>

src/styles/vars.module.css

@@ -10,6 +10,8 @@
   --accent-blue-light: #a3cbdf;
   --accent-orange: #fe7f02;
   --accent-orange-light: #fdbf6f;
+  --accent-pink: #FB9998;
+  --accent-red: #e31a1e;
   --background: #fafafa;
   --black: #000000;
   --black12: rgba(0, 0, 0, 0.12);