Merge pull request #583 from alphagov/add-error-summary-examples

Add error summary examples, add margin to error summary

CHANGELOG.md

@@ -4,6 +4,11 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 ## Unreleased
 
+Breaking changes:
+
+- The error summary component now has a default bottom margin
+  (PR [#583](https://github.com/alphagov/govuk-frontend/pull/583))
+
 Internal:
 
 - Update pre-release step to check for new components

app/views/examples/error-summary-with-messages/index.njk

@@ -0,0 +1,79 @@
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "button/macro.njk" import govukButton %}
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+{% from "input/macro.njk" import govukInput %}
+
+{% extends "layout.njk" %}
+
+{% block content %}
+
+{{ govukBackLink({
+  "href": "/",
+  "text": "Back"
+}) }}
+
+<main class="govuk-o-main-wrapper">
+
+<form action="/" method="post">
+
+  {{ govukErrorSummary({
+    "titleText": "Message to alert the user to a problem goes here",
+    "descriptionText": "Optional description of the errors and how to correct them",
+    "classes": "optional-extra-class",
+    "errorList": [
+      {
+        "text": "Descriptive link to the question with an error",
+        "href": "#example-error-1"
+      },
+      {
+        "text": "Descriptive link to the question with an error",
+        "href": "#example-error-1"
+      }
+    ]
+  }) }}
+
+  <h1 class="govuk-heading-xl">Passport details</h1>
+
+  {{ govukInput({
+    label: {
+      "html": '<h3 class="govuk-heading-m govuk-!-mb-r1">Passport number</h3>',
+      "hintText": "For example, 502135326"
+    },
+    id: "passport-number",
+    name: "passport-number",
+    errorMessage: {
+      "text": "You must provide your passport number"
+    }
+  }) }}
+
+  {{ govukDateInput({
+    fieldset: {
+      legendHtml: '<h3 class="govuk-heading-m">Expiry date</h3>',
+      legendHintText: 'For example, 08 2014'
+    },
+    id: 'expiry',
+    name: 'expiry',
+    items:[
+      {
+        name: 'month'
+      },
+      {
+        name: 'year'
+      }
+    ],
+    errorMessage: {
+      "text": "You must provide your expiry date"
+    }
+    })
+  }}
+
+  {{ govukButton({
+    "text": "Continue"
+  }) }}
+
+</form>
+
+</main>
+
+{% endblock %}

app/views/examples/error-summary-with-one-thing-per-page/index.njk

@@ -0,0 +1,67 @@
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "button/macro.njk" import govukButton %}
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+
+{% extends "layout.njk" %}
+
+{% block content %}
+
+{{ govukBackLink({
+  "href": "/",
+  "text": "Back"
+}) }}
+
+<main class="govuk-o-main-wrapper">
+
+<form action="/" method="post">
+
+  {{ govukErrorSummary({
+    "titleText": "Message to alert the user to a problem goes here",
+    "descriptionText": "Optional description of the errors and how to correct them",
+    "classes": "optional-extra-class",
+    "errorList": [
+      {
+        "text": "Descriptive link to the question with an error",
+        "href": "#example-error-1"
+      },
+      {
+        "text": "Descriptive link to the question with an error",
+        "href": "#example-error-1"
+      }
+    ]
+  }) }}
+
+  {{ govukDateInput({
+      fieldset: {
+      legendHtml: '<h1 class="govuk-heading-xl">What is your date of birth?</h1>',
+      legendHintText: 'For example, 31 3 1980'
+    },
+    id: 'dob',
+    name: 'dob',
+    items:[
+      {
+        name: 'day'
+      },
+      {
+        name: 'month'
+      },
+      {
+        name: 'year'
+      }
+    ],
+    errorMessage: {
+      text: "You must provide your date of birth"
+    }
+    })
+  }}
+
+  {{ govukButton({
+    "text": "Continue"
+  }) }}
+
+</form>
+
+</main>
+
+{% endblock %}

src/error-summary/_error-summary.scss

@@ -5,6 +5,7 @@
   .govuk-c-error-summary {
     @include govuk-text-colour;
     @include govuk-responsive-padding($govuk-spacing-responsive-4);
+    @include govuk-responsive-margin($govuk-spacing-responsive-8, "bottom");
     @include govuk-focusable;
 
     border: $govuk-border-width-mobile solid $govuk-error-colour;