ISTWCMS-5715: adding eu cookie compliance

src/patterns/04-components/_index.scss

@@ -14,6 +14,7 @@
 @forward 'content-grid-list/content-grid-list';
 @forward 'copy-text/copy-text';
 @forward 'date/date';
+@forward 'eu-cookie-compliance/eu-cookie-compliance';
 @forward 'exp_col_block/exp_col_block';
 @forward 'facebook/facebook';
 @forward 'facts-and-figures/facts-and-figures';

src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss

+@use '../../01-core' as *;
+
+.sliding-popup-bottom,
+.sliding-popup-top {
+  background: var(--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: var(--size-4);
+  text-align: center;
+  width: 95%;
+  z-index: var(--layer-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: var(--uw-black-primary);
+      }
+
+      p {
+        color: var(--uw-black-primary);
+        font-family: var(--font-systemmedium);
+        font-size: var(--font-size-000);
+        line-height: 1.4;
+        margin: 0 0 var(--size-2);
+      }
+    }
+  }
+
+  .eu-cookie-compliance-banner h2 {
+    border: 0 solid transparent;
+    font-family: var(--font-condensedbook);
+    font-size: 1.42383rem;
+    font-weight: var(--font-weight-400);
+    letter-spacing: inherit;
+    line-height: 1.25;
+    margin: var(--size-1) 0;
+    padding: 0;
+  }
+
+  button {
+    background-color: var(--uw-black-primary);
+    border: var(--size-sm) solid transparent;
+    color: var(--uw-gold-primary);
+    cursor: pointer;
+    font-weight: var(--font-weight-400);
+    line-height: 1.25;
+
+    &:hover {
+      background-color: transparent;
+      border: 2px solid var(--uw-black-primary);
+      color: var(--uw-white);
+      cursor: pointer;
+    }
+  }
+
+  .agree-button {
+    margin-top: 0.7rem;
+  }
+
+  @media(min-width: $screen-sm) {
+    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;
+}

src/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.

src/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

src/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>'