From 4b271f91999fbb9151e194fa93cd82225c95d967 Mon Sep 17 00:00:00 2001
From: Ross Buggins <ross.buggins@nhs.net>
Date: Tue, 3 Dec 2024 15:18:21 +0000
Subject: [PATCH] Squashed commit of the following:

commit 7b904fcbfcf27ab56a3611ea2ad7baf97196787b
Author: Ross Buggins <ross.buggins@nhs.net>
Date:   Tue Nov 19 17:02:42 2024 +0000

    Quick and easy js to auto hide.

commit 8aed3560875f0193b5aa83035093da4c7144d962
Author: Jake Cosgrove <101206358+jakecosgrove@users.noreply.github.com>
Date:   Tue Nov 19 16:05:22 2024 +0000

    Developer banner and new site banner

commit a3d47d225b65af825f1703e755b6a2257e794810
Author: Jake Cosgrove <101206358+jakecosgrove@users.noreply.github.com>
Date:   Mon Nov 11 15:47:17 2024 +0000

    removed phase banner and underlines from primary nav list items when hovered

commit 3a30f41f770f8e9f801e1c76f28f6460e866318f
Author: Jake Cosgrove <101206358+jakecosgrove@users.noreply.github.com>
Date:   Mon Nov 11 13:50:40 2024 +0000

    removed border from phase banner

commit fc61be57aed0b52c74838399645a861d1232dc62
Author: Jake Cosgrove <101206358+jakecosgrove@users.noreply.github.com>
Date:   Fri Nov 8 16:32:05 2024 +0000

    Added phase banner component and related sass.

    Added new template for including pages of content that does not need a side-navigation.

commit 45d34e63a6c0ec9e48130ff1043be9cfa9d6d00c
Author: Jake Cosgrove <101206358+jakecosgrove@users.noreply.github.com>
Date:   Tue Nov 5 21:59:47 2024 +0000

    two-third column tests
---
 docs/Gemfile.lock                           |  5 +--
 docs/_includes/components/phase-banner.html | 14 ++++++++
 docs/_includes/primary-navigation.html      | 23 +++++++++++++
 docs/_layouts/no-nav-page.html              | 36 +++++++++++++++++++
 docs/_layouts/page.html                     | 30 ++++++++--------
 docs/_sass/_nhsnotify.scss                  | 38 ++++++++++++++++++---
 docs/pages/get-started/get-started.md       |  2 +-
 docs/pages/support/support.md               |  2 +-
 8 files changed, 126 insertions(+), 24 deletions(-)
 create mode 100644 docs/_includes/components/phase-banner.html
 create mode 100644 docs/_layouts/no-nav-page.html

diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
index 805bdf2..f081057 100644
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@@ -95,9 +95,10 @@ GEM
       rbs (>= 3, < 4)
       sorbet-runtime (>= 0.5.10782)
     safe_yaml (1.0.5)
-    sass-embedded (1.69.5-arm64-darwin)
+    sass-embedded (1.69.5)
       google-protobuf (~> 3.23)
-    sass-embedded (1.69.5-x86_64-linux-gnu)
+      rake (>= 13.0.0)
+    sass-embedded (1.69.5-arm64-darwin)
       google-protobuf (~> 3.23)
     sorbet-runtime (0.5.11466)
     strscan (3.1.0)
diff --git a/docs/_includes/components/phase-banner.html b/docs/_includes/components/phase-banner.html
new file mode 100644
index 0000000..313626b
--- /dev/null
+++ b/docs/_includes/components/phase-banner.html
@@ -0,0 +1,14 @@
+<div class="nhsuk-phase-banner" id="{{include.phase_id}}">
+  <div class="nhsuk-width-container">
+    <p class="nhsuk-phase-banner__content">
+      <strong class="nhsuk-tag">{{include.phase_tag}}</strong>
+      <span class="nhsuk-phase-banner__text">{{include.phase_text}}</span>
+    </p>
+  </div>
+</div>
+<script>
+  console.log("{{include.auto_hide}}")
+  if ("{{include.auto_hide}}" == 'true' && (window.location.hostname.startsWith('notify.nhs.uk') || window.location.hostname.startsWith('127.0.0.2'))) {
+    document.getElementById("{{ include.phase_id }}").style.visibility = 'hidden';
+  }
+</script>
diff --git a/docs/_includes/primary-navigation.html b/docs/_includes/primary-navigation.html
index e5a8688..a862866 100644
--- a/docs/_includes/primary-navigation.html
+++ b/docs/_includes/primary-navigation.html
@@ -9,3 +9,26 @@
     {% endfor -%}
   </ul>
 </nav>
+
+{% include components/phase-banner.html
+auto_hide='true'
+phase_id= 'dev'
+phase_tag= 'Developer'
+phase_text='This is a developer preview of notify.nhs.uk. <a href="https://notify.nhs.uk">Go to the live NHS Notify
+  website.</a>'
+%}
+
+{% include components/phase-banner.html
+phase_id= 'new'
+phase_tag= 'New'
+phase_text='This is new'
+auto_hide='false'
+%}
+
+
+{% include components/phase-banner.html
+phase_id= 'new'
+phase_tag= 'WOOHAA'
+phase_text='This is new'
+auto_hide='false'
+%}
diff --git a/docs/_layouts/no-nav-page.html b/docs/_layouts/no-nav-page.html
new file mode 100644
index 0000000..a2d0a36
--- /dev/null
+++ b/docs/_layouts/no-nav-page.html
@@ -0,0 +1,36 @@
+---
+layout: default
+---
+
+{% assign current_dir = page.dir %}
+{% assign paths = page.dir | split: "/" %}
+{% assign parent_dir = paths[1] %}
+
+{%-
+assign nav_pages = site.pages
+| where_exp: "item", "item.dir contains parent_dir"
+-%}
+
+{% assign first_level_dir = parent_dir | prepend: '/' | append: '/' %}
+{%-
+assign first_level = nav_pages
+| where_exp: "item", "item.dir == first_level_dir"
+| group_by: "section"
+| sort: 'name', 'last'
+-%}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-full">
+        <div class="nhsnotify-pane__main-content nhsuk-grid-column-three-quarters">
+          {% if page.section != undefined %}
+          <heading class="nhsuk-heading-s" style="margin-bottom: 0; color: #4c6272">{{ page.section }}</heading>
+          {% endif %}
+          <h1>{{ page.title }}</h1>
+          {{ content }}
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
index 400ec65..c250a33 100644
--- a/docs/_layouts/page.html
+++ b/docs/_layouts/page.html
@@ -3,20 +3,20 @@
 ---
 
 {% assign current_dir = page.dir %}
-{% assign paths = page.dir | split: "/"  %}
+{% assign paths = page.dir | split: "/" %}
 {% assign parent_dir = paths[1] %}
 
 {%-
-  assign nav_pages = site.pages
-    | where_exp: "item", "item.dir contains parent_dir"
+assign nav_pages = site.pages
+| where_exp: "item", "item.dir contains parent_dir"
 -%}
 
 {% assign first_level_dir = parent_dir | prepend: '/' | append: '/' %}
 {%-
-  assign first_level = nav_pages
-    | where_exp: "item", "item.dir == first_level_dir"
-    | group_by: "section"
-    | sort: 'name', 'last'
+assign first_level = nav_pages
+| where_exp: "item", "item.dir == first_level_dir"
+| group_by: "section"
+| sort: 'name', 'last'
 -%}
 <div class="nhsuk-width-container">
   <main class="nhsuk-main-wrapper" id="maincontent" role="main">
@@ -26,21 +26,21 @@
           <div class="nhsnotify-pane__side-bar nhsuk-grid-column-one-quarter">
             <nav class="nhsnotify-side-nav">
               <ul class="nhsuk-list nhsnotify-side-nav__list">
-                {% for section in first_level  %}
+                {% for section in first_level %}
                 {% if section.name != "" %}
-                  <p class="nhsuk-u-font-weight-bold nhsnotify-side-nav__list-section">{{ section.name }}</p>
+                <p class="nhsuk-u-font-weight-bold nhsnotify-side-nav__list-section">{{ section.name }}</p>
                 {% endif %}
-                  {% assign sorted = section.items | sort: 'nav_order' %}
-                  {% for post in sorted %}
-                    <li class="
+                {% assign sorted = section.items | sort: 'nav_order' %}
+                {% for post in sorted %}
+                <li class="
                       nhsnotify-side-nav__item
                       {% if post.url == page.url %}
                         nhsnotify-side-nav__item--current
                       {% endif %}
                     ">
-                      <a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
-                    </li>
-                  {% endfor %}
+                  <a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
+                </li>
+                {% endfor %}
                 {% endfor %}
               </ul>
 
diff --git a/docs/_sass/_nhsnotify.scss b/docs/_sass/_nhsnotify.scss
index 56c8639..ad4d2fe 100644
--- a/docs/_sass/_nhsnotify.scss
+++ b/docs/_sass/_nhsnotify.scss
@@ -2,7 +2,7 @@
   width: unset;
   background-color: unset;
   border-bottom: 0;
-  margin:unset;
+  margin: unset;
 }
 
 .nhsnotify-banner--blue {
@@ -68,14 +68,42 @@
 }
 
 .nhsuk-header__navigation-list {
-  justify-content: flex-start;
-  flex-wrap: wrap;
+  justify-content: flex-centre;
 }
 
 .nhsuk-header__navigation-link {
-  text-decoration: none;
+  text-decoration: underline;
 
   &:hover {
-    text-decoration: underline;
+    text-decoration: none;
   }
 }
+
+.nhsuk-phase-banner {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #fff;
+}
+
+.nhsuk-phase-banner__content {
+  font-size: 1rem;
+  line-height: 1.25;
+  margin-bottom: 0px;
+}
+
+.nhsuk-tag {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  color: #fff;
+  background-color: #005eb8;
+  letter-spacing: 1px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.nhsuk-phase-banner__text {
+  font-size: 1rem;
+  line-height: 1.25;
+  padding-left: 0.5em;
+}
diff --git a/docs/pages/get-started/get-started.md b/docs/pages/get-started/get-started.md
index d650827..60d0aa8 100644
--- a/docs/pages/get-started/get-started.md
+++ b/docs/pages/get-started/get-started.md
@@ -2,7 +2,7 @@
 # Feel free to add content and custom Front Matter to this file.
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
-layout: page
+layout: no-nav-page
 title: Get started
 nav_order: 6
 has_children: true
diff --git a/docs/pages/support/support.md b/docs/pages/support/support.md
index 06c195a..e4c47b7 100644
--- a/docs/pages/support/support.md
+++ b/docs/pages/support/support.md
@@ -2,7 +2,7 @@
 # Feel free to add content and custom Front Matter to this file.
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
-layout: page
+layout: no-nav-page
 title: Support
 nav_order: 5
 has_children: true