From f809dafa8b090e749bc9600442e2ca7b8734d4c6 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Thu, 10 Oct 2024 17:39:21 -0400
Subject: [PATCH] ISTWCMS-7158: add emergency notifcation patterns
---
src/patterns/03-layouts/_index.scss | 1 +
.../_emergency-notification.scss | 115 ++++++++++++++++++
.../emergency-notification.twig | 29 +++++
.../site-container/_site-container.scss | 16 ++-
.../site-container/site-container.twig | 3 +
5 files changed, 160 insertions(+), 4 deletions(-)
create mode 100644 src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
create mode 100644 src/patterns/03-layouts/emergency-notification/emergency-notification.twig
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 564579af..76058bb6 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/src/patterns/03-layouts/_index.scss
@@ -17,3 +17,4 @@
@forward 'site-container/site-container';
@forward 'site-footer/site-footer';
@forward 'special-alert/special-alert';
+@forward 'emergency-notification/emergency-notification';
diff --git a/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
new file mode 100644
index 00000000..75a1c7c3
--- /dev/null
+++ b/src/patterns/03-layouts/emergency-notification/_emergency-notification.scss
@@ -0,0 +1,115 @@
+@use '../../01-core' as *;
+
+.uw-emergency-notification {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ z-index: var(--layer-content);
+ &__content {
+ @include uw-contained-width(var(--layout-max-width-narrow));
+
+ @media(min-width: $screen-xl) {
+ // Reset the width so we use all the width when we have room to.
+ @include uw-contained-width(var(--layout-max-width));
+ }
+ .block-uw-cbl-emergency-notification {
+ background: #f0f0f0;
+ border: 2px solid #96172e;
+ margin: var(--size-2) 0;
+ padding: var(--size-2);
+
+ // Prevent excess space at top from elements that have a margin-top.
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ // Prevent excess space at bottom from elements that have a margin-bottom.
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+ .emergency-notification__heading {
+ @include heading-2();
+ }
+ .special-alert__date {
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ margin: var(--size-05) 0;
+ }
+ }
+ }
+ &.special-alert {
+ background: var(--uw-alert);
+ max-width: 100%;
+ .uw-emergency-notification__content {
+ display: grid;
+ gap: var(--size-2);
+ grid-template-columns: 100%;
+ margin: var(--size-4) auto;
+ max-width: 80%;
+ padding: 0;
+ text-align: center;
+ .uw-icon {
+ align-self: center;
+ height: var(--size-8);
+ margin-left: auto;
+ margin-right: auto;
+ width: var(--size-8);
+ svg {
+ fill: var(--uw-white);
+ height: var(--size-8);
+ width: var(--size-8);
+ }
+ }
+ @media(min-width: $screen-md) {
+ @include uw-contained-width(var(--layout-max-width));
+ grid-template-columns: var(--size-10) auto;
+ margin: var(--size-2) auto;
+ padding: 0 var(--size-2);
+ text-align: left;
+ }
+ .block-uw-cbl-emergency-notification{
+ border: 0 solid transparent;
+ background-color: var(--uw-alert);
+ padding: var(--size-1);
+ margin: 0;
+ * {
+ color: var(--uw-white);
+ }
+ .emergency-notification__heading {
+ @include heading-2();
+ color: var(--uw-white);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-2);
+ margin: var(--size-1) 0 var(--size-2) 0;
+ line-height: 1.25;
+ }
+ .emergency-notification__date {
+ background: var(--uw-white);
+ color: var(--uw-alert);
+ display: inline-block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-1);
+ padding: var(--size-05) var(--size-1);
+ text-transform: uppercase;
+ margin: var(--size-105) 0 0 0;
+ }
+ .emergency-notification__content {
+ * {
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-1);
+ }
+ p {
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/emergency-notification/emergency-notification.twig b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
new file mode 100644
index 00000000..dd216aad
--- /dev/null
+++ b/src/patterns/03-layouts/emergency-notification/emergency-notification.twig
@@ -0,0 +1,29 @@
+<div class="uw-emergency-notification{% if emergency_notification.display_style == 'priority' %} special-alert{% endif %}">
+ <div role="complementary" class="uw-emergency-notification__content">
+ {% if emergency_notification.display_style == 'priority' %}
+ {% include '@components/icon/icon.twig' with {
+ 'name': 'special-alert',
+ } %}
+ {% endif %}
+ {% if pattern_lab %}
+ <div class="block-uw-cbl-emergency-notification">
+ {% endif %}
+ {% if emergency_notification.date %}
+ <div class="emergency-notification__date">
+ {{ emergency_notification.date }}
+ </div>
+ {% endif %}
+ {% if emergency_notification.heading %}
+ <div class="emergency-notification__heading">
+ {{ emergency_notification.heading }}
+ </div>
+ {% endif %}
+ <div class="emergency-notification__content">
+ {{ emergency_notification.content }}
+ </div>
+ {% if pattern_lab %}
+ </div>
+ {% endif %}
+ </div>
+</div>
+
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 824f6743..597b97b4 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -13,7 +13,7 @@
// Puts the header at z-index 4
z-index: var(--layer-header);
}
- .uw-special-alert {
+ .uw-emergency-notification {
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
@@ -21,7 +21,7 @@
// Puts the content at z-index 3
z-index: var(--layer-content);
}
- .uw-highlighted {
+ .uw-special-alert {
grid-column: 1 / 2;
grid-row: 3 / 4;
position: relative;
@@ -29,10 +29,18 @@
// Puts the content at z-index 3
z-index: var(--layer-content);
}
+ .uw-highlighted {
+ grid-column: 1 / 2;
+ grid-row: 4 / 5;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ z-index: var(--layer-content);
+ }
.uw-main {
grid-column: 1 / 2;
- grid-row: 4 / 5;
+ grid-row: 5 / 6;
min-height: 60vh;
position: relative;
width: 100%;
@@ -40,7 +48,7 @@
.uw-footer {
grid-column: 1 / 2;
- grid-row: 5 / 6;
+ grid-row: 6 / 7;
position: relative;
// Puts the footer at z-index 2
z-index: var(--layer-footer);
diff --git a/src/patterns/03-layouts/site-container/site-container.twig b/src/patterns/03-layouts/site-container/site-container.twig
index 37bc52f8..320c8aa3 100644
--- a/src/patterns/03-layouts/site-container/site-container.twig
+++ b/src/patterns/03-layouts/site-container/site-container.twig
@@ -7,6 +7,9 @@
{% include "@layouts/header/header.twig"%}
{% endblock %}
+ {% block emergencynotification %}
+ {% endblock %}
+
{% block specialalert %}
{% endblock %}
--
GitLab