From c4bd5bab134ae6bd9e4f6a9febaa3d8f4086de81 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Tue, 12 Nov 2024 22:16:37 -0500 Subject: [PATCH 1/5] Banner boilerplates --- .../runbooks/downtime_incident_management.md | 2 ++ src/registrar/templates/admin/base_site.html | 2 +- src/registrar/templates/base.html | 12 +++++++++++- src/registrar/templates/includes/banner-error.html | 10 ++++++++++ src/registrar/templates/includes/banner-info.html | 10 ++++++++++ .../includes/banner-non-production-alert.html | 9 +++++++++ .../includes/banner-service-disruption.html | 12 ++++++++++++ .../templates/includes/banner-site-alert.html | 12 ++++++++++++ .../templates/includes/banner-system-outage.html | 12 ++++++++++++ src/registrar/templates/includes/banner-warning.html | 10 ++++++++++ .../templates/includes/non-production-alert.html | 7 ------- 11 files changed, 89 insertions(+), 9 deletions(-) create mode 100644 src/registrar/templates/includes/banner-error.html create mode 100644 src/registrar/templates/includes/banner-info.html create mode 100644 src/registrar/templates/includes/banner-non-production-alert.html create mode 100644 src/registrar/templates/includes/banner-service-disruption.html create mode 100644 src/registrar/templates/includes/banner-site-alert.html create mode 100644 src/registrar/templates/includes/banner-system-outage.html create mode 100644 src/registrar/templates/includes/banner-warning.html delete mode 100644 src/registrar/templates/includes/non-production-alert.html diff --git a/docs/operations/runbooks/downtime_incident_management.md b/docs/operations/runbooks/downtime_incident_management.md index 4aa884e9d..8ace9fa11 100644 --- 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/templates/admin/base_site.html b/src/registrar/templates/admin/base_site.html index db34fd893..5ca5edffc 100644 --- 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 index b14dab2fa..8967f9b03 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -72,9 +72,19 @@ Skip to main content {% 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. + {% include "includes/banner-error.html" %} + {% include "includes/banner-info.html" %} + {% include "includes/banner-service-disruption.html" %} + {% include "includes/banner-site-alert.html" %} + {% include "includes/banner-system-outage.html" %} + {% include "includes/banner-warning.html" %} + {% endcomment %} +
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html new file mode 100644 index 000000000..690510c39 --- /dev/null +++ b/src/registrar/templates/includes/banner-error.html @@ -0,0 +1,10 @@ +
+
+
+

Header

+

+ Text here +

+
+
+
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html new file mode 100644 index 000000000..b73094042 --- /dev/null +++ b/src/registrar/templates/includes/banner-info.html @@ -0,0 +1,10 @@ +
+
+
+

Header

+

+ Text here +

+
+
+
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html new file mode 100644 index 000000000..93651ae1a --- /dev/null +++ b/src/registrar/templates/includes/banner-non-production-alert.html @@ -0,0 +1,9 @@ +
+
+
+

+ Attention: You are on a test site. +

+
+
+
diff --git a/src/registrar/templates/includes/banner-service-disruption.html b/src/registrar/templates/includes/banner-service-disruption.html new file mode 100644 index 000000000..fc89ee65d --- /dev/null +++ b/src/registrar/templates/includes/banner-service-disruption.html @@ -0,0 +1,12 @@ +
+
+
+

+ Service disruption +

+

+ 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. +

+
+
+
diff --git a/src/registrar/templates/includes/banner-site-alert.html b/src/registrar/templates/includes/banner-site-alert.html new file mode 100644 index 000000000..52256f46b --- /dev/null +++ b/src/registrar/templates/includes/banner-site-alert.html @@ -0,0 +1,12 @@ +
+
+
+

+ Header here +

+

+ Text here +

+
+
+
diff --git a/src/registrar/templates/includes/banner-system-outage.html b/src/registrar/templates/includes/banner-system-outage.html new file mode 100644 index 000000000..911fa4487 --- /dev/null +++ b/src/registrar/templates/includes/banner-system-outage.html @@ -0,0 +1,12 @@ +
+
+
+

+ System outage +

+

+ 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. +

+
+
+
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html new file mode 100644 index 000000000..ad38078c8 --- /dev/null +++ b/src/registrar/templates/includes/banner-warning.html @@ -0,0 +1,10 @@ +
+
+
+

Header

+

+ Text here +

+
+
+
diff --git a/src/registrar/templates/includes/non-production-alert.html b/src/registrar/templates/includes/non-production-alert.html deleted file mode 100644 index 7d8215a76..000000000 --- a/src/registrar/templates/includes/non-production-alert.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
-
- Attention: You are on a test site. -
-
-
From 008a1f1d30843624189c9033ed2e75801288c6ff Mon Sep 17 00:00:00 2001 From: Katherine-Osos <119689946+Katherine-Osos@users.noreply.github.com> Date: Thu, 14 Nov 2024 12:13:09 -0600 Subject: [PATCH 2/5] Update banner-test.html --- src/registrar/templates/includes/banner-info.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html index b73094042..a8cd13050 100644 --- a/src/registrar/templates/includes/banner-info.html +++ b/src/registrar/templates/includes/banner-info.html @@ -1,9 +1,9 @@
-

Header

+

Announcement:

- Text here + Katherine & Rachid are now ruling the world!

From 1d55a305f85904f626156b2bf261fa96ee41ca31 Mon Sep 17 00:00:00 2001 From: Katherine-Osos <119689946+Katherine-Osos@users.noreply.github.com> Date: Thu, 14 Nov 2024 12:14:20 -0600 Subject: [PATCH 3/5] Expose banner code --- src/registrar/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html index 8967f9b03..33802e8d2 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -84,7 +84,7 @@ {% include "includes/banner-system-outage.html" %} {% include "includes/banner-warning.html" %} {% endcomment %} - +{% include "includes/banner-info.html" %}
From 55cb07660e1c1fd2548c47adc4fcb1b15564ce59 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 14 Nov 2024 13:22:17 -0500 Subject: [PATCH 4/5] test 3: testing banner deployment with Katherine --- src/registrar/templates/base.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html index 33802e8d2..d2e3c4e14 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -84,7 +84,9 @@ {% include "includes/banner-system-outage.html" %} {% include "includes/banner-warning.html" %} {% endcomment %} -{% include "includes/banner-info.html" %} + + {% include "includes/banner-info.html" %} +
From c876071392e969e4eda70357ff7917e5ba2a7e3c Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Thu, 14 Nov 2024 13:55:08 -0500 Subject: [PATCH 5/5] Revise emergency banner colors and update code documentation --- src/registrar/assets/sass/_theme/_alerts.scss | 22 +++++++++++++++++++ src/registrar/assets/sass/_theme/_base.scss | 1 + .../assets/sass/_theme/_uswds-theme.scss | 2 +- src/registrar/templates/base.html | 13 ++++++++--- .../templates/includes/banner-error.html | 4 +++- .../templates/includes/banner-info.html | 6 +++-- .../includes/banner-non-production-alert.html | 2 +- .../templates/includes/banner-warning.html | 4 +++- 8 files changed, 45 insertions(+), 9 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss index 08404232e..3cfa768fe 100644 --- 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 index 85f453dac..db1599621 100644 --- 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 index 6ef679734..1661a6388 100644 --- 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/base.html b/src/registrar/templates/base.html index d2e3c4e14..b123a0eac 100644 --- a/src/registrar/templates/base.html +++ b/src/registrar/templates/base.html @@ -76,17 +76,24 @@ {% 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. + + + {% include "includes/banner-error.html" %} + + {% include "includes/banner-info.html" %} + + {% include "includes/banner-service-disruption.html" %} {% include "includes/banner-site-alert.html" %} {% include "includes/banner-system-outage.html" %} + + {% include "includes/banner-warning.html" %} {% endcomment %} - {% include "includes/banner-info.html" %} -
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html index 690510c39..7b5c32ed1 100644 --- a/src/registrar/templates/includes/banner-error.html +++ b/src/registrar/templates/includes/banner-error.html @@ -1,7 +1,9 @@
-

Header

+

+ Header +

Text here

diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html index a8cd13050..e5d54e483 100644 --- a/src/registrar/templates/includes/banner-info.html +++ b/src/registrar/templates/includes/banner-info.html @@ -1,9 +1,11 @@
-

Announcement:

+

+ Header +

- Katherine & Rachid are now ruling the world! + Text here

diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html index 93651ae1a..61d4eed51 100644 --- a/src/registrar/templates/includes/banner-non-production-alert.html +++ b/src/registrar/templates/includes/banner-non-production-alert.html @@ -1,4 +1,4 @@ -
+

diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html index ad38078c8..6838aef7b 100644 --- a/src/registrar/templates/includes/banner-warning.html +++ b/src/registrar/templates/includes/banner-warning.html @@ -1,7 +1,9 @@

-

Header

+

+ Header +

Text here