Merge pull request #117 from Crown-Commercial-Service/update-dmp-fron…

…tend-to-v2 Update DMP Frontend to v2
Crown-Commercial-Service · Nov 8, 2024 · 7820370 · 7820370
2 parents 2ac922a + eaa8943
commit 7820370
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,26 @@ Records breaking changes from major version bumps.
 
 ## Unreleased
 
+Upgrade Digital Marketplace Frontend to v2.0.0
+
+🆕 New features:
+
+  Add macros for the following components:
+
+  | Component name                      | Macro name                                          |
+  |-------------------------------------|-----------------------------------------------------|
+  | Question list multiquestion         | `digitalmarketplaceQuestionListMultiquestion`       |
+  | Summary content text                | `digitalmarketplaceSummaryContentText`              |
+  | Summary content list                | `digitalmarketplaceSummaryContentList`              |
+  | Summary content upload              | `digitalmarketplaceSummaryContentUpload`            |
+  | Summary content service ID          | `digitalmarketplaceSummaryContentServiceId`         |
+  | Summary content radios              | `digitalmarketplaceSummaryContentRadios`            |
+  | Summary content boolean             | `digitalmarketplaceSummaryContentBoolean`           |
+  | Summary content number              | `digitalmarketplaceSummaryContentNumber`            |
+  | Summary content checkbox tree       | `digitalmarketplaceSummaryContentCheckboxTree`      |
+  | Summary content multiquestion       | `digitalmarketplaceSummaryContentMultiquestion`     |
+  | Summary content list multiquestion  | `digitalmarketplaceSummaryContentListMultiquestion` |
+
 ## 2.11.0
 
 Replace `setup.py` with `pyproject.toml`

diff --git a/...talmarketplace_frontend_jinja/templates/components/question-list-multiquestion/macro.html b/...talmarketplace_frontend_jinja/templates/components/question-list-multiquestion/macro.html
@@ -1,79 +1,95 @@
 {% macro digitalmarketplaceQuestionListMultiquestion(params) %}
 {%- from "govuk_frontend_jinja/components/fieldset/macro.html" import govukFieldset -%}
 {%- from "govuk_frontend_jinja/components/button/macro.html" import govukButton -%}
+{%- from "govuk_frontend_jinja/components/error-message/macro.html" import govukErrorMessage -%}
 {%- from "digitalmarketplace_frontend_jinja/components/question/macro.html" import digitalmarketplaceQuestion -%}
 
+{% set name = params.question.id %}
+{% if params.errors and params.errors[name] %}
+  {% set errorMessage = { "text": params.errors[name]["message"] } %}
+{% endif %}
+
 {% if params.question.questions -%}
-  {% call govukFieldset({
-    "legend": {
-      "text": params.question.question,
-      "classes": 'govuk-fieldset__legend--m'
-    },
-    "attributes": {
-      'data-module': "dm-question-list-multiquestion",
-      'data-max-number-of-items': params.max_number_of_items
-    }
-  }) %}
-    {% if params.question.question_advice %}
-      <div class="govuk-body">
-        {{ params.question.question_advice | safe }}
-      </div>
-    {% endif %}
+  <div class="govuk-form-group {%- if errorMessage %} govuk-form-group--error{% endif %}">
+    {% call govukFieldset({
+      "legend": {
+        "text": params.question.question,
+        "classes": 'govuk-fieldset__legend--m'
+      },
+      "attributes": {
+        'data-module': "dm-question-list-multiquestion",
+        'data-max-number-of-items': params.question.max_number_of_items
+      }
+    }) %}
+      {% if params.question.question_advice %}
+        <div class="govuk-body">
+          {{ params.question.question_advice | safe }}
+        </div>
+      {% endif %}
+      {% if errorMessage %}
+        {{ govukErrorMessage({
+          "id": "input-" + name + "-error",
+          "text": errorMessage.text
+        }) | trim | indent(2) }}
+      {% endif %}
 
-    <div class="dm-list-multiquestion__items">
-      {% for multi_question in params.question.questions %}
-        {% if multi_question.questions -%}
-          <div class="dm-list-multiquestion__item">
-            {% call govukFieldset({
-              "legend": {
-                "text": multi_question.question,
-                "classes": 'govuk-fieldset__legend--m'
-              }
-            }) %}
-              {% if multi_question.question_advice %}
-                <div class="govuk-body">
-                  {{ multi_question.question_advice | safe }}
+      <div class="dm-list-multiquestion__items">
+        {% for multi_question in params.question.questions %}
+          {% if multi_question.questions -%}
+            <div class="dm-list-multiquestion__item">
+              {% call govukFieldset({
+                "legend": {
+                  "text": multi_question.question,
+                  "classes": 'govuk-fieldset__legend--m'
+                }
+              }) %}
+                {% if multi_question.question_advice %}
+                  <div class="govuk-body">
+                    {{ multi_question.question_advice | safe }}
+                  </div>
+                {% endif %}
+
+                <div class="govuk-grid-row">
+                  {% for question in multi_question.questions %}
+                    <div class="dm-multiquestion__item-input-column govuk-grid-column-{{ params.question.column_width | default('one-half') }}">
+                      {{ digitalmarketplaceQuestion({
+                        "type": question.type,
+                        "question": question,
+                        "data": params.data,
+                        "errors": params.errors,
+                        "frameworkReusedFrom": params.frameworkReusedFrom
+                      }) }}
+                    </div>
+                  {% endfor %}
                 </div>
-              {% endif %}
+              {% endcall %}
+            </div>
+          {%- endif %}
+        {% endfor %}
+      </div>
 
-              <div class="govuk-grid-row">
-                {% for question in multi_question.questions %}
-                  <div class="dm-multiquestion__item-input-column govuk-grid-column-{{ params.question.column_width | default('one-half') }}">
-                    {{ digitalmarketplaceQuestion({
-                      "type": question.type,
-                      "question": question,
-                      "data": params.data,
-                      "errors": params.errors,
-                      "frameworkReusedFrom": params.frameworkReusedFrom
-                    }) }}
-                  </div>
-                {% endfor %}
-              </div>
-            {% endcall %}
-          </div>
-        {%- endif %}
-      {% endfor %}
-    </div>
+      <hr class="govuk-section-break govuk-section-break--m">
 
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        {{ govukButton({
-            "html": 'Remove item <span class="govuk-visually-hidden"><span class="dm-list-multiquestion__item-remove-counter">0</span></span>',
-            "classes": 'govuk-button--secondary dm-list-multiquestion__item-remove govuk-visually-hidden',
-            "type": 'button'
-          })}}
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          {{ govukButton({
+              "html": 'Remove item <span class="govuk-visually-hidden"><span class="dm-list-multiquestion__item-remove-counter">0</span></span>',
+              "classes": 'govuk-button--secondary dm-list-multiquestion__item-remove govuk-visually-hidden',
+              "type": 'button'
+            })}}
+        </div>
       </div>
-    </div>
 
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        {{ govukButton({
-          "html": 'Add item (<span class="dm-list-multiquestion__item-add-counter">0</span> remaining)',
-          "classes": 'govuk-button--secondary dm-list-multiquestion__item-add govuk-visually-hidden',
-          "type": 'button'
-        })}}
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          {{ govukButton({
+            "html": 'Add item (<span class="dm-list-multiquestion__item-add-counter">0</span> remaining)',
+            "classes": 'govuk-button--secondary dm-list-multiquestion__item-add govuk-visually-hidden',
+            "type": 'button'
+          })}}
+        </div>
       </div>
-    </div>
-  {% endcall %}
+    {% endcall %}
+  </div>
 {%- endif %}
 {% endmacro %}
diff --git a/...etplace_frontend_jinja/templates/components/summary-content-list-multiquestion/macro.html b/...etplace_frontend_jinja/templates/components/summary-content-list-multiquestion/macro.html
@@ -5,7 +5,7 @@
   <div class="list-multiquestion govuk-body-s">
     {% for multi_question in params.value %}
       <div class="list-multiquestion__item govuk-body-s">
-        <p class="govuk-body govuk-!-margin-bottom-2">{{ multi_question.name }}</p>
+        <p class="govuk-body govuk-!-margin-bottom-2">{{ multi_question.name if multi_question.name else multi_question.question }}</p>
         {{ digitalmarketplaceSummaryContentMultiquestion({
           "value": multi_question.value
         }) }}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,6 @@
   "author": "CCS",
   "license": "MIT",
   "devDependencies": {
-    "digitalmarketplace-frontend": "^2.0.0-beta.0"
+    "digitalmarketplace-frontend": "^2.0.0"
   }
 }