From 6fa390b962d0021ca3450efb9f472497bcf8a0eb Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Wed, 17 Aug 2022 11:58:38 -0400
Subject: [PATCH] ISTWCMS-5715: adding eu cookie compliance
---
src/patterns/04-components/_index.scss | 1 +
.../_eu-cookie-compliance.scss | 110 ++++++++++++++++++
.../eu-cookie-compliance.md | 8 ++
.../eu-cookie-compliance.twig | 13 +++
.../eu-cookie-compliance.yml | 3 +
5 files changed, 135 insertions(+)
create mode 100644 src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
create mode 100644 src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.md
create mode 100644 src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig
create mode 100644 src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.yml
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 70225c4e..992faf75 100644
--- a/src/patterns/04-components/_index.scss
+++ b/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';
diff --git a/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss b/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
new file mode 100644
index 00000000..e632fc08
--- /dev/null
+++ b/src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
@@ -0,0 +1,110 @@
+@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;
+}
diff --git a/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.md b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.md
new file mode 100644
index 00000000..f6d53d90
--- /dev/null
+++ b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.md
@@ -0,0 +1,8 @@
+---
+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.
diff --git a/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig
new file mode 100644
index 00000000..8b974178
--- /dev/null
+++ b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.twig
@@ -0,0 +1,13 @@
+
+<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
diff --git a/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.yml b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.yml
new file mode 100644
index 00000000..4bb3fa7d
--- /dev/null
+++ b/src/patterns/04-components/eu-cookie-compliance/eu-cookie-compliance.yml
@@ -0,0 +1,3 @@
+---
+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>'
--
GitLab