diff --git a/src/govuk/components/exit-this-page/exit-this-page.yaml b/src/govuk/components/exit-this-page/exit-this-page.yaml index 8410c63537..722fb643ab 100644 --- a/src/govuk/components/exit-this-page/exit-this-page.yaml +++ b/src/govuk/components/exit-this-page/exit-this-page.yaml @@ -2,7 +2,11 @@ params: - name: text type: string required: false - description: Text for the link. Defaults to `Exit this page`. + description: Text for the link. If `html` is provided, the `text` option will be ignored. Defaults to 'Exit this page'. + - name: html + type: string + required: false + description: HTML for the link. If `html` is provided, the `text` option will be ignored. - name: redirectUrl type: string required: false @@ -62,3 +66,7 @@ examples: classes: 'test-class' attributes: test-attribute: true + - name: testing-html + hidden: true + data: + html: 'Exit this test' diff --git a/src/govuk/components/exit-this-page/template.njk b/src/govuk/components/exit-this-page/template.njk index cee5b7f977..a4d458335a 100644 --- a/src/govuk/components/exit-this-page/template.njk +++ b/src/govuk/components/exit-this-page/template.njk @@ -8,6 +8,7 @@ {%- if params.pressOneMoreTimeText %} data-i18n.press-one-more-time="{{ params.pressOneMoreTimeText | escape }}"{% endif %} > {{- govukButton({ + html: params.html, text: params.text | default("Exit this page"), classes: "govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button", href: params.redirectUrl | default("https://www.bbc.co.uk/weather") diff --git a/src/govuk/components/exit-this-page/template.test.js b/src/govuk/components/exit-this-page/template.test.js index 6957025fcc..70762178c8 100644 --- a/src/govuk/components/exit-this-page/template.test.js +++ b/src/govuk/components/exit-this-page/template.test.js @@ -40,6 +40,13 @@ describe('Exit this page', () => { expect($button.text()).toContain('Exit this test') }) + it('renders with custom HTML', () => { + const $ = render('exit-this-page', examples['testing-html']) + const $button = $('.govuk-exit-this-page').find('.govuk-button') + + expect($button.html()).toContain('Exit this test') + }) + it('renders with a custom URL', () => { const $ = render('exit-this-page', examples.testing) const $button = $('.govuk-exit-this-page').find('.govuk-button')