Merge pull request #394 from alphagov/fix-335-update-checkbox-example

Update example of a single checkbox to use the new style

app/views/guide_form_elements.html

@@ -234,21 +234,19 @@ <h4 class="heading-small">Stacked checkboxes</h4>
 </code>
 </pre>
 
-  <h4 class="heading-small">Inline checkboxes</h4>
-  <ul class="list list-bullet text">
-    <li>large hit areas aren’t always appropriate</li>
-    <li>only pre-select options if there’s a strong, user-centred reason to</li>
-  </ul>
+  <p>
+    Only pre-select options if there’s a strong, user-centred reason to.
+  </p>
 
   <div class="example">
     <form>
-      {% include "snippets/form_checkbox_native.html" %}
+      {% include "snippets/form_checkbox.html" %}
     </form>
   </div>
 
 <pre>
 <code class="language-markup">
-  {% include "snippets/encoded/form_checkbox_native.html" %}
+  {% include "snippets/encoded/form_checkbox.html" %}
 </code>
 </pre>
 

app/views/snippets/form_checkbox.html

@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label class="form-label" for="telephone-number">Enter your telephone number</label>
+  <input class="form-control" id="telephone-number" name="telephone-number" type="text">
+</div>
+<label class="block-label selection-button-checkbox" for="checkbox-telephone-number">
+  <input id="checkbox-telephone-number" name="contact-by-text-phone" type="checkbox" value="true">
+  I need to be contacted using a text phone
+</label>

public/sass/elements/_forms.scss

@@ -169,28 +169,6 @@ textarea.form-control {
 }
 // scss-lint:enable QualifyingElement
 
-// Radio buttons
-.form-radio {
-  display: block;
-  margin: 10px 0;
-
-  input {
-    vertical-align: middle;
-    margin: -4px 5px 0 0;
-  }
-}
-
-// Checkboxes
-.form-checkbox {
-  display: block;
-  margin: $gutter-half 0;
-
-  input {
-    vertical-align: middle;
-    margin: -2px 5px 0 0;
-  }
-}
-
 
 // 6. Form control widths
 // ==========================================================================