Fix markup on pricing summary box (#1808)

https://eaflood.atlassian.net/browse/IWTF-3680 This fixes the markup on the list of prices to use the DL syntax. It also fixes a number of duplicate IDs which should have been classes.
DEFRA · Oct 5, 2023 · c6b9fa5 · c6b9fa5
1 parent d567db3
commit c6b9fa5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 17 deletions.
diff --git a/packages/gafl-webapp-service/assets/sass/main.scss b/packages/gafl-webapp-service/assets/sass/main.scss
@@ -6,7 +6,8 @@ $govuk-fonts-path: '#{$govuk-assets-path}fonts/';
 @import '../node_modules/govuk-frontend/govuk/all';
 @import '../assets/sass/rod-licensing/general';
 @import '../node_modules/flatpickr/dist/flatpickr';
+@import '../assets/sass/rod-licensing/address';
 @import '../assets/sass/rod-licensing/calendar';
 @import '../assets/sass/rod-licensing/cookie_banner';
+@import '../assets/sass/rod-licensing/pricing_summary';
 @import '../assets/sass/rod-licensing/table_extras';
-@import '../assets/sass/rod-licensing/address';
diff --git a/packages/gafl-webapp-service/assets/sass/rod-licensing/_pricing_summary.scss b/packages/gafl-webapp-service/assets/sass/rod-licensing/_pricing_summary.scss
@@ -0,0 +1,10 @@
+.pricing-summary-element-cost {
+  dd,
+  dt {
+    display: inline;
+  }
+
+  dd {
+    margin: 0;
+  }
+}
diff --git a/packages/gafl-webapp-service/src/pages/macros/pricing-summary.njk b/packages/gafl-webapp-service/src/pages/macros/pricing-summary.njk
@@ -4,24 +4,32 @@
     <div id="pricing-{{ selector }}" role="status" class="payment-summary initially-hidden">
         <h2 class="govuk-heading-m">{{ mssgs.no_licence_req_body }}</h2>
         <p class="govuk-body-s">{{ subHeader }}</p>
+        <dl>
+            {% for k, v in load %}
+                {% if content[k].desc %}
+                    <div class="govuk-body pricing-summary-element-cost">
+                        <dt>
+                            <span>{{content[k].desc}}</span>
+                        </dt>
+                        <dd>
+                            {% if v.cost === "0" %}
+                                <strong>{{ mssgs.free }}</strong>
+                            {% else %}
+                                <strong>{{ mssgs.pound }}{{ v.cost }}</strong>
+                            {% endif %}
+                            {% if v.concessions %}
+                                <div class="govuk-body-s pricing-summary-element-concession">
+                                {{ mssgs.concession_applied }}
+                                </div>
+                            {% endif %}
+                        </dd>
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </dl>
         {% for k, v in load %}
-            {% if content[k].desc %}
-                <div class="govuk-body" id="pricing-summary-element-cost">
-                    <span/>{{content[k].desc}}</span>
-                    {% if v.cost === "0" %}
-                        <strong/>{{ mssgs.free }}</strong>
-                    {% else %}
-                        <strong/>{{ mssgs.pound }}{{ v.cost }}</strong>
-                    {% endif %}
-                    {% if v.concessions %}
-                        <div class="govuk-body-s" id="pricing-summary-element-concession">
-                        {{ mssgs.concession_applied }}
-                        </div>
-                    {% endif %}
-                </div>
-            {% endif %}
             {% if k === 'msg' %}
-                <div class="govuk-body-s" id="pricing-summary-element-cost">
+                <div class="govuk-body-s pricing-summary-element-cost">
                     {{content[v]}}
                 </div>
             {% endif %}