From d92d3c8a990730213430b686d239fc7b278530a9 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Wed, 8 Jul 2020 13:32:19 +0100 Subject: [PATCH 1/3] Switch hint from span to div It's possible to pass HTML into the hint component, but this becomes invalid HTML if someone passes a block element in (for example: a

tag) as the hint wraps everything in a span. This commit switches the hint from using a wrapping span to a div, so block elements can be passed in as valid HTML. --- src/govuk/components/hint/_index.scss | 4 ++-- src/govuk/components/hint/template.njk | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/govuk/components/hint/_index.scss b/src/govuk/components/hint/_index.scss index 63932b639d..18a44da8d3 100644 --- a/src/govuk/components/hint/_index.scss +++ b/src/govuk/components/hint/_index.scss @@ -16,7 +16,7 @@ // is unlikely that the default or govuk-label--s class would be used in this // case. - // This adjustment will not work in browsers that do not support :not(). + // This adjustment will not work in browsers that do not support :not(). // Users with these browsers will see the default size margin (5px larger). .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint { @@ -30,7 +30,7 @@ // it is unlikely that the default or govuk-fieldset__legend--s class would be // used in this case. - // This adjustment will not work in browsers that do not support :not(). + // This adjustment will not work in browsers that do not support :not(). // Users with these browsers will see the default size margin (5px larger). .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint { diff --git a/src/govuk/components/hint/template.njk b/src/govuk/components/hint/template.njk index 58350dca06..f84fb51fc9 100644 --- a/src/govuk/components/hint/template.njk +++ b/src/govuk/components/hint/template.njk @@ -1,4 +1,4 @@ - {{ params.html | safe if params.html else params.text }} - + From 843754c7be811dc15b136f0ee0fd86f035fed0bb Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Wed, 8 Jul 2020 10:57:33 +0100 Subject: [PATCH 2/3] Update tests --- .../__snapshots__/template.test.js.snap | 14 ++++++------- .../__snapshots__/template.test.js.snap | 20 +++++++++---------- .../__snapshots__/template.test.js.snap | 6 +++--- .../input/__snapshots__/template.test.js.snap | 6 +++--- .../__snapshots__/template.test.js.snap | 20 +++++++++---------- .../__snapshots__/template.test.js.snap | 6 +++--- .../__snapshots__/template.test.js.snap | 6 +++--- 7 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/govuk/components/character-count/__snapshots__/template.test.js.snap b/src/govuk/components/character-count/__snapshots__/template.test.js.snap index 719242a1a4..9e0c1c46f6 100644 --- a/src/govuk/components/character-count/__snapshots__/template.test.js.snap +++ b/src/govuk/components/character-count/__snapshots__/template.test.js.snap @@ -1,17 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Character count when it includes a hint renders with hint 1`] = ` - It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. - - +

You can enter up to 10 characters - +
`; exports[`Character count when it includes an error message renders with error message 1`] = ` diff --git a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap index 335be1d806..3f909af237 100644 --- a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap +++ b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap @@ -42,22 +42,22 @@ exports[`Checkboxes nested dependant components passes through label params with `; exports[`Checkboxes when they include a hint renders the hint 1`] = ` - If you have dual nationality, select all options that are relevant to you. - - +
Hint for british option here - - +
Hint for other option here - +
`; exports[`Checkboxes when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/date-input/__snapshots__/template.test.js.snap b/src/govuk/components/date-input/__snapshots__/template.test.js.snap index c9b6903233..10e751b6a0 100644 --- a/src/govuk/components/date-input/__snapshots__/template.test.js.snap +++ b/src/govuk/components/date-input/__snapshots__/template.test.js.snap @@ -45,11 +45,11 @@ exports[`Date input passes through html fieldset params without breaking 1`] = ` `; exports[`Date input when it includes a hint renders the hint 1`] = ` - For example, 31 3 1980 - +
`; exports[`Date input when it includes an error message renders the error message 1`] = ` diff --git a/src/govuk/components/input/__snapshots__/template.test.js.snap b/src/govuk/components/input/__snapshots__/template.test.js.snap index ce9d883a9f..eb7d43f31e 100644 --- a/src/govuk/components/input/__snapshots__/template.test.js.snap +++ b/src/govuk/components/input/__snapshots__/template.test.js.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Input when it includes a hint renders the hint 1`] = ` - It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. - + `; exports[`Input when it includes an error message renders the error message 1`] = ` diff --git a/src/govuk/components/radios/__snapshots__/template.test.js.snap b/src/govuk/components/radios/__snapshots__/template.test.js.snap index 95579c11f4..38d68d32ab 100644 --- a/src/govuk/components/radios/__snapshots__/template.test.js.snap +++ b/src/govuk/components/radios/__snapshots__/template.test.js.snap @@ -42,22 +42,22 @@ exports[`Radios nested dependant components passes through label params without `; exports[`Radios when they include a hint renders the hint 1`] = ` - This includes changing your last name or spelling your name differently. - - +
Hint for yes option here - - +
Hint for no option here - +
`; exports[`Radios when they include an error message renders the error message 1`] = ` diff --git a/src/govuk/components/select/__snapshots__/template.test.js.snap b/src/govuk/components/select/__snapshots__/template.test.js.snap index 5dbbd615c9..4e88c93984 100644 --- a/src/govuk/components/select/__snapshots__/template.test.js.snap +++ b/src/govuk/components/select/__snapshots__/template.test.js.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Select when it includes a hint renders the hint 1`] = ` - Hint text goes here - +
`; exports[`Select when it includes an error message renders with error message 1`] = ` diff --git a/src/govuk/components/textarea/__snapshots__/template.test.js.snap b/src/govuk/components/textarea/__snapshots__/template.test.js.snap index 65434d01cd..2b4c67535c 100644 --- a/src/govuk/components/textarea/__snapshots__/template.test.js.snap +++ b/src/govuk/components/textarea/__snapshots__/template.test.js.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Textarea when it includes a hint renders with hint 1`] = ` - It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. - + `; exports[`Textarea when it includes an error message renders with error message 1`] = ` From 266f0910f02ed02e7e8550e9d7dfe4b4ac2f5c3d Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Wed, 8 Jul 2020 11:00:55 +0100 Subject: [PATCH 3/3] Add to Changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49fd013d21..8a29e9b218 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#1838: Correctly camel case SVG attributes in the header and footer](https://github.com/alphagov/govuk-frontend/pull/1838) - [#1842: Preserve the state of conditional reveals when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1842) +- [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855) ## 3.7.0 (Feature release) @@ -68,7 +69,7 @@ This was added in [pull request #1754: Add collapseOnMobile breadcrumbs flag](ht The [back link](https://design-system.service.gov.uk/components/back-link/) component is now: - bigger, so it's easier to select if you're using a touch screen -- more consistent with the design of the breadcrumb component +- more consistent with the design of the breadcrumb component This was added in [pull request #1753: Make back link arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753). Thanks to [@vanitabarrett](https://github.com/vanitabarrett) and [@miaallers](https://github.com/miaallers).