From 83f304cd8d41c87f4558be8ecaf55c62b7453dd5 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 14 Mar 2019 15:52:46 +0000
Subject: [PATCH] Add small form controls example

---
 .../examples/small-form-controls/index.njk    | 146 ++++++++++++++++++
 src/objects/_form-group.scss                  |   1 +
 2 files changed, 147 insertions(+)
 create mode 100644 app/views/examples/small-form-controls/index.njk

diff --git a/app/views/examples/small-form-controls/index.njk b/app/views/examples/small-form-controls/index.njk
new file mode 100644
index 0000000000..a5a7ededf9
--- /dev/null
+++ b/app/views/examples/small-form-controls/index.njk
@@ -0,0 +1,146 @@
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "fieldset/macro.njk" import govukFieldset %}
+{% from "input/macro.njk" import govukInput %}
+{% from "button/macro.njk" import govukButton %}
+{% from "radios/macro.njk" import govukRadios %}
+{% from "checkboxes/macro.njk" import govukCheckboxes %}
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "select/macro.njk" import govukSelect %}
+{% from "file-upload/macro.njk" import govukFileUpload %}
+
+{% extends "layout.njk" %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <h1 class="govuk-heading-xl">Small form controls</h1>
+
+  <div class="govuk-grid-row">
+
+    <div class="govuk-grid-column-one-third">
+
+      {{ govukCheckboxes({
+        fieldset: {
+          legend: {
+            text: "Display",
+            classes: "govuk-fieldset__legend--s"
+          }
+        },
+        idPrefix: "display",
+        name: "sort",
+        classes: "govuk-checkboxes--small",
+        items: [
+          {
+            value: "consultations",
+            text: "Consultations"
+          },
+          {
+            value: "guidance",
+            text: "Guidance"
+          },
+          {
+            value: "notices",
+            text: "Notices"
+          },
+          {
+            value: "reports",
+            text: "Reports"
+          }
+        ]
+      }) }}
+
+      {{ govukRadios({
+        fieldset: {
+          legend: {
+            text: "Include",
+            classes: "govuk-fieldset__legend--s"
+          }
+        },
+        idPrefix: "include",
+        name: "include",
+        classes: "govuk-radios--small",
+        items: [
+          {
+            value: "everything",
+            text: "Everything"
+          },
+          {
+            value: "something",
+            text: "Something"
+          },
+          {
+            value: "nothing",
+            text: "Nothing"
+          }
+        ]
+      }) }}
+  </div>
+  <div class="govuk-grid-column-two-thirds">
+
+      {{ govukRadios({
+        fieldset: {
+          legend: {
+            text: "Sort by",
+            classes: "govuk-fieldset__legend--s"
+          }
+        },
+        formGroup: {
+          classes: "govuk-!-margin-bottom-0"
+        },
+        idPrefix: "sort",
+        name: "sort",
+        classes: "govuk-radios--small govuk-radios--inline",
+        items: [
+          {
+            value: "relevance",
+            text: "Relevance"
+          },
+          {
+            value: "created",
+            text: "Created"
+          },
+          {
+            value: "title",
+            text: "Title"
+          }
+        ]
+      }) }}
+
+      {{ govukCheckboxes({
+        name: "grobulate",
+        classes: "govuk-checkboxes--small",
+        formGroup: {
+          classes: "govuk-!-margin-bottom-0"
+        },
+        items: [
+          {
+            value: "grobulate",
+            text: "Grobulate results"
+          }
+        ]
+      }) }}
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible" style="clear: both;">
+
+    <h2 class="govuk-heading-m">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</h2>
+
+    <p class="govuk-body">Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+    <h2 class="govuk-heading-m">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh</h2>
+
+    <p class="govuk-body">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+    <h2 class="govuk-heading-m">Bibendum Commodo Ullamcorper Vulputate</h2>
+
+    <p class="govuk-body">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor..</p>
+  </div>
+</div>
+{% endblock %}
diff --git a/src/objects/_form-group.scss b/src/objects/_form-group.scss
index cfe388d0e2..181ee6ddc5 100644
--- a/src/objects/_form-group.scss
+++ b/src/objects/_form-group.scss
@@ -1,6 +1,7 @@
 @include govuk-exports("govuk/objects/form-group") {
 
   .govuk-form-group {
+    @include govuk-clearfix;
     @include govuk-responsive-margin(6, "bottom");
 
     .govuk-form-group:last-of-type {