krystal · craigengland · Feb 23, 2023 · Jan 19, 2023 · Jan 19, 2023 · Jan 19, 2023
diff --git a/.babelrc b/.babelrc
diff --git a/.npmignore b/.npmignore
@@ -1,8 +1,4 @@
-/__mocks__
-/__tests__
 /node_modules
 src/**/*
-.babelrc
 package.json
 package-lock.json
-webpack.config.js
diff --git a/public/example.js → example.js b/public/example.js → example.js
@@ -1,10 +1,13 @@
+import Crumbs from "./lib/main.js";
+
 document.addEventListener("DOMContentLoaded", () => {
   const editCookieButton = document.querySelector(".edit-cookies");
+  const list = document.querySelector(".accepted-cookies");
 
   const cookies = new Crumbs({
     banner: {
       title: "We use cookies",
-      description: "Test",
+      description: "Test description",
     },
     days: 365,
     domain: "localhost",
@@ -18,23 +21,36 @@ document.addEventListener("DOMContentLoaded", () => {
         identifier: "functional",
         required: true,
         summary:
-          "There are a number of cookies we need to use in order for DeployHQ to work properly. These cannot be disabled.",
+          "There are a number of cookies we need to use in order for out applications to work properly. These cannot be disabled.",
         title: "Functional",
       },
       {
         identifier: "analytics",
         required: false,
         summary:
-          "We use Google Analytics to measure the performance of our website. We do not store any personal data and your IP address is anonymised. Analytics is disabled in the application itself.",
+          "We use analytics to measure the performance of our website. We do not store any personal data and your IP address is anonymised.",
         title: "Analytics",
       },
       {
         identifier: "live_chat",
         required: false,
         summary:
-          "We use a live chat service called Crisp so we can privide support to you where available. Various cookies are stored so chats remain active when you change page.",
+          "We use a live chat service so we can privide support to you where available. Various cookies are stored so chats remain active when you change page.",
         title: "Live Chat",
       },
     ],
   });
+
+  cookies.on("onSave", (preferences) => {
+    emptyList();
+    preferences.forEach((preference) => {
+      const li = document.createElement("li");
+      li.textContent = preference;
+      list.append(li);
+    });
+  });
+
+  function emptyList() {
+    list.innerHTML = "";
+  }
 });
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./lib/styles/main.css" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <title>Crumbs</title>
+  </head>
+  <body>
+    <h1>Crumbs</h1>
+    <div>
+      <h2>You are ok with the following cookies being set:</h2>
+      <ul class="accepted-cookies"></ul>
+    </div>
+
+    <button class="edit-cookies">Edit cookie settings</button>
+
+    <script type="module" src="example.js"></script>
+  </body>
+</html>
diff --git a/src/components/cookieBanner.js → lib/components/cookieBanner.js b/src/components/cookieBanner.js → lib/components/cookieBanner.js
diff --git a/src/components/editScreen.js → lib/components/editScreen.js b/src/components/editScreen.js → lib/components/editScreen.js
diff --git a/src/components/eventEmitter.js → lib/components/eventEmitter.js b/src/components/eventEmitter.js → lib/components/eventEmitter.js
diff --git a/src/main.js → lib/main.js b/src/main.js → lib/main.js
diff --git a/src/main.css → lib/styles/main.css b/src/main.css → lib/styles/main.css
@@ -1,3 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 :root {
   --crumbs-edit-bg: #f4f4f4;
   --crumbs-edit-overlay: rgba(0, 0, 0, 0.4);
@@ -9,15 +15,29 @@
   --crumbs-toggle-switch-focus-border-color: #636363;
 }
 
-.crumbs-banner {
-  bottom: 0;
+body {
   display: flex;
+  font-family: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Crumbs styling */
+
+.crumbs-banner {
+  border: 1px solid;
+  border-radius: 4px;
+  bottom: 5%;
+  display: flex;
   justify-content: space-between;
-  left: 0;
-  max-width: 1140px;
+  left: 50%;
+  margin: auto;
+  max-width: 1240px;
   position: fixed;
-  width: 100%;
+  padding: 1rem;
+  transform: translateX(-50%);
+  width: 95%;
 }
 
 .crumbs-edit {
@@ -129,6 +149,7 @@
 
 .crumbs-checkbox {
   height: 0;
+  visibility: hidden;
   position: absolute;
   width: 0;
 }
@@ -230,3 +251,21 @@
     flex: 0 1 60%;
   }
 }
+
+/* Basic styling for developing locally */
+
+h1,
+h2 {
+  margin: 1rem 0;
+  text-align: center;
+}
+
+.accepted-cookies {
+  list-style: none;
+  margin-top: 16px;
+  text-align: center;
+}
+
+.edit-cookies {
+  margin: auto;
+}