Allow Error Summary component to not include an error list

alphagov · May 7, 2024 · 48de999 · 48de999
1 parent 78cdffb
commit 48de999
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
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
@@ -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
+    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
@@ -16,20 +16,22 @@
         {{ caller() if caller else (params.descriptionHtml | safe | trim | indent(8) if params.descriptionHtml else params.descriptionText) }}
       </p>
       {% endif %}
-      <ul class="govuk-list govuk-error-summary__list">
-      {% for item in params.errorList %}
-        <li>
-        {% if item.href %}
-          <a href="{{ item.href }}"
-            {{- govukAttributes(item.attributes) }}>
-            {{- item.html | safe | trim | indent(12) if item.html else item.text -}}
-          </a>
-        {% else %}
-          {{ item.html | safe | trim | indent(10) if item.html else item.text }}
-        {% endif %}
-        </li>
-      {% endfor %}
-      </ul>
+      {% if params.errorList | length %}
+        <ul class="govuk-list govuk-error-summary__list">
+        {% for item in params.errorList %}
+          <li>
+          {% if item.href %}
+            <a href="{{ item.href }}"
+              {{- govukAttributes(item.attributes) }}>
+              {{- item.html | safe | trim | indent(12) if item.html else item.text -}}
+            </a>
+          {% else %}
+            {{ item.html | safe | trim | indent(10) if item.html else item.text }}
+          {% endif %}
+          </li>
+        {% endfor %}
+        </ul>
+      {% endif %}
     </div>
   </div>
 </div>
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
@@ -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'])
+      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'])