From 845b596ef0281caf7b6d4adcb027ad62f5714b4d Mon Sep 17 00:00:00 2001
From: Ben Morss <morss@google.com>
Date: Wed, 26 Sep 2018 22:26:05 -0400
Subject: [PATCH] Added <amp-consent> stuff for GDPR (#824)

* Added <amp-consent> stuff for GDPR

* Removed no-longer-relevant comment

* Refactored CSS and HTML to use basscss and to better match the rest of the site.

* Added ampstart-consent-content class
Used CSS variables where it seemed consistent to do so

* Even more things replaced with rem's and CSS vars

* Use .ampstart-card class for the box shadow instead of custom CSS

* Use default spacing and font variables instead of custom, even when it tweaks the design a little.
Also, we won't need the super-small device size rule.
---
 components/consent/consent.css       | 63 ++++++++++++++++++++++++++++
 components/consent/consent.snip.html | 32 ++++++++++++++
 css/www/shared.css                   |  1 +
 utils/amp-page-head.snip.html        |  1 +
 www/components.html                  |  1 +
 www/components.json                  |  2 +
 www/getstarted.html                  |  1 +
 www/getstarted.json                  |  4 +-
 www/howitworks.html                  |  1 +
 www/howitworks.json                  |  4 +-
 www/index.html                       |  1 +
 www/index.json                       |  4 +-
 www/templates.html                   |  1 +
 www/templates.json                   |  4 +-
 14 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 components/consent/consent.css
 create mode 100644 components/consent/consent.snip.html

diff --git a/components/consent/consent.css b/components/consent/consent.css
new file mode 100644
index 000000000..dcdf9a1c2
--- /dev/null
+++ b/components/consent/consent.css
@@ -0,0 +1,63 @@
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+amp-consent {
+  background: var(--color-white);
+  animation: .5s ease-out 0s 1 slideUp;
+}
+
+amp-consent .ampstart-btn {
+  width: 9.5rem;
+}
+
+.ampstart-consent-popup p a {
+  color: #b60845;
+}
+
+/* phones */
+@media (--breakpoint-xs) {
+  amp-consent a.ampstart-consent-close-btn {
+    font-size: var(--h3);
+    top: 15px;
+    right: 13px;
+  }
+  
+  .ampstart-consent-content {
+    flex-flow: column wrap;
+    align-items: center;
+    margin: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
+  }
+
+  .ampstart-consent-popup p {
+    padding: 0 var(--space-1);
+    margin: 0 0 var(--space-1);
+  }
+}
+
+/* tablets and desktop */
+@media (--breakpoint-sm) {
+ .ampstart-consent-popup a.ampstart-consent-close-btn {
+    font-size: var(--h3);
+    left: 2.5rem;
+  }
+
+  .ampstart-consent-content {
+    flex-flow: row;
+    height: 6.25rem;
+    margin: 0 var(--space-4);
+  }
+
+  .ampstart-consent-popup p {
+    max-width: 41.25rem;
+    padding: 0 var(--space-2) 0 var(--space-4);
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/components/consent/consent.snip.html b/components/consent/consent.snip.html
new file mode 100644
index 000000000..d1058e8b2
--- /dev/null
+++ b/components/consent/consent.snip.html
@@ -0,0 +1,32 @@
+<amp-geo layout="nodisplay">
+  <script type="application/json">
+    {
+      "ISOCountryGroups": {
+        "eu": ["at", "be", "bg", "ch", "cy", "cz", "dk", "de", "ee", "el", "es", "fi", "fr", "hr", "ie", "is", "it", "li", "lv", "lt", "lu", "hu", "mt", "nl", "no", "pl", "pt", "ro", "si", "sk", "se", "uk"]
+      }
+    }
+  </script>
+</amp-geo>
+
+<amp-consent id="consent" class="ampstart-card" layout="nodisplay">
+  <script type="application/json">
+    {
+      "consents": {
+        "eu": {
+          "promptIfUnknownForGeoGroup": "eu",
+          "promptUI": "consent-popup"
+        }
+      }
+    }
+  </script>
+
+  <div id="consent-popup" class="ampstart-consent-popup">
+    <div class="ampstart-consent-content flex items-center justify-center">
+      <a href="#" on="tap:consent.dismiss" class="ampstart-consent-close-btn absolute text-decoration-none" role="button" tabindex="0">✕</a>
+      <p class="h5 line-height-2">
+        We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies" class="text-decoration-none">use of cookies</a> and <a href="https://policies.google.com/privacy" class="text-decoration-none">privacy policy</a>.
+      </p>
+      <a class="ampstart-btn ampstart-btn-secondary caps text-decoration-none inline-block center" on="tap:consent.accept" class="button text-label" role="button" tabindex="1">OK</a>
+    </div>
+  </div>
+</amp-consent>
\ No newline at end of file
diff --git a/css/www/shared.css b/css/www/shared.css
index ba0989c2a..f6903f93c 100644
--- a/css/www/shared.css
+++ b/css/www/shared.css
@@ -19,6 +19,7 @@
 @import '../../components/social-follow/social-follow';
 @import '../../components/footer/footer';
 @import '../../components/user-notification/user-notification';
+@import '../../components/consent/consent';
 @import 'page-vars';
 
 h1,h2,h3,h4,h5,h6,
diff --git a/utils/amp-page-head.snip.html b/utils/amp-page-head.snip.html
index 029fb57a1..0bb511837 100644
--- a/utils/amp-page-head.snip.html
+++ b/utils/amp-page-head.snip.html
@@ -22,6 +22,7 @@
   <title>{{title}}</title>
   <link rel="canonical" href="https://www.ampstart.com/{{#canonical-path}}{{{canonical-path}}}{{/canonical-path}}">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <meta name="amp-google-client-id-api" content="googleanalytics">
 
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 
diff --git a/www/components.html b/www/components.html
index aaa15cb4b..83246c981 100644
--- a/www/components.html
+++ b/www/components.html
@@ -92,6 +92,7 @@ <h3 class="caps h4 border-none py2">HTML</h3>
   </main>
   </amp-selector>
   {{> partials/components/footer.snip.html}}
+  {{> ../components/consent/consent.snip.html}}
   {{> ../utils/www-analytics.snip.html}}
 </body>
 </html>
diff --git a/www/components.json b/www/components.json
index e6a7dbcc4..d99e3f41e 100644
--- a/www/components.json
+++ b/www/components.json
@@ -8,6 +8,8 @@
         "amp-iframe",
         "amp-selector",
         "amp-analytics",
+        "amp-geo",
+        "amp-consent",
         "amp-accordion"
       ],
       "css-path": "www/components/page.css",
diff --git a/www/getstarted.html b/www/getstarted.html
index 0777cdbab..2eb9bb1a1 100644
--- a/www/getstarted.html
+++ b/www/getstarted.html
@@ -79,6 +79,7 @@ <h2 class="www-heading relative pb4 mb2">Step 6: Provide feedback</h2>
     <aside class="col-2 xs-hide"></aside>
   </main>
   {{> partials/components/footer.snip.html}}
+  {{> ../components/consent/consent.snip.html}}
   {{> ../utils/www-analytics.snip.html}}
 </body>
 </html>
diff --git a/www/getstarted.json b/www/getstarted.json
index 1e9d78c65..c123d88ed 100644
--- a/www/getstarted.json
+++ b/www/getstarted.json
@@ -6,7 +6,9 @@
       "extensions": [
         "amp-carousel",
         "amp-sidebar",
-        "amp-analytics"
+        "amp-analytics",
+        "amp-geo",
+        "amp-consent"
       ],
       "css-path": "www/howitworks/page.css",
       "font-stylesheets": [
diff --git a/www/howitworks.html b/www/howitworks.html
index 99ac29f5f..f4d32f4a2 100644
--- a/www/howitworks.html
+++ b/www/howitworks.html
@@ -78,6 +78,7 @@ <h2 class="www-heading relative pb4 mb2">Browser support</h2>
     <aside class="col-2 xs-hide"></aside>
   </main>
   {{> partials/components/footer.snip.html}}
+  {{> ../components/consent/consent.snip.html}}
   {{> ../utils/www-analytics.snip.html}}
 </body>
 </html>
diff --git a/www/howitworks.json b/www/howitworks.json
index c0f3dd7fa..ce8e8bcb5 100644
--- a/www/howitworks.json
+++ b/www/howitworks.json
@@ -5,7 +5,9 @@
       "canonical-path": "howitworks",
       "extensions": [
         "amp-sidebar",
-        "amp-analytics"
+        "amp-analytics",
+        "amp-geo",
+        "amp-consent"
       ],
       "css-path": "www/howitworks/page.css",
       "font-stylesheets": [
diff --git a/www/index.html b/www/index.html
index ad76cf729..e892cbe59 100644
--- a/www/index.html
+++ b/www/index.html
@@ -151,6 +151,7 @@ <h3 class="m3 caps ampstart-title-sm">{{title}}</h3>
     </section>
     {{/help-section}}
   </main>
+  {{> ../components/consent/consent.snip.html}}
   {{> partials/components/footer.snip.html}}
   {{#features-showcase}}
   {{#feature}}
diff --git a/www/index.json b/www/index.json
index 456c99aea..493654430 100644
--- a/www/index.json
+++ b/www/index.json
@@ -8,7 +8,9 @@
         "amp-lightbox",
         "amp-iframe",
         "amp-selector",
-        "amp-analytics"
+        "amp-analytics",
+        "amp-geo",
+        "amp-consent"
       ],
       "css-path": "www/index/page.css",
       "font-stylesheets": [
diff --git a/www/templates.html b/www/templates.html
index d830a903f..69d59c286 100644
--- a/www/templates.html
+++ b/www/templates.html
@@ -104,6 +104,7 @@ <h3 class="caps ampstart-title-sm">{{title}}</h3>
   </main>
   </amp-selector>
   {{> partials/components/footer.snip.html}}
+  {{> ../components/consent/consent.snip.html}}
   {{> ../utils/www-analytics.snip.html}}
   {{#template-groups}}
   {{#template-group}}
diff --git a/www/templates.json b/www/templates.json
index 593364952..abb1b62a6 100644
--- a/www/templates.json
+++ b/www/templates.json
@@ -8,7 +8,9 @@
         "amp-lightbox",
         "amp-iframe",
         "amp-selector",
-        "amp-analytics"
+        "amp-analytics",
+        "amp-geo",
+        "amp-consent"
       ],
       "css-path": "www/templates/page.css",
       "font-stylesheets": [