Squashed commit of the following:

commit 7b904fc Author: Ross Buggins <[email protected]> Date: Tue Nov 19 17:02:42 2024 +0000 Quick and easy js to auto hide. commit 8aed356 Author: Jake Cosgrove <[email protected]> Date: Tue Nov 19 16:05:22 2024 +0000 Developer banner and new site banner commit a3d47d2 Author: Jake Cosgrove <[email protected]> Date: Mon Nov 11 15:47:17 2024 +0000 removed phase banner and underlines from primary nav list items when hovered commit 3a30f41 Author: Jake Cosgrove <[email protected]> Date: Mon Nov 11 13:50:40 2024 +0000 removed border from phase banner commit fc61be5 Author: Jake Cosgrove <[email protected]> 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 45d34e6 Author: Jake Cosgrove <[email protected]> Date: Tue Nov 5 21:59:47 2024 +0000 two-third column tests
NHSDigital · Dec 3, 2024 · 4b271f9 · 4b271f9
1 parent 1c54ab4
commit 4b271f9
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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