Add OneTrust cookie preferences link

6 files changed, 72 insertions, 63 deletions

diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 9bac9c7c..9550c8c4 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -400,33 +400,50 @@
     height: 3rem;
     background-color: $landing-gl-purple-550;
 
-    @media (max-width: $bp-sm) {
+    @media (max-width: $bp-xl) {
       height: auto;
+      padding: 1rem 0;
     }
 
     ul {
       list-style: none;
     }
 
-    a {
+    a,
+    .ot-sdk-show-settings {
       font-style: normal;
       font-weight: normal;
-      font-size: 0.875rem;
-      line-height: 1rem;
       text-align: center;
-      color: $gds-white;
+      font-size: 0.875rem !important;
+      line-height: 1rem !important;
+      color: $gds-white !important;
 
       &:hover {
         color: $gds-white;
+        text-decoration: underline;
+      }
+
+      @media (max-width: $bp-xl) {
+        display: block;
+        text-align: left;
+        margin: 0.5rem 0;
       }
     }
 
-    .dot {
-      height: 0.25rem;
-      width: 0.25rem;
-      background-color: $gds-white;
-      border-radius: 50%;
-      display: inline-block;
+    a:not(:nth-last-child(-n + 2)),
+    .ot-sdk-show-settings {
+      @media (min-width: $bp-xl) {
+        &::after {
+          content: '\2022'; // bullet
+          margin: 0 0.5rem;
+          display: inline-block;
+          /* stylelint-disable max-nesting-depth */
+          &:hover {
+            text-decoration: none;
+          }
+          /* stylelint-enable max-nesting-depth */
+        }
+      }
     }
   }
 }
diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss
index 939bb0c1..9441a78c 100644
--- a/content/assets/stylesheets/footer.scss
+++ b/content/assets/stylesheets/footer.scss
@@ -20,3 +20,21 @@
     color: $footer-gray-400;
   }
 }
+
+// Override OneTrust button styles
+.ot-sdk-show-settings {
+  all: unset;
+  border: 0 !important;
+  padding: 0 !important;
+  color: $footer-gray-500 !important;
+  font-size: inherit !important;
+
+  &:hover {
+    background-color: inherit !important;
+    color: $gds-purple-900 !important;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 256c05ec..f8083a42 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -484,7 +484,7 @@ h6[id]::before {
 // external link and footer social links
 [href^='http://'],
 [href^='https://'] {
-  &:not([href*='gitlab.com']):not([href*='docs.gitlab-review.app']):not(.gitlab-social):not(.no-attachment-icon) {
+  &:not([href*='gitlab.com']):not([href*='docs.gitlab-review.app']):not(.gitlab-social):not(.no-attachment-icon):not([href*='onetrust.com']) {
     &::after {
       content: '\f08e';
       font-family: FontAwesome, sans-serif;
diff --git a/content/index.erb b/content/index.erb
index 6b32da4f..3542fe80 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -289,49 +289,24 @@ title: GitLab Documentation
   </section>
 
   <!-- Footer-->
-  <footer class="landing-footer d-flex align-items-center">
+  <footer class="landing-footer d-xl-flex align-items-xl-center">
     <div class="container">
-        <div class="row">
-          <!-- Footer Items-->
-          <div class="col d-none d-sm-flex align-items-center justify-content-center">
-              <a href="https://about.gitlab.com/company/">About GitLab</a>
-              <div class="dot mx-3"></div>
-              <a href="<%= edit_on_gitlab(@item) %>" target="_blank" rel="noopener noreferrer">View page source</a>
-              <div class="dot mx-3"></div>
-              <a href="<%= edit_on_gitlab(@item, editor: :webide) %>" target="_blank" rel="noopener noreferrer">Edit in Web IDE</a>
-              <div class="dot mx-3"></div>
-              <a href="https://about.gitlab.com/privacy/">Privacy Policy</a>
-              <div class="dot mx-3"></div>
-              <a href="https://about.gitlab.com/privacy/cookies/">Cookies Policy</a>
-              <div class="dot mx-3"></div>
-              <a href="https://about.gitlab.com/community/contribute/">Please contribute</a>
-              <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer" class="ml-3"><img src="<%= @items['/assets/images/by-sa.svg'].path %>" alt="Creative Commons License"></a>
-          </div>
-
-          <!-- Footer Mobile Items-->
-          <div class="col d-sm-none text-center">
-            <ul class="px-0 py-3">
-              <li>
-                <a href="https://about.gitlab.com/company/">About GitLab</a>
-                <div class="dot mx-3"></div>
-                <a href="<%= edit_on_gitlab(@item) %>" target="_blank" rel="noopener noreferrer">View page source</a>
-              </li>
-              <li>
-                <a href="<%= edit_on_gitlab(@item, editor: :webide) %>" target="_blank" rel="noopener noreferrer">Edit in Web IDE</a>
-              <div class="dot mx-3"></div>
-                <a href="https://about.gitlab.com/privacy/">Privacy Policy</a>
-              </li>
-              <li>
-                <a href="https://about.gitlab.com/privacy/cookies/">Cookies Policy</a>
-                <div class="dot mx-3"></div>
-                <a href="https://about.gitlab.com/community/contribute/">Please contribute</a>
-              </li>
-              <li class="pt-3">
-                <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer"><img src="<%= @items['/assets/images/by-sa.svg'].path %>" alt="Creative Commons License"></a>
-              </li>
-            </ul>
-          </div>
+      <div class="row">
+        <div class="col d-xl-flex align-items-xl-center justify-content-xl-center">
+          <a href="https://about.gitlab.com/company/">About GitLab</a>
+          <a href="<%= edit_on_gitlab(@item) %>" target="_blank" rel="noopener noreferrer">View page source</a>
+          <a href="<%= edit_on_gitlab(@item, editor: :webide) %>" target="_blank" rel="noopener noreferrer">Edit in Web IDE</a>
+          <a href="https://about.gitlab.com/privacy/">Privacy Policy</a>
+          <% if production? %>
+          <!-- OneTrust Cookies Settings button -->
+          <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button>
+          <% end %>
+          <a href="https://about.gitlab.com/community/contribute/">Please contribute</a>
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer" class="ml-xl-3 no-attachment-icon mt-3 mt-xl-0 gl-hover-text-decoration-none!">
+            <img src="./assets/images/by-sa.svg" alt="Creative Commons License"/>
+          </a>
         </div>
+      </div>
     </div>
   </footer>
 <% end %>
diff --git a/layouts/footer.html b/layouts/footer.html
index 609be938..f0639c49 100644
--- a/layouts/footer.html
+++ b/layouts/footer.html
@@ -28,7 +28,7 @@
         <li class="pr-3">
           <a href='https://gitlab.com/gitlab-org/gitlab-docs'>Docs Repo</a>
         </li>
-        <li  class="pr-3">
+        <li class="pr-3">
           <a href='https://about.gitlab.com/company/'>About GitLab</a>
         </li>
         <li class="pr-3">
@@ -37,9 +37,12 @@
         <li class="pr-3">
           <a href='https://about.gitlab.com/privacy/'>Privacy Policy</a>
         </li>
+        <% if production? %>
         <li class="pr-3">
-          <a href='https://about.gitlab.com/privacy/cookies/'>Cookies Policy</a>
+          <!-- OneTrust Cookies Settings button -->
+          <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button>
         </li>
+        <% end %>
         <li class="pr-3">
           <a href='https://about.gitlab.com/company/contact/'>Contact</a>
         </li>
diff --git a/layouts/head.html b/layouts/head.html
index 26ca5f2f..dea9c913 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -45,17 +45,13 @@
 
 <% if production? %>
   <%# Adds GTM only in production %>
-  <!-- add cookie consent  -->
-  <script type="text/javascript" src="https://cdn.cookielaw.org/consent/7f944245-c5cd-4eed-a90e-dd955adfdd08/OtAutoBlock.js">
-  </script>
-
-  <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"  type="text/javascript" charset="UTF-8" data-domain-script="7f944245-c5cd-4eed-a90e-dd955adfdd08">
-  </script>
-
+  <!-- OneTrust Cookies Consent Notice start -->
+  <script src="https://cdn.cookielaw.org/consent/7f944245-c5cd-4eed-a90e-dd955adfdd08/OtAutoBlock.js"></script>
+  <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" charset="UTF-8" data-domain-script="7f944245-c5cd-4eed-a90e-dd955adfdd08"></script>
   <script type="text/javascript">
     function OptanonWrapper() { }
   </script>
-
+  <!-- OneTrust Cookies Consent Notice end -->
 
   <!-- Google Tag Manager -->
   <script src="<%= @items['/assets/javascripts/google_tagmanager.*'].path %>"></script>