DO NOT MERGE- UCSFD8 -1372 OneTrust Cookie Banner

docroot/sites/default/services.yml

@@ -176,7 +176,7 @@ parameters:
     # Configure requests allowed from specific origins.
     allowedOrigins: ['*']
     # Sets the Access-Control-Expose-Headers header.
-    exposedHeaders: true
+    exposedHeaders: [true]
     # Sets the Access-Control-Max-Age header.
     maxAge: false
     # Sets the Access-Control-Allow-Credentials header.

docroot/themes/custom/ucsf/js/ucsf_onetrust_baner_tweaks.js

@@ -0,0 +1,38 @@
+(function(Drupal, once) {
+
+  Drupal.behaviors.oneTrust = {
+    attach: function(context) {
+      const delayInMilliseconds = 1000; //1 second
+
+      setTimeout(function() {
+        // Hack to satisfy client requirements for this ticket:
+        // https://ucsfredesign.atlassian.net/browse/UCSFD8-1372
+        const oneTrustBannerTextLoaded= once('oneTrust', '#onetrust-banner-sdk', context).shift();
+        if (!oneTrustBannerTextLoaded) {
+          return;
+        }
+        const oneTrustBannerText = document.querySelector('#onetrust-policy-text');
+        // for each link force to open in same tab
+        const bannerLinks = oneTrustBannerText.querySelectorAll('a');
+        bannerLinks.forEach(link => {
+          link.setAttribute('target', '_self');
+          link.removeAttribute('rel');
+        });
+
+        // One trust just adds aria-label to firs link it finds,
+        // but in our usecase first link is not the privacy policy link
+        // so we need to take that label and append it to the link where it belongs.
+        const privacyAriaLabel = oneTrustBannerText.querySelector("[aria-label*='privacy']").ariaLabel.replace('opens in a new tab', 'opens in the same tab');
+        const privacyLink = oneTrustBannerText.querySelector("[href*='privacy']");
+        privacyLink.ariaLabel = privacyAriaLabel;
+        // get the current aria label provided through OneTrust UI, replace the tab behavior text.
+        oneTrustBannerText.querySelector("[href*='terms-of-use']").ariaLabel = "More information about UCSF terms of use, opens in the same tab";
+
+
+      }, delayInMilliseconds);
+
+    }
+  }
+
+})(Drupal, once);
+

docroot/themes/custom/ucsf/scss/1_global/_base.scss

@@ -508,3 +508,47 @@ a[name] {
     display: block;
   }
 }
+
+// Onetrust cookie banner
+#onetrust-banner-sdk {
+  box-shadow: -3px 0px 3px 0px rgba(0,0,0,0.2) !important;
+  #onetrust-policy {
+    margin: 1.25em 0 1.25em 2em !important;
+
+    @media ($below-s) {
+      margin: 1.25em 0 1.25em 0 !important;
+    }
+  }
+  #onetrust-consent-sdk &:focus {
+    outline: 1px solid #9ba6b6 !important;
+  }
+  &:not(.ot-iab-2) #onetrust-group-container {
+    @media ($below-s) {
+      width: 100% !important;
+    }
+  }
+  .ot-sdk-container {
+    @media ($below-s) {
+      position: relative !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      margin: 0 auto !important;
+      padding: 0 20px !important;
+    }
+  }
+  .has-reject-all-button #onetrust-button-group {
+    @media ($below-s) {
+      float: none !important;
+      width: 100% !important;
+    }
+  }
+  & #onetrust-policy-text a:first-of-type {
+    margin-left: 0 !important;
+  }
+}
+
+#onetrust-banner-sdk:not(.ot-iab-2) #onetrust-button-group-parent {
+  @media (min-width: 1024px) and (max-width: 1280px) {
+    padding-left: 1rem;
+  }
+}

docroot/themes/custom/ucsf/templates/html/html.html.twig

@@ -66,6 +66,7 @@
 {% endif %}
 <js-bottom-placeholder token="{{ placeholder_token }}">
 <script type="text/javascript">
+
   /*<![CDATA[*/
   (function() {
     var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true;
@@ -74,5 +75,11 @@
   })();
   /*]]>*/
 </script>
+
+<!-- OneTrust Cookies Consent Notice start for www.ucsf.ed -->
+<script src="https://cdn.cookielaw.org/consent/5be9f575-9cac-4305-8c58-7ded94d757c3-test/otSDKStub.js"  type="text/javascript" charset="UTF-8" data-domain-script="5be9f575-9cac-4305-8c58-7ded94d757c3-test" ></script>
+<script type="text/javascript">
+function OptanonWrapper() { }
+</script>
 </body>
 </html>

docroot/themes/custom/ucsf/ucsf.libraries.yml

@@ -8,8 +8,10 @@ global:
     js/ucsf_element_slide.js: {}
     js/ucsf_main_menu.js: {}
     js/ucsf_sticky_nav.js: {}
+    js/ucsf_onetrust_baner_tweaks.js: {}
     https://kit.fontawesome.com/0047baebb3.js: { type: external, attributes: { crossorigin: anonymous }}
   dependencies:
+    - core/drupal
     - ucsf/polyfills
     - core/once
     - core/loadjs