From 7d3cd788fc8b9cf77e355e28156d7ddeff14e2d5 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Tue, 26 Jul 2022 16:51:56 +0100 Subject: [PATCH 1/6] Make Details component callable --- src/govuk/components/details/details.yaml | 4 ++++ src/govuk/components/details/template.njk | 2 +- src/govuk/components/details/template.test.js | 6 ++++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/details/details.yaml b/src/govuk/components/details/details.yaml index 6c6ce9f0b1..de977d5247 100644 --- a/src/govuk/components/details/details.yaml +++ b/src/govuk/components/details/details.yaml @@ -15,6 +15,10 @@ params: type: string required: true description: If `text` is set, this is not required. HTML to use within the disclosed part of the details element. If `html` is provided, the `text` option will be ignored. +- name: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire details component in a `call` block. - name: id type: string required: false diff --git a/src/govuk/components/details/template.njk b/src/govuk/components/details/template.njk index 16baded89c..809e49d153 100644 --- a/src/govuk/components/details/template.njk +++ b/src/govuk/components/details/template.njk @@ -5,6 +5,6 @@
- {{ params.html | safe if params.html else params.text }} + {{ caller() if caller else (params.html | safe if params.html else params.text) }}
diff --git a/src/govuk/components/details/template.test.js b/src/govuk/components/details/template.test.js index 0316698ed9..ea8555a35f 100644 --- a/src/govuk/components/details/template.test.js +++ b/src/govuk/components/details/template.test.js @@ -53,6 +53,12 @@ describe('Details', () => { expect($summary.get(0).tagName).toEqual('summary') }) + it('renders nested components using `call`', () => { + const $ = render('details', {}, '
') + + expect($('.govuk-details .app-nested-component').length).toBeTruthy() + }) + it('allows text to be passed whilst escaping HTML entities', () => { const $ = render('details', examples['html as text']) From 73c66489bbb8d92622053d483eb9245aa44dfd90 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Tue, 26 Jul 2022 16:55:10 +0100 Subject: [PATCH 2/6] Make Inset Text component callable --- src/govuk/components/inset-text/inset-text.yaml | 4 ++++ src/govuk/components/inset-text/template.njk | 2 +- src/govuk/components/inset-text/template.test.js | 6 ++++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/inset-text/inset-text.yaml b/src/govuk/components/inset-text/inset-text.yaml index f1b0576419..007015ec61 100644 --- a/src/govuk/components/inset-text/inset-text.yaml +++ b/src/govuk/components/inset-text/inset-text.yaml @@ -7,6 +7,10 @@ params: type: string required: true description: If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` option will be ignored. +- name: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire inset text component in a `call` block. - name: id type: string required: false diff --git a/src/govuk/components/inset-text/template.njk b/src/govuk/components/inset-text/template.njk index ade008fed0..93d38b96c9 100644 --- a/src/govuk/components/inset-text/template.njk +++ b/src/govuk/components/inset-text/template.njk @@ -1,4 +1,4 @@
- {{ params.html | safe if params.html else params.text }} + {{ caller() if caller else (params.html | safe if params.html else params.text) }}
diff --git a/src/govuk/components/inset-text/template.test.js b/src/govuk/components/inset-text/template.test.js index ccc216de1d..7eefaf007a 100644 --- a/src/govuk/components/inset-text/template.test.js +++ b/src/govuk/components/inset-text/template.test.js @@ -32,6 +32,12 @@ describe('Inset text', () => { expect($component.attr('id')).toEqual('my-inset-text') }) + it('renders nested components using `call`', () => { + const $ = render('inset-text', {}, '
') + + expect($('.govuk-inset-text .app-nested-component').length).toBeTruthy() + }) + it('allows text to be passed whilst escaping HTML entities', () => { const $ = render('inset-text', examples['html as text']) From d716dafb26388198d0d78927bbd8998182362beb Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Tue, 26 Jul 2022 17:17:14 +0100 Subject: [PATCH 3/6] Make Panel component callable --- src/govuk/components/panel/panel.yaml | 4 ++++ src/govuk/components/panel/template.njk | 4 ++-- src/govuk/components/panel/template.test.js | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/panel/panel.yaml b/src/govuk/components/panel/panel.yaml index e873ef9dd5..3057d4b449 100644 --- a/src/govuk/components/panel/panel.yaml +++ b/src/govuk/components/panel/panel.yaml @@ -19,6 +19,10 @@ params: type: string required: true description: If `text` is set, this is not required. HTML to use within the panel content. If `html` is provided, the `text` option will be ignored. +- name: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block. - name: classes type: string required: false diff --git a/src/govuk/components/panel/template.njk b/src/govuk/components/panel/template.njk index ee26f6e4b7..b7eb33d80e 100644 --- a/src/govuk/components/panel/template.njk +++ b/src/govuk/components/panel/template.njk @@ -5,9 +5,9 @@ {{ params.titleHtml | safe if params.titleHtml else params.titleText }} - {% if params.html or params.text %} + {% if caller or params.html or params.text %}
- {{ params.html | safe if params.html else params.text }} + {{ caller() if caller else (params.html | safe if params.html else params.text) }}
{% endif %} diff --git a/src/govuk/components/panel/template.test.js b/src/govuk/components/panel/template.test.js index e69f30216b..ab61e33603 100644 --- a/src/govuk/components/panel/template.test.js +++ b/src/govuk/components/panel/template.test.js @@ -69,6 +69,12 @@ describe('Panel', () => { expect(panelTitle).toEqual('Application not complete') }) + it('renders nested components using `call`', () => { + const $ = render('panel', {}, '
') + + expect($('.govuk-panel .app-nested-component').length).toBeTruthy() + }) + it('allows body text to be passed whilst escaping HTML entities', () => { const $ = render('panel', examples['body html as text']) From c3ebb8f7adec56cbe77f2b0add46bba97fb214d9 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Wed, 27 Jul 2022 15:28:40 +0100 Subject: [PATCH 4/6] Make notification banner callable --- .../components/notification-banner/notification-banner.yaml | 4 ++++ src/govuk/components/notification-banner/template.njk | 4 ++-- src/govuk/components/notification-banner/template.test.js | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml index a2d880e3e6..637d75d65c 100644 --- a/src/govuk/components/notification-banner/notification-banner.yaml +++ b/src/govuk/components/notification-banner/notification-banner.yaml @@ -7,6 +7,10 @@ params: type: string required: true description: The HTML to use within the notification banner. You can use any string with this option. If you set `html`, `text` is not required and is ignored. +- name: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a `call` block. - name: titleText type: string required: false diff --git a/src/govuk/components/notification-banner/template.njk b/src/govuk/components/notification-banner/template.njk index 5e5dad09f5..a0b632a7ee 100644 --- a/src/govuk/components/notification-banner/template.njk +++ b/src/govuk/components/notification-banner/template.njk @@ -37,8 +37,8 @@
- {%- if params.html -%} - {{ params.html | safe }} + {%- if caller or params.html -%} + {{ caller() if caller else params.html | safe }} {%- elif params.text -%} {# Set default style for single line content #}

{{ params.text }}

diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js index 27289f2469..20395d4b3a 100644 --- a/src/govuk/components/notification-banner/template.test.js +++ b/src/govuk/components/notification-banner/template.test.js @@ -150,6 +150,12 @@ describe('Notification-banner', () => { expect($title.html().trim()).toEqual('<span>Important information</span>') }) + it('renders nested components using `call`', () => { + const $ = render('notification-banner', {}, '
') + + expect($('.govuk-notification-banner .app-nested-component').length).toBeTruthy() + }) + it('renders title as html', () => { const $ = render('notification-banner', examples['title as html']) const $title = $('.govuk-notification-banner__title') From 99694b5ea9cc9bca3315ff13404397ab4eff2631 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Wed, 27 Jul 2022 16:18:34 +0100 Subject: [PATCH 5/6] Make error summary callable --- src/govuk/components/error-summary/error-summary.yaml | 4 ++++ src/govuk/components/error-summary/template.njk | 4 ++-- src/govuk/components/error-summary/template.test.js | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/error-summary/error-summary.yaml b/src/govuk/components/error-summary/error-summary.yaml index 9ff1b639dc..93f3d8c815 100644 --- a/src/govuk/components/error-summary/error-summary.yaml +++ b/src/govuk/components/error-summary/error-summary.yaml @@ -15,6 +15,10 @@ params: type: string required: false description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`. +- name: caller + type: nunjucks-block + required: false + description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a `call` block. - name: errorList type: array required: true diff --git a/src/govuk/components/error-summary/template.njk b/src/govuk/components/error-summary/template.njk index 8b763dc8e9..69c3beb67a 100644 --- a/src/govuk/components/error-summary/template.njk +++ b/src/govuk/components/error-summary/template.njk @@ -6,9 +6,9 @@ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
- {% if params.descriptionHtml or params.descriptionText %} + {% if caller or params.descriptionHtml or params.descriptionText %}

- {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }} + {{ caller() if caller else (params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText) }}

{% endif %}
    diff --git a/src/govuk/components/error-summary/template.test.js b/src/govuk/components/error-summary/template.test.js index fe1c4c3f76..3629bc9b97 100644 --- a/src/govuk/components/error-summary/template.test.js +++ b/src/govuk/components/error-summary/template.test.js @@ -97,6 +97,12 @@ describe('Error-summary', () => { expect(summaryDescription).toEqual('See errors below') }) + it('renders nested components in description using `call`', () => { + const $ = render('error-summary', {}, '
    ') + + expect($('.govuk-error-summary .app-nested-component').length).toBeTruthy() + }) + it('allows additional classes to be added to the error-summary component', () => { const $ = render('error-summary', examples.classes) From aab5d333ee3990db934f9282ad5b19f2a5c50be5 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Mon, 1 Aug 2022 14:57:10 +0100 Subject: [PATCH 6/6] Add changelog --- CHANGELOG.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4cb7016c00..a699e883f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,20 @@ Visit The National Archives' [documentation on OGL and Crown copyright](https:// This was added in [pull request #2702: Allow localisation of content licence and copyright notices in Footer](https://github.com/alphagov/govuk-frontend/pull/2702). +#### Pass HTML directly into compatible components + +If using the Nunjucks macros, you can now pass HTML content directly into compatible components using [the Nunjucks `call` syntax](https://mozilla.github.io/nunjucks/templating.html#call). If HTML is provided through the call syntax, the `html` and `text` options will be ignored. + +Components that have been updated to support this syntax are: + +- Details +- Error summary (mapped to `descriptionHtml` parameter) +- Inset text +- Notification banner +- Panel + +This was added in [pull request #2734: Update various components to be callable](https://github.com/alphagov/govuk-frontend/pull/2734). + ### Deprecated features #### Remove deprecated `govuk-header__navigation--no-service-name` class in the header