Better examples in yml file

- use our macro instead of HTML for the form field
- add a page title to an example that was missing it
- add more answers with large labels
- make sure there is one question with only a hint and another with only question_advice

pages_builder/pages/forms/selection-buttons.yml

@@ -60,6 +60,7 @@ examples:
   -
     type: boolean
     question: Offline working supported
+    question_advice: This is some more context to do with the question itself
     name: offlineWorking-40
     value: False
     question_number: '19'
@@ -89,31 +90,55 @@ examples:
     question_advice: Advice about the question
     hint: Advice about how to answer the question
     name: lot-60
-    optional: true
+    optional: True
     options:
       -
-        label: Infrastructure as a Service
+        label: Infrastructure as a Service (IaaS)
+        value: iaas
         description: >
-          Infrastructure is the hardware that makes software work. It's the networks, hosting facilities
-          and servers that platforms and software depend on. IaaS is infrastructure you can order and run
-          entirely over the internet, without having to pay for your own hardware.
+          Infrastructure is the hardware that makes software work. It’s the
+          networks, hosting facilities and servers that platforms and software
+          depend on. IaaS is infrastructure you can order and run entirely over
+          the internet, without having to pay for your own hardware.
+      -
+        label: Software as a Service (SaaS)
+        value: saas
+        description: >
+          SaaS is an application or service that can be run over the internet or
+          in the cloud. Examples of SaaS include web-based email services,
+          customer relationship management (CRM) software and analytics tools.
+      -
+        label: Platform as a Service (PaaS)
+        value: paas
+        description: >
+          PaaS is a software platform that provides a basis for building other
+          services and applications. With PaaS, you can set up, order, pay for
+          and manage platforms in the cloud.
+      -
+        label: Specialist Cloud Services (SCS)
+        value: scs
+        description: >
+          Specialist Cloud Services support your transition to SaaS, PaaS and
+          IaaS. Examples of SCS include cloud strategy, data transfer between
+          providers, or day-to-day support of cloud-based services.
     surrounding_html:
       <form>
         {{ example | safe }}
       </form>
   -
-    type: radio
-    question: Checkbox with hint, question description and option description
+    type: checkbox
+    question: Checkboxes with hint and question description
     description: Description of the question
+    question_advice: Advice about the question
     hint: Advice about how to answer the question
     name: lot-70
     options:
       -
-        label: Infrastructure as a Service
-        description: >
-          Infrastructure is the hardware that makes software work. It's the networks, hosting facilities
-          and servers that platforms and software depend on. IaaS is infrastructure you can order and run
-          entirely over the internet, without having to pay for your own hardware.
+        label: Uber for supply teachers
+      -
+        label: Airbnb for potted plants
+      -
+        label: Tinder for expired cheeses and yoghurts
     surrounding_html:
       <form>
         {{ example | safe }}
@@ -192,7 +217,7 @@ examples:
 
       <p>List the skills and experience you’d like the specialist to have,
       eg experience working on government digital projects</p>
-    optional: true
+    optional: True
     options:
       -
         label: Don’t
@@ -210,20 +235,18 @@ examples:
     question: Can you do this essential requirement
     question_number: 93
     value: True
-    followup: requirement-evidence
+    followup: requirement-evidence-110
     surrounding_html: |
       <form>
         {{ example | safe }}
-          <!-- The `followup` field should match the `name` given to the macro that renders the textbox below -->
-
-          <!-- The HTML below is generated by a textbox macro -->
-          <div class="question js-hidden" id="requirement-evidence">
-            <label for="input-requirement-evidence">
-              <span class="question-heading">
-                Textbox for evidence of the requirement
-              </span>
-            </label>
-            <textarea class="text-box text-box-large" name="input-requirement-evidence" id="input-requirement-evidence"></textarea>
-          </div>
-          <!-- The HTML above is generated by a textbox macro -->
+        {%
+          with
+          large = True,
+          question = "Evidence for the requirement",
+          name = "requirement-evidence-110",
+          hidden = True,
+          value = ""
+        %}
+          {% include "forms/textbox.html" %}
+        {% endwith %}
       </form>

pages_builder/pages/forms/single-question-page.yml

@@ -1,4 +1,4 @@
-pageTitle: ''
+pageTitle: 'Single question page'
 assetPath: ../govuk_template/assets/
 examples:
   - |