Apply minor UI fixes and improvements (#31)

* Fix adding error messages to checkbox and radio questions

* Demote user guide headings, but start help file markdown headings at h1

Demoting the headings in the UI ensures the user guide aligns to the rest of the site.
Promoting the help file markdown headings to h1 ensures that we don't need to ignore the linting error.

* Move the 'before you start' text above the start now button on generated prototypes

* Allow the user to jump to a specific live preview page from the structure tab

* Replace javascript: href with onclick function

* Reorder client-side JavaScript

* Update comments and variable names in form.js

Author: cmenon12

docs/help/create-a-new-prototype.md

@@ -1,4 +1,4 @@
-## Create a new prototype <!-- markdownlint-disable-line first-line-h1 -->
+# Create a new prototype
 
 Visit the [create a prototype page](/create) to create a new prototype.
 
@@ -9,7 +9,7 @@ For example:
 
 Once created, the high-level structure of the prototype can be previewed in the "Structure" tab.
 
-### Supported form and question fields
+## Supported form and question fields
 
 Each form contains the following data:
 

docs/help/introduction.md

@@ -1,4 +1,4 @@
-## Introduction  <!-- markdownlint-disable-line first-line-h1 -->
+# Introduction
 
 This tool lets you rapidly create prototype forms from a simple description using Generative AI.
 
@@ -8,12 +8,12 @@ You can test prototypes live, share them with others, and download them to run t
 
 **Warning: Always check the prototypes generated by this tool, as they may contain inaccurate information.**
 
-### How does it work?
+## How does it work?
 
 1. The user describes the form they want using the free text input in the interface.
 2. The LLM takes this and a JSON schema, and uses this to generate a JSON representation of the form that follows the schema.
 3. The tool uses the schema to build the prototype using Nunjucks components. This prototype is then shown live for the user, or zipped up for the user to download.
 
-### Known limitations
+## Known limitations
 
 - The JSON fields cannot contain double quotes `"`; these are replaced with `“`.

docs/help/manage-your-prototypes.md

@@ -1,4 +1,4 @@
-## Manage your prototypes  <!-- markdownlint-disable-line first-line-h1 -->
+# Manage your prototypes
 
 On the ["Your prototypes" page](/history), you can view all the prototypes you can access.
 

docs/help/manage-your-workspaces.md

@@ -1,4 +1,4 @@
-## Manage your workspaces <!-- markdownlint-disable-line first-line-h1 -->
+# Manage your workspaces
 
 Workspaces are like folders. Every prototype belongs to a workspace, and every workspace has one or more users.
 

docs/help/share-a-prototype.md

@@ -1,32 +1,32 @@
-## Share a prototype  <!-- markdownlint-disable-line first-line-h1 -->
+# Share a prototype
 
 A prototype can be shared with users in a workspace or with specific users. The live demo of a prototype can also be shared publicly. You can manage prototype sharing using the "Sharing" tab.
 
 Note that the user who creates a prototype does not always keep access, for example, if it is moved to a workspace the creator cannot access.
 
-### Share a prototype in a workspace
+## Share a prototype in a workspace
 
 All prototypes belong to a workspace. This can be your private workspace, or it can be a shared workspace that one or more users can access. Everyone in a workspace can access, update, and share the prototypes within that workspace. You can move prototypes between workspaces.
 
 If a prototype is updated, the previous workspace is reused unless you choose a different one.
 
 If you are removed from a workspace, you will lose access to all the prototypes in that workspace (except for any prototypes shared with you individually).
 
-### Share a prototype with individual users
+## Share a prototype with individual users
 
 Prototypes can also be shared with specific users. These users can access and update the prototype, but cannot share it (unless they are also a member of the workspace).
 
 If a prototype is updated by a user who is not a member of the prototype's workspace, the new version will be added to their private workspace. It will still be shared with the users that the previous prototype was shared with.
 
-### Share a live demo publicly
+## Share a live demo publicly
 
 The live demo of prototypes can also be shared publicly, letting anyone try out the prototype. This does not let it be updated or for any other information about the prototype to be viewed.
 
 You can set a password when sharing the live demo publicly. The chosen password is visible to all users who can access the prototype.
 
 Data entered into the live demo is unique for each user.
 
-### Prototype Permissions
+## Prototype Permissions
 
 | **<center>User Type</center>**                | <center>Change Sharing Settings</center> | <center>Update Prototype</center> | <center>View Prototype</center> | <center>View Live Prototype</center> |
 |--------------------------|:-----------------------:|:---------------:|:--------------:|:------------------:|

docs/help/test-a-prototype.md

@@ -1,10 +1,10 @@
-## Test a prototype <!-- markdownlint-disable-line first-line-h1 -->
+# Test a prototype
 
 You can interact with a live demo of the prototype produced using the viewer on the right hand side; you can also reset this view.
 
 Data entered into the live demo is unique for each user. You can reset this for the current user using the "Reset demo" button.
 
-### Running the generated prototype locally
+## Running the generated prototype locally
 
 The Nunjucks template files and associated files can also be downloaded in a ZIP file within an Express (Node.js TypeScript) project, which you can use to run the prototype locally.
 

docs/help/update-a-prototype.md

@@ -1,4 +1,4 @@
-## Update a prototype <!-- markdownlint-disable-line first-line-h1 -->
+# Update a prototype
 
 You can update a prototype by:
 
@@ -7,7 +7,7 @@ You can update a prototype by:
 
 Updating a prototype creates a new version with a new URL. Previous versions are stored in the "History" tab.
 
-### Sharing
+## Sharing
 
 The previous workspace is reused unless you choose a different one. If you are not a member of the workspace, your personal workspace is used instead.
 

public/form.js

@@ -515,9 +515,9 @@ document.addEventListener('DOMContentLoaded', function () {
         form.addEventListener('submit', validateForm);
     }
 
-    // Create the error message element for all non-date inputs
+    // Create the error message element for all non-fieldset inputs
     let labelElements = document.querySelectorAll(
-        '.govuk-label:not(.govuk-date-input__label)'
+        '.govuk-label:not(.govuk-date-input__label, .govuk-checkboxes__label, .govuk-radios__label)'
     );
     labelElements.forEach((labelElement, index) => {
         const errorElement = document.createElement('p');
@@ -529,19 +529,21 @@ document.addEventListener('DOMContentLoaded', function () {
         );
     });
 
-    // Create the error message element for all date inputs
+    // Create the error message element for all fieldset inputs (date, checkbox, radio)
     labelElements = document.querySelectorAll(
-        '.govuk-label.govuk-date-input__label'
+        '.govuk-label.govuk-date-input__label, .govuk-label.govuk-checkboxes__label, .govuk-label.govuk-radios__label'
     );
     labelElements.forEach((labelElement, index) => {
-        const dateInputGroup = labelElement.closest('.govuk-date-input');
-        if (!dateInputGroup.parentNode.querySelector('.govuk-error-message')) {
+        const inputGroup = labelElement.closest(
+            '.govuk-date-input, .govuk-checkboxes, .govuk-radios'
+        );
+        if (!inputGroup.parentNode.querySelector('.govuk-error-message')) {
             const errorElement = document.createElement('p');
             errorElement.className = 'govuk-error-message';
             errorElement.style.display = 'none';
-            dateInputGroup.parentNode.insertBefore(
+            inputGroup.parentNode.insertBefore(
                 errorElement,
-                dateInputGroup.previousSibling
+                inputGroup.previousSibling
             );
         }
     });

src/filters.ts

@@ -26,6 +26,7 @@ export function arrayOrStringIncludes(
  * Convert a Markdown string to GOV.UK HTML
  * @param {string} markdown the Markdown string to convert
  * @param {Partial<MarkedExtension>} options optional options for the conversion
+ * @param {string} options.headingsStartWith optional heading level to start from, defaults to 'xl'
  * @returns {string} the converted HTML string
  */
 export function convertToGovukMarkdown(

src/form-constants.ts

@@ -341,18 +341,18 @@ export function getStartPage(
         ``,
         `       <p class="govuk-body">Completing this form takes around ${String(data.duration)} minute${data.duration === 1 ? '' : 's'}.</p>`,
         ``,
-        `      {{ govukButton({`,
-        `        text: "Start now",`,
-        `        href: "/${urlPrefix}/question-1",`,
-        `        isStartButton: true`,
-        `      }) }}`,
-        ``,
         `      <h2 class="govuk-heading-m">`,
         `        Before you start`,
         `      </h2>`,
         ``,
         `      {{ "${data.before_you_start.replace(/\n/g, '\\n').replace(/"/g, '\\"')}" | govukMarkdown | safe }}`,
         ``,
+        `      {{ govukButton({`,
+        `        text: "Start now",`,
+        `        href: "/${urlPrefix}/question-1",`,
+        `        isStartButton: true`,
+        `      }) }}`,
+        ``,
         `    </div>`,
         ``,
         `    <div class="govuk-grid-column-one-third">`,