Allow disabling error summaries and tweak fieldset styles. (#93)

Author: kbayliss

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
         with:
           node-version-file: '.nvmrc'
       - id: npm-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node-${{ hashFiles('.nvmrc') }}-${{ hashFiles('**/package-lock.json') }}
@@ -41,7 +41,7 @@ jobs:
           virtualenvs-create: true
           virtualenvs-in-project: true
       - id: poetry-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: .venv
           key: ${{ runner.os }}-python-${{ steps.setup-python.outputs.python-version }}-${{ hashFiles('**/poetry.lock') }}

README.md

@@ -404,13 +404,46 @@ You can also style these markers by targeting these CSS classes:
 
 ### Change the default label and legend classes
 
+Label and legend sizes can be changed through the form's helper, e.g.:
+
+```python
+    from tbxforms.layout import Size
+
+    class ExampleForm(...):
+        ...
+
+        def __init__(self, *args, **kwargs):
+            super().__init__(*args, **kwargs)
+            self.helper.label_size = Size.LARGE
+            self.helper.legend_size = Size.LARGE
+```
+
 Possible values for the `label_size` and `legend_size`:
 
 1. `SMALL`
 2. `MEDIUM` (default)
 3. `LARGE`
 4. `EXTRA_LARGE`
 
+### Disable error summary
+
+You can disable the [error summary](https://design-system.service.gov.uk/components/error-summary/)
+by setting `show_error_summary=False` in the form's helper, e.g.:
+
+```python
+    class ExampleForm(...):
+        ...
+
+        def __init__(self, *args, **kwargs):
+            super().__init__(*args, **kwargs)
+            self.helper.show_error_summary = False
+```
+
+This is useful if your form has a complex setup and you need complete control
+over the error summary - e.g. if the form also contains a formset. In this
+instance, you would want to create your own error summary template and include
+it in your template.
+
 # Further reading
 
 -   Download the [PyPI package](http://pypi.python.org/pypi/tbxforms)

tbxforms/helper.py

@@ -57,6 +57,7 @@ def __init__(self, *args, **kwargs):
 
     label_size = ""
     legend_size = ""
+    show_error_summary = True
 
     def render_layout(self, form, context, template_pack=TEMPLATE_PACK):
         """

tbxforms/static/sass/govuk/components/fieldset/_index.scss

@@ -1,7 +1,6 @@
 @include tbxforms-exports("govuk/component/fieldset") {
   .tbxforms-fieldset {
     min-width: 0;
-    margin: 0;
     padding: 0;
     border: 0;
     @include tbxforms-clearfix;

tbxforms/static/sass/govuk/objects/_form-group.scss

@@ -3,7 +3,7 @@
     @include tbxforms-clearfix;
     @include tbxforms-responsive-margin(6, "bottom");
 
-    .tbxforms-form-group:last-of-type {
+    .tbxforms-form-group:last-child {
       margin-bottom: 0; // Remove margin from last item in nested groups
     }
   }

tbxforms/templates/tbxforms/display_form.html

@@ -1,6 +1,10 @@
 {% if form.form_html %}
     {% if include_media %}{{ form.media }}{% endif %}
-    {% include "tbxforms/errors.html" %}
+
+    {% if form.helper.show_error_summary %}
+        {% include "tbxforms/errors.html" %}
+    {% endif %}
+
     {{ form.form_html }}
 {% else %}
     {% include "tbxforms/uni_form.html" %}

tbxforms/templates/tbxforms/uni_form.html

@@ -1,6 +1,8 @@
 {% if include_media %}{{ form.media }}{% endif %}
 
-{% include "tbxforms/errors.html" %}
+{% if form.helper.show_error_summary %}
+    {% include "tbxforms/errors.html" %}
+{% endif %}
 
 {% for field in form %}
     {% include field_template %}

tests/helpers/__snapshots__/test_form_helper/test_error_summary_can_be_hidden.html

@@ -0,0 +1,17 @@
+<form class="tbxforms" method="post">
+    <div id="div_id_accept" class="tbxforms-form-group">
+        <p id="id_accept_hint" class="tbxforms-hint">Please read the terms of service.</p>
+        <div class="tbxforms-checkboxes">
+            <div class="tbxforms-checkboxes__item">
+                <input type="checkbox"
+                       name="accept"
+                       aria-describedby="id_accept_hint"
+                       class="tbxforms-checkboxes__input"
+                       required="required"
+                       id="id_accept"
+                       checked>
+                <label class="tbxforms-label tbxforms-checkboxes__label" for="id_accept">I accept the terms of service</label>
+            </div>
+        </div>
+    </div>
+</form>

tests/helpers/__snapshots__/test_form_helper/test_error_summary_shown_by_default.html

@@ -0,0 +1,28 @@
+<form class="tbxforms" method="post">
+    <div class="tbxforms-error-summary"
+         aria-labelledby="error-summary-title"
+         role="alert"
+         tabindex="-1">
+        <h2 class="tbxforms-error-summary__title" id="error-summary-title">There is a problem with your submission</h2>
+        <div class="tbxforms-error-summary__body">
+            <ul class="tbxforms-list tbxforms-error-summary__list">
+                <li class="tbxforms-error-summary__list__item">An example non-field error.</li>
+            </ul>
+        </div>
+    </div>
+    <div id="div_id_accept" class="tbxforms-form-group">
+        <p id="id_accept_hint" class="tbxforms-hint">Please read the terms of service.</p>
+        <div class="tbxforms-checkboxes">
+            <div class="tbxforms-checkboxes__item">
+                <input type="checkbox"
+                       name="accept"
+                       aria-describedby="id_accept_hint"
+                       class="tbxforms-checkboxes__input"
+                       required="required"
+                       id="id_accept"
+                       checked>
+                <label class="tbxforms-label tbxforms-checkboxes__label" for="id_accept">I accept the terms of service</label>
+            </div>
+        </div>
+    </div>
+</form>

tests/helpers/test_form_helper.py

@@ -9,6 +9,7 @@
 )
 from tests.forms import (
     CheckboxesForm,
+    CheckboxForm,
     TextInputForm,
 )
 from tests.utils import render_form
@@ -44,3 +45,26 @@ def test_override_default_legend_size(snapshot_html):
         Field.checkboxes("method", legend_size=Size.LARGE)
     )
     assert render_form(form) == snapshot_html
+
+
+def test_error_summary_shown_by_default(snapshot_html):
+    """Verify the error summary is shown by default."""
+    form = CheckboxForm(data={"accept": True})
+    form.add_error(None, "An example non-field error.")
+    assert not form.is_valid()
+
+    rendered_form = render_form(form)
+    assert rendered_form == snapshot_html
+    assert "There is a problem with your submission" in rendered_form
+
+
+def test_error_summary_can_be_hidden(snapshot_html):
+    """Verify the error summary can be hidden."""
+    form = CheckboxForm(data={"accept": True})
+    form.add_error(None, "An example non-field error.")
+    form.helper.show_error_summary = False
+    assert not form.is_valid()
+
+    rendered_form = render_form(form)
+    assert rendered_form == snapshot_html
+    assert "There is a problem with your submission" not in rendered_form