Merge branch 'feature/ISTWCMS-4626-m26lebla-theme-cookie-consent' into '8.x-3.x'

Feature istwcms-4626 m26lebla theme cookie consent

See merge request !31

js/component_scripts.min.js

+(function ($, document, Drupal) {
+    Drupal.behaviors.uw_eu_cookie_compliance = {
+        attach: function (context, settings) {
+            // $(document).ready(function () {
+            //     $('#sliding-popup').addClass('sliding-popup');
+            // });
+        }
+    }
+})(jQuery, document, Drupal);
 (function ($, Drupal) {
   Drupal.behaviors.expandcollapse = {
     attach: function (context, settings) {
@@ -273,7 +282,6 @@
   }
 })(jQuery, Drupal);
 
-
 (function ($, Drupal) {
     Drupal.behaviors.menuhorizontal = {
         attach: function (context, settings) {

source/_patterns/00-config/_design-tokens.artifact.scss

@@ -511,4 +511,4 @@ $gesso: (
     xxl: 96px,
   ),
   gutter-width: 40px,
-);
+);
\ No newline at end of file

source/_patterns/03-layouts/footer/_footer.scss

@@ -18,7 +18,6 @@
       grid-template-columns: 25% auto 30%;
     }
   }
-
   &__address {
     font-family: gesso-font-family(systemmedium);
     font-size: gesso-font-size(-2);

source/_patterns/03-layouts/footer/footer.twig

@@ -37,3 +37,6 @@
         </div>
     </div>
 </footer>
+{% if is_demo_footer %}
+    {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
+{% endif %}
\ No newline at end of file

source/_patterns/03-layouts/footer/footer.yml

@@ -77,3 +77,6 @@ social_media:
 social_media_placement: "global-site-footer"
 modifier_classes: 'black'
 territorial_text: '<p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land granted to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/human-rights-equity-inclusion/indigenous-initiatives" >Indigenous Initiatives Office</a>.</p>'
+is_demo_footer: true
+cookie:
+  text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'

source/_patterns/03-layouts/site-container/site-container.yml

 ---
 site_name: 'Psychology'
 is_demo_site_container: true
+is_demo_footer: true
 header_modifier_classes: 'header'
 menu_name: 'horizontal'
+cookie:
+  text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'
 header_items:
   - title: 'Jump To'
     url: 'Parent'

source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss

@@ -197,7 +197,8 @@
     .media-library-content &,
     .paragraphs-actions &,
     .paragraph-type-top &,
-    .paragraphs-dropbutton-wrapper & {
+    .paragraphs-dropbutton-wrapper & ,
+    .user-login-form &{
       font-size: rem(gesso-font-size(-2));
       font-weight: 200;
       height: inherit;

source/_patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss

+.sliding-popup-bottom,
+.sliding-popup-top{
+    background: gesso-brand(org-default,uw-gold,primary);
+    background: rgba(253, 213, 79, 0.98);
+    box-shadow: 0 0 24px -5px rgba(0, 0, 0, 0.45);
+    left: 2.5%;
+    padding: 2rem;
+    text-align: center;
+    width: 95%;
+    z-index: gesso-z-index(overlay);
+
+    .eu-cookie-compliance-buttons {
+      clear: both;
+      float: none;
+      max-width: 100%;
+      button{
+        max-width: 100%;
+      }
+    }
+    .popup-content {
+      display: inline-block;
+      letter-spacing: inherit;
+      margin: 0 auto;
+      max-width: 90%;
+      text-align: left;
+      width: 100%;
+      .eu-cookie-compliance-message {
+        h1,
+        h2,
+        h3 {
+          color: gesso-brand(org-default,uw-black,primary);
+        }
+        p {
+          color: gesso-brand(org-default,uw-black,primary);
+          font-family:gesso-font-family(systemmedium);
+          font-size:rem(gesso-font-size(-2));
+          line-height: 1.4;
+          margin: 0 0 1rem;
+        }
+      }
+
+    }
+    .eu-cookie-compliance-banner h2 {
+      border: 0 solid transparent;
+      font-family:gesso-font-family(condensedbook);
+      font-size: 1.42383rem;
+      font-weight: 400;
+      letter-spacing: inherit;
+      line-height: 1.25;
+      margin: 0.5rem 0;
+      padding: 0;
+    }
+    button {
+      background-color:gesso-brand(org-default,uw-black,primary);
+      border: 2px solid transparent;
+      color: gesso-brand(org-default,uw-gold,primary);
+      cursor: pointer;
+      font-weight: 400;
+      line-height: 1.25;
+      &:hover {
+        background-color: transparent;
+        border: 2px solid gesso-brand(org-default,uw-black,primary);
+        color: #000;
+        cursor: pointer;
+      }
+    }
+    .agree-button {
+      margin-top: 0.7rem;
+    }
+    @include small{
+    left: 50%;
+    padding: 1.2rem 0;
+    transform: translate(-50%, -10%);
+    width: 80%;
+    .eu-cookie-compliance-message {
+      float: left;
+      max-width: 60%;
+    }
+    .eu-cookie-compliance-buttons {
+      clear:inherit;
+      float: right;
+      max-width: 40%;
+    }
+    .eu-cookie-compliance-banner h2{
+      font-size:1.80203rem;
+    }
+  }
+}
+.sliding-popup-bottom {
+  bottom:0;
+  position: fixed;
+}
+.sliding-popup-top {
+  position: relative;
+}
+
+
+
+

source/_patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.md

+---
+el: .eu-cookie-compliance
+title: eu-cookie-compliance
+---
+
+__Variables:__
+* Demo html and css pattern only - no js or cookie functionality as it is contained in the module.
+

source/_patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig

+
+<div id="sliding-popup" class="sliding-popup-bottom">
+    <div class="eu-cookie-compliance-banner eu-cookie-compliance-banner-info eu-cookie-compliance-banner--default">
+        <div class="popup-content info eu-cookie-compliance-content">
+            <div id="popup-text" class="eu-cookie-compliance-message">
+               {{ cookie.text }}
+            </div>
+            <div id="popup-buttons" class="eu-cookie-compliance-buttons">
+                <button type="button" class="agree-button eu-cookie-compliance-default-button">Accept all</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

source/_patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.yml

+---
+cookie:
+  text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'