Merge pull request #707 from alphagov/panel-dont-render-empty-div

Fix body element rendering with no text

CHANGELOG.md

@@ -9,6 +9,9 @@ Fixes:
 - Update component readme files content
   ([PR #704](https://github.com/alphagov/govuk-frontend/pull/704))
 
+- Fix body element rendering with no text
+  ([PR #707](https://github.com/alphagov/govuk-frontend/pull/707))
+
 New features:
 
 - Add override classes to set `display` property to `block`, `inline` and `inline-block` (PR [#694](https://github.com/alphagov/govuk-frontend/pull/654))

src/components/panel/README.md

@@ -20,9 +20,11 @@ Find out when to use the Panel component in your service in the [GOV.UK Design S
       <h2 class="govuk-panel__title">
         Application complete
       </h2>
+
       <div class="govuk-panel__body">
         Your reference number: HDJ2123F
       </div>
+
     </div>
 
 #### Macro

src/components/panel/template.njk

@@ -4,7 +4,9 @@
   <h2 class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>
+  {% if params.html or params.text %}
   <div class="govuk-panel__body">
     {{ params.html | safe if params.html else params.text }}
   </div>
+  {% endif %}
 </div>

src/components/panel/template.test.js

@@ -85,4 +85,13 @@ describe('Panel', () => {
     expect($component.attr('first-attribute')).toEqual('true')
     expect($component.attr('second-attribute')).toEqual('false')
   })
+
+  it('doesnt render panel body if no body text is passed', () => {
+    const $ = render('panel', {
+      titleText: 'Application complete'
+    })
+    const panelBody = $('.govuk-panel__body').length
+
+    expect(panelBody).toBeFalsy()
+  })
 })