Merge pull request #444 from nhsuk/develop

Release 1.13.3

CHANGELOG.md

@@ -1,5 +1,11 @@
 # NHS digital service manual Changelog
 
+## 1.13.3 - 25 November 2019
+
+- Made it clear in PDF guidance that PDFs can be used for a permanent record
+- Added an additional bullet point on PDFs being used as a permanent record.
+- Refactor CSS and HTML to clean up the code base and make the spacing more consistent
+
 ## 1.13.2 - 18 November 2019
 
 :wrench: **Fixes**

app/styles/app/_app-reading-width.scss

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   #APP READING WIDTH
+   ========================================================================== */
+
+/**
+ * Constrains text on a full width page
+ */
+
+@include mq($from: desktop) {
+  .app-component-reading-width {
+
+    h1 {
+      max-width: 14em;
+    }
+
+    h2 {
+      max-width: 22em;
+    }
+
+    h3,
+    .nhsuk-lede-text,
+    .nhsuk-body-l {
+      max-width: 29em;
+    }
+
+    h4 {
+      max-width: 32em;
+    }
+
+    p,
+    ul,
+    ol {
+      max-width: 37em;
+    }
+
+    .app-example,
+    .nhsuk-table,
+    .app-colour-list,
+    .app-example--image,
+    .app-pre,
+    .nhsuk-image__img {
+      max-width: 44em;
+    }
+
+    .app-tabs {
+      max-width: 100%;
+    }
+
+  }
+}

app/styles/app/_app.scss

@@ -1,10 +1,14 @@
+@import 'app-reading-width';
 @import 'code-block';
-@import 'code-snippets';
+@import 'code-highlight';
 @import 'colour-swatch';
-@import 'design-principles';
+@import 'example-callout';
+@import 'featured-list';
 @import 'footer';
 @import 'health-az';
 @import 'homepage';
+@import 'page-contents';
 @import 'related-nav';
-@import 'utilities';
 @import 'search';
+@import 'tag';
+@import 'utilities';

app/styles/app/_code-snippets.scss → app/styles/app/_code-highlight.scss

@@ -1,17 +1,33 @@
-.rich-text code {
+// Highlight code within body copy
+li code,
+p code,
+td code {
   background-color: $color_nhsuk-white;
   color: #d14; // sass-lint:disable-line no-color-hex no-color-literals
-  font-size: 1rem;
-  padding: 4px 8px;
+  padding: nhsuk-spacing(1) nhsuk-spacing(2);
 }
 
-.rich-text-code code {
-  background-color: $color_nhsuk-white;
-  color: $color_nhsuk-purple;
-  font-size: 1rem;
-  padding: 4px 8px 0 0;
+// Highlight code in a block
+.app-pre {
+  @include nhsuk-responsive-margin(4, 'bottom');
+
+  background: $color_nhsuk-white;
+  border: 1px solid $nhsuk-border-color;
+  margin-top: 0;
+  overflow: auto;
+  padding: nhsuk-spacing(3);
+  position: relative;
+
+  & + h2 {
+    @include nhsuk-responsive-padding(4, 'top');
+  }
+
+  & + h3 {
+    @include nhsuk-responsive-padding(2, 'top');
+  }
 }
 
+// Design example code snippet overrides
 .code-snippet__preformatted {
   align-items: flex-end;
   border-bottom: 1px solid $color_nhsuk-grey-4;

app/styles/app/_colour-swatch.scss

@@ -1,3 +1,11 @@
+/* ==========================================================================
+   #COLOUR SWATCH
+   ========================================================================== */
+
+/**
+ * Custom table for the colour palette
+ */
+
 .app-colour-list {
   margin-top: 0;
 
@@ -25,7 +33,6 @@
   }
 }
 
-
 .app-colour-list__column {
   padding-left: 0;
   padding-top: 0;
@@ -56,5 +63,3 @@
 .app-colour-list__swatch--border {
   border: 1px solid $nhsuk-border-color;
 }
-
-

app/styles/app/_example-callout.scss

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   #EXAMPLE-CALLOUT
+   ========================================================================== */
+
+.app-example {
+  @include top-and-bottom;
+  @include nhsuk-responsive-margin(5, 'bottom');
+  @include nhsuk-responsive-margin(2, 'top');
+  @include nhsuk-responsive-padding(5, 'bottom');
+  @include nhsuk-responsive-padding(5, 'left');
+  @include nhsuk-responsive-padding(5, 'right');
+  @include nhsuk-responsive-padding(7, 'top');
+
+  border: 1px solid $color_nhsuk-grey-3;
+  padding: nhsuk-spacing(7) nhsuk-spacing(5) nhsuk-spacing(5);
+  position: relative;
+}
+
+.app-example__heading {
+  left: -1px;
+  position: absolute;
+  top: -1px;
+}
+
+.app-example + h2 {
+  @include nhsuk-responsive-padding(4, 'top');
+}
+
+.app-example + h3 {
+  @include nhsuk-responsive-padding(2, 'top');
+}
+
+.app-example--white {
+  background: $color_nhsuk-white;
+}
+
+// Image example
+.app-example--image {
+  @include nhsuk-responsive-margin(4, 'bottom');
+  @include nhsuk-responsive-margin(2, 'top');
+
+  & + h2 {
+    @include nhsuk-responsive-padding(4, 'top');
+  }
+}

app/styles/app/_featured-list.scss

@@ -0,0 +1,72 @@
+/* ==========================================================================
+   #FEATURED-LIST
+   ========================================================================== */
+
+/**
+ * Styled list for design principles and service standard
+ */
+
+.featured-list {
+  list-style: none;
+  margin: nhsuk-spacing(7) 0 nhsuk-spacing(5);
+  padding-left: 0;
+}
+
+@include mq($from: tablet) {
+  .featured-list {
+    margin: 96px 0 nhsuk-spacing(9);
+  }
+}
+
+.featured-list--item {
+  margin-bottom: nhsuk-spacing(6);
+}
+
+@include mq($from: tablet) {
+  .featured-list--item {
+    display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+    display: flex; // sass-lint:disable-line no-duplicate-properties
+    margin-bottom: nhsuk-spacing(9);
+    padding-left: nhsuk-spacing(9);
+  }
+}
+
+.featured-list--item__content {
+  max-width: 99.99%;
+}
+
+.featured-list--item__number {
+  display: none;
+  font-weight: $nhsuk-font-bold;
+  margin-bottom: nhsuk-spacing(3);
+}
+
+@include mq($from: tablet) {
+  .featured-list--item__number {
+    display: block;
+    left: - nhsuk-spacing(9);
+    margin: 0;
+    position: absolute;
+  }
+}
+
+.featured-list--item__number--mobile {
+  display: block;
+}
+
+.featured-list--item__heading {
+  -ms-flex-align: center;
+  align-items: center;
+  border-top: nhsuk-spacing(1) solid $color_nhsuk-blue;
+  display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
+  display: flex; // sass-lint:disable-line no-duplicate-properties
+  margin-top: 0;
+  padding-top: nhsuk-spacing(3);
+  position: relative;
+}
+
+@include mq($from: tablet) {
+  .featured-list--item__heading {
+    padding-top: nhsuk-spacing(5);
+  }
+}

app/styles/app/_footer.scss

@@ -1,13 +1,19 @@
-.nhsuk-footer {
-  @include nhsuk-responsive-padding(4, bottom);
-}
+/* ==========================================================================
+   #FOOTER
+   ========================================================================== */
+
+/**
+ * Custom features for the service manual footer
+ */
 
-.ogl-footer {
+.app-ogl-footer {
   background-color: $color_nhsuk-grey-4;
 }
 
-.ogl-text {
+.app-ogl-footer--text {
   @include nhsuk-font(16);
+  @include nhsuk-responsive-padding(5, 'bottom');
+
   color: $color_nhsuk-grey-1;
   margin-bottom: 0;
   padding-bottom: nhsuk-spacing(4);