Sender name updates, minor styling and mobile responsiveness fixes (#78)

* 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 content about sending text message sender names for approval with NCSC.

* Use new image-with-text.html includes

* Content changes following Emma's 2i

* Added 'new' to text message sender names

---------

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

docs/_includes/components/image-with-caption.html

@@ -0,0 +1,13 @@
+<figure class="nhsuk-image-with-caption {{ include.class | xml_escape }}">
+  {% assign src = '/assets/images/' | prepend: site.baseurl | append: include.src %}
+  {% if include.src contains 'https://' %}
+  <img class="nhsuk-image__img" src='{{ include.src | uri_escape }}' alt='{{ include.alt | xml_escape }}' />
+  {% else %}
+  <img class="nhsuk-image__img" src='{{ src }}' alt='{{ include.alt | xml_escape }}' />
+  {% endif %}
+  {% if include.caption %}
+  <figcaption class="nhsuk-image__caption">
+    {{ include.caption }}
+  </figcaption>
+  {% endif %}
+</figure>

docs/_includes/components/inset-text.html

@@ -1,4 +1,4 @@
-<div class="nhsuk-inset-text">
+<div class="nhsuk-inset-text-override">
   <span class="nhsuk-u-visually-hidden">Information:</span>
   {{ include.text | markdownify }}
 </div>

docs/_sass/_nhsnotify-side-nav.scss

@@ -1,35 +1,62 @@
 .nhsnotify-pane {
-  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+  display: flex; // sass-lint:disable-line no-duplicate-properties
   min-height: 0;
   overflow: inherit;
   position: relative;
 }
 
 .nhsnotify-pane__side-bar {
+  -ms-flex: 0 0 auto;
+  -webkit-box-flex: 0;
   flex: 0 0 auto;
-  width: 280px;
-  padding: 0;
+  width: 220px;
+
+  @include mq($until: desktop) {
+    display: none;
+  }
 }
 
 .nhsnotify-pane__main-content {
-  display: flex;
+  -ms-flex: 1 1 100%; // sass-lint:disable-line no-duplicate-properties
+  -ms-flex-direction: column;
+  -webkit-box-direction: normal;
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+  display: flex; // sass-lint:disable-line no-duplicate-properties
   flex: 1 1 100%;
   flex-direction: column;
   min-width: 0;
+
+  @include mq($from: desktop) {
+    padding-left: nhsuk-spacing(9);
+  }
+
 }
 
 .nhsnotify-side-nav__list {
-  font-size: 1em;
-  line-height: 1.3;
+  @include nhsuk-font(16, $line-height: 1.3);
   margin-bottom: 0;
+
+  @include mq($until: desktop) {
+    @include nhsuk-font(19, $line-height: 1.3);
+    margin-bottom: nhsuk-spacing(2);
+  }
 }
 
 .nhsnotify-side-nav__list-section {
-  @extend .nhsuk-u-font-weight-bold;
-  color: #4c6272;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  font-size: 1em;
+  @include nhsuk-font(19, $line-height: 1.25, $weight: bold);
+  color: $nhsuk-secondary-text-color;
+  margin-bottom: 12px;
+  padding-top: 4px;
+
+  @include mq($until: desktop) {
+    @include nhsuk-font(24, $line-height: 1.25, $weight: bold);
+    color: $nhsuk-text-color;
+  }
 }
 
 .nhsnotify-side-nav__item {
@@ -55,6 +82,10 @@
 .nhsnotify-side-nav__link {
   text-decoration: none;
 
+  @include mq($until: desktop) {
+    text-decoration: underline;
+  }
+
   &:visited {
     color:  $blue-000;
   }
@@ -68,3 +99,15 @@
     color: #212b32;
   }
 }
+
+// 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

@@ -107,3 +107,41 @@
   line-height: 1.25;
   padding-left: 0.5em;
 }
+
+.nhsuk-inset-text-override {
+  @include top-and-bottom(); /* [1] */
+  @include reading-width(); /* [2] */
+
+  @include nhsuk-responsive-margin(7, "bottom");
+  @include nhsuk-responsive-margin(4, "top");
+  @include nhsuk-responsive-padding(4);
+
+  border-left: $nhsuk-border-width-inset-text solid $color_nhsuk-blue;
+
+  @include mq($media-type: print) {
+    border-color: $nhsuk-print-text-color;
+  }
+}
+
+.nhsuk-image-with-caption {
+  background-color: $color_nhsuk-white;
+  border-bottom: 1px solid $color_nhsuk-grey-4;
+
+  margin-left: 0; /* [1] */
+  margin-right: 0; /* [1] */
+
+  @include nhsuk-responsive-margin(6, "bottom");
+  @include nhsuk-responsive-margin(3, "top");
+
+  @include mq($from: desktop) {
+    width: 100%; /* [2] */
+  }
+
+  @include mq($media-type: print) {
+    width: 50%; /* [3] */
+  }
+
+  & + .nhsuk-image {
+    @include nhsuk-responsive-margin(0, "top"); /* [4] */
+  }
+}

docs/assets/images/email-sender-name-example-nhs-notify.png

@@ -12,7 +12,7 @@ section: Message channels
 
 Use NHS Notify to send free unlimited emails to patients and members of the public, in bulk and individually.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-email-example.svg"
     alt="A screenshot of an email sent by NHS Notify."
     caption="An example of an email sent by NHS Notify."

docs/assets/images/nhs-app-sender-name-example-nhs-notify-1.png

@@ -12,7 +12,7 @@ section: Message channels
 
 You can use NHS Notify to print and send letters to patients and members of the public with addresses in the UK. You can do this in bulk and individually.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-letter-two-sides-example.svg"
     alt="An image showing both sides of a letter sent by NHS Notify"
     caption="An example of a black and white double-sided letter sent by NHS Notify."

docs/assets/images/text-message-sender-name-example-nhs-notify-1.png

@@ -12,7 +12,7 @@ section: Message channels
 
 Send free messages of up to 1,000 characters to patients and members of the public who have the NHS App.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-nhs-app-example-2.svg"
     alt="A screenshot of an opened message in the NHS App inbox."
     caption="An example of a message sent with the NHS App."
@@ -43,7 +43,7 @@ When a user selects the banner notification, this opens their message in the NHS
 
 To protect recipients, banner notifications pushed by the NHS App do not include any of your message content.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-nhs-app-banner-notification.svg"
     alt="An image of 2 mobile devices side by side showing an example banner notification for both iPhone and Android devices pushed by the NHS App."
     caption="An example of a banner notification pushed to an iPhone and an Android device by the NHS App."
@@ -53,7 +53,7 @@ To protect recipients, banner notifications pushed by the NHS App do not include
 
 When a recipient receives a NHS App message, a badge notification will appear on the NHS App icon. Badges let NHS App users know that there’s an unopened message or notification for them in the app.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-nhs-app-badge-notification.svg"
     alt="A screenshot of the NHS App icon with a red badge showing 1 notification."
     caption="An example of a badge notification pushed by the NHS App when a message is sent to a recipient’s NHS App inbox."