Add tutorial for creating a basic prototype (based on GOV.UK one) (#20)

## Description This is probably not quite ready to go straight to deployment because it has: 1. example pages to help with debugging or screenshots - these probably need to be deleted 2. a nunjucks base page with variables to help with change pages before it is resolved 3. code formatting that could be tidier 4. a few little elements of the nhs components that aren't yet in the code (for example, deleting the paragraph at the bottom of each template page that links to the templates) It does have a full worked example bringing together the content into a guide. Example of translated screenshots that are used in the examples ![overview of new screens](https://github.com/user-attachments/assets/5565b383-0ad3-4dce-8cd1-1ac8509524f8) ![new magical powers screen](https://github.com/user-attachments/assets/67ba741c-d79b-41c8-809c-613efa009bc3) ![new details screen](https://github.com/user-attachments/assets/bdc2816a-b640-46ef-b850-ce1cc1f4e344) It's also shown that some of the design system components can do with tweaking, for example: 1. radio examples don't have the same text in the text as the variable 2. radio example in component library starts with yes/no, unlike govuk design system which starts with list of 3 3. textarea component doesn't have headers shown ## Checklist - [ ] Tested against our [testing policy](https://github.com/nhsuk/nhsuk-frontend/blob/master/docs/contributing/testing.md) (Resolution, Browser & Accessibility) - [ ] CHANGELOG entry Resolves #17 --------- Co-authored-by: Frankie Roberto <[email protected]>
nhsuk · Nov 2, 2024 · e95d0be · e95d0be
1 parent d2334b0
commit e95d0be
Show file tree

Hide file tree

Showing 22 changed files with 1,400 additions and 4 deletions.
diff --git a/app/assets/images/tutorial-overview.png b/app/assets/images/tutorial-overview.png
diff --git a/app/assets/images/tutorial-radios.png b/app/assets/images/tutorial-radios.png
diff --git a/app/assets/images/tutorial-textarea.png b/app/assets/images/tutorial-textarea.png
diff --git a/app/config.js b/app/config.js
@@ -3,7 +3,6 @@
 module.exports = {
   // Service name
   serviceName: 'Prototype kit',
-
   // Port to run nodemon on locally
   port: 2000,
 

diff --git a/app/views/base/check-your-answers.html b/app/views/base/check-your-answers.html
@@ -0,0 +1,162 @@
+{% extends 'layout.html' %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+  Check your answers template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {{ backLink({
+    "href": "/templates/start-page",
+    "text": "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">
+        Check your answers before sending your application
+      </h1>
+
+      <h2 class="nhsuk-heading-m">
+        Personal details
+      </h2>
+
+      {{ summaryList({
+        rows: [
+          {
+            key: {
+              text: "NHS number"
+            },
+            value: {
+              text: "485 777 3456"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "NHS number"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Name"
+            },
+            value: {
+              text: "Kevin Francis"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "name"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Date of birth"
+            },
+            value: {
+              html: "15 March 1984"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "date of birth"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Home address"
+            },
+            value: {
+              html: '8 Bridgewater Place<br>Leeds<br>LS11 5BZ'
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "home address"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+      <h2 class="nhsuk-heading-m">
+        Medical details
+      </h2>
+
+      {{ summaryList({
+        rows: [
+          {
+            key: {
+              text: "Allergies"
+            },
+            value: {
+              text: "No allergies"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "allergies"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Conditions"
+            },
+            value: {
+              html: "Asthma <br> Disabilities, including physical and learning disabilities"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "conditions"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+      <h2 class="nhsuk-heading-m">
+        Now send your application
+      </h2>
+
+      <p>
+        By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
+      </p>
+
+      <p>
+        Your details with be sent to Rose Medical Practice to begin your registration.
+      </p>
+
+      <a href="/templates/confirmation-page" class="nhsuk-button">
+        Accept and send registration
+      </a>
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/base/confirmation-page.html b/app/views/base/confirmation-page.html
@@ -0,0 +1,39 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Confirmation page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <div class="nhsuk-card nhsuk-card--confirmation nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
+
+        <div class="nhsuk-card__content">
+
+          <h1 class="nhsuk-card__title nhsuk-u-margin-bottom-4">
+            Application complete
+          </h1>
+
+          <p class="nhsuk-u-font-size-24">
+            Your reference number
+            <br>
+            <strong class="nhsuk-u-font-size-32">HDJ2123F</strong>
+          </p>
+
+        </div>
+
+      </div>
+
+      <p>We have sent you a confirmation email.</p>
+
+      <h2>What happens next</h2>
+
+      <p>Tell the user what happens next.</p>
+
+      <p>Go back to <a href="/page-templates">page templates<a>.</p>
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/base/content-page.html b/app/views/base/content-page.html
@@ -0,0 +1,32 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Content page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {{ breadcrumb({
+    href: "/",
+    text: "Home"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        Page heading goes here
+      </h1>
+
+      <p>
+        Visit the 
+          <a href="https://service-manual.nhs.uk">NHS digital service manual</a> 
+        for guidance and code examples.
+      </p>
+
+    </div>  
+
+  </div>
+{% endblock %}
diff --git a/app/views/base/question-page.html b/app/views/base/question-page.html
@@ -0,0 +1,56 @@
+{% extends 'layout.html' %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+  Question page
+{% endblock %}
+
+{% block beforeContent %}
+  {{ backLink({
+    "href": "/templates/start-page",
+    "text": "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <form action="/templates/check-your-answers" method="post" class="form">
+
+        {{ radios({
+          "idPrefix": "example",
+          "name": "example",
+          "fieldset": {
+            "legend": {
+              "text": "Heading or question goes here",
+              "classes": "nhsuk-fieldset__legend--l",
+              "isPageHeading": true
+            }
+          },
+          "items": [
+            {
+              "value": "yes",
+              "text": "Yes"
+            },
+            {
+              "value": "no",
+              "text": "No"
+            }
+          ]
+        }) }}
+
+        {{ button({
+          "text": "Continue",
+          "id": "btn_submit"
+        }) }}
+
+        <p>(See the <a href="https://service-manual.nhs.uk/design-system/components">NHS digital service manual</a> for examples.)</p>
+
+      </form>
+
+    </div>
+  </div>
+
+{% endblock %}
diff --git a/app/views/base/start-page.html b/app/views/base/start-page.html
@@ -0,0 +1,44 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Start page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+{{ breadcrumb({
+  href: "/",
+  text: "Home"
+}) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        Service name goes here
+      </h1>
+
+      <p>Use this service to:</p>
+
+      <ul>
+        <li>do something</li>
+        <li>update your name, address or other details</li>
+        <li>do something else</li>
+      </ul>
+
+      <p>Registering takes around 5 minutes.</p>
+
+
+      <h2 class="nhsuk-heading-m">Before you start</h2>
+
+      <p>You can only use this service if you live in the UK.</p>
+
+      <a href="/templates/question-page" class="nhsuk-button">
+        Start now
+      </a>
+
+    </div>
+
+  </div>
+{% endblock %}
diff --git a/app/views/how-tos/build-basic-prototype/_BASE.njk b/app/views/how-tos/build-basic-prototype/_BASE.njk
@@ -0,0 +1,50 @@
+{% extends 'layout.html' %}
+{% set sectionName = "Make a basic prototype" %}
+{# list of URLS, titles and questions for reference - existing NHS templates are hardcoded but these are tokenised for ease of change #}
+
+{% set exampleServiceName = "Order a test to check if you have magical powers" %}
+{% set exampleServiceURL = "magical-powers" %}
+{% set exampleStart = { url: "start-page" }  %}
+{% set exampleRadios = { "url" : "magical-powers", "title" : "Have you felt symptoms of magical powers in the last 30 days?", "legend" : "magical-powers", "summary" : "Symptoms of magical powers" }  %}
+{% set exampleTextArea = { "url" : "details", "title" : "Tell us your symptoms of magical powers", legend: "details", "summary" : "Details of the symptoms" } %}
+{% set exampleCheckAnswers = { url: "check-your-answers", title : "Check your answers" }  %}
+{% set exampleConfirmation = { url: "confirmation-page" } %}
+{% set exampleIneligible = { url: "ineligible" }  %}
+
+{% block pageTitle %}
+ {{ pageTitle | default("Add title with 'pageTitle'")}} - {{sectionName}} - 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">
+
+{% if not noCaption %}<span class="nhsuk-caption-xl">{{sectionName}}</span>{% endif %}
+      <h1 class="nhsuk-heading-xl">
+        {{ pageTitle | default("Add title with 'pageTitle'")}}
+      </h1>
+
+{% block makePrototype %}
+
+   <p>Add text in makePrototype block </p>
+{% endblock %}
+
+{{ pagination({
+  previousUrl: prev.link if prev ,
+  previousPage: prev.title if prev ,
+  nextUrl: next.link if next ,
+  nextPage: next.title if next
+}) }}
+
+
+         {% include "how-tos/includes/back-button.html" %}
+
+    </div>
+
+  </div>
+{% endblock %}