diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e5cabe37e..acf829db89 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/govuk/components/accordion/accordion.yaml b/src/govuk/components/accordion/accordion.yaml index 942a2105dc..1241089944 100644 --- a/src/govuk/components/accordion/accordion.yaml +++ b/src/govuk/components/accordion/accordion.yaml @@ -57,10 +57,7 @@ examples: - heading: text: Section A content: - html: | -

- 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. -

+ 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: diff --git a/src/govuk/components/accordion/template.njk b/src/govuk/components/accordion/template.njk index fd567466b0..b9339fe71e 100644 --- a/src/govuk/components/accordion/template.njk +++ b/src/govuk/components/accordion/template.njk @@ -19,7 +19,11 @@ {% endif %}
- {{ item.content.html | safe if item.content.html else item.content.text }} + {% if item.content.html %} + {{ item.content.html | safe }} + {% elif item.content.text %} +

{{ item.content.text }}

+ {% endif %}
{% endif %} diff --git a/src/govuk/components/accordion/template.test.js b/src/govuk/components/accordion/template.test.js index ab54493d9d..ffc1338a4f 100644 --- a/src/govuk/components/accordion/template.test.js +++ b/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) diff --git a/src/govuk/components/tabs/tabs.yaml b/src/govuk/components/tabs/tabs.yaml index 02866c646e..87f2f28737 100644 --- a/src/govuk/components/tabs/tabs.yaml +++ b/src/govuk/components/tabs/tabs.yaml @@ -154,34 +154,7 @@ examples: - label: Past year id: past-year panel: - html: | -

Past year

- - - - - - - - - - - - - - - - - - - - - - - - - -
Case managerCases openedCases closed
David Francis13801472
Paul Farmer11291083
Rita Patel15391265
+ 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 diff --git a/src/govuk/components/tabs/template.njk b/src/govuk/components/tabs/template.njk index f60600215d..7c5847af60 100644 --- a/src/govuk/components/tabs/template.njk +++ b/src/govuk/components/tabs/template.njk @@ -25,7 +25,11 @@ {% if item %} {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
- {{ item.panel.html | safe if item.panel.html else item.panel.text }} + {% if item.panel.html %} + {{ item.panel.html | safe }} + {% elif item.panel.text %} +

{{ item.panel.text }}

+ {% endif %}
{% endif %} {% endfor %} diff --git a/src/govuk/components/tabs/template.test.js b/src/govuk/components/tabs/template.test.js index 0eced00803..6de682c287 100644 --- a/src/govuk/components/tabs/template.test.js +++ b/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>') })