Merge pull request #3072 from cisagov/cb/2494-banner-boilerplates

#2494: Banner boilerplates - [CB]
cisagov · Nov 20, 2024 · 8eb5528 · 8eb5528
2 parents fc53832 + 6bba76c
commit 8eb5528
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 10 deletions.
diff --git a/docs/operations/runbooks/downtime_incident_management.md b/docs/operations/runbooks/downtime_incident_management.md
@@ -16,6 +16,8 @@ The following set of rules should be followed while an incident is in progress.
   - If downtime occurs outside of working hours, team members who are off for the day may still be pinged and called but are not required to join if unavailable to do so.
 - Uncomment the [banner on get.gov](https://github.com/cisagov/get.gov/blob/0365d3d34b041cc9353497b2b5f81b6ab7fe75a9/_includes/header.html#L9), so it is transparent to users that we know about the issue on manage.get.gov.
   - Designers or Developers should be able to make this change; if designers are online and can help with this task, that will allow developers to focus on fixing the bug.
+- Uncomment the [banner on manage.get.gov's base template](https://github.com/cisagov/manage.get.gov/blob/main/src/registrar/templates/base.html#L78).
+  - Designers or Developers should be able to make this change; if designers are online and can help with this task, that will allow developers to focus on fixing the bug.
 - If the issue persists for three hours or more, follow the [instructions for enabling/disabling a redirect to get.gov](https://docs.google.com/document/d/1PiWXpjBzbiKsSYqEo9Rkl72HMytMp7zTte9CI-vvwYw/edit).
 
 ## Post Incident

diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss
@@ -1,3 +1,4 @@
+@use "uswds-core" as *;
 @use "base" as *;
 
 // Fixes some font size disparities with the Figma
@@ -29,3 +30,24 @@
 .usa-alert__body--widescreen {
   max-width: $widescreen-max-width !important;
 }
+
+.usa-site-alert--hot-pink {
+  .usa-alert {
+    background-color: $hot-pink;
+    border-left-color: $hot-pink;
+    .usa-alert__body {
+      color: color('base-darkest');
+      background-color: $hot-pink;
+    }
+  }
+}
+
+@supports ((-webkit-mask:url()) or (mask:url())) {
+  .usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+    background-color: color('base-darkest');
+  }
+}
+
+.usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+  background-image: url('../img/usa-icons-bg/error.svg');
+}
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
@@ -2,6 +2,7 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
+$hot-pink: #FFC3F9;
 
 /* Styles for making visible to screen reader / AT users only. */
 .sr-only {

diff --git a/src/registrar/assets/sass/_theme/_uswds-theme.scss b/src/registrar/assets/sass/_theme/_uswds-theme.scss
@@ -119,7 +119,7 @@ in the form $setting: value,
   /*---------------------------
   ## Emergency state
   ----------------------------*/ 
-  $theme-color-emergency: #FFC3F9,
+  $theme-color-emergency: "red-warm-60v",
 
   /*---------------------------
   # Input settings 

diff --git a/src/registrar/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html
@@ -45,7 +45,7 @@
 {% block header %}
   {% if not IS_PRODUCTION %}
     {% with add_body_class="margin-left-1" %}
-      {% include "includes/non-production-alert.html" %}
+      {% include "includes/banner-non-production-alert.html" %}
     {% endwith %}
   {% endif %}
 

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
@@ -72,9 +72,28 @@
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
 
   {% if not IS_PRODUCTION %}
-    {% include "includes/non-production-alert.html" %}
+    {% include "includes/banner-non-production-alert.html" %}
   {% endif %}
 
+  {% comment %}
+    <!-- Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner.
+    DO NOT FORGET TO EDIT THE BANNER CONTENT -->
+
+    <!-- Red banner with exclamation mark in a circle: -->
+    {% include "includes/banner-error.html" %}
+
+    <!-- Blue banner with 'i'' mark in a circle: -->
+    {% include "includes/banner-info.html" %}
+
+    <!-- Marron banner with exclamation mark in a circle: -->
+    {% include "includes/banner-service-disruption.html" %}
+    {% include "includes/banner-site-alert.html" %}
+    {% include "includes/banner-system-outage.html" %}
+
+    <!-- Yellow banner with exclamation mark in a triangle: -->
+    {% include "includes/banner-warning.html" %}
+  {% endcomment %}
+
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">

diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
@@ -0,0 +1,12 @@
+<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert usa-alert--error">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
+        <p class="usa-alert__text maxw-none">
+            Text here
+        </p>
+      </div>
+    </div>
+</div>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
@@ -0,0 +1,12 @@
+<section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
+        <p class="usa-alert__text maxw-none">
+            Text here
+        </p>
+      </div>
+    </div>
+</section>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
@@ -0,0 +1,9 @@
+<section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert">
+        <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+            <p class="usa-alert__text maxw-none">
+                <strong>Attention:</strong> You are on a test site.
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html
@@ -0,0 +1,12 @@
+<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h3 class="usa-alert__heading">
+            Service disruption
+        </h3>
+        <p class="usa-alert__text maxw-none">
+            Month day, time-in-24-hour-notation UTC: We're investigating a service disruption on the .gov registrar. The .gov zone and individual domains remain online. However, the registrar is running slower than usual.
+        </p>
+      </div>
+    </div>
+</section>
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html
@@ -0,0 +1,12 @@
+<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h3 class="usa-alert__heading">
+            Header here
+        </h3>
+        <p class="usa-alert__tex maxw-none">
+            Text here
+        </p>
+      </div>
+    </div>
+</section>
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html
@@ -0,0 +1,12 @@
+<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h3 class="usa-alert__heading">
+            System outage
+        </h3>
+        <p class="usa-alert__text maxw-none">
+            Oct 16, 24:00 UTC: We're investigating an outage on the .gov registrar. The .gov zone and individual domains remain online. However, you can't request a new domain or manage an existing one at this time.
+        </p>
+      </div>
+    </div>
+</section>
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
@@ -0,0 +1,12 @@
+<div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+    <div class="usa-alert usa-alert--warning">
+      <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
+        <p class="usa-alert__text maxw-none">
+            Text here
+        </p>
+      </div>
+    </div>
+</div>
diff --git a/src/registrar/templates/includes/non-production-alert.html b/src/registrar/templates/includes/non-production-alert.html