From 5a54dd40f6f6c205d6df56f76dc6f2d2d2740b16 Mon Sep 17 00:00:00 2001
From: Laura Porter <laura@dxw.com>
Date: Thu, 8 Sep 2022 19:46:42 +0100
Subject: [PATCH] Add announcement banner on the death of Queen Elizabeth

---
 .../sass/includes/_announcement_banner.scss   | 64 +++++++++++++++++++
 ds_judgements_public_ui/sass/main.scss        |  1 +
 ds_judgements_public_ui/templates/base.html   |  1 +
 .../includes/announcement_banner.html         |  7 ++
 .../templates/layout_judgment_html.html       |  1 +
 5 files changed, 74 insertions(+)
 create mode 100644 ds_judgements_public_ui/sass/includes/_announcement_banner.scss
 create mode 100644 ds_judgements_public_ui/templates/includes/announcement_banner.html

diff --git a/ds_judgements_public_ui/sass/includes/_announcement_banner.scss b/ds_judgements_public_ui/sass/includes/_announcement_banner.scss
new file mode 100644
index 000000000..0123bae9c
--- /dev/null
+++ b/ds_judgements_public_ui/sass/includes/_announcement_banner.scss
@@ -0,0 +1,64 @@
+.announcement-banner {
+  background-color: $color__black;
+  color: $color__white;
+  padding: calc($spacer__unit);
+
+  &__container {
+  }
+
+  &__notice {
+    padding: 0.3em 0;
+    font-family: "Roboto", sans-serif;
+    font-size: 1.1rem;
+    text-align: center;
+
+    @media (min-width: $grid__breakpoint-large) {
+       text-align: center;
+       font-size: 1.2rem;
+    }
+
+    a {
+      background-color: $color__white;
+      padding: 0.5rem 1rem;
+      color: $color__black;
+      display: inline-block;
+      font-weight: bold;
+      text-decoration: none;
+      font-family: "Roboto", sans-serif;
+
+      &:focus {
+        outline: 0.3rem solid $color__yellow;
+        background-color: $color__dark-blue;
+        color: $color__white;
+      }
+
+      &:hover {
+        background-color: $color__dark-blue;
+        color: $color__white;
+      }
+    }
+  }
+
+  &__phase {
+    background-color: $color__white;
+    color: $color__black;
+    text-transform: uppercase;
+    padding: 0 calc($spacer__unit / 4);
+    margin-right: $spacer__unit;
+    font-weight: 700;
+  }
+
+  &__message {
+    margin: 0;
+    display: block;
+    line-height: 1.8rem;
+    font-size: 1.6rem;
+    padding: 1rem;
+    font-weight: bold;
+  }
+  &__sub-message {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: normal;
+  }
+}
diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss
index 3f693e1b9..273456386 100644
--- a/ds_judgements_public_ui/sass/main.scss
+++ b/ds_judgements_public_ui/sass/main.scss
@@ -28,3 +28,4 @@
 @import "includes/homepage_browse";
 @import "includes/what_to_expect";
 @import "includes/js_enabled";
+@import "includes/announcement_banner";
diff --git a/ds_judgements_public_ui/templates/base.html b/ds_judgements_public_ui/templates/base.html
index 20273be9f..201db8b00 100644
--- a/ds_judgements_public_ui/templates/base.html
+++ b/ds_judgements_public_ui/templates/base.html
@@ -31,6 +31,7 @@
     {% include 'includes/cookie_consent/cookie_banner.html' %}
     <a id="skip-to-main-content" href="#main-content">{% translate "skiplink" %}</a>
     {% include 'includes/gtm/gtm_body.html' %}
+    {% include 'includes/announcement_banner.html' %}
     {% include 'includes/phase_banner.html' %}
     <main id="main-content">
       {% block content %}
diff --git a/ds_judgements_public_ui/templates/includes/announcement_banner.html b/ds_judgements_public_ui/templates/includes/announcement_banner.html
new file mode 100644
index 000000000..7555eeb6d
--- /dev/null
+++ b/ds_judgements_public_ui/templates/includes/announcement_banner.html
@@ -0,0 +1,7 @@
+<div class="announcement-banner">
+    <div class="announcement-banner__container">
+        <div class="announcement-banner__notice">
+            <p class="announcement-banner__message">HM QUEEN ELIZABETH II <span class="announcement-banner__sub-message">21 April 1926 - 08 September 2022</span></p>
+        </div>
+    </div>
+</div>
diff --git a/ds_judgements_public_ui/templates/layout_judgment_html.html b/ds_judgements_public_ui/templates/layout_judgment_html.html
index ba9d8b793..54fed0b15 100644
--- a/ds_judgements_public_ui/templates/layout_judgment_html.html
+++ b/ds_judgements_public_ui/templates/layout_judgment_html.html
@@ -28,6 +28,7 @@
 {% include 'includes/cookie_consent/cookie_banner.html' %}
 <a id="skip-to-main-content" href="#main-content">{% translate "skiplink" %}</a>
 {% include 'includes/gtm/gtm_body.html' %}
+{% include 'includes/announcement_banner.html' %}
 {% include 'includes/phase_banner.html' %}
 <header class="page-header">
   {% include 'includes/breadcrumbs.html' with current=context.page_title title=context.page_title link=request.path %}