Merge branch 'main' into content-review

.gitpod.yml

@@ -7,5 +7,3 @@
 tasks:
   - init: npm install && npm run build
     command: npm run start
-
-

README.md

@@ -16,7 +16,7 @@ If you want to contribute to the NHS prototype kit guidance, then read our [cont
 
 We normally use the [NHS content guide](https://service-manual.nhs.uk/content) for terms. But there are some terms that are only used in the guidance for the kit:
 
-### command line
+#### command line
 
 Lower case. Only use for Windows instructions. Normally it will be ‘the command line’.
 
@@ -27,20 +27,34 @@ Title case.
 
 #### NHS, NHS.UK, NHS England
 
-Use ‘NHS.UK’ for products that are for delivery teams and not the public (find out more on the [NHS health writing A-Z](https://service-manual.nhs.uk/content/a-to-z-of-nhs-health-writing#N))This includes the NHS prototype kit, NHS.UK design system, NHS.UK service manual or NHS.UK website.
+
+We are changing how we talk about tools for delivery teams. These used to be called 'NHS.UK' products but we are now removing the '.UK'. This means that we talk about the:
+
+* NHS frontend (though this is still sometimes called 'NHS.UK frontend')
+* NHS digital service manual
+* NHS design system
+* NHS prototype kit
+
+For talking to the public about the website (find out more on the [NHS health writing A-Z](https://service-manual.nhs.uk/content/a-to-z-of-nhs-health-writing#N))
+
 
 #### NHS England laptops
 
 Use ‘NHS England Windows laptops’ instructions for people using corporate laptops.
 
 #### NHS prototype kit
 
-‘NHS.UK’ is in caps and ‘prototype kit’ in lower case (except where the NHS.UK is shown as a logo when it is then presented as ‘NHS Prototype kit’). Write out in full the first time it is used on a page, then call ’the kit’. Do not use ‘prototype kit’ if you can.
+‘NHS’ is in caps and ‘prototype kit’ in lower case (except where it is shown next to the NHS logo when it is capitalised as ‘NHS Prototype kit’). Write out in full the first time it is used on a page, then call ’the kit’. Do not use ‘prototype kit’ if you can.
 
 #### terminal
 
 Lower case. Only use for Mac and Linux instructions. Usually it will be ‘the terminal’.
 
+#### Visual Studio Code
+
+Title case. When you use it for the first time in a guide, start with 'Visual Studio Code (also known as VS Code)'.
+
+
 ## Support
 
 The NHS prototype kit guidance website is maintained by NHS England. [Email us](<mailto:[[email protected]](mailto:[email protected])>), open a [Github issue](https://github.com/nhsuk/nhsuk.service-manual.prototype-kit.docs/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE).

app/assets/sass/docs.scss

@@ -1,20 +1,6 @@
 // NHS.UK frontend library
 @import 'node_modules/nhsuk-frontend/packages/nhsuk';
 
-// ==========================================================================
-// FRONTEND STYLE ADJUSTMENTS
-// ==========================================================================
-
-// Body background white
-.nhsuk-body-white {
-  background-color: $color_nhsuk-white;
-}
-
-// Body background grey
-.nhsuk-body-grey {
-  background-color: $color_nhsuk-grey-5;
-}
-
 // ==========================================================================
 // PROTOTYPE SPECIFIC STYLES
 // ==========================================================================

app/assets/sass/main.scss

@@ -2,8 +2,6 @@
 @import 'node_modules/nhsuk-frontend/packages/nhsuk';
 
 // Components that are not in the NHS.UK frontend library
-@import 'components/list-border';
-@import 'components/related-nav';
 @import 'components/figure';
 
 ///////////////////////////////////////////

app/assets/sass/nhsuk.scss

@@ -1,4 +1,11 @@
-@import 'node_modules/nhsuk-frontend/packages/core/settings/colours';
+@import 'node_modules/nhsuk-frontend/packages/core/settings/all';
+@import 'node_modules/nhsuk-frontend/packages/core/tools/all';
+
+// NHS.UK website template styles
+//
+// This CSS is all used to re-create some of the NHS.UK website
+// styles within the example templates. It will likely need updating
+// as the NHS.UK website updates.
 
 // ==========================================================================
 // Log in link
@@ -92,7 +99,7 @@
   }
  }
 
- 
+
 // ==========================================================================
 // Feedback form
 // ==========================================================================
@@ -600,3 +607,38 @@ main .app-list-signage a[href=""]:focus {
 main .app-list-signage a[href=""] {
   color: $color_nhsuk-white;
 }
+
+// ==========================================================================
+// COMPONENTS / #RELATED-NAV
+// ==========================================================================
+
+.nhsuk-related-nav {
+  border-top: 1px solid $nhsuk-border-color;
+
+  @include mq($until: desktop) {
+    margin-top: nhsuk-spacing(7);
+  }
+}
+
+.nhsuk-related-nav__heading {
+  @include nhsuk-typography-responsive(19, $override-line-height: 1.2);
+
+  margin-bottom: 12px;
+  padding-top: nhsuk-spacing(3);
+}
+
+.nhsuk-related-nav__list {
+  @include nhsuk-typography-responsive(16);
+
+  list-style: none;
+  padding-left: 0;
+}
+
+// ==========================================================================
+// COMPONENTS / #LIST-BORDER
+// ==========================================================================
+
+.nhsuk-list--border li {
+  border-bottom: 1px solid $color_nhsuk-grey-4;
+  padding: 8px 0 16px;
+}