Merge branch 'main' into 167-port-govuk-prototype-kit-guides-for-gith…

…ub-desktop-collaboration-to-our-site
nhsuk · Dec 18, 2024 · 21d6f4b · 21d6f4b
2 parents 2a527b1 + 2d3b917
commit 21d6f4b
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -14,35 +14,34 @@ If you want to contribute to the NHS prototype kit guidance, then read our [cont
 
 ### Style guide
 
-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:
+We normally use the [NHS digital service manual 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
 
-Lower case. Only use for Windows instructions. Normally it will be ‘the command line’.
+Lower case. Only use for Windows instructions. Normally it will be "the command line".
 
-#### Git, git, Github
+#### Git, git, GitHub
 
-Git has an upper case G when talking about a version control system (for example 'use GitHub '), and lower case G when part of code, for example `git status`.
+Git has an upper case G when talking about a version control system (for example "use GitHub"), and lower case G when part of code, for example `git status`.
 
 GitHub is camel case with an upper case H - for example, 'use GitHub Desktop'.
 
 
-#### GOV.UK Prototype Kit, GOV.UK Design System and other GOV.UK products
+#### GOV.UK prototype Kit, GOV.UK design system and other GOV.UK products
 
-Title case.
+Sentence case.
 
 #### Headings and tab titles
-Use sentence case, for example 'How to download the prototype kit'.
-Tab titles (the title of the page as shown in the browser tab) may be different from the page H1, for example a tab title may say 'How to download the prototype kit' and the H1 say 'Download the prototype kit'.
+Use sentence case, for example "How to download the prototype kit".
+Tab titles (the title of the page as shown in the browser tab) may be different from the page H1, for example a tab title may say "How to download the prototype kit" and the H1 say "Download the prototype kit".
 
 #### JavaScript
 
 Camel case with an upper case S.
 
 #### NHS, NHS.UK, NHS England
 
-
-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:
+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
@@ -51,22 +50,25 @@ We are changing how we talk about tools for delivery teams. These used to be cal
 
 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.
+Use "NHS England Windows laptops" instructions for people using corporate laptops.
 
 #### NHS prototype kit
 
-‘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’. Try to avoid ‘prototype kit’.
+"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". Try to avoid "prototype kit".
+
+#### quotation marks
+
+Use double straight quotes only (not smart or curly quotes). More detail is in the <a href="https://service-manual.nhs.uk/content/formatting-and-punctuation#quotation-marks">Formatting and punctuation</a> part of the NHS digital service manual content guide.
 
 #### terminal
 
-Lower case. Usually it will be ‘the terminal’.
+Lower case. 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)'.
+Title case. When you use it for the first time in a guide, start with "Visual Studio Code (also known as VS Code)".
 
 
 ## Support

diff --git a/app/assets/sass/components/_header.scss b/app/assets/sass/components/_header.scss
@@ -0,0 +1,5 @@
+// This modifier overrides the default behaviour which is to
+// justify the items in the nav when there are 4 or more.
+.app-header--left-aligned .nhsuk-header__navigation-list {
+  justify-content: initial;
+}
diff --git a/app/assets/sass/docs.scss b/app/assets/sass/docs.scss
@@ -1,5 +1,6 @@
 // NHS.UK frontend library
 @import 'node_modules/nhsuk-frontend/packages/nhsuk';
+@import 'components/header';
 
 // ==========================================================================
 // PROTOTYPE SPECIFIC STYLES

diff --git a/app/views/contribute.html b/app/views/contribute.html
@@ -0,0 +1,146 @@
+{% extends 'layout.html' %}
+{% block pageTitle %}
+  Contribute - NHS prototype kit
+{% endblock %}
+{% block beforeContent %}
+  {{ breadcrumb({ href: "/", text: "Home" }) }}
+{% endblock %}
+{% block content %}
+
+{# the board is a long string to this is made a variable for consistency #}
+{% set githubBoardUrl = "https://github.com/orgs/nhsuk/projects/24/views/1" %}
+{% set githubLabelQuery = "?filterQuery=label%3A" %}
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+    <h1 class="nhsuk-heading-xl" id="contribute-to-the-nhs-prototype-kit">
+      Contribute
+    </h1>
+    <p>
+      The NHS prototype kit is a community project supported by the NHS service
+      manual team. Anyone can help make it better.
+    </p>
+    <p>
+      <a href="{{githubBoardUrl}}?filterQuery=">View project board on GitHub</a>
+    </p>
+    <h2 class="nhsuk-heading-l" id="why-contribute-to-the-kit">Why contribute to the kit</h2>
+    <ul>
+      <li>Help keep the kit up-to-date as an accessible and open way to make HTML prototypes of NHS services.</li>
+      <li>Be part of an active and supportive community that will help you learn and develop your skills with the kit.</li>
+      <li>We will credit you in our update notes and other supporting information, unless you tell us not to.</li>
+      <li>If you're employed by NHS England, you can use examples of contributing to the kit as part of your performance reviews – talk to your line manager about how to include it in your objectives.</li>
+    </ul>
+
+    </p>
+    <h2 class="nhsuk-heading-l" id="how-you-can-contribute-to-the-kit">
+      How you can contribute to the kit
+    </h2>
+    <p>
+      There are many ways to contribute. You do not have to be an expert in coding.
+    </p>
+    <p>You can:</p>
+    <ul>
+      <li>add or improve content for people using the kit</li>
+      <li>
+        do quality assurance or accessibility testing of new features or
+        guidance
+      </li>
+      <li>fix bugs or build new features</li>
+      <li>improve the contribution process</li>
+    </ul>
+
+    <h3 class="nhsuk-heading-m" id="add-or-improve-documentation-for-people-using-the-kit">
+      Add or improve content for people using the kit
+    </h3>
+    <p>You can help improve the content for this website and the pages that people view when they download and install the kit.</p>
+
+    <p>This includes:</p>
+    <ul>
+      <li>making the guidance easy to understand and use</li>
+      <li>writing in line with the <a href="https://service-manual.nhs.uk/content">NHS content guide</a> (including standardising terms for <a href="https://github.com/nhsuk/nhsuk.service-manual.prototype-kit.docs/blob/main/README.md">the style guide for the kit in GitHub</a>)</li>
+    </ul>  
+
+    <p>
+      Existing things we want to do for guidance are labelled <a
+        href="{{githubBoardUrl}}{{githubLabelQuery}}Content"
+        >content on our project board in GitHub.</a>
+    </p>
+    <h3 class="nhsuk-heading-m" id="do-quality-assurance-or-accessibility-testing">
+      Do quality assurance or accessibility testing
+    </h3>
+    <p>
+      You can make sure that the code in our kit is robust and accessible by:
+    </p>
+    <ul>
+      <li>
+        running automated and manual tests against WCAG 2.2 AA specifications
+      </li>
+      <li>helping us set up pipelines for automated testing in GitHub</li>
+    </ul>
+    <p>
+      Accessibility issues are labelled <a
+        href="{{githubBoardUrl}}{{githubLabelQuery}}Accessibility"
+        >accessibility on our project board</a>.
+    </p>
+    <h3 class="nhsuk-heading-m"
+      id="fix-bugs-or-build-new-features-enhancements-for-the-nhs-prototype-kit"
+    >
+     Fix bugs or build new features
+    </h3>
+
+    <p>
+      Known bugs that we need to fix are labelled
+      <a href='{{githubBoardUrl}}{{githubLabelQuery}}"%3Abug%3A+Bug"'>bug on our project board.</a>
+    </p>
+
+    <p> Ideas for features are labelled
+      <a href='{{githubBoardUrl}}{{githubLabelQuery}}"type%3A+enhancement+💡"'
+        >type: enhancement 💡</a
+      >.
+    </p>
+
+    <p>
+      We also label bugs or features by the type of code skills needed:
+      <a href="{{githubBoardUrl}}{{githubLabelQuery}}Javascript">JavaScript</a>,
+      <a href="{{githubBoardUrl}}{{githubLabelQuery}}Nunjucks">Nunjucks</a>
+      or
+      <a href="{{githubBoardUrl}}{{githubLabelQuery}}SASS%20%2F%20CSS">SASS/CSS</a>
+      .
+    </p>
+
+    <h3 class="nhsuk-heading-m" id="improve-the-contribution-process">
+      Improve the contribution process
+    </h3>
+    <p>
+      We want to make the process of contributing as easy and as accessible as
+      possible. Existing things we want to do to improve the contribution
+      process are labelled
+      <a href="{{githubBoardUrl}}{{githubLabelQuery}}%22Contribution+process%22"
+        >contribution process on the project board</a
+      >.
+    </p>
+    <h2 class="nhsuk-heading-l" id="get-started-with-a-contribution">
+      Get started with a contribution
+    </h2>
+    <p>You can:</p>
+
+    <ul class="nhsuk-list nhsuk-list--bullet">
+      <li>
+        <a href="https://github.com/nhsuk/nhsuk-prototype-kit/issues"
+          >create issues for the kit using GitHub</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/nhsuk/nhsuk.service-manual.prototype-kit.docs/issues"
+          >create issues for the website for the kit using GitHub</a
+        >
+      </li>
+    </ul>
+
+    <p>
+      The team and wider community usually review new issues at least once a
+      week and will add comments about what will happen next.
+    </p>
+  </div>
+</div>
+{% endblock %}
diff --git a/app/views/how-tos/build-basic-prototype/branching.html b/app/views/how-tos/build-basic-prototype/branching.html
@@ -33,7 +33,7 @@ <h2 id="create-an-ineligible-page">Create an ineligible page</h2>
       Make an
       <code class="language-markup">{{exampleIneligible.url}}.html</code> page
       by copying <code class="language-markup">content-page.html</code> from
-      <code class="language-markup">docs/views/templates</code> to
+      <code class="language-markup">lib/example-templates</code> to
       <code class="language-markup">app/views</code>.
     </p>
   </li>

diff --git a/app/views/how-tos/build-basic-prototype/create-pages.html b/app/views/how-tos/build-basic-prototype/create-pages.html
@@ -7,7 +7,7 @@
 <h3 id="create-a-start-page">Create a start page</h3>
 <p>
   Copy the <code class="language-markup">{{exampleStart.url}}.html</code> file
-  from <code class="language-markup">docs/views/templates</code> to
+  from <code class="language-markup">lib/example-templates</code> to
   <code class="language-markup">app/views</code>.
 </p>
 <p>
@@ -52,7 +52,7 @@ <h3 id="question-pages">Question pages</h3>
 <p>
   Make 2 copies of the
   <code class="language-markup">question-page.html</code> file from
-  <code class="language-markup">docs/views/templates</code> to
+  <code class="language-markup">lib/example-templates</code> to
   <code class="language-markup">app/views</code>.
 </p>
 <p>Rename the 2 file copies to:</p>
@@ -91,7 +91,7 @@ <h3 id="{{exampleCheckAnswers.url}}-page">Check answers page</h3>
 <p>
   Copy the
   <code class="language-markup">{{exampleCheckAnswers.url}}.html</code> file
-  from <code class="language-markup">docs/views/templates</code> to
+  from <code class="language-markup">lib/example-templates</code> to
   <code class="language-markup">app/views</code>.
 </p>
 <p>
@@ -106,7 +106,7 @@ <h3 id="confirmation-page">Confirmation page</h3>
 <p>
   Copy the
   <code class="language-markup">{{exampleConfirmation.url}}.html</code> file
-  from <code class="language-markup">docs/views/templates</code> to
+  from <code class="language-markup">lib/example-templates</code> to
   <code class="language-markup">app/views</code>.
 </p>
 <p>

diff --git a/app/views/how-tos/build-basic-prototype/index.html b/app/views/how-tos/build-basic-prototype/index.html
@@ -18,7 +18,7 @@
   <li>show a confirmation page</li>
 </ul>
 <p>
-It will take about an hour to finish this tutorial, after you install the prototype kit.
+It will take about an hour to finish this tutorial, after you install the prototype kit. 
 </p>
 
 <p>

diff --git a/app/views/how-tos/build-basic-prototype/open-prototype-in-editor.html b/app/views/how-tos/build-basic-prototype/open-prototype-in-editor.html
@@ -24,10 +24,6 @@ <h2 class="nhsuk-heading-m">Overview of folders in the prototype kit</h2>
     <code class="language-markup">routes.js</code> is for advanced logic – for
     example, if a user should go to one page or another based on their answers (we'll cover this later)
   </li>
-  <li>
-    <code class="language-markup">/docs/views/templates</code> has template
-    pages for you to copy into your prototype
-  </li>
 </ul>
 
 {% endblock %}
diff --git a/app/views/layout.html b/app/views/layout.html
@@ -9,6 +9,7 @@
 
 {% block header %}
   {{ header({
+    classes: "app-header--left-aligned",
     homeHref: "/",
     ariaLabel: "NHS Prototype Kit homepage",
     service: {
@@ -24,6 +25,10 @@
         label: "Guides",
         url: "/how-tos"
       },
+      {
+        label: "Contribute",
+        url: "/contribute"
+      },
       {
         label: "Support",
         url: "/support"

diff --git a/app/views/page-templates.html b/app/views/page-templates.html
@@ -18,7 +18,9 @@
 
       <h1 class="nhsuk-heading-xl">Page templates</h1>
 
-      <p>You can find some example templates for pages in the <strong>/docs/views/templates</strong> folder within your prototype. These include:</p>
+      <p>You can find some example templates for pages in the <strong>/lib/example-templates</strong> folder within your prototype (or /docs/templates in older versions of the kit).</p>
+
+      <p>These include:</p>
 
       <ul>
         <li>content pages</li>

diff --git a/app/views/whats-new/updates.html b/app/views/whats-new/updates.html
@@ -19,15 +19,24 @@ <h1>Updates</h1>
 
       <p class="nhsuk-lede-text">Changes made in each major and minor version.</p>
 
-      <h2>5.1.0 – 12 November 2024</h2>
+      <h2>5.2.0 - 13 December 2024</h2>
+
+      <ul>
+        <li><a href="https://service-manual.nhs.uk/design-system/components/task-list">Task list component</a> added</li>
+        <li>Added a devcontainer.json file to configure using the kit with <a href="https://github.com/features/codespaces">Github Codespaces</a></li>
+        <li>Fixes for using the <code>serviceName</code> variable</li>
+        <li>Page templates and middleware moved to lib folder</li>
+      </ul>
+
+      <h2>5.1.0 - 12 November 2024</h2>
 
       <ul>
         <li>The guidance and tutorials were removed from the kit and are now hosted separately as part of this website</li>
         <li>NHS frontend updated to 9.1.0</li>
         <li>Errors are now shown in the terminal when session data defaults crashes</li>
       </ul>
 
-      <h2>5.0.0 – 15 October 2024</h2>
+      <h2>5.0.0 - 15 October 2024</h2>
 
       <ul>
         <li>NHS frontend updated to 9.0.1 - see <a href="https://github.com/nhsuk/nhsuk-frontend/releases/tag/v9.0.0">version 9.0.0 release notes</a> for details on the breaking changes</li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ @@
       <li>show a confirmation page</li>
     </ul>
     <p>
-    It will take about an hour to finish this tutorial, after you install the prototype kit.
+    It will take about an hour to finish this tutorial, after you install the prototype kit.
     </p>
     <p>
@@ Expand Down @@