Mobile responsiveness and styling, new content, update ruby version (#79)

* Added mention of 'message cascades' in routing plan content for 'parallel send' feature mention.

* 'or' replaced with 'and'

* Message status page created
- changes to /using-nhs-notify/mesh to match MESH guidance
- sender IDs changed to sender names

* Emma 2i requested changes

* Added /using-nhs-notify/nhs-app-templates, /using-nhs-notify/email-templates, /using-nhs-notify/text-message-templates and /using-nhs-notify/letter-templates.

These are based on the Confluence pages https://nhsd-confluence.digital.nhs.uk/pages/viewpage.action?spaceKey=RIS&title=3.8+Creating+letter+templates onwards, with some minor tweaks to word ordering. Romy has approved this content now.

Uploaded the standardised Word doc templates for all 4 channels to /assets/worddocs, and linked to these. Craig in cyber security approved this approach (see ticket for screenshot).

Updated /using-nhs-notify/personalisation in line with the Confluence page. The FAQs from onboarding indicated there's a user need to provide the PDS personalisation fields.

I also added content on how users provide their own personalisation data, in line with Tan's Confluence page https://nhsd-confluence.digital.nhs.uk/display/RIS/NHS+Notify+%7C+Personalisation+Fields.

In /pricing/text-messages, I replaced 'it will count as more than one message' with 'it will be charged as more than one message'. This was prompted by a comment from Romy on the text message template content. I tweaked the content to match the later version of the UI prototype, which we based on findings from user research.

* Removed mention of bank holidays from emails and text message delivery times.

* Removed unnecessary bullets and headings anchor links in Text message templates.

Updated link text for the 4 template pages in the Using NHS Notify parent page - removed 'Creating...' from the start of each link.

* Fixed typo in /text-message-templates. Removed 'Creating...' from links on /using-nhs-notify.

* Updated names of Word docs to replace spaces with hyphens and make all lower case. Updated downloadable links to follow the approach Jake researched, for example [letter template]({% link assets/worddocs/letter-template-nhs-notify.docx %})

* Removed unnecessary space from line 26 on docs/pages/using-nhs-notify/letter-templates.

* Update accept.txt

Includes:
- Noto
- URL
- ctrl
- pending_enrichment
- unnotified
- permanent_failure
- temporary_failure
- technical_failure
- precompiled
- validation_failed
- fullName
- namePrefix
- clientRef

* In /using-nhs-notify/delivery-times#letters, replaced the sentence 'Once your letter has been sent, it can take...' with 'Once you've provided us with recipients' NHS numbers, it can take up to 2 working days for our suppliers to dispatch your letter'.

I also added anchor links to the top of the same page, /using-nhs-notify/delivery-times, to make navigation easier.

* Added content on what users need to do in order to use recipient contact details that are outside of PDS.

* Emma recommendations

* Removed address_line_x, clientRef, recipientContactValue and template from the bulleted list of personalisation fields from PDS as these are for internal use only.

Restructured the first paragraph under ### Personal Demographics Service (PDS) personalisation fields. This was based off a conversation with Jake and it aims to clarify the link between PDS, NHS numbers and personalisation fields.

* In /workspaces/nhs-notify-web-cms-dev/docs/_sass/_nhsnotify.scss I added the line 'flex-wrap: wrap;' in the following code:

.nhsuk-header__navigation-list {
  justify-content: flex-start;
  flex-wrap: wrap;
}

This is an interim step to make the main nav list items wrap correctly when the site is viewed on a mobile device. It's not our ultimate solution but it makes the site more mobile responsive and accessible.

* Removed mentions of date of birth from failed message status descriptions. Removed date of birth as as an example of a column header in a MESH request.

* Added link to NHS Notify MESH documentation in /using-nhs-notify/mesh

* 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

* Changed first subheading to a h2 from h3

* Removed the other phase banners from Ross' test

* removed phase banner includes due to component not being tested or released by developer

* Update personalisation.md

* First draft updated guidance

* Requested changes

* Changes from Alex's review:
- corrected typo's
- added missing anchor link
- included image of example inbox showing sender name and 'from' address

* Romy suggested that we use screenshots to show where the sender names appear for NHS App and SMS.

This commit includes additional images to support user understanding of sender names and where they sit in context.

* This commit includes:
- new HTML includes specific for images with captions so they fit 100% of their container
- images on pages use new includes
- inset text has override style class to reduce margin-top
- side nav now disappears when below 768px breakpoint (need to talk to design team about mobile solution)

* Added the onboard with NHS Notify page to our main site to keep information in one place - requested by Amina in onboarding/ engagement.

* Added content about sending text message sender names for approval with NCSC.

* Use new image-with-text.html includes

* Changes from Emma/ Jake discussion

Removes numbered steps from /get-started and introduces onboarding as a section in /get-started

* Content changes following Emma's 2i

* Added 'new' to text message sender names

* Aligns side navigation styling to NHS UK frontend by removing indents from 'child' pages

* This commit includes:
- New breadcrumb.html includes to support navigation
- Updated styling to the side navigation to match the NHS Design system
- Updated side navigation to exclude parent pages
- primary-navigation.html updated to include mobile responsive dropdown (needs future commit to patch)
- New override css to remove margin-bottom from breadcrumb

* Header styling fixes - janky fixes to enable the menu dropdown to work at mobile breakpoints.

* Emma 2i requested changes:
- add and change link to sandbox environments
- Change 'lead in line' for details component in step 9
- replace(s) from device(s)
- rephrase bullets in step 9 'Prove you have developed your integration securely' to statements instead of questions

* Silly apostrophe syntax change

* Typo correction.

* Pause 'Onboard with NHS Notify' migration.

The migration of this page from the service catalogue has paused until changes to the onboarding process are confirmed and accurately reflected in the content.

* Changes:
- Moved 'text message sender name' to last section of page to reflect preferred channel order of NHS Notify
- removed 'return addresses for letters heading'
- reordered bulleted list of anchor links to reflect heading structure

* update ruby version

---------

Co-authored-by: Mark R <[email protected]>
Co-authored-by: emmagifford <[email protected]>
Co-authored-by: Ross Buggins <[email protected]>
Co-authored-by: alexcolbeck1 <[email protected]>

Author: 5 people

.github/workflows/jekyll-gh-pages.yml

@@ -41,7 +41,7 @@ jobs:
           node-version: 18
       - run: npm ci
       - name: Setup Ruby
-        uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
+        uses: ruby/setup-ruby@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.0
         with:
           ruby-version: "3.2" # Not needed with a .ruby-version file
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically

.github/workflows/stage-4-acceptance.yaml

@@ -131,19 +131,19 @@ jobs:
         with:
           node-version: 18
       - run: npm ci
-        working-directory: './docs'
+        working-directory: "./docs"
       - name: Setup Ruby
-        uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
+        uses: ruby/setup-ruby@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.0
         with:
-          ruby-version: '3.1'
+          ruby-version: "3.1"
           bundler-cache: true
           cache-version: 0
-          working-directory: './docs'
+          working-directory: "./docs"
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5
         with:
-          working-directory: './docs'
+          working-directory: "./docs"
       - name: Build with Jekyll
         working-directory: ./docs
         run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"

docs/_includes/breadcrumb.html

@@ -0,0 +1,96 @@
+<nav class="nhsnotify-breadcrumb" aria-label="Breadcrumb">
+
+  <!-- Desktop breadcrumb -->
+
+  <ol class="nhsuk-breadcrumb__list">
+    <!-- Level 1 -->
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/">Home</a></li>
+    <!-- Level 2 -->
+    {% if page.parent == "Features" %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/features">Features</a>
+    </li>
+    {% endif %}
+    {% if page.parent == "Pricing" %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/pricing">Pricing</a>
+    </li>
+    {% endif %}
+    {% if page.parent == "Using NHS Notify" %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/using-nhs-notify">Using
+        NHS Notify</a>
+    </li>
+    {% endif %}
+    {% if page.parent == "Support" %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/support">Support</a>
+    </li>
+    {% endif %}
+    {% if page.parent == "Get started" %}
+    <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/get-started">Get
+        started</a>
+    </li>
+    {% endif %}
+  </ol>
+
+  <!-- Mobile breadcrumb back -->
+
+  <p class="nhsuk-breadcrumb__back">
+    <!-- Features -->
+    {% if page.title == "Features" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Home
+    </a>
+    {% endif %}
+    {% if page.parent == "Features" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/features">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Features
+    </a>
+    {% endif %}
+    <!-- Pricing -->
+    {% if page.title == "Pricing" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Home
+    </a>
+    {% endif %}
+    {% if page.parent == "Pricing" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/pricing">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Pricing
+    </a>
+    {% endif %}
+    <!-- Using NHS Notify -->
+    {% if page.title == "Using NHS Notify" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Home
+    </a>
+    {% endif %}
+    {% if page.parent == "Using NHS Notify" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/using-nhs-notify">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Using NHS Notify
+    </a>
+    {% endif %}
+    <!-- Support -->
+    {% if page.title == "Support" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Home
+    </a>
+    {% endif %}
+    <!-- Get started -->
+    {% if page.title == "Get started" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Home
+    </a>
+    {% endif %}
+    {% if page.parent == "Get started" %}
+    <a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/get-started">
+      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+      Get started
+    </a>
+    {% endif %}
+  </p>
+</nav>

docs/_includes/header.html

@@ -1,7 +1,7 @@
 <header class="nhsuk-header" role="banner">
   <div class="nhsuk-header__container">
     <div class="nhsuk-header__logo">
-      <a class="nhsuk-header__link nhsuk-header__link--service" href="{{ site.baseurl }}/" aria-label="NHS homepage">
+      <a class="nhsuk-header__link nhsuk-header__link--service" href="{{ site.baseurl }}/" aria-label="NHS Notify homepage">
         <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
           <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
           <path class="nhsuk-logo__text" fill="#fff"

docs/_includes/primary-navigation.html

@@ -7,5 +7,17 @@
       </a>
     </li>
     {% endfor -%}
+    <li class="nhsuk-mobile-menu-container">
+      <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+        <span class="nhsuk-u-visually-hidden">Browse</span>
+        More
+        <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          aria-hidden="true" focusable="false">
+          <path
+            d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
+          </path>
+        </svg>
+      </button>
+    </li>
   </ul>
 </nav>

docs/_layouts/page.html

@@ -19,11 +19,12 @@
 | sort: 'name', 'last'
 -%}
 <div class="nhsuk-width-container">
-  <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+  {%- include breadcrumb.html -%}
+  <main class="nhsuk-main-wrapper--s" id="maincontent" role="main">
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-full">
         <div class="nhsnotify-pane">
-          <div class="nhsnotify-pane__side-bar nhsuk-grid-column-one-quarter">
+          <div class="nhsnotify-pane__side-bar">
             <nav class="nhsnotify-side-nav">
               <ul class="nhsuk-list nhsnotify-side-nav__list">
                 {% for section in first_level %}
@@ -32,6 +33,7 @@
                 {% endif %}
                 {% assign sorted = section.items | sort: 'nav_order' %}
                 {% for post in sorted %}
+                {% unless post.has_children %}
                 <li class="
                       nhsnotify-side-nav__item
                       {% if post.url == page.url %}
@@ -40,13 +42,14 @@
                     ">
                   <a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
                 </li>
+                {% endunless %}
                 {% endfor %}
                 {% endfor %}
               </ul>
 
             </nav>
           </div>
-          <div class="nhsnotify-pane__main-content nhsuk-grid-column-three-quarters">
+          <div class="nhsnotify-pane__main-content">
             {% if page.section != undefined %}
             <heading class="nhsuk-heading-s" style="margin-bottom: 0; color: #4c6272">{{ page.section }}</heading>
             {% endif %}

docs/_sass/_nhsnotify-side-nav.scss

@@ -60,18 +60,14 @@
 }
 
 .nhsnotify-side-nav__item {
-  padding: 4px 0 0.5em 1.3em;
-
-  &:first-child {
-    padding-left: 0;
+  padding: 4px 0 0.5em;
 
     &.nhsnotify-side-nav__item--current {
       left: -1.2em;
-      padding-left: 1em;
+      padding-left: 0.75em;
       position: relative;
     }
   }
-}
 
 .nhsnotify-side-nav__item--current {
   font-weight: 600;
@@ -100,14 +96,14 @@
   }
 }
 
+// Mobile navigation
+.nhsnotify-index-navigation {
+  @include nhsuk-responsive-padding(4, 'top');
+}
+
 // Hide content on desktop
 .nhsnotify-u-hide-desktop {
   @include mq($from: desktop) {
     display: none;
   }
 }
-
-// Mobile navigation
-.nhsnotify-index-navigation {
-  @include nhsuk-responsive-padding(4, 'top');
-}

docs/_sass/_nhsnotify.scss

@@ -67,8 +67,21 @@
   margin: 0;
 }
 
-.nhsuk-header__navigation-list {
-  justify-content: flex-centre;
+.nhsuk-header__navigation-item {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.nhsuk-header__navigation-item:first-child .nhsuk-header__navigation-link {
+  padding-left: 0;
+}
+
+.nhsuk-header__navigation-item:nth-child(5) .nhsuk-header__navigation-link {
+  padding-right: 0;
+}
+
+.nhsuk-header__drop-down .nhsuk-header__navigation-item:first-child .nhsuk-header__navigation-link {
+  padding-left: 16px;
 }
 
 .nhsuk-header__navigation-link {
@@ -77,6 +90,7 @@
   &:hover {
     text-decoration: none;
   }
+
 }
 
 .nhsuk-phase-banner {
@@ -145,3 +159,16 @@
     @include nhsuk-responsive-margin(0, "top"); /* [4] */
   }
 }
+
+// Breadcrumb spacing override
+
+.nhsnotify-breadcrumb {
+  @include print-hide();
+
+  padding-top: 20px;
+
+  + .nhsuk-width-container .nhsuk-main-wrapper {
+    margin-top: 20px;
+  }
+
+}