govuk_elements_rails 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 036d93e6fb397f955de23ed8adf114bc3b83b19a
-  data.tar.gz: 770cb5fb1d025ee758af29f64d02377410d6dd59
+  metadata.gz: 85648682a9e22e34cd2e42af89725178d104b997
+  data.tar.gz: 827a92dcc7d95e073db4e2590bbe28ffbbb4ca22
 SHA512:
-  metadata.gz: 7c48cce45e3f80d92e84edd21456db964a73e3018e24d175e8cab56ff7d37a013ff26aaab41be857ce7fb83a8b217722699c98f675d0fe802c125ef0652411a5
-  data.tar.gz: aaea624fa297a9391ff7aad10b600ab65b200c9b51dc92741db5591c62c19bed291ea99fcdcbf46405ca241c1a5913d2c4a1bbbedb591983f9098b370774c934
+  metadata.gz: 17519e48bc499d28e907ac48025bb631b06581e87791f3086713ecd9208b69439d9cf8dd4f8a3d390e93e376a465df5faa3c2c8ac8225b0f6ac570ffab48eb87
+  data.tar.gz: e7c7b1fb30e9f189121ff0ea168c694237b3e8354ec007f3c55ed0f3923b2398908666ed73111657095f8a7ca321597c5a297e42278ccd8a6c29997ca8028d5c

data/README.md

@@ -15,6 +15,19 @@ If you are installing from git, ensure you enable submodules like so:
 
     gem 'govuk_elements_rails', :git => "https://github.com/ministryofjustice/govuk_elements_rails.git", :submodules => true
 
+If you are working on the gem itself, clone and download submodules like this:
+
+    git clone https://github.com/ministryofjustice/govuk_elements_rails.git
+    cd govuk_elements_rails
+    git submodule init
+    git submodule update
+
+To add a javascript file to gem, create new symlink to govuk_elements file like this:
+
+    cd vendor/assets/javascripts/
+    ln -s ../../../govuk_elements/public/javascripts/application.js
+    ls -l
+
 ## Usage
 
 At the top of a Sass file in your Rails project you should use an `@import` rule
@@ -43,13 +56,6 @@ For example here are all the requires possible at present:
     //= require bind
     //= require selection-buttons
 
-## Usage of GovukElementsFormBuilder
-
-To replace the default form builder with a version that generates GOV.UK Elements classed markup, set the following in
-config/application.rb:
-
-    config.use_govuk_elements_form_builder = true
-
 ## Alternate ways to reuse GOV.UK Elements
 
 There are other alternate ways to include GOV.UK Elements files in a Rails

data/app/builders/labelling_form_builder.rb

@@ -0,0 +1,316 @@
+
+class LabellingFormBuilder < ActionView::Helpers::FormBuilder
+
+  include ActionView::Helpers::CaptureHelper
+  include ActionView::Helpers::TagHelper
+  include ActionView::Context
+
+  def text_field_row(attribute, options={})
+    row_input attribute, :text_field, options
+  end
+
+  def text_area_row(attribute, options={})
+    row_input attribute, :text_area, options
+  end
+
+  def moj_date_fieldset attribute, legend, options = {}, example_date = Date.today, explanatory_text = nil
+    df = MojDateFieldset.new(self, attribute, legend, options, example_date, explanatory_text)
+    df.emit
+  end
+
+  # produces an postcode picker widget - this will produce an address/street and postcode attributes for the given object type
+  # @param [String] attribute: the name of the attribute on Claim which is to have the street and postcode attributes (e.g. property, defendant_1)
+  # @param [Hash] options: options to control the way in which the potcode picker is displayed, and what html is generated in the form:
+  #  :prefix - the prefix to be applied to each element in the form
+  #  :postcode_attr - the name of the postcode attribute if not 'postcode'
+  #  :address_attr - the name of the address attribute if not 'street'
+  #  :name - the prefix of the name given to the street and postcode attributes if not 'claim['xxxx'] where xxxx is the attribute
+  #  :street_hint -  and html which is to be inserted as a hint above the street textarea
+  #  :vc - list of valid countries: postcodes that return a country not in the supplied list will be marked as invalid.
+  #        If not supplied or blank, all countries are valid.  Countries should be joined by '+' and spaces in country names should be replaced
+  #        by underscores, e.g "england+wales+channel_islands+isle_of_man"
+  #  :button_label - the text to use on the Find UK Address button if not 'Find Uk Address'
+  #
+  def moj_postcode_picker attribute, options = {}
+    default_options = {
+      :prefix        => "claim_#{attribute}",
+      :postcode_attr => :postcode,
+      :address_attr  => :street,
+      :name          => "claim[#{attribute}]"
+    }
+    options = default_options.merge(options)
+    mpp = MojPostcodePicker.new(self, options)
+    mpp.emit
+  end
+
+  # Defaults to "Yes" "No" labels on radio inputs
+  def radio_button_fieldset attribute, legend, options={}
+    translation_key = translation_key(attribute)
+    raise "TBD: #{translation_key} #{options[:choice]}" if options[:choice].is_a?(Hash)
+
+    virtual_pageview = options[:data] ? options[:data].delete('virtual-pageview') : nil
+    input_class = options.delete(:input_class)
+
+    set_class_and_id attribute, options
+
+    options[:choice] ||= [ 'Yes', 'No' ]
+
+    options_class = options[:class][/inline/] ? 'inline' : 'options'
+
+    data_reverse = options.delete(:toggle_fieldset) ? ' data-reverse="true"' : ''
+
+    fieldset_tag attribute, legend, options do
+      @template.surround("<div class='#{options_class}'#{data_reverse}>".html_safe, "</div>".html_safe) do
+        options[:choice].map do |choice|
+          radio_button_row(attribute, choice, virtual_pageview, input_class)
+        end.join("\n")
+      end
+    end
+  end
+
+  def row attribute, options={}
+    @template.haml_tag haml_tag_text('div option', attribute, options) do
+      yield
+    end
+  end
+
+  def error_for? attribute
+    # if @object.is_a?(Claim)
+      # subkey = "claim_#{attribute}_error"
+      # base_errors = error_message_for(:base)
+      # base_errors && base_errors.to_h.key?(subkey) && !base_errors.to_h[subkey].empty?
+    # else
+      attribute_errors = error_message_for(attribute)
+      attribute_errors && !attribute_errors.empty?
+    # end
+  end
+
+  def error_span attribute, options={}
+    @template.surround(error_span_open_tag(options), "</span>".html_safe) do
+      error_span_message(attribute)
+    end
+  end
+
+  # Creates key for lookup of translation text.
+  # E.g. translation_key(hearing, {:choice=>"No"}) when in possession form
+  #      returns "claim.possession.hearing.no"
+  def translation_key attribute, options={}
+    key = "#{ parent_id.gsub('_','.') }.#{attribute}".squeeze('.')
+    key.gsub!(/\.\d+\./, '.')
+    if choice = options[:choice]
+      choice = 'na' if choice == ''
+      key += ".#{choice.downcase}"
+    end
+    key
+  end
+
+  def error_id_for attribute
+    field_id = "#{parent_id}_#{attribute}".squeeze('_')
+    "#{field_id}_error"
+  end
+
+  def parent_id
+    @object_name.to_s.tr('[]','_').squeeze('_')
+  end
+
+  def labelled_check_box attribute, label, yes='Yes', no='No', options={}
+    set_class_and_id attribute, options
+    hidden_input = check_box_input_hidden attribute, options, yes, no
+
+    labeled_input = label(attribute) do
+      check_box_input(attribute, options, yes, no) + label
+    end
+
+    list = [hidden_input]
+
+    if error_for?(attribute)
+      id = error_id_for(attribute)
+      labeled_input.sub!(%Q[id="#{id}"], %Q[id="#{id.sub('_error','')}"])
+      list << hidden_fullstop(options)
+      list << error_span(attribute)
+    end
+
+    list << labeled_input
+
+    list.join("\n").html_safe
+  end
+
+  def set_class_and_id attribute, options
+    options[:class] = css_for(attribute, options)
+    options[:id] = id_for(attribute) unless id_for(attribute).blank?
+  end
+
+  def fieldset_tag(attribute, legend_text, options = {}, &block)
+    fieldset = tag(:fieldset, options_for_fieldset(options), true)
+
+    fieldset.safe_concat legend_for(attribute, legend_text, options) unless legend_text.blank?
+
+    fieldset.concat(capture(&block)) if block_given?
+    fieldset.safe_concat("</fieldset>")
+  end
+
+  private
+
+  def fieldset attribute, options={}
+    options.delete(:id) unless options[:id].present?
+    @template.haml_tag haml_tag_text('fieldset', attribute, options) do
+      yield
+    end
+  end
+
+  def id_for attribute, default=nil
+    error_for?(attribute) ? error_id_for(attribute) : (default || '')
+  end
+
+  def label_content_for attribute, label, options={}
+    label ||= attribute.to_s.humanize
+    label = ["#{label}"]
+    hint = hint_span(options)
+    label << hint if hint
+    if error_for?(attribute)
+      last = label.pop
+      label << ( ends_with_punctuation?(last) ? last : (last + hidden_fullstop(options)) )
+      label << error_span(attribute, options)
+    end
+    label.join(" ").html_safe
+  end
+
+  def hint_span options
+    options[:hint] ? "<span class='hint block'>#{options[:hint]}</span>".html_safe : nil
+  end
+
+  def ends_with_punctuation? span
+    span[/\?<\/span/] || span[/\.<\/span>/] || span[/\.|\?$/]
+  end
+
+  def legend_for attribute, legend_text, options
+    label = label_content_for(attribute, legend_text, hint: options[:hint])
+    content_tag(:legend, label)
+  end
+
+  def hidden_fullstop options
+    '<span class="visuallyhidden">.</span>'.html_safe
+  end
+
+  def error_span_message attribute
+    if @object.is_a? Claim
+      error_message_for(:base).to_h["claim_#{attribute}_error"]
+    else
+      error_message_for(attribute)[0]
+    end
+  end
+
+  def error_span_open_tag options
+    " <span class='error#{error_classes(options)}'#{error_span_id(options)}>".html_safe
+  end
+
+  def error_span_id options
+    options.has_key?(:id)? " id='#{options[:id]}'" : nil
+  end
+
+  def error_classes options
+    ' visuallyhidden' if options[:hidden]
+  end
+
+  def options_for_fieldset options
+    options.delete(:class) if options[:class].blank?
+    options = {}.merge(options)
+    options.delete(:hint)
+    options.delete(:choice)
+    options.delete(:date_select_options)
+    options
+  end
+
+  def error_message_for symbol
+    @object.errors.messages[symbol]
+  end
+
+  def check_box_input attribute, options, yes, no
+    html = check_box(attribute, options, yes, no)
+    html.gsub!(/<[^<]*type="hidden"[^>]*>/,'')
+    html.html_safe
+  end
+
+  def check_box_input_hidden attribute, options, yes, no
+    html = check_box(attribute, options, yes, no)
+    html.gsub!(/.*(<[^<]*type="hidden"[^>]*>).*/, '\1')
+    html.html_safe
+  end
+
+  def radio_button_row attribute, choice, virtual_pageview, input_class
+    translation_key = translation_key(attribute, choice: choice)
+
+    translation = I18n.t(translation_key)
+    raise "translation missing: #{translation_key}" if translation[/translation missing/]
+    label = translation unless translation[/translation missing/]
+
+    options = {}
+    options.merge!(class: input_class) if input_class
+    options.merge!(data: { 'virtual_pageview' => virtual_pageview }) if virtual_pageview
+
+    input = radio_button(attribute, choice, options)
+
+    id = input[/id="([^"]+)"/,1]
+
+    @template.surround("<div class='option'>".html_safe, "</div>".html_safe) do
+      @template.surround("<label for='#{id}'>".html_safe, "</label>".html_safe) do
+        # errors = error_span(attribute, {hidden: true}) if error_for?(attribute)
+        [
+          # errors,
+          input,
+          label
+        ].compact.join("\n")
+      end
+    end
+  end
+
+  def css_for attribute, options
+    css = ''
+    css += " #{options[:class]}" if options[:class].present?
+    css += ' error' if error_for?(attribute)
+    css.strip
+  end
+
+  def haml_tag_text tag, attribute, options
+    tag += " #{css_for(attribute, options)}"
+    haml_tag_text = tag.squeeze(' ').strip.gsub(' ','.')
+  end
+
+  def row_input attribute, input_type, options
+    virtual_pageview = options[:data] ? options[:data].delete('virtual-pageview') : nil
+    css = "form-group #{css_for(attribute, options)}".strip
+    id = id_for(attribute).blank? ? '' : "id='#{id_for(attribute)}' "
+
+    @template.surround("<div #{id}class='#{css}'>".html_safe, "</div>".html_safe) do
+      input_options = options.merge(class: "form-control #{options[:input_class]}".strip)
+      input_options.merge!(data: {'virtual_pageview' => virtual_pageview}) if virtual_pageview
+      input_options.delete(:label)
+      input_options.delete(:input_class)
+
+      labelled_input attribute, input_type, input_options, options[:label]
+    end
+  end
+
+  def labelled_input attribute, input_type, input_options, label=nil
+    label = label(attribute, label_content_for(attribute, label), class: 'form-label')
+
+    if max_length = max_length(attribute)
+      input_options.merge!(maxlength: max_length)
+    end
+
+    value = send(input_type, attribute, input_options)
+
+    [ label, value ].join("\n").html_safe
+  end
+
+  def max_length attribute
+    if validator = validators(attribute).detect{|x| x.is_a?(ActiveModel::Validations::LengthValidator)}
+      validator.options[:maximum]
+    end
+  end
+
+  def validators attribute
+    @object.class.validators_on(attribute)
+  end
+
+end

data/lib/govuk_elements_rails/version.rb

@@ -1,5 +1,5 @@
 module GovUKElementsRails
   def self.elements_version
-    '0.2.1'
+    '0.2.2'
   end
 end

data/vendor/assets/javascripts/application.js

@@ -0,0 +1,134 @@
+function ShowHideContent() {
+  var self = this;
+
+
+  self.escapeElementName = function(str) {
+    result = str.replace('[', '\\[').replace(']', '\\]')
+    return(result);
+  };
+
+  self.showHideRadioToggledContent = function () {
+    $(".block-label input[type='radio']").each(function () {
+
+      var $radio = $(this);
+      var $radioGroupName = $radio.attr('name');
+      var $radioLabel = $radio.parent('label');
+
+      var dataTarget = $radioLabel.attr('data-target');
+
+      // Add ARIA attributes
+
+      // If the data-target attribute is defined
+      if (dataTarget) {
+
+        // Set aria-controls
+        $radio.attr('aria-controls', dataTarget);
+
+        $radio.on('click', function () {
+
+          // Select radio buttons in the same group
+          $radio.closest('form').find(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
+            var $this = $(this);
+
+            var groupDataTarget = $this.parent('label').attr('data-target');
+            var $groupDataTarget = $('#' + groupDataTarget);
+
+            // Hide toggled content
+            $groupDataTarget.hide();
+            // Set aria-expanded and aria-hidden for hidden content
+            $this.attr('aria-expanded', 'false');
+            $groupDataTarget.attr('aria-hidden', 'true');
+          });
+
+          var $dataTarget = $('#' + dataTarget);
+          $dataTarget.show();
+          // Set aria-expanded and aria-hidden for clicked radio
+          $radio.attr('aria-expanded', 'true');
+          $dataTarget.attr('aria-hidden', 'false');
+
+        });
+
+      } else {
+        // If the data-target attribute is undefined for a radio button,
+        // hide visible data-target content for radio buttons in the same group
+
+        $radio.on('click', function () {
+
+          // Select radio buttons in the same group
+          $(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
+
+            var groupDataTarget = $(this).parent('label').attr('data-target');
+            var $groupDataTarget = $('#' + groupDataTarget);
+
+            // Hide toggled content
+            $groupDataTarget.hide();
+            // Set aria-expanded and aria-hidden for hidden content
+            $(this).attr('aria-expanded', 'false');
+            $groupDataTarget.attr('aria-hidden', 'true');
+          });
+
+        });
+      }
+
+    });
+  }
+  self.showHideCheckboxToggledContent = function () {
+
+    $(".block-label input[type='checkbox']").each(function() {
+
+      var $checkbox = $(this);
+      var $checkboxLabel = $(this).parent();
+
+      var $dataTarget = $checkboxLabel.attr('data-target');
+
+      // Add ARIA attributes
+
+      // If the data-target attribute is defined
+      if (typeof $dataTarget !== 'undefined' && $dataTarget !== false) {
+
+        // Set aria-controls
+        $checkbox.attr('aria-controls', $dataTarget);
+
+        // Set aria-expanded and aria-hidden
+        $checkbox.attr('aria-expanded', 'false');
+        $('#'+$dataTarget).attr('aria-hidden', 'true');
+
+        // For checkboxes revealing hidden content
+        $checkbox.on('click', function() {
+
+          var state = $(this).attr('aria-expanded') === 'false' ? true : false;
+
+          // Toggle hidden content
+          $('#'+$dataTarget).toggle();
+
+          // Update aria-expanded and aria-hidden attributes
+          $(this).attr('aria-expanded', state);
+          $('#'+$dataTarget).attr('aria-hidden', !state);
+
+        });
+      }
+
+    });
+  }
+}
+
+$(document).ready(function() {
+
+  // Turn off jQuery animation
+  jQuery.fx.off = true;
+
+  // Use GOV.UK selection-buttons.js to set selected
+  // and focused states for block labels
+  var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']");
+  new GOVUK.SelectionButtons($blockLabels);
+
+  // Details/summary polyfill
+  // See /javascripts/vendor/details.polyfill.js
+
+  // Where .block-label uses the data-target attribute
+  // to toggle hidden content
+  var toggleContent = new ShowHideContent();
+  toggleContent.showHideRadioToggledContent();
+  toggleContent.showHideCheckboxToggledContent();
+
+});

data/vendor/assets/javascripts/details.polyfill.js

@@ -24,16 +24,21 @@
 
   // Handle cross-modal click events
   function addClickEvent(node, callback) {
-    var keydown = false;
-    addEvent(node, 'keydown', function () {
-      keydown = true;
+    // Prevent space(32) from scrolling the page
+    addEvent(node, 'keypress', function (e, target) {
+      if (e.keyCode === 32) {
+        if (e.preventDefault) {
+          e.preventDefault();
+        }
+        else { e.returnValue = false; }
+      }
     });
+    // When the key comes up - check if it is enter(13) or space(32)
     addEvent(node, 'keyup', function (e, target) {
-      keydown = false;
-      if (e.keyCode === 13) { callback(e, target); }
+      if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target); }
     });
-    addEvent(node, 'click', function (e, target) {
-      if (!keydown) { callback(e, target); }
+    addEvent(node, 'mouseup', function (e, target) {
+      callback(e, target);
     });
   }
 
@@ -86,6 +91,9 @@
         details.__content.id = 'details-content-' + i;
       }
 
+      // Add ARIA role="group" to details
+      details.setAttribute('role', 'group');
+
       // Add role=button to summary
       details.__summary.setAttribute('role', 'button');
 
@@ -93,30 +101,69 @@
       details.__summary.setAttribute('aria-controls', details.__content.id);
 
       // Set tabindex so the summary is keyboard accessible
-      details.__summary.setAttribute('tabindex', '0');
+      // details.__summary.setAttribute('tabindex', 0);
+      // http://www.saliences.com/browserBugs/tabIndex.html
+      details.__summary.tabIndex = 0;
 
       // Detect initial open/closed state
-      var detailsAttr = details.hasAttribute('open');
-      if (typeof detailsAttr !== 'undefined' && detailsAttr !== false) {
+
+      // Native support - has 'open' attribute
+      if (details.open === true) {
         details.__summary.setAttribute('aria-expanded', 'true');
         details.__content.setAttribute('aria-hidden', 'false');
-      } else {
+        details.__content.style.display = 'block';
+      }
+
+      // Native support - doesn't have 'open' attribute
+      if (details.open === false) {
         details.__summary.setAttribute('aria-expanded', 'false');
         details.__content.setAttribute('aria-hidden', 'true');
         details.__content.style.display = 'none';
       }
 
+      // If this is not a native implementation
+      if (!details.__native) {
+
+        // Add an arrow
+        var twisty = document.createElement('i');
+
+        // Check for the 'open' attribute
+        // If open exists, but isn't supported it won't have a value
+        if (details.getAttribute('open') === "") {
+          details.__summary.setAttribute('aria-expanded', 'true');
+          details.__content.setAttribute('aria-hidden', 'false');
+        }
+
+        // If open doesn't exist - it will be null or undefined
+        if (details.getAttribute('open') == null || details.getAttribute('open') == "undefined" ) {
+          details.__summary.setAttribute('aria-expanded', 'false');
+          details.__content.setAttribute('aria-hidden', 'true');
+          details.__content.style.display = 'none';
+        }
+
+      }
+
       // Create a circular reference from the summary back to its
       // parent details element, for convenience in the click handler
       details.__summary.__details = details;
 
       // If this is not a native implementation, create an arrow
-      // inside the summary, saving its reference as a summary property
+      // inside the summary
       if (!details.__native) {
+
         var twisty = document.createElement('i');
-        twisty.className = 'arrow arrow-closed';
-        twisty.appendChild(document.createTextNode('\u25ba'));
+
+        if (details.getAttribute('open') === "") {
+          twisty.className = 'arrow arrow-open';
+          twisty.appendChild(document.createTextNode('\u25bc'));
+        } else {
+          twisty.className = 'arrow arrow-closed';
+          twisty.appendChild(document.createTextNode('\u25ba'));
+        }
+
         details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
+        details.__summary.__twisty.setAttribute('aria-hidden', 'true');
+
       }
     }
 
@@ -124,7 +171,6 @@
     // Also update the arrow position
     function statechange(summary) {
 
-      // Update aria-expanded attribute on click
       var expanded = summary.__details.__summary.getAttribute('aria-expanded') == 'true';
       var hidden = summary.__details.__content.getAttribute('aria-hidden') == 'true';
 

data/vendor/assets/javascripts/selection-buttons.js

@@ -1,12 +1,13 @@
 (function () {
-  "use strict"
+  "use strict";
   var root = this,
       $ = root.jQuery;
 
   if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
 
-  var BaseButtons = function ($elms, opts) {
-    this.$elms = $elms;
+  var SelectionButtons = function (elmsOrSelector, opts) {
+    var $elms;
+
     this.selectedClass = 'selected';
     this.focusedClass = 'focused';
     if (opts !== undefined) {
@@ -14,124 +15,97 @@
         this[optionName] = optionObj;
       }.bind(this));
     }
-    this.setEventNames();
-    this.getSelections();
-    this.bindEvents();
+    if (typeof elmsOrSelector === 'string') {
+      $elms = $(elmsOrSelector);
+      this.selector = elmsOrSelector;
+      this.setInitialState($(this.selector));
+    } else {
+      this.$elms = elmsOrSelector;
+      this.setInitialState(this.$elms);
+    }
+    this.addEvents();
   };
-  BaseButtons.prototype.setEventNames = function () {
-    this.selectionEvents = 'click';
-    this.focusEvents = 'focus blur';
+  SelectionButtons.prototype.addEvents = function () {
+    if (typeof this.$elms !== 'undefined') {
+      this.addElementLevelEvents();
+    } else {
+      this.addDocumentLevelEvents();
+    }
   };
-  BaseButtons.prototype.markFocused = function ($elm, state) {
-    var elmId = $elm.attr('id');
+  SelectionButtons.prototype.setInitialState = function ($elms) {
+    $elms.each(function (idx, elm) {
+      var $elm = $(elm);
 
+      if ($elm.is(':checked')) {
+        this.markSelected($elm);
+      }
+    }.bind(this));
+  };
+  SelectionButtons.prototype.markFocused = function ($elm, state) {
     if (state === 'focused') {
       $elm.parent('label').addClass(this.focusedClass);
     } else {
       $elm.parent('label').removeClass(this.focusedClass);
     }
   };
-  BaseButtons.prototype.bindEvents = function () {
-    var selectionEventHandler = this.markSelected.bind(this),
-        focusEventHandler = this.markFocused.bind(this);
+  SelectionButtons.prototype.markSelected = function ($elm) {
+    var radioName;
 
-    this.$elms
-      .on(this.selectionEvents, function (e) {
-        selectionEventHandler($(e.target));
-      })
-      .on(this.focusEvents, function (e) {
-        var state = (e.type === 'focus') ? 'focused' : 'blurred';
-
-        focusEventHandler($(e.target), state);
-      });
-  };
-
-  var RadioButtons = function ($elms, opts) {
-    BaseButtons.apply(this, arguments);
-  };
-  RadioButtons.prototype.setEventNames = function () {
-    // some browsers fire the 'click' when the selected radio changes by keyboard
-    this.selectionEvents = 'click change';
-    this.focusEvents = 'focus blur';
-  };
-  RadioButtons.prototype.getSelections = function () {
-    var selectionEventHandler = this.markSelected.bind(this);
-
-    this.selections = {};
-    $.each(this.$elms, function (index, elm) {
-      var $elm = $(elm),
-          radioName = $elm.attr('name');
-
-      if (typeof this.selections[radioName] === 'undefined') {
-        this.selections[radioName] = false;
-      }
+    if ($elm.attr('type') === 'radio') {
+      radioName = $elm.attr('name');
+      $($elm[0].form).find('input[name="' + radioName + '"]')
+        .parent('label')
+        .removeClass(this.selectedClass);
+      $elm.parent('label').addClass(this.selectedClass);
+    } else { // checkbox
       if ($elm.is(':checked')) {
-        selectionEventHandler($elm);
+        $elm.parent('label').addClass(this.selectedClass);
+      } else {
+        $elm.parent('label').removeClass(this.selectedClass);
       }
-    }.bind(this));
-  };
-  RadioButtons.prototype.bindEvents = function () {
-    BaseButtons.prototype.bindEvents.call(this);
-  };
-  RadioButtons.prototype.markSelected = function ($elm) {
-    var radioName = $elm.attr('name'),
-        $previousSelection = this.selections[radioName];
-
-    if ($previousSelection) {
-      $previousSelection.parent('label').removeClass(this.selectedClass);
     }
-    $elm.parent('label').addClass(this.selectedClass);
-    this.selections[radioName] = $elm;
   };
-  RadioButtons.prototype.markFocused = function ($elm) {
-    BaseButtons.prototype.markFocused.apply(this, arguments);
+  SelectionButtons.prototype.addElementLevelEvents = function () {
+    this.clickHandler = this.getClickHandler();
+    this.focusHandler = this.getFocusHandler({ 'level' : 'element' });
+
+    this.$elms
+      .on('click', this.clickHandler)
+      .on('focus blur', this.focusHandler);
   };
+  SelectionButtons.prototype.addDocumentLevelEvents = function () {
+    this.clickHandler = this.getClickHandler();
+    this.focusHandler = this.getFocusHandler({ 'level' : 'document' });
 
-  var CheckboxButtons = function ($elms, opts) {
-    BaseButtons.apply(this, arguments);
+    $(document)
+      .on('click', this.selector, this.clickHandler)
+      .on('focus blur', this.selector, this.focusHandler);
   };
-  CheckboxButtons.prototype.setEventNames = function () {
-    BaseButtons.prototype.setEventNames.call(this);
+  SelectionButtons.prototype.getClickHandler = function () {
+    return function (e) {
+      this.markSelected($(e.target));
+    }.bind(this);
   };
-  CheckboxButtons.prototype.getSelections = function () {
-    var selectionEventHandler = this.markSelected.bind(this);
+  SelectionButtons.prototype.getFocusHandler = function (opts) {
+    var focusEvent = (opts.level === 'document') ? 'focusin' : 'focus';
 
-    this.$elms.each(function (idx, elm) {
-      var $elm = $(elm);
+    return function (e) {
+      var state = (e.type === focusEvent) ? 'focused' : 'blurred';
 
-      if ($elm.is(':checked')) {
-        selectionEventHandler($elm);
-      }
-    });
+      this.markFocused($(e.target), state);
+    }.bind(this);
   };
-  CheckboxButtons.prototype.bindEvents = function () {
-    BaseButtons.prototype.bindEvents.call(this);
-  };
-  CheckboxButtons.prototype.markSelected = function ($elm) {
-    if ($elm.is(':checked')) {
-      $elm.parent('label').addClass(this.selectedClass);
+  SelectionButtons.prototype.destroy = function () {
+    if (typeof this.selector !== 'undefined') {
+      $(document)
+        .off('click', this.selector, this.clickHandler)
+        .off('focus blur', this.selector, this.focusHandler);
     } else {
-      $elm.parent('label').removeClass(this.selectedClass);
-    }
-  };
-  CheckboxButtons.prototype.markFocused = function ($elm) {
-    BaseButtons.prototype.markFocused.apply(this, arguments);
-  };
-
-  root.GOVUK.RadioButtons = RadioButtons;
-  root.GOVUK.CheckboxButtons = CheckboxButtons;
-
-  var selectionButtons = function ($elms, opts) {
-    var $radios = $elms.filter('[type=radio]'),
-        $checkboxes = $elms.filter('[type=checkbox]');
-
-    if ($radios) {
-      new GOVUK.RadioButtons($radios, opts);
-    }
-    if ($checkboxes) {
-      new GOVUK.CheckboxButtons($checkboxes, opts);
+      this.$elms
+        .off('click', this.clickHandler)
+        .off('focus blur', this.focusHandler);
     }
   };
 
-  root.GOVUK.selectionButtons = selectionButtons;
+  root.GOVUK.SelectionButtons = SelectionButtons;
 }).call(this);

data/vendor/assets/stylesheets/elements-page.scss

@@ -94,20 +94,51 @@
     color: $hm-government;
   }
 
+  // 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%;
+    }
+  }
+
 }
 
 
 // 1. Layout
 // ==========================================================================
 
-// Grid layout boxes
 .example-grid p {
   width: 100%;
   background: file-url("examples/grid.png") 0 0 repeat;
-  min-height: 30px;
   margin-bottom: 0;
+  height: 30px;
   @include media(tablet) {
-    min-height: 60px;
+    height: 60px;
   }
   overflow: hidden;
   text-indent: -999em;
@@ -331,3 +362,17 @@ $palette: (
 .example-button ul {
   padding-bottom: 0;
 }
+
+
+// 9. Alpha beta banners
+// ==========================================================================
+
+// Alpha
+.phase-banner-alpha {
+  @include phase-banner($state: alpha);
+}
+
+// Beta
+.phase-banner-beta {
+  @include phase-banner($state: beta);
+}

data/vendor/assets/stylesheets/elements/_buttons.scss

@@ -12,6 +12,12 @@
   vertical-align: top;
 }
 
+// Fix unwanted button padding in Firefox
+.button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
 .button:focus {
   outline: 3px solid $yellow;
 }

data/vendor/assets/stylesheets/elements/_details.scss

@@ -31,6 +31,7 @@ details .summary {
 // Match fallback arrow spacing with -webkit default
 details .arrow {
   margin-right: 0.35em;
+  font-style: normal;
 }
 
 // Remove top margin from bordered panel

data/vendor/assets/stylesheets/elements/_forms.scss

@@ -45,15 +45,19 @@ fieldset {
 // Labels
 
 // Form labels, or for legends styled to look like labels
+.form-label,
+.form-label-bold {
+  display: block;
+  color: $text-colour;
+}
+
 .form-label {
   @include core-19;
-  display: block;
   margin-bottom: 5px;
 }
 
 .form-label-bold {
   @include bold-24;
-  display: block;
   margin-bottom: 0;
   .form-hint {
     @include core-19;

data/vendor/assets/stylesheets/elements/_layout.scss

@@ -9,11 +9,11 @@
 @import "design-patterns/alpha-beta";
 
 
-// Page container
+// Content
 // ==========================================================================
 
-// Page container wraps the entire site content block
-#page-container {
+// Content wraps the entire site content block
+#content {
   @extend %site-width-container;
   @extend %contain-floats;
   padding-bottom: $gutter;

data/vendor/assets/stylesheets/elements/_lists.scss

@@ -10,13 +10,16 @@ ol {
 // Bulleted lists
 .list-bullet {
   list-style-type: disc;
-  margin-left: 20px;
+  padding-left: 20px;
 }
 
 // Numbered lists
 .list-number {
   list-style-type: decimal;
-  margin-left: 25px;
+  padding-left: 20px;
+  @include ie-lte(7) {
+    padding-left: 28px;
+  }
 }
 
 .list-bullet,

data/vendor/assets/stylesheets/elements/_tables.scss

@@ -14,7 +14,7 @@ table {
 table th,
 table td {
   @include core-16;
-  padding: em(14) em(20) em(10) 0;
+  padding: em(12, 16) em(20, 16) em(9, 16) 0;
 
   text-align: left;
   color: #0b0c0c;
@@ -24,3 +24,14 @@ table td {
 table th {
   font-weight: 700;
 }
+
+// Right align headings for numeric content
+table th.numeric {
+  text-align: right;
+}
+
+// Use tabular numbers for numeric table cells
+table td.numeric {
+  @include core-16($tabular-numbers: true);
+  text-align: right;
+}

data/vendor/assets/stylesheets/elements/forms/_form-block-labels.scss

@@ -45,7 +45,7 @@
 // To stack horizontally, use .inline on parent, to sit block labels next to each other
 .inline .block-label {
   clear: none;
-  margin-right: $gutter-half;
+  margin-right: 10px;
 }
 
 // Selected and focused states

data/vendor/assets/stylesheets/elements/forms/_form-date.scss

@@ -1,46 +1,39 @@
-// Date of birth
+// Date pattern
 
-.form-date label {
-  display: block;
-  margin-bottom: 5px;
+// Hide the 'spinner' for webkit
+// and also for Firefox
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0
 }
-
-.form-date .form-group {
-  width: 50px;
-  float: left;
-  margin-right: 20px;
-  margin-bottom: 0;
-  clear: none;
+input[type=number] {
+  -moz-appearance: textfield
 }
 
-.form-date .form-group-year {
-  width: 70px;
-}
+.form-date {
 
-.form-date .form-group input {
-  width: 100%;
-}
+  .form-group {
+    float: left;
+    width: 50px;
 
+    margin-right: 20px;
+    margin-bottom: 0;
+    clear: none;
 
-// Use Modernizr to detect for touch events
-// Build: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
 
-// Hide date of birth
-.touch .form-date {
-  display: none;
-}
+    input {
+      width: 100%;
+    }
 
-// Hide native date of birth
-.no-touch .native-date-picker {
-  display: none;
-}
+  }
 
-// Show native date of birth
-.touch .native-date-picker {
-  display: block;
-}
+  .form-group-year {
+    width: 70px;
+  }
 
-// Set a minimum height for date inputs
-.touch input[type="date"] {
-  min-height: 36px;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_elements_rails
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Rob McKinnon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-17 00:00:00.000000000 Z
+date: 2015-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -50,8 +50,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.2.0
-description: A gem wrapper around SHA 2072e1790df2fb57f85c9df1158367ca8bc22bf3 govuk_elements
-  (heads/master) that pulls stylesheet and javascript files into a Rails app.
+description: A gem wrapper around SHA caadd5a3bf04d58ab61bab5ec8e00afdba818b18 govuk_elements
+  (remotes/origin/HEAD) that pulls stylesheet and javascript files into a Rails app.
 email: rob.mckinnon ~@nospam@~ digital.justice.gov.uk
 executables: []
 extensions: []
@@ -61,6 +61,7 @@ files:
 - LICENCE
 - README.md
 - app/builders/govuk_elements_form_builder.rb
+- app/builders/labelling_form_builder.rb
 - lib/govuk_elements_rails.rb
 - lib/govuk_elements_rails/engine.rb
 - lib/govuk_elements_rails/version.rb
@@ -89,6 +90,7 @@ files:
 - vendor/assets/images/icons/player-icon-play.png
 - vendor/assets/images/icons/player-icon-rewind.png
 - vendor/assets/images/icons/player-icon-volume.png
+- vendor/assets/javascripts/application.js
 - vendor/assets/javascripts/bind.js
 - vendor/assets/javascripts/details.polyfill.js
 - vendor/assets/javascripts/selection-buttons.js
@@ -140,7 +142,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: A gem wrapper around http://github.com/alphagov/govuk_elements that pulls