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)

Author: jakecosgrove

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/pages/features/emails.md

@@ -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/pages/features/letters.md

@@ -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/pages/features/nhs-app-messages.md

@@ -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."

docs/pages/features/text-messages.md

@@ -12,7 +12,7 @@ section: Message channels
 
 Use NHS Notify to send text messages such as invitations, alerts, notifications or reminders to your audiences. You can do this in bulk and individually.
 
-{% include components/image.html
+{% include components/image-with-caption.html
     src="nhs-notify-iphone-android-sms-example.svg"
     alt="An image of 2 mobile devices side by side showing a received text message, one displayed on iPhone and the other displayed on an Android device."
     caption="An example of a text message (SMS) sent by NHS Notify to an iPhone or Android mobile device."