Add checkbox and radio form toggles

app/assets/javascripts/govuk-admin-template/modules/checkbox_toggle.js

@@ -0,0 +1,31 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.CheckboxToggle = function() {
+    this.start = function(element) {
+      var $checkboxes = element.find('input[type="checkbox"][data-target]');
+
+      $checkboxes.each(function() {
+        var $checkbox = $(this),
+            target = $checkbox.data('target'),
+            $target = $('#' + target);
+
+        $checkbox.attr('aria-controls', target);
+        toggle();
+        $checkbox.on('click', toggle);
+
+        function toggle() {
+          var state = $checkbox.is(':checked');
+          $target.toggle(state);
+          setAriaAttr(state)
+        }
+
+        function setAriaAttr(state) {
+          $checkbox.attr('aria-expanded', state);
+          $target.attr('aria-hidden', !state);
+        }
+      });
+    };
+  };
+
+})(window.GOVUKAdmin.Modules);

app/assets/javascripts/govuk-admin-template/modules/radio_toggle.js

@@ -0,0 +1,46 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.RadioToggle = function() {
+    this.start = function(element) {
+      var $radios = element.find('input[type="radio"][data-target]'),
+          radioGroups = {};
+
+      $radios.each(function() {
+        var $radio = $(this),
+            target = $radio.data('target'),
+            $target = $('#' + target);
+
+        radioGroups[$radio.attr('name')] = true;
+
+        $radio.attr('aria-controls', target);
+        $radio.on('radioValueChanged', toggle);
+
+        function toggle() {
+          var state = $radio.is(':checked');
+          $target.toggle(state);
+          setAriaAttr(state);
+        }
+
+        function setAriaAttr(state) {
+          $radio.attr('aria-expanded', state);
+          $target.attr('aria-hidden', !state);
+        }
+      });
+
+      listenToChangesOnRadioGroups();
+      triggerToggles();
+
+      function listenToChangesOnRadioGroups() {
+        $.map(radioGroups, function(v, radioGroupName) {
+          element.on('change', 'input[type="radio"][name="'+radioGroupName+'"]', triggerToggles);
+        });
+      }
+
+      function triggerToggles() {
+        $radios.trigger('radioValueChanged');
+      }
+    };
+  };
+
+})(window.GOVUKAdmin.Modules);

app/views/govuk_admin_template/style_guide/index.html.erb

@@ -20,7 +20,57 @@
 </div>
 <hr>
 
-<h2>Input widths</h2>
+<h2>Forms</h2>
+
+<h3>Conditionally revealing content</h3>
+<div class="row">
+  <div class="col-md-6 lead">
+    <p>
+      Based on the <a href="http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content">GOV.UK elements pattern</a>, ticking a checkbox or selecting a radio element can toggle the display of further content or fields.
+    </p>
+    <pre class="add-top-margin">&lt;div class=&quot;checkbox&quot; data-module=&quot;toggle-checkbox&quot;&gt;
+  &lt;label&gt;
+    &lt;input type=&quot;checkbox&quot; data-target=&quot;target-id&quot;&gt; Check me
+  &lt;/label&gt;
+  &lt;div id=&quot;target-id&quot;&gt;Content&lt;/div&gt;
+&lt;/div&gt;</pre>
+  </div>
+  <form class="col-md-6">
+    <div class="checkbox" data-module="checkbox-toggle">
+      <label>
+        <input type="checkbox" data-target="target-id"> Check me to show content
+      </label>
+      <div id="target-id" class="well add-top-margin">Content that appears</div>
+      <hr />
+      <label>
+        <input type="checkbox" checked="checked" data-target="second-target-id"> I'm already checked
+      </label>
+      <div id="second-target-id" class="well add-top-margin">When the checkbox is checked, the content will display.</div>
+    </div>
+    <hr />
+    <div data-module="radio-toggle">
+      <div class="radio">
+        <label>
+          <input type="radio" name="radio-toggle-example" data-target="radio-target-id"> Radio 1
+        </label>
+        <div id="radio-target-id" class="well add-top-margin">From Radio 1</div>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="radio-toggle-example" data-target="second-radio-target-id"> Radio 2
+        </label>
+        <div id="second-radio-target-id" class="well add-top-margin">From Radio 2</div>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="radio-toggle-example"> Radio 3
+        </label>
+      </div>
+    </div>
+  </form>
+</div>
+
+<h3>Input widths</h3>
 <div class="row">
   <div class="col-md-6 lead">
     <p>Bootstrap 3 inputs always <a href="http://getbootstrap.com/css/#forms">extend to the size of their container</a>. The recommendation from Bootstrap is to wrap form elements with grid classes. Sometimes this isn’t suitable, for instance if a page isn’t using a grid.</p>
@@ -57,7 +107,7 @@
   </div>
 </div>
 
-<h3 class="add-bottom-margin">Inputs in a grid</h3>
+<h4 class="add-bottom-margin">Inputs in a grid</h4>
 <div class="row">
   <div class="col-md-1">
     <input class="input-md-1 form-control" value="input-md-1" />

spec/javascripts/spec/checkbox_toggle.spec.js

@@ -0,0 +1,110 @@
+describe('A checkbox toggle module', function() {
+  "use strict";
+
+  var root = window,
+      toggle,
+      toggleElement;
+
+  beforeEach(function() {
+    toggleElement = $('<div>\
+      <label>\
+        <input type="checkbox" class="without-target"> Normal checkbox\
+      </label>\
+      <label>\
+        <input type="checkbox" data-target="target-id" class="with-target"> Check me\
+      </label>\
+      <div id="target-id">Content</div>\
+    ');
+
+    toggle = new GOVUKAdmin.Modules.CheckboxToggle();
+    $('body').append(toggleElement);
+  });
+
+  afterEach(function() {
+    toggleElement.remove();
+  });
+
+  describe('when starting', function() {
+    it('hides content if unchecked', function() {
+      toggle.start(toggleElement);
+
+      expectToggleToBeHidden();
+      toggleCheckbox();
+      expectToggleToBeVisible();
+    });
+
+    it('shows content if checked', function() {
+      toggleCheckbox();
+      toggle.start(toggleElement);
+
+      expectToggleToBeVisible();
+      toggleCheckbox();
+      expectToggleToBeHidden();
+    });
+
+    it('adds an `aria-controls` attribute linking checkbox to target', function() {
+      toggle.start(toggleElement);
+      var ariaControls = toggleElement.find('input[type="checkbox"][data-target]').attr('aria-controls');
+      expect(ariaControls).toBe('target-id');
+    });
+  });
+
+  it('toggles content when checkbox with a target changes', function() {
+    toggle.start(toggleElement);
+
+    expectToggleToBeHidden();
+    toggleCheckbox();
+    expectToggleToBeVisible();
+    toggleCheckbox();
+    expectToggleToBeHidden();
+  });
+
+  it('does nothing when a checkbox without a target changes', function() {
+    toggle.start(toggleElement);
+
+    expectToggleToBeHidden();
+    toggleElement.find('.without-target').click();
+    expectToggleToBeHidden();
+    toggleElement.find('.without-target').click();
+    expectToggleToBeHidden();
+  });
+
+  it('can handle multiple checkboxes with toggles', function() {
+    toggleElement.find('div').append('\
+      <label>\
+        <input type="checkbox" data-target="second-target-id" class="second-with-target"> Check me\
+      </label>\
+      <div id="second-target-id">Content</div>\
+    ');
+    toggle.start(toggleElement);
+
+    expectToggleToBeHidden();
+    expectToggleToBeHidden('#second-target-id');
+    toggleCheckbox();
+    expectToggleToBeVisible();
+    expectToggleToBeHidden('#second-target-id');
+    toggleCheckbox('.second-with-target');
+    expectToggleToBeVisible();
+    expectToggleToBeVisible('#second-target-id');
+  });
+
+  function toggleCheckbox(selector) {
+    selector = selector || '.with-target';
+    toggleElement.find(selector).click();
+  }
+
+  function expectToggleToBeVisible(id) {
+    id = id || '#target-id';
+
+    expect(toggleElement.find(id).is(':visible')).toBe(true);
+    expect(toggleElement.find(id).attr('aria-hidden')).toBe('false');
+  }
+
+  function expectToggleToBeHidden(id) {
+    id = id || '#target-id';
+
+    expect(toggleElement.find(id).is(':visible')).toBe(false);
+    expect(toggleElement.find(id).attr('aria-hidden')).toBe('true');
+  }
+
+});

spec/javascripts/spec/radio_toggle.spec.js

@@ -0,0 +1,116 @@
+describe('A radio toggle module', function() {
+  "use strict";
+
+  var root = window,
+      toggle,
+      element;
+
+  beforeEach(function() {
+    element = $('<div>\
+      <label>\
+        <input type="radio" name="group" class="radio-1" data-target="radio-1-target"> Radio 1\
+      </label>\
+      <div id="radio-1-target"></div>\
+      <label>\
+        <input type="radio" name="group" class="radio-2" data-target="radio-2-target"> Radio 2\
+      </label>\
+      <div id="radio-2-target"></div>\
+      <label>\
+        <input type="radio" name="group" class="radio-3"> Radio 3\
+      </label>\
+    </div>');
+
+    toggle = new GOVUKAdmin.Modules.RadioToggle();
+    $('body').append(element);
+  });
+
+  afterEach(function() {
+    element.remove();
+  });
+
+  describe('when starting', function() {
+    it('hides content if not selected', function() {
+      toggle.start(element);
+      expectToggleToBeHidden('#radio-1-target');
+    });
+
+    it('shows content if selected', function() {
+      toggleRadio('.radio-1');
+      toggle.start(element);
+      expectToggleToBeVisible('#radio-1-target');
+    });
+
+    it('adds an `aria-controls` attribute linking radio to each target', function() {
+      toggle.start(element);
+      var $ariaControls = element.find('input[type="radio"][data-target]');
+      expect($ariaControls.eq(0).attr('aria-controls')).toBe('radio-1-target');
+      expect($ariaControls.eq(1).attr('aria-controls')).toBe('radio-2-target');
+    });
+  });
+
+  it('toggles content when radio values change', function() {
+    toggle.start(element);
+
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeHidden('#radio-2-target');
+
+    toggleRadio('.radio-1');
+    expectToggleToBeVisible('#radio-1-target');
+    expectToggleToBeHidden('#radio-2-target');
+
+    toggleRadio('.radio-2');
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeVisible('#radio-2-target');
+
+    toggleRadio('.radio-3');
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeHidden('#radio-2-target');
+  });
+
+  it('can handle multiple radio groups with toggles', function() {
+    element.append('<div>\
+      <label>\
+        <input type="radio" name="another-group" class="radio-4" data-target="radio-4-target"> Radio 4\
+      </label>\
+      <div id="radio-4-target"></div>\
+      <label>\
+        <input type="radio" name="another-group" class="radio-5"> Radio 5\
+      </label>\
+    </div>');
+
+    toggle.start(element);
+
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeHidden('#radio-2-target');
+    expectToggleToBeHidden('#radio-4-target');
+
+    toggleRadio('.radio-1');
+    toggleRadio('.radio-4');
+    expectToggleToBeVisible('#radio-1-target');
+    expectToggleToBeVisible('#radio-4-target');
+
+    toggleRadio('.radio-2');
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeVisible('#radio-2-target');
+    expectToggleToBeVisible('#radio-4-target');
+
+    toggleRadio('.radio-3');
+    expectToggleToBeHidden('#radio-1-target');
+    expectToggleToBeHidden('#radio-2-target');
+    expectToggleToBeVisible('#radio-4-target');
+  });
+
+  function toggleRadio(selector) {
+    element.find(selector).click();
+  }
+
+  function expectToggleToBeVisible(id) {
+    expect(element.find(id).is(':visible')).toBe(true);
+    expect(element.find(id).attr('aria-hidden')).toBe('false');
+  }
+
+  function expectToggleToBeHidden(id) {
+    expect(element.find(id).is(':visible')).toBe(false);
+    expect(element.find(id).attr('aria-hidden')).toBe('true');
+  }
+});