Add small form controls example

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 %}

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 {