Added <amp-consent> stuff for GDPR (ampproject#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

@@ -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;
+  }
+}

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>

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,

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>
 

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>

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",

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>

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": [

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>

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": [

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}}

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": [

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}}

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": [