Merge pull request #4678 from alphagov/nunjucks-formatting-cookie-banner

Fix Nunjucks HTML indentation: Cookie banner
alphagov · Feb 6, 2024 · 3863146 · 3863146
2 parents aa6ebab + 5c5b5c6
commit 3863146
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 44 deletions.
diff --git a/src/govuk/components/cookie-banner/template.njk b/src/govuk/components/cookie-banner/template.njk
@@ -3,62 +3,52 @@
 <div class="govuk-cookie-banner {%- if params.classes %} {{ params.classes }}{% endif %}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner", true) }}"
   {%- if params.hidden %} hidden{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-
-  {%- for message in params.messages %}
-    <div class="govuk-cookie-banner__message {%- if message.classes %} {{ message.classes }}{% endif %} govuk-width-container" {%- if message.role %} role="{{ message.role }}"{% endif %}
+  {% for message in params.messages %}
+  <div class="govuk-cookie-banner__message {%- if message.classes %} {{ message.classes }}{% endif %} govuk-width-container" {%- if message.role %} role="{{ message.role }}"{% endif %}
     {%- for attribute, value in message.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if message.hidden %} hidden{% endif %}>
 
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         {% if message.headingHtml or message.headingText %}
         <h2 class="govuk-cookie-banner__heading govuk-heading-m">
-          {%- if message.headingHtml -%}
-            {{ message.headingHtml | safe }}
-          {%- else -%}
-            {{ message.headingText }}
-          {%- endif -%}
+          {{ message.headingHtml | safe | trim | indent(10) if message.headingHtml else message.headingText }}
         </h2>
         {% endif %}
-
         <div class="govuk-cookie-banner__content">
-          {%- if message.html -%}
-            {{ message.html | safe }}
-          {%- elif message.text -%}
-            <p class="govuk-body">{{ message.text }}</p>
-          {%- endif -%}
+          {% if message.html %}
+          {{ message.html | safe | trim | indent(10) }}
+          {% elif message.text %}
+          <p class="govuk-body">{{ message.text }}</p>
+          {% endif %}
         </div>
       </div>
     </div>
 
-      {% if message.actions %}
-      <div class="govuk-button-group">
-        {% for action in message.actions %}
-          {% if action.href %}
-            {% if action.type == "button" %}
-              {{ govukButton({
-                "text": action.text,
-                "type": "button",
-                "classes": action.classes,
-                "href": action.href,
-                "attributes": action.attributes
-              }) | trim | indent(12) }}
-            {% else %}
-              <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ action.text }}</a>
-            {% endif %}
-          {% else %}
-            {{ govukButton({
-              "text": action.text,
-              "value": action.value,
-              "name": action.name,
-              "type": action.type,
-              "classes": action.classes,
-              "attributes": action.attributes
-            }) | trim | indent(12) }}
-          {% endif %}
-        {% endfor %}
-      </div>
-      {% endif %}
+    {% if message.actions %}
+    <div class="govuk-button-group">
+    {% for action in message.actions %}
+      {% set buttonHtml -%}
+        {% if not action.href or action.type == "button" %}
+          {{ govukButton({
+            "text": action.text,
+            "type": action.type if action.type else "button",
+            "name": action.name,
+            "value": action.value,
+            "classes": action.classes,
+            "href": action.href,
+            "attributes": action.attributes
+          }) }}
+        {% else %}
+          <a class="govuk-link {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}"
+            {%- for attribute, value in action.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ action.text }}</a>
+        {% endif %}
+      {%- endset %}
+      {{ buttonHtml | safe | trim | indent(6) }}
+    {% endfor %}
     </div>
+    {% endif %}
+
+  </div>
   {% endfor %}
 </div>
diff --git a/src/govuk/components/cookie-banner/template.test.js b/src/govuk/components/cookie-banner/template.test.js
@@ -13,7 +13,9 @@ describe('Cookie Banner', () => {
       const $ = render('cookie-banner', examples.default)
 
       const $heading = $('.govuk-cookie-banner__heading')
-      expect($heading.text()).toEqual('Cookies on this government service')
+      expect($heading.text().trim()).toEqual(
+        'Cookies on this government service'
+      )
     })
 
     it('renders heading as escaped html when passed as text', () => {
@@ -38,7 +40,7 @@ describe('Cookie Banner', () => {
       const $ = render('cookie-banner', examples.default)
 
       const $content = $('.govuk-cookie-banner__content')
-      expect($content.text()).toEqual(
+      expect($content.text().trim()).toEqual(
         'We use analytics cookies to help understand how users use our service.'
       )
     })