diff --git a/CHANGELOG.md b/CHANGELOG.md index 6daeca76c3..342149c569 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,7 +42,7 @@ It was previously only possible to use tabular numbers by using the `govuk-font- This change was introduced in [pull request #4973: Add override class for tabular numbers](https://github.com/alphagov/govuk-frontend/pull/4973). -### Deprecations +### Deprecated features #### Importing layers using `all` files @@ -70,6 +70,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests: - [#4942: Remove duplicate `errorMessage` argument for the password input component](https://github.com/alphagov/govuk-frontend/pull/4942) - thanks to [Tim South](https://github.com/tim-s-ccs) for contributing this change - [#4961: Fix tree-shaking when importing `govuk-frontend`](https://github.com/alphagov/govuk-frontend/pull/4961) - [#4963: Fix input value not being set if the value was '0'](https://github.com/alphagov/govuk-frontend/pull/4963) – thanks to [@dwp-dmitri-algazin](https://github.com/dwp-dmitri-algazin) for reporting this issue +- [#4971: Fix Error Summary component outputting list HTML when no `errorList` is provided](https://github.com/alphagov/govuk-frontend/pull/4971) ## 5.3.1 (Fix release) diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss index 095175d6ef..2453dc66ec 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss @@ -24,14 +24,21 @@ .govuk-error-summary__body { p { - margin-top: 0; - @include govuk-responsive-margin(4, "bottom"); + margin-bottom: 0; + } + + > * + * { + @include govuk-responsive-margin(4, "top"); } } // Cross-component class - adjusts styling of list component .govuk-error-summary__list { - margin-top: 0; + margin-bottom: 0; + } + + // Remove the bottom margin from the last list item + .govuk-error-summary__list li:last-child { margin-bottom: 0; } diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.yaml b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.yaml index b00e49885b..3021879b75 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.yaml +++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.yaml @@ -21,8 +21,8 @@ params: 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 - description: The list of errors to include in the error summary. + required: false + description: A list of errors to include in the error summary. params: - name: href type: string @@ -77,6 +77,10 @@ examples: - text: Invalid username or password - text: Agree to the terms of service to log in href: '#example-error-1' + - name: with description only + options: + titleText: There is a problem + descriptionText: The file couldn't be loaded. Try again later. - name: with everything options: titleText: There is a problem diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/template.njk b/packages/govuk-frontend/src/govuk/components/error-summary/template.njk index fea30ab305..dd6fc0eb8b 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/template.njk +++ b/packages/govuk-frontend/src/govuk/components/error-summary/template.njk @@ -16,20 +16,22 @@ {{ caller() if caller else (params.descriptionHtml | safe | trim | indent(8) if params.descriptionHtml else params.descriptionText) }}

{% endif %} - + {% if params.errorList | length %} + + {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/template.test.js b/packages/govuk-frontend/src/govuk/components/error-summary/template.test.js index 94f88cd77f..65a065372c 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/error-summary/template.test.js @@ -25,6 +25,13 @@ describe('Error-summary', () => { expect(summaryTitle).toBe('There is a problem') }) + it('renders error list element', () => { + const $ = render('error-summary', examples.default) + const $errorList = $('.govuk-error-summary__list') + + expect($errorList).toHaveLength(1) + }) + it('number of error items matches the number of items specified', () => { const $ = render('error-summary', examples.default) const errorList = $('.govuk-error-summary .govuk-error-summary__list li') @@ -112,6 +119,13 @@ describe('Error-summary', () => { expect($component.attr('second-attribute')).toBe('bar') }) + it("doesn't render the error list element if no errors are passed", () => { + const $ = render('error-summary', examples['with description only']) + const $errorList = $('.govuk-error-summary__list') + + expect($errorList).toHaveLength(0) + }) + it('renders anchor tag with attributes', () => { const $ = render('error-summary', examples['error list with attributes'])