Banner boilerplates

This commit is contained in:
Rachid Mrad 2024-11-12 22:16:37 -05:00
parent 37da20f621
commit c4bd5bab13
No known key found for this signature in database
11 changed files with 89 additions and 9 deletions

View file

@ -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

View file

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

View file

@ -72,9 +72,19 @@
<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.
{% 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 %}
<section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion">
<header class="usa-banner__header">

View file

@ -0,0 +1,10 @@
<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>

View file

@ -0,0 +1,10 @@
<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>

View file

@ -0,0 +1,9 @@
<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 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,10 @@
<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>

View file

@ -1,7 +0,0 @@
<div class="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 add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
<b>Attention:</b> You are on a test site.
</div>
</div>
</div>