Merge pull request #415 from alphagov/govuk-elements-sass-3.1.1

Update to govuk-elements-sass v3.1.1

app/assets/javascripts/details.polyfill.js

@@ -6,10 +6,12 @@
 
 // http://www.sitepoint.com/fixing-the-details-element/
 
-(function () {
+;(function () {
   'use strict'
 
   var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean'
+  var KEY_ENTER = 13
+  var KEY_SPACE = 32
 
   // Add event construct for modern browsers or IE
   // which fires the callback with a pre-converted target reference
@@ -25,25 +27,50 @@
     }
   }
 
+  // Cross-browser character code / key pressed
+  function charCode (e) {
+    return (typeof e.which === 'number') ? e.which : e.keyCode
+  }
+
+  // Cross-browser preventing default action
+  function preventDefault (e) {
+    if (e.preventDefault) {
+      e.preventDefault()
+    } else {
+      e.returnValue = false
+    }
+  }
+
   // Handle cross-modal click events
   function addClickEvent (node, callback) {
-    // Prevent space(32) from scrolling the page
     addEvent(node, 'keypress', function (e, target) {
-      if (target.nodeName === 'SUMMARY') {
-        if (e.keyCode === 32) {
-          if (e.preventDefault) {
-            e.preventDefault()
+      // When the key gets pressed - check if it is enter or space
+      if (charCode(e) === KEY_ENTER || charCode(e) === KEY_SPACE) {
+        if (target.nodeName.toLowerCase() === 'summary') {
+          // Prevent space from scrolling the page
+          // and enter from submitting a form
+          preventDefault(e)
+          // Click to let the click event do all the necessary action
+          if (target.click) {
+            target.click()
           } else {
-            e.returnValue = false
+            // except Safari 5.1 and under don't support .click() here
+            callback(e, target)
           }
         }
       }
     })
-    // When the key comes up - check if it is enter(13) or space(32)
+
+    // Prevent keyup to prevent clicking twice in Firefox when using space key
     addEvent(node, 'keyup', function (e, target) {
-      if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target) }
+      if (charCode(e) === KEY_SPACE) {
+        if (target.nodeName === 'SUMMARY') {
+          preventDefault(e)
+        }
+      }
     })
-    addEvent(node, 'mouseup', function (e, target) {
+
+    addEvent(node, 'click', function (e, target) {
       callback(e, target)
     })
   }
@@ -89,6 +116,10 @@
       details.__summary = details.getElementsByTagName('summary').item(0)
       details.__content = details.getElementsByTagName('div').item(0)
 
+      if (!details.__summary || !details.__content) {
+        return
+      }
+
       // If the content doesn't have an ID, assign it one now
       // which we'll need for the summary's aria-controls assignment
       if (!details.__content.id) {

docs/documentation/tips-and-tricks.md

@@ -27,7 +27,7 @@ Remove the comments surrounding the unordered list with an ID of proposition lin
       -->
     </nav>
 
-An example of this can be seen in the [question-page.html](../app/views/examples/question-page.html) template.
+An example of this can be seen in the [blank question page](/docs/examples/template-question-page-blank) template.
 
 ## Add a phase banner
 

docs/views/examples/check-your-answers-page.html

@@ -9,6 +9,7 @@
 <main id="content" role="main">
   <div class="grid-row">
     <div class="column-two-thirds">
+      <a href="#" class="link-back">Back</a>
 
       <h1 class="heading-large">
         Check your answers before sending your application

docs/views/examples/confirmation-page.html

@@ -12,13 +12,18 @@
     <div class="column-two-thirds">
 
       <div class="govuk-box-highlight">
-        <h1 class="bold-large">Application complete</h1>
-        <p>
+        <h1 class="heading-xlarge">
+          Application complete
+        </h1>
+        <p class="font-large">
           Your reference number is <br>
-          <strong class="heading-medium">HDJ2123F</strong>
+          <strong class="bold">HDJ2123F</strong>
         </p>
       </div>
-      <p>We have sent you a confirmation email.</p>
+
+      <p>
+        We have sent you a confirmation email.
+      </p>
 
       <h2 class="heading-medium">What happens next</h2>
       <p>We've sent your application to Hackney Electoral Register Office.</p>

docs/views/examples/elements/checkboxes.html

@@ -0,0 +1,56 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Example - Checkboxes
+{% endblock %}
+
+{% block content %}
+<main id="content" role="main">
+
+  {% include "includes/breadcrumb_examples.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">
+        Checkboxes
+      </h1>
+
+      <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content-checkboxes -->
+
+      <form>
+        <div class="form-group">
+          <fieldset>
+
+            <legend>
+              <h1 class="heading-medium">
+                What is your nationality?
+              </h1>
+              <span class="body-text">Select all options that are relevant to you.</span>
+            </legend>
+
+            <div class="multiple-choice">
+              <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
+              <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
+              <label for="nationalities-irish">Irish</label>
+            </div>
+            <div class="multiple-choice" data-target="example-different-country">
+              <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
+              <label for="nationalities-other">Citizen of a different country</label>
+            </div>
+            <div class="panel panel-border-narrow js-hidden" id="example-different-country">
+              <label class="form-label" for="nationalities-other-country">Country name</label>
+              <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
+            </div>
+
+          </fieldset>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</main>
+{% endblock %}

docs/views/examples/elements/forms.html

@@ -17,49 +17,49 @@ <h1 class="form-title heading-large">
 
     <!-- Full name -->
     <div class="form-group">
-      <label class="form-label-bold" for="full-name">Full name</label>
-      <p class="form-hint">As shown on your birth certificate or passport</p>
+      <label class="form-label" for="full-name">
+        Full name
+        <span class="form-hint">As shown on your birth certificate or passport</span>
+      </label>
       <input type="text" class="form-control" id="full-name">
     </div>
 
     <!-- National Insurance number -->
     <div class="form-group">
-      <label class="form-label-bold" for="ni-number">
+      <label class="form-label" for="ni-number">
         National Insurance number
         <span class="form-hint">
           It's on your National Insurance card, benefit letter, payslip or P60.
           <br>
-          For example, 'VO 12 34 56 D'.
+          For example, ‘QQ 12 34 56 C’.
         </span>
       </label>
-      <input type="text" class="form-control" id="ni-number">
+      <input class="form-control" id="ni-number" type="text" name="ni-number">
     </div>
 
     <!-- Date of birth -->
     <div class="form-group">
       <fieldset>
-        <legend class="form-label-bold">Date of birth</legend>
-
+        <legend>
+          <span class="form-label">
+            What is your date of birth?
+          </span>
+          <span class="form-hint">For example, 31 3 1980</span>
+        </legend>
         <div class="form-date">
-
-          <p class="form-hint">For example, 31 3 1980</p>
-
           <div class="form-group form-group-day">
-            <label for="dob-day">Day</label>
-            <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
+            <label class="form-label" for="dob-day">Day</label>
+            <input class="form-control" id="dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
           </div>
-
           <div class="form-group form-group-month">
-            <label for="dob-month">Month</label>
-            <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            <label class="form-label" for="dob-month">Month</label>
+            <input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
           </div>
-
           <div class="form-group form-group-year">
-            <label for="dob-year">Year</label>
-            <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
+            <label class="form-label" for="dob-year">Year</label>
+            <input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
           </div>
         </div>
-
       </fieldset>
     </div>
 

docs/views/examples/elements/radio-buttons.html

@@ -0,0 +1,48 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Example - Radio buttons
+{% endblock %}
+
+{% block content %}
+<main id="content" role="main">
+
+  {% include "includes/breadcrumb_examples.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">
+        Radio buttons
+      </h1>
+
+      <form>
+        <div class="form-group">
+          <fieldset>
+
+            <legend>
+              <h1 class="heading-medium">Where do you live?</h1>
+            </legend>
+
+            <div class="multiple-choice">
+              <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
+              <label for="radio-1">Northern Ireland</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
+              <label for="radio-2">Isle of Man or the Channel Islands</label>
+            </div>
+            <p class="form-block">or</p>
+            <div class="multiple-choice">
+              <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
+              <label for="radio-3">I am a British citizen living abroad</label>
+            </div>
+
+          </fieldset>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</main>
+{% endblock %}