Style accordion and tabs text content with govuk-body class

CHANGELOG.md

@@ -22,12 +22,13 @@ This change was introduced in [pull request #2694: Deprecate `.govuk-header__nav
 
 ### Fixes
 
-In [pull request 2678: Replace ex units with ems for input lengths](https://github.com/alphagov/govuk-frontend/pull/2678), we changed how we define input lengths in our CSS. Browsers might now display these inputs as being slightly wider than before. The difference is usually fewer than 3 pixels.  
+In [pull request 2678: Replace ex units with ems for input lengths](https://github.com/alphagov/govuk-frontend/pull/2678), we changed how we define input lengths in our CSS. Browsers might now display these inputs as being slightly wider than before. The difference is usually fewer than 3 pixels.
 
 We’ve also made fixes in the following pull requests:
 
 - [#2668: Fix Summary List action link alignment](https://github.com/alphagov/govuk-frontend/pull/2668)
 - [#2670: Define mininimum width for select component](https://github.com/alphagov/govuk-frontend/pull/2670)
+- [#2723: Style accordion and tabs text content with `govuk-body` class](https://github.com/alphagov/govuk-frontend/pull/2723)
 
 ## 4.2.0 (Feature release)
 

src/govuk/components/accordion/accordion.yaml

@@ -57,10 +57,7 @@ examples:
       - heading:
           text: Section A
         content:
-          html: |
-            <p class="govuk-body">
-              We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
-            </p>
+          text: We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
       - heading:
           text: Section B
         content:

src/govuk/components/accordion/template.njk

@@ -19,7 +19,11 @@
           {% endif %}
         </div>
         <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
-          {{ item.content.html | safe if item.content.html else item.content.text }}
+          {% if item.content.html %}
+            {{ item.content.html | safe }}
+          {% elif item.content.text %}
+            <p class="govuk-body">{{ item.content.text }}</p>
+          {% endif %}
         </div>
       </div>
     {% endif %}

src/govuk/components/accordion/template.test.js

@@ -25,13 +25,22 @@ describe('Accordion', () => {
       expect($componentHeadingButton.html().trim()).toEqual('Section A')
     })
 
-    it('renders with content', () => {
+    it('renders with content as text, wrapped in styled paragraph', () => {
       const $ = render('accordion', examples.default)
       const $componentContent = $('.govuk-accordion__section-content').first()
 
+      expect($componentContent.find('p').hasClass('govuk-body')).toBeTruthy()
       expect($componentContent.text().trim()).toEqual('We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.')
     })
 
+    it('renders with content as html', () => {
+      const $ = render('accordion', examples.default)
+      const $componentContent = $('.govuk-accordion__section-content').last()
+
+      expect($componentContent.find('p.gvouk-body').length).toEqual(0)
+      expect($componentContent.text().trim()).toEqual('Example item 2')
+    })
+
     it('renders with id', () => {
       const $ = render('accordion', examples.default)
 

src/govuk/components/tabs/tabs.yaml

@@ -154,34 +154,7 @@ examples:
         - label: Past year
           id: past-year
           panel:
-            html: |
-              <h2 class="govuk-heading-l">Past year</h2>
-              <table class="govuk-table">
-                <thead class="govuk-table__head">
-                  <tr class="govuk-table__row">
-                    <th class="govuk-table__header" scope="col">Case manager</th>
-                    <th class="govuk-table__header" scope="col">Cases opened</th>
-                    <th class="govuk-table__header" scope="col">Cases closed</th>
-                  </tr>
-                </thead>
-                <tbody class="govuk-table__body">
-                  <tr class="govuk-table__row">
-                    <td class="govuk-table__cell">David Francis</td>
-                    <td class="govuk-table__cell">1380</td>
-                    <td class="govuk-table__cell">1472</td>
-                  </tr>
-                  <tr class="govuk-table__row">
-                    <td class="govuk-table__cell">Paul Farmer</td>
-                    <td class="govuk-table__cell">1129</td>
-                    <td class="govuk-table__cell">1083</td>
-                  </tr>
-                  <tr class="govuk-table__row">
-                    <td class="govuk-table__cell">Rita Patel</td>
-                    <td class="govuk-table__cell">1539</td>
-                    <td class="govuk-table__cell">1265</td>
-                  </tr>
-                </tbody>
-              </table>
+            text: There is no data for this year yet, check back later
 
   - name: tabs-with-anchor-in-panel
     description: Ensure that anchors that are in tab panels work correctly

src/govuk/components/tabs/template.njk

@@ -25,7 +25,11 @@
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
       <div class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ item.panel.html | safe if item.panel.html else item.panel.text }}
+        {% if item.panel.html %}
+          {{ item.panel.html | safe }}
+        {% elif item.panel.text %}
+          <p class="govuk-body">{{ item.panel.text }}</p>
+        {% endif %}
       </div>
     {% endif %}
   {% endfor %}

src/govuk/components/tabs/template.test.js

@@ -119,12 +119,21 @@ describe('Tabs', () => {
       expect($firstTab.text().trim()).toEqual('Past day')
     })
 
+    it('render with panel content as text, wrapped in styled paragraph', () => {
+      const $ = render('tabs', examples.default)
+      const $component = $('.govuk-tabs')
+      const $lastTab = $component.find('.govuk-tabs__panel').last()
+
+      expect($lastTab.find('p').hasClass('govuk-body')).toBeTruthy()
+      expect($lastTab.text().trim()).toEqual('There is no data for this year yet, check back later')
+    })
+
     it('render escaped html when passed to text content', () => {
       const $ = render('tabs', examples['html as text'])
 
       const $component = $('.govuk-tabs')
 
-      const $firstPanel = $component.find('.govuk-tabs__panel')
+      const $firstPanel = $component.find('.govuk-tabs__panel .govuk-body')
       expect($firstPanel.html().trim()).toEqual('<p>Panel 1 content</p>')
     })