Merge pull request #548 from microsoftgraph/bethpan/privacy

Privacy banner and footer

Author: beth-panx

.storybook/manager-head.html

@@ -1,13 +1,71 @@
+<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+<div id="cookie-banner"></div>
+<footer class="storybook-footer">
+  Microsoft Graph Toolkit Playground was founded by Microsoft as a community guided, open source project.
+  <a href="https://privacy.microsoft.com/en-us/privacystatement">Privacy & cookies</a>
+  <a href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default">Term of use</a>
+</footer>
+
+<script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script>
 <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
 <script type="text/javascript">
-  var config = {
-    autoCapture: {
-      lineage: true
+  WcpConsent.init(
+    'en-US',
+    'cookie-banner',
+    function(err, _siteConsent) {
+      if (err != undefined) {
+        return err;
+      } else {
+        siteConsent = _siteConsent; //siteConsent is used to get the current consent
+      }
     },
-    coreData: {
-      appId: 'JS:GraphToolkit'
+    onConsentChanged
+  );
+
+  function onConsentChanged(consentCategories) {
+    console.log('consentCatogories', consentCategories);
+    if (siteConsent.getConsentFor(WcpConsent.consentCategories.Analytics)) {
+      // add analytics
+      var config = {
+        autoCapture: {
+          lineage: true
+        },
+        coreData: {
+          appId: 'JS:GraphToolkit'
+        }
+      };
+      awa.init(config);
     }
-  };
-  awa.init(config);
+  }
 </script>
-<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
+<style>
+  #root > div:first-of-type {
+    height: calc(100% - 40px);
+  }
+
+  .storybook-footer {
+    position: absolute;
+    bottom: 0;
+    font-size: 11px;
+    padding: 10px;
+    width: 100%;
+    text-align: center;
+    z-index: 9999;
+    background-color: #f2f2f2;
+  }
+
+  .storybook-footer a {
+    color: #616161;
+  }
+
+  .storybook-footer a:hover {
+    color: #323232;
+  }
+
+  @media (max-width: 768px) {
+    #root > div:first-of-type {
+      height: calc(100% - 50px);
+    }
+  }
+</style>