Merge pull request #1551 from ASU/UDS-1941-Cookie-Consent-Opt-Out-in-Footer

UDS-1941: Cookie Consent Opt Out in Footer

Author: davidornelas11

packages/component-header-footer/src/footer/components/Legal/index.js

@@ -55,40 +55,43 @@ const Legal = () => {
               </a>
               <a
                 className="nav-link"
-                href={LEGAL_URLS.PRIVACY}
+                href={LEGAL_URLS.TERMS_OF_USE}
                 onFocus={() =>
                   trackGAEvent({
                     ...DEFAULT_GA_EVENT,
-                    text: "privacy",
+                    text: "terms of use",
                   })
                 }
               >
-                Privacy
+                Terms of Use
               </a>
               <a
                 className="nav-link"
-                href={LEGAL_URLS.TERMS_OF_USE}
+                href={LEGAL_URLS.EMERGENCY}
                 onFocus={() =>
                   trackGAEvent({
                     ...DEFAULT_GA_EVENT,
-                    text: "terms of use",
+                    text: "emergency",
                   })
                 }
               >
-                Terms of Use
+                Emergency
               </a>
               <a
                 className="nav-link"
-                href={LEGAL_URLS.EMERGENCY}
+                href={LEGAL_URLS.PRIVACY}
                 onFocus={() =>
                   trackGAEvent({
                     ...DEFAULT_GA_EVENT,
-                    text: "emergency",
+                    text: "privacy",
                   })
                 }
               >
-                Emergency
+                Privacy
               </a>
+              <button type="button" id="manualConsentoptout">
+                Manage my privacy settings
+              </button>
             </nav>
           </div>
         </div>

packages/component-header-footer/src/footer/index.styles.js

@@ -32,7 +32,8 @@ const StyledFooter = styled.footer`
     a:focus,
     button:focus {
       outline: none;
-      box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
+      box-shadow: 0 0 0 2px var(--color-base-white),
+        0 0 0 4px var(--color-base-grey-7) !important;
       -webkit-tap-highlight-color: transparent;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
@@ -411,6 +412,27 @@ const StyledFooter = styled.footer`
     }
   }
 
+  //footer manual consent opt-out
+  .footer-legal-links,
+  .footer-menu,
+  .nav {
+    &.colophon #manualConsentoptout,
+    #manualConsentoptout {
+      color: #484848;
+      border: none;
+      background-color: transparent;
+      width: auto;
+      cursor: pointer;
+      padding: 0;
+      text-align: right;
+      justify-self: end;
+      font-size: 1rem;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   // Bootstrap Default Stylings
   .row {
     --bs-gutter-x: 24px;

packages/static-site/src/pages/DataLayerGuide.tsx

@@ -12,10 +12,7 @@ export const bookmarklet = `javascript:(${watchDataLayer.toString()
   .replace(/\s+/g, " ")})();`
 
 const gtmCodes = {
-  universal: "GTM-KDWN8Z",
-  etDev: "GTM-PX7M299",
-  etQA: "GTM-W3FGR6T",
-  etProd: "GTM-WPVTBHL",
+  universal: "GTM-KDWN8Z"
 };
 
 const GtmCodeExample: FC<{ gtmCode: string }> = ({ gtmCode }) => {
@@ -92,27 +89,6 @@ const DataLayerGuide = () => {
             bundled.
           </p>
 
-          <h3>Benefits of Becoming part of GTM Product Community:</h3>
-          <ul>
-            <li>
-              Receive consultation/assistance with GTM implementation and
-              maintenance
-            </li>
-            <li>
-              Receive information on any changes being made to Enterprise UTO
-              GTM and how any changes might affect your site
-            </li>
-            <li>Provide feedback for any changes submitted</li>
-            <li>
-              Become a member of the larger GTM community as a member of a
-              private slack channel to keep up with all the latest GTM news
-            </li>
-            <li>
-              Coming Soon — Link to Service Now Request to register site –
-              https://asu.service-now.com/xxxxxxx
-            </li>
-          </ul>
-
           <h3>Best Practices for Implementing GTM</h3>
           <p>Install on test site first</p>
           <ul>
@@ -154,15 +130,6 @@ const DataLayerGuide = () => {
 
           <p>Most ASU sites should implement the ASU Universal GTM.</p>
 
-          <p>
-            Enterprise sites should implement the ASU Enterprise QA GTM on their
-            &quot;DEV&quot; environment, and the ASU Enterprise Production GTM on their
-            &quot;QA&quot; and &quot;Production&quot; environments. This may be configured using
-            environmental variables. Each environment has its own GTM ID
-            associated with it and care must be taken to use the appropriate GTM
-            ID for each application environment.
-          </p>
-
           <p>
             Some units have their own GTM IDs. When multiple GTM IDs need to be
             used in a single site or application, follow the guidance on{" "}
@@ -175,15 +142,6 @@ const DataLayerGuide = () => {
           <h3>ASU universal GTM code</h3>
           <GtmCodeExample gtmCode={gtmCodes.universal} />
 
-          <h3>ET Enterprise Webapp Development GTM</h3>
-          <GtmCodeExample gtmCode={gtmCodes.etDev} />
-
-          <h3>ET Enterprise Webapp QA GTM</h3>
-          <GtmCodeExample gtmCode={gtmCodes.etQA} />
-
-          <h3>ET Enterprise Webapp Production GTM</h3>
-          <GtmCodeExample gtmCode={gtmCodes.etProd} />
-
           <a id="datalayer"></a>
           <h2>Adding the data layer</h2>
 

packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss

@@ -350,3 +350,26 @@ footer {
     @include nav-to-grid;
   }
 }
+
+/*------------------------------------------------------------------
+8. Footer Colophon - Cookie Consent
+--------------------------------------------------------------------*/
+.footer-legal-links,
+.footer-menu,
+.nav {
+  &.colophon #manualConsentoptout,
+  #manualConsentoptout {
+    color: #484848;
+    border: none;
+    background-color: transparent;
+    width: auto;
+    cursor: pointer;
+    padding: 0;
+    text-align: right;
+    justify-self: end;
+    font-size: 1rem;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}