Update runner to design system v18

Makefile

@@ -9,7 +9,7 @@ load-schemas:
 	./scripts/load_release.sh onsdigital/eq-questionnaire-schemas $(SCHEMAS_VERSION)
 
 load-templates:
-	./scripts/load_release.sh onsdigital/design-system 17.2.0
+	./scripts/load_release.sh onsdigital/design-system 18.1.0
 
 build: load-templates
 	make translate

templates/partials/answers/currency.html

@@ -8,6 +8,7 @@
   "name": answer.id,
   "value": input._value() | e,
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/dropdown.html

@@ -6,6 +6,7 @@
   "id": answer.id,
   "name": select.name,
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/number.html

@@ -6,6 +6,7 @@
   "id": answer.id,
   "type": "number",
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/percentage.html

@@ -7,6 +7,7 @@
   "classes": "js-totaliser-input-calculated" if answer.calculated,
   "type": "number",
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/textarea.html

@@ -6,6 +6,7 @@
   "id": answer.id,
   "name": input.name,
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/textfield.html

@@ -7,6 +7,7 @@
   "name": input.name,
   "value": input._value() | e,
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/partials/answers/unit.html

@@ -9,6 +9,7 @@
   "name": input.name,
   "value": input._value() | e,
   "label": {
+    "id": answer.id + "-label",
     "text": answer.label,
     "description": answer.description
   },

templates/question.html

@@ -13,7 +13,7 @@
         onsPanel({
           "type": "error",
           "classes": "u-mb-s",
-          "title":  ngettext('This page has an error', 'This page has %(num)s errors', form.mapped_errors|length),
+          "title": ngettext('This page has an error', 'This page has %(num)s errors', form.mapped_errors | length),
           "attributes": {
             "data-qa": "error-body"
           }

tests/functional/generate_pages.py

@@ -116,7 +116,9 @@
 )
 
 ANSWER_LABEL_DESCRIPTION_GETTER = Template(
-    r"""  ${answerName}LabelDescription() { return `label[for=${answerId}] > .label__description`; }
+    r"""  ${answerName}LabelDescription() {
+    return `#${answerId}-label-description-hint`;
+  }
 
 """
 )
@@ -298,6 +300,7 @@ def process_options(answer_id, options, page_spec, base_prefix):
 
         page_spec.write(ANSWER_GETTER.substitute(option_context))
         page_spec.write(ANSWER_LABEL_GETTER.substitute(option_context))
+        page_spec.write(ANSWER_LABEL_DESCRIPTION_GETTER.substitute(option_context))
 
         # Add a selector for an option which exposes another input, e.g.
         # an 'Other' option which exposes a text input for the user to fill in

tests/functional/spec/checkbox.spec.js

@@ -18,7 +18,7 @@ describe('Checkbox with "other" option', () => {
   });
 
   it('Given an "other" option is available, when the user clicks the "other" option the other input should be visible.', () => {
-    expect($(MandatoryCheckboxPage.otherLabel()).getText()).to.have.string("Choose any other topping");
+    expect($(MandatoryCheckboxPage.otherLabelDescription()).getText()).to.have.string("Choose any other topping");
     $(MandatoryCheckboxPage.other()).click();
     expect($(MandatoryCheckboxPage.otherDetail()).isDisplayed()).to.be.true;
   });

tests/functional/spec/relationships.spec.js

@@ -72,7 +72,7 @@ describe("Relationships", () => {
       it("And go to the first relationship, Then the 'Brother or Sister' option should have the text 'Including half brother or half sister'", () => {
         $(ListCollectorPage.no()).click();
         $(ListCollectorPage.submit()).click();
-        expect($(RelationshipsPage.brotherOrSisterLabel()).getText()).to.contain("Including half brother or half sister");
+        expect($(RelationshipsPage.brotherOrSisterLabelDescription()).getText()).to.contain("Including half brother or half sister");
       });
 
       it("And go to the second relationship, Then the previous link should return to the first relationship", () => {