Merge branch 'feature/ISTWCMS-7158-ebremner-emergency-notification-space' into '1.1.x'

ISTWCMS-7158: add emergency notifcation patterns

See merge request !234

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';

src/patterns/03-layouts/emergency-notification/_emergency-notification.scss

+@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);
+  border-bottom: 1px solid var(--uw-white);
+
+  &__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));
+    }
+
+  }
+
+  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__content {
+        * {
+          font-family: var(--font-systemmedium);
+          font-size: var(--font-size-1);
+        }
+        p {
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/patterns/03-layouts/emergency-notification/emergency-notification.twig

+<div class="uw-emergency-notification">
+  <div role="complementary" class="uw-emergency-notification__content">
+    {% include '@components/icon/icon.twig' with {
+      'name': 'special-alert',
+    } %}
+    {%  if pattern_lab %}
+      <div class="block-uw-cbl-emergency-notification">
+    {% endif %}
+    <div id="block-emergency-notification" class="block block-uw-custom-blocks block-uw-cbl-emergency-notification">
+      <div class="emergency-notification__content">
+        {{ emergency_notification.notification }}
+      </div>
+    </div>
+    {%  if pattern_lab %}
+      </div>
+    {% endif %}
+  </div>
+</div>
+

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);

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 %}