Merge pull request #4706 from alphagov/nunjucks-formatting-notificati…

…on-banner Fix Nunjucks HTML indentation: Notification banner
alphagov · Feb 6, 2024 · ee78a24 · ee78a24
2 parents 3863146 + bfe590d
commit ee78a24
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml
@@ -66,7 +66,9 @@ examples:
         <h3 class="govuk-notification-banner__heading">
           This publication was withdrawn on 7 March 2014
         </h3>
-        <p class="govuk-body">Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website</p>
+        <p class="govuk-body">
+          Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website
+        </p>
   - name: with type as success
     options:
       type: success
@@ -101,7 +103,9 @@ examples:
         <h3 class="govuk-notification-banner__heading">
           Check if you need to apply the reverse charge to this application
         </h3>
-        <p class="govuk-body">You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:</p>
+        <p class="govuk-body">
+          You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:
+        </p>
         <ul class="govuk-list govuk-list--bullet govuk-list--spaced">
           <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>
           <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>

diff --git a/src/govuk/components/notification-banner/template.njk b/src/govuk/components/notification-banner/template.njk
@@ -35,11 +35,13 @@
     </h{{ params.titleHeadingLevel | default(2, true) }}>
   </div>
   <div class="govuk-notification-banner__content">
-    {%- if caller or params.html -%}
-      {{ caller() if caller else params.html | safe }}
-    {%- elif params.text -%}
-      {# Set default style for single line content #}
-      <p class="govuk-notification-banner__heading">{{ params.text }}</p>
-    {%- endif -%}
+  {% if caller or params.html %}
+    {{ caller() if caller else params.html | safe | trim | indent(4) }}
+  {% elif params.text %}
+    {# Set default style for single line content -#}
+    <p class="govuk-notification-banner__heading">
+      {{ params.text | trim | indent(6) }}
+    </p>
+  {% endif %}
   </div>
 </div>
diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js
@@ -1,5 +1,6 @@
 const { render } = require('@govuk-frontend/helpers/nunjucks')
 const { getExamples } = require('@govuk-frontend/lib/components')
+const { indent } = require('nunjucks/src/filters')
 const { outdent } = require('outdent')
 
 describe('Notification-banner', () => {
@@ -191,20 +192,32 @@ describe('Notification-banner', () => {
       const $content = $('.govuk-notification-banner__content')
 
       expect($content.html().trim()).toEqual(
-        '<p class="govuk-notification-banner__heading">&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;</p>'
+        indent(
+          outdent`
+            <p class="govuk-notification-banner__heading">
+              &lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;
+            </p>
+          `
+        )
       )
     })
 
     it('renders content as html', () => {
       const $ = render('notification-banner', examples['with text as html'])
       const $contentHtml = $('.govuk-notification-banner__content')
 
-      expect($contentHtml.html().trim()).toEqual(outdent`
-        <h3 class="govuk-notification-banner__heading">
-          This publication was withdrawn on 7 March 2014
-        </h3>
-        <p class="govuk-body">Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website</p>
-      `)
+      expect($contentHtml.html().trim()).toEqual(
+        indent(
+          outdent`
+            <h3 class="govuk-notification-banner__heading">
+              This publication was withdrawn on 7 March 2014
+            </h3>
+            <p class="govuk-body">
+              Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website
+            </p>
+          `
+        )
+      )
     })
   })