Page for switching from GOV.UK prototype kit

app/views/how-tos/index.html

@@ -48,6 +48,12 @@ <h2>Updating the kit</h2>
         <li><a href="/how-tos/updating-the-kit">Updating the kit</a></li>
       </ul>
 
+      <h2>Advanced usage</h2>
+
+      <ul class="nhsuk-list">
+        <li><a href="/how-tos/switching-from-govuk-prototype-kit">Switching from the GOV.UK prototype kit</a></li>
+      </ul>    
+
       {{ backLink({
         "href": "/",
         "text": "Back to Home",

app/views/how-tos/switching-from-govuk-prototype-kit.html

@@ -0,0 +1,120 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Switching from the GOV.UK prototype kit - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {% include "how-tos/includes/breadcrumb.html" %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-xl">
+        Switching from the GOV.UK prototype kit
+      </h1>
+
+
+<p>
+      If you have learned how to use the <a href="https://prototype-kit.service.gov.uk/docs/">GOV.UK Prototype Kit</a>, you will be able to use the NHS.UK prototype kit. This is because the two prototype kits are built in the same way. However, you must do some things differently.
+    </p>
+<h2 class="nhsuk-heading-m">Installing and running the NHS.UK prototype kit</h2>
+
+<p>
+When you are installing and running your prototype:
+
+{{ list({
+  title: "Do",
+  type: "tick",
+  items: [
+  {
+    item: '<a href="/install/download-zip">download the kit using the zip file or Github</a>'
+  },
+    {
+      item: 'check when you install your prototype that you are using the right version of Node.js - you may need to install and use a different version. If you need to make prototypes for both NHS.UK and GOV.UK you can switch versions of node with a <a href="https://github.com/nvm-sh/nvm">node version manager</a>'
+    },
+    {
+      item: 'start your local server by entering in the terminal: <pre class="app-pre"><code class="language-markup">npm run watch</code></pre> '
+    }
+  ]
+}) }}
+
+{{ list({
+  title: "Don’t",
+  type: "cross",
+  items: [
+  {
+    item: 'try to install the prototype kit using the terminal as it will not work'
+  },
+    {
+      item: 'start your local server the same way as in the GOV.UK Prototype Kit as it will not work'
+    }
+  ]
+}) }}
+
+
+
+<h2>Making pages</h2>
+
+<p>
+  When you are making pages:
+</p>  
+
+{{ list({
+  title: "Do",
+  type: "tick",
+  items: [
+    {
+      item: 'use the NHS.UK design system for <a href="https://service-manual.nhs.uk/design-system/styles">styles</a>, <a href="https://service-manual.nhs.uk/design-system/components">components</a> and <a href="https://service-manual.nhs.uk/design-system/patterns">patterns</a> - you can also copy <a href="/page-templates">template pages in the NHS prototype kit</a>'
+    },
+    {
+      item: 'use <a href="https://service-manual.nhs.uk/design-system">NHS.UK macro naming conventions</a> which do not have a prefix, for example <code class="language-markup">{{ radios }}</code> instead of <code class="language-markup">{{ govukRadios }}</code>'
+    },
+    {
+      item: 'use <a href="https://service-manual.nhs.uk/design-system/styles/typography">NHS.UK typography classes</a> on headings and other text, for example <pre class="app-pre"><code class="language-markup">' + '<p class="nhsuk-body">nhsuk-body</p>' | escape  + '</code></pre>'
+    },
+    {
+      item: 'know that the NHS.UK prototype kit does not have some functionality that is in the GOV.UK one, for example the interface to create pages from templates'
+   },
+   {
+      item: 'know that plugins designed for the GOV.UK Prototype Kit may not work or may need to be installed differently - for example, if you want to use the <a href="https://x-govuk.github.io/govuk-prototype-filters/get-started/">GOV.UK Prototype Kit Filters plugin</a> you must use instructions for earlier versions of the kit and make changes in <code class="language-markup">filters.js</code>.'
+    }
+  ]
+}) }}
+
+{{ list({
+  title: "Don’t",
+  type: "cross",
+  items: [
+    {
+      item: 'copy pages from the GOV.UK design system or GOV.UK prototype kit and expect them to work - you may need to copy over extra code like CSS to make them work properly'
+    },
+    {
+      item: 'use GOV.UK macro naming conventions as they will not work'
+    },
+    {
+      item: 'use GOV.UK typography classes as they will not work'
+    }
+  ]
+}) }}
+<h2 class="nhsuk-heading-m">Using routing and session data</h2>
+
+<p>You can define routes to do branching logic or other custom behaviour in the same way as the GOV.UK Prototype Kit.</p>
+
+<p>You can also add default session data in <code class="language-markup">data/session-data-defaults.js</code></p>
+
+<p>Unlike the GOV.UK Prototype Kit, if you save any changes the the routes file, the app will restart and any session data will revert to the default.</p>
+
+<h2>Help and support</h2>
+
+<p>If you have any problems, ask a developer on your team (if you have one), <a href="mailto:[email protected]?subject=NHS.UK prototype kit - Updating the kit">email us</a> or get in touch on the <a href="https://nhs-service-manual.slack.com/messages/CFYL2GDGW" rel="nofollow">NHS digital service manual #prototype-kit Slack channel</a>.</p>
+
+      {% include "how-tos/includes/back-button.html" %}
+
+    </div>
+
+  </div>
+{% endblock %}