ISTWCMS-7158: update emergency notification

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

@@ -7,6 +7,7 @@
   width: 100%;
   // Puts the content at z-index 3
   z-index: var(--layer-content);
+
   &__content {
     @include uw-contained-width(var(--layout-max-width-narrow));
 
@@ -14,6 +15,7 @@
       // 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;
@@ -29,22 +31,26 @@
       > *:last-child {
         margin-bottom: 0;
       }
+
       p:last-of-type {
         margin-bottom: 0;
       }
+
       .emergency-notification__heading {
         @include heading-2();
       }
-      .special-alert__date {
+      .emergency-notification__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);
@@ -53,18 +59,21 @@
       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;
@@ -72,7 +81,8 @@
         padding: 0 var(--size-2);
         text-align: left;
       }
-      .block-uw-cbl-emergency-notification{
+
+      .block-uw-cbl-emergency-notification {
         border: 0 solid transparent;
         background-color: var(--uw-alert);
         padding: var(--size-1);
@@ -80,6 +90,7 @@
         * {
           color: var(--uw-white);
         }
+
         .emergency-notification__heading {
           @include heading-2();
           color: var(--uw-white);
@@ -88,6 +99,7 @@
           margin: var(--size-1) 0 var(--size-2) 0;
           line-height: 1.25;
         }
+
         .emergency-notification__date {
           background: var(--uw-white);
           color: var(--uw-alert);
@@ -98,6 +110,7 @@
           text-transform: uppercase;
           margin: var(--size-105) 0 0 0;
         }
+
         .emergency-notification__content {
           * {
             font-family: var(--font-systemmedium);

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

@@ -19,7 +19,9 @@
       </div>
     {% endif %}
     <div class="emergency-notification__content">
-      {{ emergency_notification.content }}
+      <div id="block-emergency-notification" class="block block-uw-custom-blocks block-uw-cbl-emergency-notification">
+        {{ emergency_notification.notification }}
+      </div>
     </div>
     {%  if pattern_lab %}
       </div>