From c1ce519cd8a5bad077a778b09ddefe739879c04a Mon Sep 17 00:00:00 2001
From: David Kindness <david.kindness@gov.scot>
Date: Wed, 24 Jul 2024 18:25:40 +0100
Subject: [PATCH] Update changelog and design system dependency to latest
 version

Design system to v2.2.0
Question template updated to use new layout
---
 CHANGELOG.md                                  |  8 ++++++
 govuk-prototype-kit.config.json               |  2 +-
 .../templates/question.njk                    | 26 +++++++++++--------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac91e26..441947d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ Changes are grouped under the labels: `Added`, `Changed`, `Deprecated`,
 `Removed`, `Fixed`, and `Security`.
 
 ---
+## 0.3.0
+### Added
+- Nunjucks blocks at the start of the body and page-top areas of the base layout
+- js-enabled script to add the named class to the html tag when JavaScript is enabled
+### Changed
+- updated to use v2.2.0 of the Scottish Government Design System
+- question page template to match changes in the Scottish Government Design System
+
 ## 0.2.0
 ### Added
 - 'bodyClasses' variable can be used to add classes to the 'body' tag
diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json
index db0b131..51b1094 100644
--- a/govuk-prototype-kit.config.json
+++ b/govuk-prototype-kit.config.json
@@ -58,7 +58,7 @@
   "pluginDependencies": [
 	  {
 	    "packageName": "@scottish-government/design-system",
-      "minVersion": "2.1.0"
+      "minVersion": "2.2.0"
     }
 	]
 }
\ No newline at end of file
diff --git a/src/nunjucks/sg-prototype-templates/templates/question.njk b/src/nunjucks/sg-prototype-templates/templates/question.njk
index ea24a41..45ddeb5 100644
--- a/src/nunjucks/sg-prototype-templates/templates/question.njk
+++ b/src/nunjucks/sg-prototype-templates/templates/question.njk
@@ -34,7 +34,7 @@
 
 {% block main %}
 <div class="ds_wrapper">
-    <main id="main-content" class="ds_layout  ds_layout--article">
+    <main id="main-content" class="ds_layout  ds_layout--question-page">
 
         {% block mainContent %}
         <div class="ds_layout__content">
@@ -72,31 +72,35 @@
                 </div>
             </form>
 
-            {# Optionally show submitted answers so far #}
-            {% block answerSummary %}
-            <div>
+            
+
+
+        </div>
+        {% endblock %}
+
+        {# Optionally show submitted answers so far #}
+        {% block answerSummary %}
+        <div class="ds_layout__footer">
+            <div class="ds_!_margin-top--4">
                 <h2>Your answers</h2>
                 <p><button class="ds_link">Clear answers and start again</button></p>
                 <ol class="ds_summary-list">
-                    <li class="ds_summary-list__item"><span class="ds_summary-list__key">This is an example question?</span> <span class="ds_summary-list__value" id="q1"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">My answer</q></span>
+                    <li class="ds_summary-list__item"><span class="ds_summary-list__key" id="item-1-key">This is an example question?</span> <span class="ds_summary-list__value"><q class="ds_summary-list__answer">My answer</q></span>
                         <div class="ds_summary-list__actions">
                             <ul class="ds_summary-list__actions-list">
-                                <li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q1">Change <span class="visually-hidden">your answer for: <q>This is an example question?</q></span></button></li>
+                                <li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="item-1-key">Change</button></li>
                             </ul>
                         </div>
                     </li>
-                    <li class="ds_summary-list__item"><span class="ds_summary-list__key">This is another different example question?</span> <span class="ds_summary-list__value" id="q2"> <span class="visually-hidden">Your answer is: </span> <q class="ds_summary-list__answer">My answer</q></span>
+                    <li class="ds_summary-list__item"><span class="ds_summary-list__key" id="item-2-key">This is another different example question?</span> <span class="ds_summary-list__value"><q class="ds_summary-list__answer">My answer</q></span>
                         <div class="ds_summary-list__actions">
                             <ul class="ds_summary-list__actions-list">
-                                <li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="q2">Change <span class="visually-hidden">your answer for: <q>This is another different example question?</q></span></button></li>
+                                <li class="ds_summary-list__actions-list-item"><button class="ds_link" aria-describedby="item-2-key">Change</button></li>
                             </ul>
                         </div>
                     </li>
                 </ol>
             </div>
-            {% endblock %}
-
-
         </div>
         {% endblock %}