Document the selection buttons macro

examples/test-app/app.js

@@ -19,6 +19,10 @@ app.get('/', (req, res) => {
   });
 });
 
+app.get('/selection-buttons', (req, res) => {
+  res.render('SelectionButtons');
+});
+
 app.get('/typography', (req, res) => {
   res.render('Typography');
 });

examples/test-app/assets/scss/main.scss

@@ -1 +1,84 @@
 @import "govuk-elements";
+
+
+// Example boxes
+// ==========================================================================
+
+.example {
+  @extend %contain-floats;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $grey-2;
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding-top: $gutter;
+  padding-right: $gutter-half;
+  padding-bottom: $gutter-half;
+  padding-left: $gutter-half;
+
+  @include media(tablet) {
+    padding-top: $gutter*1.5;
+    padding-right: $gutter;
+    padding-bottom: $gutter;
+    padding-left: $gutter;
+  }
+
+  &:before {
+    content: "EXAMPLE";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    padding: em(4) em(15) em(4) em(15);
+
+    @include core-14;
+    background: $grey-2;
+    color: white;
+  }
+
+  // Blue text for heading sizes
+  .highlight {
+    font-style: normal;
+    color: $hm-government;
+  }
+
+  // Lists (reset this to elements default)
+  .list-bullet {
+    margin-bottom: 20px;
+  }
+
+  // Fix grid layout within example boxes for IE7 and below
+  // where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
+  @mixin example-box-column($width) {
+    width: (($site-width - $gutter) * $width) - $gutter;
+  }
+
+  @include ie-lte(7){
+
+    // Set example box width to 900px (removing left and right padding)
+    $example-box-width: $site-width - ($gutter * 2);
+    width: $example-box-width;
+
+    // Recalculate grid column widths
+    .column-quarter {
+      @include example-box-column( 1/4 );
+    }
+    .column-half {
+      @include example-box-column( 1/2 );
+    }
+    .column-third {
+      @include example-box-column( 1/3 );
+    }
+    .column-two-thirds {
+      @include example-box-column( 2/3 );
+    }
+
+    // Scale images to fit grid columns
+    img {
+      width: 100%;
+    }
+  }
+
+}

examples/test-app/views/SelectionButtons.html

@@ -0,0 +1,45 @@
+{% extends "look-and-feel/layouts/two_thirds.html" %}
+{% from "look-and-feel/components/header.njk" import header %}
+{% from "look-and-feel/components/fields.njk" import selectionButtons %}
+
+{% block head -%}
+  <link href="{{ asset_path }}main.css" media="screen" rel="stylesheet" />
+{% endblock %}
+
+{% block two_thirds -%}
+  {{ header("Selection Buttons", "Components") }}
+
+  {% set field = { id: 'country', name: 'country' } %}
+
+  {{ header("Multiple radio options", size="medium") }}
+
+  <div class="example">
+    {{ selectionButtons(field, "Where do you live?",
+      hint = 'Some advice about the question',
+      hideQuestion = false,
+      options = [
+        { label: "Northern Ireland", value: "northern-ireland" },
+        { label: "Scotland" },
+        { label: "England" },
+        { label: "Wales" }
+      ]
+    ) }}
+  </div>
+
+<div class="panel panel-border-wide">
+  {{ header('Code', size='small') }}
+  <pre>
+  <code>
+  {% raw %}{{ selectionButtons(field, "Where do you live?",
+    hint = 'Some advice about the question',
+    hideQuestion = false,
+    options = [
+      { label: "Northern Ireland", value: "northern-ireland" },
+      { label: "Scotland" },
+      { label: "England" },
+      { label: "Wales" }
+    ]
+  ) }}{% endraw %}</code></pre>
+</div>
+{%- endblock %}
+